@lion/ui 0.25.0 → 0.26.0

package/docs/components/listbox/overview.md

@@ -1,54 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Listbox
-  - Overview
-eleventyNavigation:
-  key: 'Listbox: Overview'
-  order: 10
-  parent: Listbox
-  title: Overview
----
-
-# Overview
-
-A widget that presents a list of options and allows a user to select one or more of them.
-A listbox that allows a single option to be chosen is a `single-select listbox`; one that allows
-multiple options to be selected is a `multi-select listbox`.
-
-> From [listbox wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#Listbox)
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-listbox name="listbox" label="Default">
-    <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-    <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
-    <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
-    <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
-    <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
-  </lion-listbox>
-`;
-```
-
-## Features
-
-- Single & Multiple Choice
-- Orientation
-- Rotation when using keyboard for selection
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-```

package/docs/components/listbox/src/listboxData.js

@@ -1,131 +0,0 @@
-export const listboxData = [
-  'Apple',
-  'Artichoke',
-  'Asparagus',
-  'Banana',
-  'Beets',
-  'Bell pepper',
-  'Broccoli',
-  'Brussels sprout',
-  'Cabbage',
-  'Carrot',
-  'Cauliflower',
-  'Celery',
-  'Chard',
-  'Chicory',
-  'Corn',
-  'Cucumber',
-  'Daikon',
-  'Date',
-  'Edamame',
-  'Eggplant',
-  'Elderberry',
-  'Fennel',
-  'Fig',
-  'Garlic',
-  'Grape',
-  'Honeydew melon',
-  'Iceberg lettuce',
-  'Jerusalem artichoke',
-  'Kale',
-  'Kiwi',
-  'Leek',
-  'Lemon',
-  'Mango',
-  'Mangosteen',
-  'Melon',
-  'Mushroom',
-  'Nectarine',
-  'Okra',
-  'Olive',
-  'Onion',
-  'Orange',
-  'Parship',
-  'Pea',
-  'Pear',
-  'Pineapple',
-  'Potato',
-  'Pumpkin',
-  'Quince',
-  'Radish',
-  'Rhubarb',
-  'Shallot',
-  'Spinach',
-  'Squash',
-  'Strawberry',
-  'Sweet potato',
-  'Tomato',
-  'Turnip',
-  'Ugli fruit',
-  'Victoria plum',
-  'Watercress',
-  'Watermelon',
-  'Yam',
-  'Zucchini',
-];
-
-export const listboxComplexData = [
-  { label: 'Apple', description: 'Rosaceae' },
-  { label: 'Artichoke', description: 'Cardoon' },
-  { label: 'Asparagus', description: 'Liliopsida' },
-  { label: 'Banana', description: 'Bananas' },
-  { label: 'Beets', description: 'Beet' },
-  { label: 'Bell pepper', description: 'Solanaceae' },
-  { label: 'Broccoli', description: 'Wild cabbage' },
-  { label: 'Brussels sprout', description: 'Wild cabbage' },
-  { label: 'Cabbage', description: 'Wild cabbage' },
-  { label: 'Carrot', description: 'Apiales' },
-  { label: 'Cauliflower', description: 'Wild cabbage' },
-  { label: 'Celery', description: 'Apium' },
-  { label: 'Chard', description: 'Beet' },
-  { label: 'Chicory', description: 'Chicory' },
-  { label: 'Corn', description: 'Corn' },
-  { label: 'Cucumber', description: 'Cucumis' },
-  { label: 'Daikon', description: 'Radishes' },
-  { label: 'Date', description: 'Arecaceae' },
-  { label: 'Edamame', description: 'Wild bean' },
-  { label: 'Eggplant', description: 'Nightshade' },
-  { label: 'Elderberry', description: 'Moschatel' },
-  { label: 'Fennel', description: 'Fennels' },
-  { label: 'Fig', description: 'Fig trees' },
-  { label: 'Garlic', description: 'Allium' },
-  { label: 'Grape', description: 'Vitis vinifera' },
-  { label: 'Honeydew melon', description: 'Citrullus' },
-  { label: 'Iceberg lettuce', description: 'Lactuca' },
-  { label: 'Jerusalem artichoke', description: 'Sunflowers' },
-  { label: 'Kale', description: 'Brassicaceae' },
-  { label: 'Kiwi', description: 'Ratites' },
-  { label: 'Leek', description: 'Onion' },
-  { label: 'Lemon', description: 'Citrus' },
-  { label: 'Mango', description: 'Mangifera' },
-  { label: 'Mangosteen', description: 'Saptrees' },
-  { label: 'Melon', description: 'Citrullus' },
-  { label: 'Mushroom', description: 'Eumycota' },
-  { label: 'Nectarine', description: 'Citrus' },
-  { label: 'Okra', description: 'Mallows' },
-  { label: 'Olive', description: 'Olives' },
-  { label: 'Onion', description: 'Onion' },
-  { label: 'Orange', description: 'Citrus' },
-  { label: 'Parship', description: 'Umbellifers' },
-  { label: 'Pea', description: 'Peas' },
-  { label: 'Pear', description: 'Malinae' },
-  { label: 'Pineapple', description: 'Pineapples' },
-  { label: 'Potato', description: 'Nightshade' },
-  { label: 'Pumpkin', description: 'Cucurbitaceae' },
-  { label: 'Quince', description: 'Cydonia' },
-  { label: 'Radish', description: 'Radishes' },
-  { label: 'Rhubarb', description: 'Rhubarb' },
-  { label: 'Shallot', description: 'Onion' },
-  { label: 'Spinach', description: 'Spinacia' },
-  { label: 'Squash', description: 'Cucurbiteae' },
-  { label: 'Strawberry', description: 'Fragaria' },
-  { label: 'Sweet potato', description: 'Ipomoea' },
-  { label: 'Tomato', description: 'Nightshade' },
-  { label: 'Turnip', description: 'Field mustard' },
-  { label: 'Ugli fruit', description: 'Citrus reticulata' },
-  { label: 'Victoria plum', description: 'Prunus domestica' },
-  { label: 'Watercress', description: 'Nasturtium' },
-  { label: 'Watermelon', description: 'Citrullus' },
-  { label: 'Yam', description: 'Dioscorea' },
-  { label: 'Zucchini', description: 'Cucurbitaceae' },
-];

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

@@ -1,154 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Listbox
-  - Use Cases
-eleventyNavigation:
-  key: 'Listbox: Use Cases'
-  order: 20
-  parent: Listbox
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { listboxData } from './src/listboxData.js';
-import { Required } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-loadDefaultFeedbackMessages();
-```
-
-## Multiple choice
-
-Add `multiple-choice` flag to allow multiple values to be selected.
-This will:
-
-- keep the listbox overlay open on click of an option
-- display a list of selected option representations next to the text box
-- make the value of type `Array` instead of `String`
-
-```html preview-story
-<lion-listbox name="combo" label="Multiple" multiple-choice>
-  <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-  <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
-  <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
-  <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
-  <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
-  <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
-  <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
-  <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
-  <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
-  <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
-</lion-listbox>
-```
-
-## Orientation
-
-When `orientation="horizontal"`, left and right arrow keys will be enabled, plus the screenreader
-will be informed about the direction of the options.
-By default, `orientation="vertical"` is set, which enables up and down arrow keys.
-
-```html preview-story
-<lion-listbox name="combo" label="Orientation horizontal" orientation="horizontal">
-  <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-  <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
-  <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
-  <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
-  <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
-  <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
-  <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
-  <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
-  <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
-  <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
-</lion-listbox>
-```
-
-With `multiple-choice` flag configured, multiple options can be checked.
-
-```html preview-story
-<lion-listbox
-  name="combo"
-  label="Orientation horizontal multiple"
-  orientation="horizontal"
-  multiple-choice
->
-  <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-  <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
-  <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
-  <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
-  <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
-  <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
-  <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
-  <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
-  <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
-  <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
-</lion-listbox>
-```
-
-## Selection-follows-focus
-
-When true, will synchronize activedescendant and selected element on arrow key navigation.
-This behavior can usually be seen in `<select>` on the Windows platform.
-Note that this behavior cannot be used when multiple-choice is true.
-See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus)
-
-```html preview-story
-<lion-listbox name="combo" label="Selection follows focus" selection-follows-focus>
-  <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-  <lion-option .choiceValue="${'Artichoke'}" disabled>Artichoke</lion-option>
-  <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
-  <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
-  <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
-  <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
-  <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
-  <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
-  <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
-  <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
-</lion-listbox>
-```
-
-## Rotate keyboard navigation
-
-`rotate-keyboard-navigation` attribute on the listbox will give the first option active state when navigated to the next option from last option.
-
-```html preview-story
-<lion-listbox name="combo" label="Rotate keyboard navigation" rotate-keyboard-navigation>
-  <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-  <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
-  <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
-  <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
-  <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
-  <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
-  <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
-  <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
-  <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
-  <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
-</lion-listbox>
-```
-
-## Disabled options
-
-Navigation will skip over disabled options. Let's disable Artichoke and Brussel sprout, because they're gross.
-
-```html preview-story
-<lion-listbox name="combo" label="Rotate with disabled options" rotate-keyboard-navigation>
-  <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-  <lion-option .choiceValue="${'Artichoke'}" disabled>Artichoke</lion-option>
-  <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
-  <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
-  <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
-  <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
-  <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
-  <lion-option .choiceValue="${'Brussels sprout'}" disabled>Brussels sprout</lion-option>
-  <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
-  <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
-</lion-listbox>
-```
-
-## Validation
-
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/fundamentals/systems/form/validate.md).

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

@@ -1,44 +0,0 @@
----
-parts:
-  - API Table
-  - Menu
-title: 'Menu: API Table'
-eleventyNavigation:
-  key: API Table >> Menu
-  title: API Table
-  order: 90
-  parent: Menu
----
-# Menu: API Table
- 
-
-## class: `LionMenu`, `lion-menu`
-
-### Fields
-
-| Name                    | Privacy   | Type                      | Default        | Description                                                                  | Inherited From |
-| ----------------------- | --------- | ------------------------- | -------------- | ---------------------------------------------------------------------------- | -------------- |
-| `bar`                   | public    | `boolean`                 | `false`        | Enable bar to use \[role="menubar"] and horizontal navigation                | LionMenuCore   |
-| `behaveAsAccordion`     | public    | `boolean`                 | `true`         |                                                                              | LionMenuCore   |
-| `invokerInteraction`    | public    | `string`                  | `'click'`      |                                                                              | LionMenuCore   |
-| `openableMode`          | public    | `'disclosure'\|'overlay'` | `'disclosure'` | Terminology aligned with https\://open-ui.org/components/openable.explainer/ |                |
-| `_activateOnTypedChars` | protected | `boolean`                 | `true`         |                                                                              | LionMenuCore   |
-| `_listRole`             | protected | `string`                  | `'menu'`       |                                                                              | LionMenuCore   |
-| `_shouldSetupOverlay`   | protected | `boolean`                 | `false`        |                                                                              |                |
-
-### Methods
-
-| Name                   | Privacy   | Description                                                                                                     | Parameters      | Return          | Inherited From |
-| ---------------------- | --------- | --------------------------------------------------------------------------------------------------------------- | --------------- | --------------- | -------------- |
-| `setCheckedIndex`      | public    | Allows groups within one level. In case we deal with menuitemcheckbox,
we treat it as multiple choice group | `index: number` |                 | LionMenuCore   |
-| `_defineOverlayConfig` | protected |                                                                                                                 |                 | `OverlayConfig` |                |
-| `_onListKeyUp`         | protected |                                                                                                                 | `ev: *`         |                 |                |
-
-### Attributes
-
-| Name            | Field        | Inherited From |
-| --------------- | ------------ | -------------- |
-| `openable-mode` | openableMode |                |
-| `bar`           | bar          | LionMenuCore   |
-
-<hr/>

package/docs/components/menu/applyMenuDemoStyles.js

@@ -1,173 +0,0 @@
-import { html, render } from 'lit';
-
-function renderLitAsNode(tpl) {
-  const container = document.createElement('div');
-  render(tpl, container);
-  return container.firstElementChild;
-}
-
-let isApplied = false;
-
-export function applyMenuDemoStyles() {
-  if (isApplied) {
-    return;
-  }
-
-  const fontAwesome = html`<link
-    rel="stylesheet"
-    href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
-    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
-    crossorigin="anonymous"
-  />`;
-  document.head.appendChild(renderLitAsNode(fontAwesome));
-
-  const styles = html` <style>
-    [role='menu']:focus {
-      outline: none;
-    }
-
-    [role='toolbar'],
-    [role='tree'],
-    [role='menubar'],
-    [role='menu'] {
-      background: white;
-      font-family: sans-serif;
-      font-size: 12px;
-    }
-
-    [level] > [role='menu'] {
-      border: 1px solid black;
-    }
-
-    [role='treeitem']:not([aria-expanded]),
-    [role='treeitem'][aria-expanded],
-    [role^='menuitem']:not([aria-expanded]),
-    [role^='menuitem'][aria-expanded] {
-      all: unset;
-      display: block;
-      width: 100%;
-      position: relative;
-      box-sizing: border-box;
-      padding: 4px 24px 4px 8px;
-    }
-
-    [role='treeitem']:not([aria-expanded]),
-    [role='treeitem'][aria-expanded] {
-      padding-left: 16px;
-    }
-
-    [role='treeitem'][active]:not([aria-expanded]),
-    [role='treeitem'][active][aria-expanded],
-    [role^='menuitem'][active]:not([aria-expanded]),
-    [role^='menuitem'][active][aria-expanded] {
-      background: lightgrey;
-    }
-
-    [role^='menuitem'][checked]:not([aria-expanded]),
-    [role^='menuitem'][checked][aria-expanded] {
-      background: #eee;
-    }
-
-    [role='treeitem'],
-    [role^='menuitem'] {
-      position: relative;
-      cursor: default;
-    }
-
-    [role='treeitem']::after,
-    [role^='menuitem']::after {
-      position: absolute;
-      top: 5px;
-      font-size: 10px;
-    }
-
-    [role^='menuitem']::after {
-      right: 4px;
-    }
-
-    [role^='treeitem']::after {
-      left: 4px;
-    }
-
-    [role^='menuitem'][aria-expanded]::after {
-      content: '▶';
-    }
-
-    [role^='menuitem'][aria-expanded='true']::after {
-      content: '▼';
-    }
-
-    [axis='inline'] [role^='menuitem'][aria-expanded]::after {
-      content: '▼';
-    }
-
-    [role='menuitemcheckbox'][aria-checked='true']::after {
-      content: '🗹';
-    }
-
-    [role='menuitemradio'][aria-checked='true']::after {
-      content: '◉';
-    }
-
-    [role='separator'] {
-      border-bottom: 1px solid gray;
-    }
-
-    [role='treeitem'][aria-expanded]::after {
-      content: '+';
-    }
-
-    demo-tree[level='1'] [role='treeitem']:not([aria-expanded]),
-    demo-tree[level='1'] [role='treeitem'][aria-expanded] {
-      padding-left: 24px;
-    }
-
-    lion-menu[level='1'] [role^='menuitem']:not([aria-expanded]),
-    lion-menu[level='1'] [role^='menuitem'][aria-expanded] {
-      padding-left: 16px;
-    }
-
-    demo-tree[level='2'] [role='treeitem']:not([aria-expanded]),
-    demo-tree[level='2'] [role='treeitem'][aria-expanded] {
-      padding-left: 32px;
-    }
-    lion-menu[level='2'] [role^='menuitem']:not([aria-expanded]),
-    lion-menu[level='2'] [role^='menuitem'][aria-expanded] {
-      padding-left: 24px;
-    }
-
-    [role='toolbar'] {
-      padding: 8px;
-      background: #eee;
-    }
-    [role='toolbar'] button {
-      background: none;
-      padding: 4px 8px;
-      border: 1px transparent;
-    }
-    [role='toolbar'] button[aria-pressed='true'],
-    [role='toolbar'] button[aria-checked='true'] {
-      background: white;
-      border: 1px black;
-    }
-
-    [role='toolbar'] > div[role='separator'] {
-      margin-left: 8px;
-      margin-right: 8px;
-      border-left: 1px solid lightgray;
-    }
-
-    button[slot='invoker'] {
-      background: none;
-      color: inherit;
-      border: none;
-      padding: 0;
-      font: inherit;
-      display: block;
-      width: 100%;
-      text-align: left;
-    }
-  </style>`;
-  document.head.appendChild(renderLitAsNode(styles));
-  isApplied = true;
-}