@lion/ui 0.25.0 → 0.26.0

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

@@ -1,85 +0,0 @@
----
-parts:
-  - API Table
-  - Input Tel Dropdown
-title: 'Input Tel Dropdown: API Table'
-eleventyNavigation:
-  key: API Table >> Input Tel Dropdown
-  title: API Table
-  order: 90
-  parent: Input Tel Dropdown
----
-# Input Tel Dropdown: API Table
- 
-
-## class: `LionInputTelDropdown`, `lion-input-tel-dropdown`
-
-### Fields
-
-| Name                       | Privacy   | Type                              | Default                                                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Inherited From |
-| -------------------------- | --------- | --------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `activePhoneNumberType`    | public    |                                   |                                                                                      | Type of phone number, derived from textbox value. Enum with values:
-'fixed-line'
-'fixed-line-or-mobile'
-'mobile'
-'pager'
-'personal-number'
-'premium-rate'
-'shared-cost'
-'toll-free'
-'uan'
-'voip'
-'unknown'
See https\://www\.npmjs.com/package/awesome-phonenumber                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionInputTel   |
-| `activeRegion`             | public    | `string`                          |                                                                                      | Currently active region based on:
1\. allowed regions: get the region from configured allowed regions (if one entry)
2\. user input: try to derive active region from user input
3\. locale: try to get the region from locale (\`html\[lang]\` attribute)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | LionInputTel   |
-| `allowedRegions`           | public    | `RegionCode[]`                    | `[]`                                                                                 | The regions that should be considered when international phone numbers are detected.
(when not configured, all regions worldwide will be considered)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionInputTel   |
-| `autocomplete`             | public    | `string`                          | `'tel'`                                                                              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputTel   |
-| `fieldName`                | public    |                                   |                                                                                      | Set a default name for this field, so that validation feedback will be always
accessible and linguistically correct                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | LionInputTel   |
-| `formatCountryCodeStyle`   | public    | `string`                          | `'default'`                                                                          | Extra styling of the format strategy
default \| parentheses                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputTel   |
-| `formatStrategy`           | public    | `PhoneNumberFormat`               | `'international'`                                                                    | Determines what the formatter output should look like.
Formatting strategies as provided by google-libphonenumber
See: https\://www\.npmjs.com/package/google-libphonenumber                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | LionInputTel   |
-| `placeholder`              | public    | `string`                          | `''`                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput      |
-| `preferredRegions`         | public    | `RegionCode[]`                    | `[]`                                                                                 | Regions that will be shown on top of the dropdown                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | LionInputTel   |
-| `readOnly`                 | public    | `boolean`                         | `false`                                                                              | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | LionInput      |
-| `refs`                     | public    | `object`                          | `{ /** @type {DropdownRef} */ dropdown: /** @type {DropdownRef} */ (createRef()), }` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                |
-| `slots`                    | public    |                                   |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput      |
-| `type`                     | public    | `string`                          | `'text'`                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput      |
-| `_allCountriesLabel`       | protected | `string`                          | `''`                                                                                 | Group label for all countries, when preferredCountries are shown                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                |
-| `_allowedOrAllRegions`     | protected | `RegionCode[]`                    |                                                                                      | Used for rendering the region/country list                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | LionInputTel   |
-| `_feedbackConditionMeta`   | protected |                                   |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionField      |
-| `_focusableNode`           | protected |                                   |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionField      |
-| `_inputNode`               | protected | `HTMLInputElement`                |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput      |
-| `_langIso`                 | protected | `RegionCode \| undefined`         | `undefined`                                                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputTel   |
-| `_phoneUtil`               | protected | `AwesomePhoneNumber\|null`        |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputTel   |
-| `_phoneUtilLoadComplete`   | protected | `Promise<PhoneNumber>`            |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputTel   |
-| `_preferredCountriesLabel` | protected | `string`                          | `''`                                                                                 | Group label for preferred countries, when preferredCountries are shown                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |                |
-| `_templateDataDropdown`    | protected | `TemplateDataForDropdownInputTel` |                                                                                      | This method provides a TemplateData object to be fed to pure template functions, a.k.a.&#xA;Pure Templates™. The goal is to totally decouple presentation from logic here, so that&#xA;Subclassers can override all content without having to loose private info contained&#xA;within the template function that was overridden.&#xA;&#xA;Subclassers would need to make sure all the contents of the TemplateData object are implemented&#xA;by making sure they are coupled to the right 'ref' (\[data-ref=dropdown] in this example),&#xA;with the help of lit's spread operator directive.&#xA;To enhance this process, the TemplateData object is completely typed. Ideally, this would be&#xA;enhanced by providing linters that make sure all of their required members are implemented by&#xA;a Subclasser.&#xA;When a Subclasser wants to add more data, this can be done via: |                |
-
-### Methods
-
-| Name                             | Privacy   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Parameters                                                                                                                                                     | Return                                                    | Inherited From |
-| -------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -------------- |
-| `clear`                          | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |                                                                                                                                                                |                                                           | LionField      |
-| `formatter`                      | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `modelValue: string`                                                                                                                                           | `string`                                                  | LionInputTel   |
-| `onLocaleUpdated`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                                                                                                                                |                                                           | LionInputTel   |
-| `parser`                         | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `viewValue: string`                                                                                                                                            | `string`                                                  | LionInputTel   |
-| `preprocessor`                   | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `viewValue: string, { currentCaretIndex, prevViewValue }, options: @param {string} options.prevViewValue    * @param {number} options.currentCaretIndex    * ` | `{ viewValue: string; caretIndex: number; } \| undefined` | LionInputTel   |
-| `reset`                          | public    | Resets modelValue to initial value.&#xA;Interaction states are cleared                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                                                                                |                                                           | LionField      |
-| `resetInteractionState`          | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                                                                                                                                |                                                           | LionField      |
-| `_initModelValueBasedOnDropdown` | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                                                                                                                                |                                                           |                |
-| `_isEmpty`                       | protected | Used for Required validation and computation of interaction states.&#xA;We need to override this, because we prefill the input with the region code (like +31), but for proper UX,&#xA;we don't consider this as having interaction state \`prefilled\`                                                                                                                                                                                                                                                                                                                                      | `modelValue: string`                                                                                                                                           | `boolean`                                                 |                |
-| `_onChange`                      | protected | Dispatches custom bubble event                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `ev: Event=`                                                                                                                                                   |                                                           | LionField      |
-| `_onDropdownValueChange`         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `event: OnDropdownChangeEvent`                                                                                                                                 |                                                           |                |
-| `_onPhoneNumberUtilReady`        | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                                                                                                                                |                                                           | LionInputTel   |
-| `_reflectBackOn`                 | protected | Do not reflect back .formattedValue during typing (this normally wouldn't happen when&#xA;FormatMixin calls \_calculateValues based on user input, but for LionInputTel we need to&#xA;call it on .activeRegion change)                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                | `boolean`                                                 | LionInputTel   |
-| `_repropagationCondition`        | protected | Usually, we don't use composition in regular LionFields (non choice-groups). Here we use a LionSelect(Rich) inside.&#xA;We don't want to repropagate any children, since an Application Developer is not concerned with these internals (see repropate logic in FormControlMixin)&#xA;Also, we don't want to give (wrong) info to InteractionStateMixin, that will set the wrong interaction states based on child info.&#xA;TODO: Make "this.\_repropagationRole !== 'child'" the default for FormControlMixin&#xA;(so that FormControls used within are never repropagated for LionFields) |                                                                                                                                                                |                                                           |                |
-| `_setActiveRegion`               | protected | Protected setter for activeRegion, only meant for subclassers                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `newValue: RegionCode\|undefined`                                                                                                                              |                                                           | LionInputTel   |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name                        | Field                  | Inherited From |
-| --------------------------- | ---------------------- | -------------- |
-| `allowedRegions`            | allowedRegions         | LionInputTel   |
-| `format-strategy`           | formatStrategy         | LionInputTel   |
-| `format-country-code-style` | formatCountryCodeStyle | LionInputTel   |
-| `activeRegion`              | activeRegion           | LionInputTel   |
-| `preferredRegions`          | preferredRegions       | LionInputTel   |
-| `_phoneUtil`                | \_phoneUtil            | LionInputTel   |
-| `readonly`                  | readOnly               | LionInput      |
-| `type`                      | type                   | LionInput      |
-| `placeholder`               | placeholder            | LionInput      |
-
-<hr/>

package/docs/components/input-tel-dropdown/extensions.md

@@ -1,44 +0,0 @@
----
-title: 'Extensions'
-parts:
-  - Input Tel Dropdown
-  - Extensions
-eleventyNavigation:
-  key: 'Input Tel Dropdown: Extensions'
-  order: 30
-  parent: Input Tel Dropdown
-  title: Extensions
----
-
-# Extensions
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-select-rich.js';
-import './src/intl-input-tel-dropdown.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-```
-
-## Input Tel International
-
-A visually advanced Subclasser implementation of `LionInputTelDropdown`.
-
-Inspired by:
-
-- [intl-tel-input](https://intl-tel-input.com/)
-- [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2)
-
-```js preview-story
-export const IntlInputTelDropdown = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <intl-input-tel-dropdown
-      .preferredRegions="${['NL', 'PH']}"
-      .modelValue="${'+639608920056'}"
-      label="Telephone number"
-      help-text="Advanced dropdown and styling"
-      name="phoneNumber"
-    ></intl-input-tel-dropdown>
-  `;
-};
-```

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

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

package/docs/components/input-tel-dropdown/overview.md

@@ -1,50 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Tel Dropdown
-  - Overview
-eleventyNavigation:
-  key: 'Input Tel Dropdown: Overview'
-  order: 10
-  parent: Input Tel Dropdown
-  title: Overview
----
-
-# Overview
-
-Extension of Input Tel that prefixes a dropdown list that shows all possible regions / countries.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input-tel-dropdown.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-```
-
-```js preview-story
-export const main = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel-dropdown label="Telephone number" name="phoneNumber"></lion-input-tel-dropdown>
-  `;
-};
-```
-
-## Features
-
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/components/input-tel/overview.md)
-- Shows dropdown list with all possible regions
-- Shows only allowed regions in dropdown list when .allowedRegions is configured
-- Highlights regions on top of dropdown list when .preferredRegions is configured
-- Generates template meta data for advanced
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
-// or
-import '@lion/ui/define/lion-input-tel-dropdown.js';
-```

package/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js

@@ -1,138 +0,0 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-import { html, css } from 'lit';
-import { ref } from 'lit/directives/ref.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
-import {
-  IntlSelectRich,
-  IntlOption,
-  IntlSeparator,
-} from '../../select-rich/src/intl-select-rich.js';
-
-/**
- * @typedef {import('@lion/ui/input-tel-dropdown/types.js').TemplateDataForDropdownInputTel}TemplateDataForDropdownInputTel
- */
-
-// Example implementation for https://intl-tel-input.com/
-export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdown) {
-  /**
-   * @configure LitElement
-   * @enhance LionInputTelDropdown
-   */
-  static styles = [
-    super.styles,
-    css`
-      :host,
-      ::slotted(*) {
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        font-size: 14px;
-        line-height: 1.42857143;
-        color: #333;
-      }
-
-      :host {
-        max-width: 300px;
-      }
-
-      .input-group__container {
-        width: 100%;
-        height: 34px;
-        font-size: 14px;
-        line-height: 1.42857143;
-        color: #555;
-        background-color: #fff;
-        background-image: none;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-        -webkit-transition:
-          border-color ease-in-out 0.15s,
-          -webkit-box-shadow ease-in-out 0.15s;
-        -o-transition:
-          border-color ease-in-out 0.15s,
-          box-shadow ease-in-out 0.15s;
-        transition:
-          border-color ease-in-out 0.15s,
-          box-shadow ease-in-out 0.15s;
-      }
-
-      .input-group__input {
-        padding: 6px;
-        box-sizing: border-box;
-      }
-
-      .input-group__input ::slotted(input) {
-        border: none;
-        outline: none;
-      }
-
-      :host([focused]) .input-group__container {
-        border-color: #66afe9;
-        outline: 0;
-        -webkit-box-shadow:
-          inset 0 1px 1px rgb(0 0 0 / 8%),
-          0 0 8px rgb(102 175 233 / 60%);
-        box-shadow:
-          inset 0 1px 1px rgb(0 0 0 / 8%),
-          0 0 8px rgb(102 175 233 / 60%);
-      }
-    `,
-  ];
-
-  static templates = {
-    ...(super.templates || {}),
-    /**
-     * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
-     */
-    dropdown: templateDataForDropdown => {
-      const { refs, data } = templateDataForDropdown;
-      // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
-      return html`
-        <intl-select-rich
-          ${ref(refs?.dropdown?.ref)}
-          label="${refs?.dropdown?.labels?.country}"
-          label-sr-only
-          .config="${{ elementToFocusAfterHide: refs?.input }}"
-          @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
-          style="${refs?.dropdown?.props?.style}"
-        >
-          ${data?.regionMetaListPreferred?.length
-            ? html` ${repeat(
-                  data.regionMetaListPreferred,
-                  regionMeta => regionMeta.regionCode,
-                  regionMeta =>
-                    html`${this.templates.dropdownOption(templateDataForDropdown, regionMeta)} `,
-                )}<intl-separator></intl-separator>`
-            : ''}
-          ${repeat(
-            data.regionMetaList,
-            regionMeta => regionMeta.regionCode,
-            regionMeta =>
-              html`${this.templates.dropdownOption(templateDataForDropdown, regionMeta)} `,
-          )}
-        </intl-select-rich>
-      `;
-    },
-    /**
-     * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
-     * @param {RegionMeta} regionMeta
-     */
-    // eslint-disable-next-line class-methods-use-this
-    dropdownOption: (templateDataForDropdown, regionMeta) => html`
-      <intl-option .choiceValue="${regionMeta.regionCode}" .regionMeta="${regionMeta}">
-      </intl-option>
-    `,
-  };
-
-  /**
-   * @configure ScopedElementsMixin
-   */
-  static scopedElements = {
-    ...super.scopedElements,
-    'intl-select-rich': IntlSelectRich,
-    'intl-option': IntlOption,
-    'intl-separator': IntlSeparator,
-  };
-}
-customElements.define('intl-input-tel-dropdown', IntlInputTelDropdown);

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

@@ -1,171 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Tel Dropdown
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Tel Dropdown: Use Cases'
-  order: 20
-  parent: Input Tel Dropdown
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { ref, createRef } from 'lit/directives/ref.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import { PhoneUtilManager } from '@lion/ui/input-tel.js';
-import '@lion/ui/define/lion-input-tel-dropdown.js';
-import '../../../docs/fundamentals/systems/form/assets/h-output.js';
-
-// TODO: make each example load/use the dependencies by default
-// loadDefaultFeedbackMessages();
-```
-
-## Input Tel Dropdown
-
-When `.allowedRegions` is not configured, all regions/countries will be available in the dropdown
-list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.
-
-```js preview-story
-export const InputTelDropdown = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel-dropdown
-      label="Select region via dropdown"
-      help-text="Shows all regions by default"
-      name="phoneNumber"
-    ></lion-input-tel-dropdown>
-    <h-output
-      .show="${['modelValue', 'activeRegion']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-## Allowed regions
-
-When `.allowedRegions` is configured, only those regions/countries will be available in the dropdown
-list.
-
-```js preview-story
-export const allowedRegions = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel-dropdown
-      label="Select region via dropdown"
-      help-text="With region code 'NL'"
-      .modelValue="${'+31612345678'}"
-      name="phoneNumber"
-      .allowedRegions="${['NL', 'DE', 'GB']}"
-    ></lion-input-tel-dropdown>
-    <h-output
-      .show="${['modelValue', 'activeRegion']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-## Preferred regions
-
-When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
-
-```js preview-story
-export const preferredRegionCodes = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel-dropdown
-      label="Select region via dropdown"
-      help-text="Preferred regions show on top"
-      .modelValue="${'+31612345678'}"
-      name="phoneNumber"
-      .allowedRegions="${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}"
-      .preferredRegions="${['DE', 'NL']}"
-    ></lion-input-tel-dropdown>
-    <h-output
-      .show="${['modelValue', 'activeRegion']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-## Format
-
-### Format strategy
-
-Determines what the formatter output should look like.
-Formatting strategies as provided by awesome-phonenumber / google-libphonenumber.
-
-Possible values:
-
-| strategy      |                                output |
-| :------------ | ------------------------------------: |
-| e164          |                        `+46707123456` |
-| international |                    `+46 70 712 34 56` |
-| national      | not applicable for input-tel-dropdown |
-| significant   | not applicable for input-tel-dropdown |
-| rfc3966       |                `tel:+46-70-712-34-56` |
-
-Also see:
-
-- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
-
-```js preview-story
-export const formatStrategy = () => {
-  loadDefaultFeedbackMessages();
-  const inputTel = createRef();
-  return html`
-    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
-      <option value="e164">e164</option>
-      <option value="international">international</option>
-      <option value="rfc3966">rfc3966</option>
-    </select>
-    <lion-input-tel-dropdown
-      ${ref(inputTel)}
-      label="Format strategy"
-      help-text="Choose a strategy above"
-      format-strategy="e164"
-      name="phoneNumber"
-    ></lion-input-tel-dropdown>
-    <h-output
-      .show="${['modelValue', 'formatStrategy']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-### Format country code style
-
-You can style the country code with parentheses.
-
-```js preview-story
-export const formatCountryCodeStyle = () => {
-  loadDefaultFeedbackMessages();
-  const inputTel = createRef();
-  return html`
-    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
-      <option value="e164">e164</option>
-      <option value="international">international</option>
-      <option value="rfc3966">rfc3966</option>
-    </select>
-    <lion-input-tel-dropdown
-      ${ref(inputTel)}
-      label="Format strategy"
-      help-text="Choose a strategy above"
-      format-country-code-style="parentheses"
-      format-strategy="e164"
-      name="phoneNumber"
-    ></lion-input-tel-dropdown>
-    <h-output
-      .show="${['modelValue', 'formatStrategy']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```

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

@@ -1,65 +0,0 @@
----
-parts:
-  - API Table
-  - Listbox
-title: 'Listbox: API Table'
-eleventyNavigation:
-  key: API Table >> Listbox
-  title: API Table
-  order: 90
-  parent: Listbox
----
-# Listbox: API Table
- 
-
-## class: `LionListbox`, `lion-listbox`
-
-### Fields
-
-| Name                     | Privacy   | Type | Default | Description                                            | Inherited From |
-| ------------------------ | --------- | ---- | ------- | ------------------------------------------------------ | -------------- |
-| `_feedbackConditionMeta` | protected |      |         |                                                        |                |
-| `_focusableNode`         | protected |      |         | Public to preserve the Lion 0.21.1 extension contract. |                |
-
-<hr/>
- 
-
-## class: `LionOption`, `lion-option`
-
-### Fields
-
-| Name     | Privacy | Type      | Default | Description | Inherited From |
-| -------- | ------- | --------- | ------- | ----------- | -------------- |
-| `active` | public  | `boolean` | `false` |             |                |
-| `slots`  | public  |           |         |             |                |
-
-### Events
-
-| Name             | Type    | Description | Inherited From |
-| ---------------- | ------- | ----------- | -------------- |
-| `active-changed` | `Event` |             |                |
-
-### Attributes
-
-| Name     | Field  | Inherited From |
-| -------- | ------ | -------------- |
-| `active` | active |                |
-
-<hr/>
- 
-
-## class: `LionOptions`, `lion-options`
-
-### Fields
-
-| Name       | Privacy | Type     | Default | Description | Inherited From |
-| ---------- | ------- | -------- | ------- | ----------- | -------------- |
-| `tabIndex` | public  | `number` | `0`     |             |                |
-
-### Attributes
-
-| Name       | Field    | Inherited From |
-| ---------- | -------- | -------------- |
-| `tabindex` | tabIndex |                |
-
-<hr/>

package/docs/components/listbox/index.md

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