@lion/ui 0.24.0 → 0.26.0

package/docs/components/collapsible/examples.md

@@ -1,95 +0,0 @@
----
-title: 'Examples'
-parts:
-  - Collapsible
-  - Examples
-eleventyNavigation:
-  key: 'Collapsible: Examples'
-  order: 30
-  parent: Collapsible
-  title: Examples
----
-
-# Examples
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-collapsible.js';
-import '@lion/ui/define/lion-button.js';
-import './assets/CustomCollapsible.js';
-import './assets/applyDemoCollapsibleStyles.js';
-```
-
-## Custom Invoker Template
-
-A custom template can be specified to the `invoker` slot. It can be any button or custom component which mimics the button behavior for better accessibility support. In the below example, `lion-button` and native `button` with styling is used as a collapsible invoker.
-
-```js preview-story
-export const customInvokerTemplate = () => html`
-  <lion-collapsible style="margin-top:16px;">
-    <lion-button slot="invoker">More about cars</lion-button>
-    <div slot="content">
-      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
-      four tires, and mainly transport people rather than goods.
-    </div>
-  </lion-collapsible>
-`;
-```
-
-## Extended collapsible with animation
-
-`LionCollapsible` can easily be extended to add more features in the component, like animation for example.
-
-```js preview-story
-export const customAnimation = () => html`
-  <div class="demo-custom-collapsible-container">
-    <div class="demo-custom-collapsible-body">
-      A motorcycle, often called a motorbike, bike, or cycle, is a two- or three-wheeled motor
-      vehicle.
-    </div>
-    <custom-collapsible>
-      <button class="demo-custom-collapsible-invoker" slot="invoker">MORE ABOUT MOTORCYCLES</button>
-      <div slot="content">
-        Motorcycle design varies greatly to suit a range of different purposes: long distance
-        travel, commuting, cruising, sport including racing, and off-road riding. Motorcycling is
-        riding a motorcycle and related social activity such as joining a motorcycle club and
-        attending motorcycle rallies.
-      </div>
-    </custom-collapsible>
-  </div>
-  <div class="demo-custom-collapsible-container">
-    <div class="demo-custom-collapsible-body">
-      A car (or automobile) is a wheeled motor vehicle used for transportation.
-    </div>
-    <custom-collapsible opened>
-      <button class="demo-custom-collapsible-invoker" slot="invoker">MORE ABOUT CARS</button>
-      <div slot="content">
-        Most definitions of cars say that they run primarily on roads, seat one to eight people,
-        have four tires, and mainly transport people rather than goods.
-      </div>
-    </custom-collapsible>
-  </div>
-`;
-```
-
-Use `_showAnimation()` and `_hideAnimation()` methods to customize open and close behavior. Check the code for a full example of a `custom-collapsible`.
-
-```js
-_showAnimation({ contentNode }) {
-    const expectedHeight = await this.__calculateHeight(contentNode);
-    contentNode.style.setProperty('opacity', '1');
-    contentNode.style.setProperty('padding', '12px 0');
-    contentNode.style.setProperty('max-height', '0px');
-    await new Promise(resolve => requestAnimationFrame(() => resolve()));
-    contentNode.style.setProperty('max-height', expectedHeight);
-    await this._waitForTransition({ contentNode });
-}
-
-_hideAnimation({ contentNode }) {
-    if (this._contentHeight === '0px') {
-      return;
-    }
-    ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, 0));
-    await this._waitForTransition({ contentNode });
-}
-```

package/docs/components/collapsible/index.md

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

package/docs/components/collapsible/overview.md

@@ -1,51 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Collapsible
-  - Overview
-eleventyNavigation:
-  key: 'Collapsible: Overview'
-  order: 10
-  parent: Collapsible
-  title: Overview
----
-
-# Overview
-
-A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-collapsible.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-collapsible>
-    <button slot="invoker">More about cars</button>
-    <div slot="content">
-      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
-      four tires, and mainly transport people rather than goods.
-    </div>
-  </lion-collapsible>
-`;
-```
-
-## Features
-
-- Use `opened` attribute or `toggle()` method to render default open.
-- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/button/overview.md) or native `button` with custom styling.
-- Observe the state with the help of `@opened-changed` event.
-- `show()` and `hide()` are helper methods to hide or show the content from outside.
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionCollapsible } from '@lion/ui/collapsible.js';
-// or
-import '@lion/ui/define/lion-collapsible.js';
-```

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

@@ -1,91 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Collapsible
-  - Use Cases
-eleventyNavigation:
-  key: 'Collapsible: Use Cases'
-  order: 20
-  parent: Collapsible
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-collapsible.js';
-```
-
-## Default open
-
-Add the `opened` attribute to keep the component default open.
-
-```js preview-story
-export const defaultOpen = () => html`
-  <lion-collapsible opened>
-    <button slot="invoker">More about cars</button>
-    <div slot="content">
-      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
-      four tires, and mainly transport people rather than goods.
-    </div>
-  </lion-collapsible>
-`;
-```
-
-## Methods
-
-There are the following methods available to control the extra content for the collapsible.
-
-- `toggle()`: toggle the extra content
-- `show()`: show the extra content
-- `hide()`: hide the extra content
-
-```js preview-story
-export const methods = ({ shadowRoot }) => html`
-  <lion-collapsible id="car-collapsible">
-    <button slot="invoker">More about cars</button>
-    <div slot="content">
-      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
-      four tires, and mainly transport people rather than goods.
-    </div>
-  </lion-collapsible>
-  <section style="margin-top:16px">
-    <button @click="${() => shadowRoot.querySelector('#car-collapsible').toggle()}">
-      Toggle content
-    </button>
-    <button @click="${() => shadowRoot.querySelector('#car-collapsible').show()}">
-      Show content
-    </button>
-    <button @click="${() => shadowRoot.querySelector('#car-collapsible').hide()}">
-      Hide content
-    </button>
-  </section>
-`;
-```
-
-## Events
-
-`lion-collapsible` fires an event on `invoker` click to notify the component's current state. It is useful for analytics purposes or to perform some actions while expanding and collapsing the component.
-
-- `@opened-changed`: triggers when collapsible either gets opened or closed
-
-```js preview-story
-export const events = ({ shadowRoot }) => html`
-  <div class="demo-custom-collapsible-state-container">
-    <strong id="collapsible-state"></strong>
-  </div>
-  <lion-collapsible
-    @opened-changed=${ev => {
-      const collapsibleState = shadowRoot.getElementById('collapsible-state');
-      collapsibleState.innerText = `Opened: ${ev.target.opened}`;
-    }}
-  >
-    <button slot="invoker">More about cars</button>
-    <div slot="content">
-      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
-      four tires, and mainly transport people rather than goods.
-    </div>
-  </lion-collapsible>
-`;
-```

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

@@ -1,122 +0,0 @@
----
-parts:
-  - API Table
-  - Combobox
-title: 'Combobox: API Table'
-eleventyNavigation:
-  key: API Table >> Combobox
-  title: API Table
-  order: 90
-  parent: Combobox
----
-# Combobox: API Table
- 
-
-## class: `LionCombobox`, `lion-combobox`
-
-### Fields
-
-| Name                         | Privacy   | Type                               | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                          | Inherited From |
-| ---------------------------- | --------- | ---------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `allowCustomChoice`          | public    | `boolean`                          |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `autocomplete`               | public    | `'none'\|'list'\|'inline'\|'both'` | `'both'` | When "list", will filter listbox suggestions based on textbox value.
When "both", an inline completion string will be added to the textbox as well.                                                                                                                                                                                                                                                              |                |
-| `config`                     | public    | `Partial<OverlayConfig>`           | `{}`     | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                              | OverlayMixin   |
-| `matchMode`                  | public    | `'begin'\|'all'`                   | `'all'`  | When typing in the textbox, will by default be set on 'begin',&#xA;only matching the beginning part in suggestion list.&#xA;=> 'a' will match 'apple' from \['apple', 'pear', 'citrus'].&#xA;When set to 'all', will match middle of the word as well&#xA;=> 'a' will match 'apple' and 'pear'                                                                                                                       |                |
-| `modelValue`                 | public    |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `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   |
-| `requireOptionMatch`         | public    | `boolean`                          | `true`   | If set to false, the value is allowed to not match any of the options.&#xA;We set the default to true for backwards compatibility                                                                                                                                                                                                                                                                                    |                |
-| `rotateKeyboardNavigation`   | public    | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `selectionFollowsFocus`      | public    | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `showAllOnEmpty`             | public    | `boolean`                          | `false`  | When true, the listbox is open and textbox goes from a value to empty, all options are shown.&#xA;By default, the listbox closes on empty, similar to wai-aria example and \<datalist>                                                                                                                                                                                                                               |                |
-| `slots`                      | public    | `SlotsMap`                         |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `value`                      | public    |                                    |          | We define the value getter/setter below as also defined in LionField (via FormatMixin).&#xA;Since FormatMixin is meant for Formgroups/ChoiceGroup it's not applied on Combobox;&#xA;Combobox is somewhat of a hybrid between a ChoiceGroup and LionField, therefore we copy over&#xA;some of the LionField members to align with its interface.&#xA;&#xA;The view value. Will be delegated to \`.\_inputNode.value\` |                |
-| `_activeDescendantOwnerNode` | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_ariaVersion`               | protected | `'1.1'\|'1.0'`                     |          | For optimal support, we allow aria v1.1 on newer browsers                                                                                                                                                                                                                                                                                                                                                            |                |
-| `_comboboxNode`              | protected | `HTMLElement`                      |          | Wrapper with combobox role for the text input that the end user controls the listbox with.                                                                                                                                                                                                                                                                                                                           |                |
-| `_feedbackConditionMeta`     | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      | LionListbox    |
-| `_focusableNode`             | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      | LionListbox    |
-| `_inputNode`                 | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_listboxNode`               | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_listboxReceivesNoFocus`    | protected | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_noTypeAhead`               | protected | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_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   |
-| `_selectionDisplayNode`      | protected | `SelectionDisplay \| null`         |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-
-### Methods
-
-| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Parameters                                                                                                   | Return              | Inherited From |
-| ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
-| `clear`                            | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                                                                                                              |                     | OverlayMixin   |
-| `matchCondition`                   | public    | When the preconfigurable \`match-mode\` conditions are not sufficient,&#xA;one can define a custom matching function.                                                                                                                                                                                                                                                                                                                                                                                                                 | `option: LionOption, textboxValue: string`                                                                   |                     |                |
-| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                                                                                                              |                     | OverlayMixin   |
-| `parser`                           | public    | Converts viewValue to modelValue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `value: string\|string[]`                                                                                    | `*`                 |                |
-| `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   |
-| `reset`                            | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                              |                     | OverlayMixin   |
-| `_autoSelectCondition`             | protected | When this condition is false, an end user will have to manually select a suggested&#xA;option from the list (by default when autocomplete is 'none' or 'list').&#xA;For autocomplete 'both' or 'inline', it will automatically select on a match.                                                                                                                                                                                                                                                                                     |                                                                                                              |                     |                |
-| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
-| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
-| `_enhanceLightDomClasses`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              | `Element\|null`     | OverlayMixin   |
-| `_getTextboxValueFromOption`       | protected | Return the value to be used for the input value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption`                                                                                         | `string`            |                |
-| `_groupTwoTemplate`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `_handleAutocompletion`            | protected | Handles autocompletion. This entails:&#xA;- list: shows a list on keydown character press&#xA;- filter: filters list of potential matches according to matchmode or provided matchCondition&#xA;- focus: automatically focuses closest match (makes it the activedescendant)&#xA;- check: automatically checks/selects closest match when selection-follows-focus is enabled&#xA;(this is the default configuration)&#xA;- complete: completes the textbox value inline (the 'missing characters' will be added as&#xA;selected text) |                                                                                                              |                     |                |
-| `_highlightMatchedOption`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: Element, matchingString: string`                                                                    |                     |                |
-| `_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 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: MouseEvent`                                                                                             |                     |                |
-| `_listboxOnKeyDown`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                          |                     |                |
-| `_onFilterMatch`                   | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption & {__originalInnerHTML?:string}, matchingString: string`                                 |                     |                |
-| `_onFilterUnmatch`                 | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption & {__originalInnerHTML?:string}, curValue: string, prevValue: string`                    |                     |                |
-| `_onKeyUp`                         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                          |                     |                |
-| `_onListboxContentChanged`         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `_overlayListboxTemplate`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `_repropagationCondition`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `target: FormControlHost`                                                                                    |                     |                |
-| `_resetListboxOptions`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `_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   |
-| `_setTextboxValue`                 | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `v: string`                                                                                                  |                     |                |
-| `_setupListboxNode`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
-| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
-| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
-| `_showOverlayCondition`            | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{ lastKey }, options: { currentValue?: string, lastKey?: string }`                                          | `boolean`           |                |
-| `_syncToTextboxCondition`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `modelValue: string\|string[], oldModelValue: string\|string[], { phase }, config: {phase?:string}`          |                     |                |
-| `_syncToTextboxMultiple`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `modelValue: string[], oldModelValue: string[]`                                                              |                     |                |
-| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
-| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
-| `_textboxOnClick`                  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: FocusEvent`                                                                                             |                     |                |
-| `_textboxOnInput`                  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: Event`                                                                                                  |                     |                |
-| `_textboxOnKeydown`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                          |                     |                |
-| `_unhighlightMatchedOption`        | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: Element`                                                                                            |                     |                |
-
-### Events
-
-| Name                  | Type          | Description | Inherited From |
-| --------------------- | ------------- | ----------- | -------------- |
-| `model-value-changed` | `CustomEvent` |             |                |
-| `opened-changed`      | `CustomEvent` |             | OverlayMixin   |
-
-### Attributes
-
-| Name                             | Field                            | Inherited From |
-| -------------------------------- | -------------------------------- | -------------- |
-| `autocomplete`                   | autocomplete                     |                |
-| `match-mode`                     | matchMode                        |                |
-| `show-all-on-empty`              | showAllOnEmpty                   |                |
-| `requireOptionMatch`             | requireOptionMatch               |                |
-| `allow-custom-choice`            | allowCustomChoice                |                |
-| `__shouldAutocompleteNextUpdate` | \_\_shouldAutocompleteNextUpdate |                |
-| `opened`                         | opened                           | OverlayMixin   |
-
-### Slots
-
-| Name                | Description                                                                    |
-| ------------------- | ------------------------------------------------------------------------------ |
-| `listbox`           | The listbox element for the combobox, e.g. \<lion-options>                     |
-| `selection-display` | The selection display element for the combobox, e.g. \<lion-selection-display> |
-
-<hr/>

package/docs/components/combobox/extensions.md

@@ -1,174 +0,0 @@
----
-title: 'Extensions'
-parts:
-  - Combobox
-  - Extensions
-eleventyNavigation:
-  key: 'Combobox: Extensions'
-  order: 30
-  parent: Combobox
-  title: Extensions
----
-
-# Extensions
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import './src/md-combobox/md-combobox.js';
-import './src/gh-combobox/gh-combobox.js';
-import './src/wa-combobox/wa-combobox.js';
-import './src/google-combobox/google-combobox.js';
-```
-
-Below several extensions can be found. They illustrate that complex UI components can be created
-easily from an extended Lion component, just by:
-
-- **configuring**: setting properties or providing conditions via methods
-- **enhancing**: adding extra html/styles/logic without changing behavior of the extended element
-- **overriding**: replace html/styles/logic of the extended element with your own
-
-## Material Design
-
-```js preview-story
-export const MaterialDesign = () => html`
-  <md-combobox name="combo" label="Default">
-    <md-option .choiceValue="${'Apple'}">Apple</md-option>
-    <md-option .choiceValue="${'Artichoke'}">Artichoke</md-option>
-    <md-option .choiceValue="${'Asparagus'}">Asparagus</md-option>
-    <md-option .choiceValue="${'Banana'}">Banana</md-option>
-    <md-option .choiceValue="${'Beets'}">Beets</md-option>
-  </md-combobox>
-`;
-```
-
-## Github
-
-```js preview-story
-export const Github = () => html`
-  <gh-combobox name="combo" label="Switch branches/tags">
-    <gh-option href="https://www.github.com" .choiceValue="${'master'}" default>master</gh-option>
-    <gh-option .choiceValue="${'develop'}">develop</gh-option>
-    <gh-option .choiceValue="${'release'}">release</gh-option>
-    <gh-option .choiceValue="${'feat/abc'}">feat/abc</gh-option>
-    <gh-option .choiceValue="${'feat/xyz123'}">feat/xyz123</gh-option>
-  </gh-combobox>
-`;
-```
-
-## Whatsapp
-
-```js preview-story
-export const Whatsapp = () => {
-  // in Rocket this is resolved based on the URL, in astro this is resolved based on filesystem (or is it?)
-  const obamaImgUrl = new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href;
-  const trumpImgUrl = new URL('../src/wa-combobox/assets/trump.jpeg', import.meta.url).href;
-  const bidenImgUrl = new URL('../src/wa-combobox/assets/biden.jpeg', import.meta.url).href;
-  const bushImgUrl = new URL('../src/wa-combobox/assets/bush.jpeg', import.meta.url).href;
-  const clintonImgUrl = new URL('../src/wa-combobox/assets/clinton.jpeg', import.meta.url).href;
-
-  return html`
-    <wa-combobox name="combo" label="Filter chats">
-      <wa-option
-        title="Barack Obama"
-        text="Yup, let's try that for now👍"
-        time="15:02"
-        is-user-text
-        is-user-text-read
-        image="${obamaImgUrl}"
-        .choiceValue="${'Barack Obama'}"
-      ></wa-option>
-      <wa-option
-        title="Donald Trump"
-        text="Take care!"
-        time="14:59"
-        is-user-text
-        image="${trumpImgUrl}"
-        .choiceValue="${'Donald Trump'}"
-      ></wa-option>
-      <wa-option
-        title="Joe Biden"
-        text="Hehe😅. You too, man, you too..."
-        time="yesterday"
-        image="${bidenImgUrl}"
-        .choiceValue="${'Joe Biden'}"
-      ></wa-option>
-      <wa-option
-        title="George W. Bush"
-        time="friday"
-        text="You bet I will. Let's catch up soon!"
-        image="${bushImgUrl}"
-        .choiceValue="${'George W. Bush'}"
-      ></wa-option>
-      <wa-option
-        title="Bill Clinton"
-        time="thursday"
-        text="Dude...😂 😂 😂"
-        image="${clintonImgUrl}"
-        .choiceValue="${'Bill Clinton'}"
-      ></wa-option>
-    </wa-combobox>
-  `;
-};
-```
-
-**Whatsapp example shows:**
-
-- advanced styling
-- how to match/highlight text on multiple rows of the option (not just choiceValue)
-- how to animate options
-
-## Google Search
-
-```js preview-story
-export const GoogleSearch = () => {
-  return html`
-    <google-combobox name="combo" label="Google Search">
-      <google-option
-        href="https://www.google.com/search?query=apple"
-        target="_blank"
-        rel="noopener noreferrer"
-        .choiceValue="${'Apple'}"
-        >Apple</google-option
-      >
-      <google-option
-        href="https://www.google.com/search?query=Artichoke"
-        target="_blank"
-        rel="noopener noreferrer"
-        .choiceValue="${'Artichoke'}"
-        >Artichoke</google-option
-      >
-      <google-option
-        href="https://www.google.com/search?query=Asparagus"
-        target="_blank"
-        rel="noopener noreferrer"
-        .choiceValue="${'Asparagus'}"
-        >Asparagus</google-option
-      >
-      <google-option
-        href="https://www.google.com/search?query=Banana"
-        target="_blank"
-        rel="noopener noreferrer"
-        .choiceValue="${'Banana'}"
-        >Banana</google-option
-      >
-      <google-option
-        href="https://www.google.com/search?query=Beets"
-        target="_blank"
-        rel="noopener noreferrer"
-        .choiceValue="${'Beets'}"
-        >Beets</google-option
-      >
-    </google-combobox>
-    <div style="height:200px;"></div>
-  `;
-};
-```
-
-**Google Search example shows:**
-
-- advanced styling
-- how to use options that are links
-- create exact user experience of Google Search, by:
-  - using autocomplete 'list' as a fundament (we don't want inline completion in textbox)
-  - enhancing `_showOverlayCondition`: open on focus
-  - enhancing `_syncToTextboxCondition`: always sync to textbox when navigating by keyboard (this needs to be enabled, since it's not provided in the "autocomplete=list" preset)

package/docs/components/combobox/index.md

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