@lion/ui 0.21.0 → 0.21.1-menu-system.0

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

@@ -151,4 +151,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
 
 ## 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/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/validate.md).
+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/7f56e68987f13e6c536ea8f5d771f222a9f94a17/docs/fundamentals/systems/form/validate.md).

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

@@ -0,0 +1,121 @@
+---
+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              |
+| ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
+| `activeIndex`                | public    |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `activeItem`                 | public    |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `bar`                        | public    | `boolean`                                                              | `false`              | Enable bar to use \[role="menubar"] and horizontal navigation                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | LionMenuCore                |
+| `behaveAsAccordion`          | public    | `boolean`                                                              | `false`              | When true, will have a maximum of one submenu open at a time                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionMenuCore                |
+| `checkedIndex`               | public    | `number \| number[]`                                                   |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `config`                     | public    | `Partial<OverlayConfig>`                                               | `{}`                 | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | OverlayMixin                |
+| `handleFocus`                | public    | `boolean`                                                              | `true`               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `invokerInteraction`         | public    | `string`                                                               | `'click'`            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `invokerNode`                | public    | `HTMLElement`                                                          | `undefined`          | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionMenuCore                |
+| `isInteractiveList`          | public    |                                                                        |                      | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionMenuCore                |
+| `itemWrap`                   | public    | `boolean`                                                              |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `level`                      | public    | `number`                                                               | `1`                  | The level of nested menus. Will be reflected as attribute for styling purposes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionMenuCore                |
+| `listItems`                  | public    | `HTMLElement[]`                                                        |                      | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionMenuCore                |
+| `multipleChoice`             | public    | `boolean`                                                              | `false`              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `noPreselect`                | public    | `boolean`                                                              | `false`              | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionMenuCore                |
+| `openableMode`               | public    | `'disclosure'\|'overlay'`                                              | `'disclosure'`       | Terminology aligned with https\://open-ui.org/components/openable.explainer/                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                             |
+| `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                |
+| `orientation`                | public    | `string`                                                               | `'vertical'`         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `parentList`                 | public    | `InteractiveList`                                                      | `undefined`          | The parent list if level > 1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionMenuCore                |
+| `rotateKeyboardNavigation`   | public    | `boolean`                                                              | `false`              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `selectionFollowsFocus`      | public    | `boolean`                                                              | `false`              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `slots`                      | public    |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_activateOnCharTimeout`     | protected | `number`                                                               | `2000`               | The pending char sequence that will set active list item                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | LionMenuCore                |
+| `_activateOnTypedChars`      | public    | `boolean`                                                              | `false`              | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | LionMenuCore                |
+| `_activeMode`                | public    | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. | LionMenuCore                |
+| `_childrenRoles`             | protected | `InteractiveListItemRole[]`                                            |                      | The roles to look for when children are registered to listItems                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_contentNode`               | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_hasSmartChildren`          | protected | `boolean`                                                              | `false`              | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionMenuCore                |
+| `_hasSmartListItems`         | public    |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_interactiveChildrenRoles`  | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_invokerNode`               | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_listItemsSlot`             | protected | `HTMLSlotElement`                                                      |                      | Place in the template that contains children with .\_childrenRoles                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | LionMenuCore                |
+| `_listNode`                  | protected | `HTMLElement`                                                          |                      | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | LionMenuCore                |
+| `_listRole`                  | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'`                      | `'menu'`             | The role that will be put on \_listNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | LionMenuCore                |
+| `_onOverlayShow`             | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | OverlayWithListInvokerMixin |
+| `_onPopState`                | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_overlayBackdropNode`       | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | OverlayMixin                |
+| `_overlayContentNode`        | protected |                                                                        |                      | make sure OverlayMixin gets the contentNode defined by DisclosureMixin                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin                |
+| `_overlayContentWrapperNode` | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | OverlayMixin                |
+| `_overlayInvokerNode`        | protected |                                                                        |                      | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin                |
+| `_overlayReferenceNode`      | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | OverlayMixin                |
+| `_scrollTargetNode`          | protected |                                                                        |                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+| `_shouldSetupOverlay`        | protected | `boolean`                                                              | `false`              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                             |
+| `_subListMap`                | protected | `Map<HTMLElement\|LionItem,InteractiveList>`                           | `new Map()`          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionMenuCore                |
+
+### Methods
+
+| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
+| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `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   |
+| `setCheckedIndex`                  | public    | When \`multipleChoice\` is false, will toggle, else will check provided index                                                                                                                                                                                                                                              | `index: Number`                                                                                              |                     | LionMenuCore   |
+| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        | `ev: Event`                                                                                                  |                     | LionMenuCore   |
+| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
+| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
+| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
+| `_getNextEnabledOption`            | protected |                                                                                                                                                                                                                                                                                                                            | `currentIndex: number, offset: number`                                                                       |                     | LionMenuCore   |
+| `_getPreviousEnabledOption`        | protected |                                                                                                                                                                                                                                                                                                                            | `currentIndex: number, offset: number`                                                                       |                     | LionMenuCore   |
+| `_initListItems`                   | protected | When \_listItemsSlot receives new items, they are initialized via this method                                                                                                                                                                                                                                              | `newItems: LionItem[]\|HTMLElement[]`                                                                        |                     | LionMenuCore   |
+| `_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   |
+| `_matchCharsAgainstItem`           | protected |                                                                                                                                                                                                                                                                                                                            | `{ chars, item }, config: {chars: string[], item: HTMLElement}`                                              |                     | LionMenuCore   |
+| `_onListClick`                     | protected |                                                                                                                                                                                                                                                                                                                            | `ev: MouseEvent`                                                                                             |                     | LionMenuCore   |
+| `_onListFocusIn`                   | protected |                                                                                                                                                                                                                                                                                                                            | `ev: FocusEvent`                                                                                             |                     | LionMenuCore   |
+| `_onListKeyDown`                   | protected | Handles various keyboard controls                                                                                                                                                                                                                                                                                          | `ev: KeyboardEvent`                                                                                          |                     | LionMenuCore   |
+| `_onListKeyUp`                     | protected |                                                                                                                                                                                                                                                                                                                            | `ev: *`                                                                                                      |                     | LionMenuCore   |
+| `_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   |
+| `_setupList`                       | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | LionMenuCore   |
+| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_syncCurrentPageWithLocationHref` | protected |                                                                                                                                                                                                                                                                                                                            | `location: Location`                                                                                         |                     | LionMenuCore   |
+| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+
+### Events
+
+| Name             | Type          | Description | Inherited From |
+| ---------------- | ------------- | ----------- | -------------- |
+| `opened-changed` | `CustomEvent` |             | OverlayMixin   |
+
+### Attributes
+
+| Name                         | Field                    | Inherited From |
+| ---------------------------- | ------------------------ | -------------- |
+| `openable-mode`              | openableMode             |                |
+| `opened`                     | opened                   | OverlayMixin   |
+| `orientation`                | orientation              | LionMenuCore   |
+| `multiple-choice`            | multipleChoice           | LionMenuCore   |
+| `selection-follows-focus`    | selectionFollowsFocus    | LionMenuCore   |
+| `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenuCore   |
+| `no-preselect`               | noPreselect              | LionMenuCore   |
+| `item-wrap`                  | itemWrap                 | LionMenuCore   |
+| `_activateOnTypedChars`      | \_activateOnTypedChars   | LionMenuCore   |
+| `_hasSmartListItems`         | \_hasSmartListItems      | LionMenuCore   |
+| `_activeMode`                | \_activeMode             | LionMenuCore   |
+| `invokerNode`                | invokerNode              | LionMenuCore   |
+| `behave-as-accordion`        | behaveAsAccordion        | LionMenuCore   |
+| `level`                      | level                    | LionMenuCore   |
+| `bar`                        | bar                      | LionMenuCore   |
+
+<hr/>

package/docs/components/menu/applyMenuDemoStyles.js

@@ -0,0 +1,173 @@
+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: '▼';
+    }
+
+    [orientation='horizontal'] [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;
+}

package/docs/components/menu/extensions.md

@@ -0,0 +1,262 @@
+---
+title: 'Menu: Extensions'
+parts:
+  - Menu
+  - Extensions
+eleventyNavigation:
+  key: 'Menu: Extensions'
+  order: 10
+  parent: Menu
+  title: Extensions
+---
+
+# Menu: Extensions
+
+```js script
+import { html } from 'lit';
+import './src/DemoNavigationBar.js';
+
+// N.B. data structure designed to be compatible with existing extension layer
+// TODO: maybe refactor api and bridge
+
+const menuData = [
+  {
+    title: 'Products',
+    link: 'products',
+    sub: [
+      {
+        title: 'Payments',
+        link: 'payments-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+      {
+        title: 'Savings',
+        link: 'savings-collection',
+        sub: [
+          { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
+          { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
+          { title: 'Notional Cash Management', link: 'notional-cash-management' },
+          { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
+          { title: 'Liquidity Management', link: 'liquidity-management' },
+          { title: 'Excess Cash', link: 'excess-cash' },
+        ],
+      },
+      {
+        title: 'Investing',
+        link: 'investing-collection',
+        sub: [
+          { title: 'Digital Banking Services', link: 'home' },
+          { title: 'InsideBusiness', link: 'home' },
+          { title: 'Connectivity Solutions', link: 'connectivity-solutions' },
+        ],
+      },
+      {
+        title: 'Mortgages',
+        link: 'mortgages-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+      {
+        title: 'Loans',
+        link: 'loans-collection',
+        sub: [
+          { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
+          { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
+          { title: 'Notional Cash Management', link: 'notional-cash-management' },
+          { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
+          { title: 'Liquidity Management', link: 'liquidity-management' },
+          { title: 'Excess Cash', link: 'excess-cash' },
+        ],
+      },
+      {
+        title: 'Insurances',
+        link: 'insurances-collection',
+        sub: [
+          { title: 'Digital Banking Services', link: 'home' },
+          { title: 'InsideBusiness', link: 'home' },
+          { title: 'Connectivity Solutions', link: 'connectivity-solutions' },
+        ],
+      },
+      {
+        title: 'Digital banking',
+        link: 'digital-banking',
+      },
+    ],
+  },
+  {
+    title: "Who it's for",
+    link: 'who',
+    sub: [
+      {
+        title: 'Parents & kids',
+        link: 'parents-kids',
+        sub: [
+          { title: 'Child current account', link: '#child-current' },
+          { title: 'Youth current account', link: '#youth-current' },
+          { title: 'Child savings account', link: '#child-savings' },
+        ],
+      },
+      {
+        title: 'Students',
+        link: 'students',
+        sub: [
+          { title: 'Student account', link: '#student-account' },
+          { title: 'Smart payments', link: '#smart-payments' },
+          { title: 'Smart savings', link: '#smart-savings' },
+          { title: 'Smart banking', link: '#smart-banking' },
+          { title: 'Smart for now', link: '#smart-for-now' },
+          { title: 'Smart for later', link: '#smart-for-later' },
+        ],
+      },
+      {
+        title: "I'm an expat",
+        link: 'expat',
+        sub: [
+          { title: 'Open a Dutch banking account', link: '#open' },
+          { title: 'Investments', link: '#investments' },
+          { title: 'Mortgage', link: '#mortgage' },
+          { title: 'Health insurance', link: '#insurance' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Themes',
+    link: 'themes',
+    sub: [
+      {
+        title: 'Living',
+        link: 'living-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+      {
+        title: 'Wealth',
+        link: 'wealth-collections',
+        sub: [
+          { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
+          { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
+          { title: 'Notional Cash Management', link: 'notional-cash-management' },
+          { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
+          { title: 'Liquidity Management', link: 'liquidity-management' },
+          { title: 'Excess Cash', link: 'excess-cash' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Loyalty shop',
+    link: '#points',
+  },
+  {
+    title: 'Make an appointment',
+    link: '#appointment',
+  },
+  {
+    title: 'Products 2',
+    link: 'products-2',
+    sub: [
+      {
+        title: 'Payments',
+        link: 'payments-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+    ],
+  },
+
+  {
+    title: 'Products 3',
+    sub: [
+      {
+        title: 'Payments',
+        link: 'payments-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Loyalty shop 2',
+    link: '#points',
+  },
+  {
+    title: 'Make an appointment 2',
+    link: '#appointment',
+  },
+];
+
+const secondaryMenu = [
+  {
+    title: 'Back to old website',
+    link: 'https://www.ingwb.com',
+    target: '_self',
+    trackid: 'backToOldWebsite',
+  },
+];
+
+const ctaPrimary = {
+  id: 'cta-primary',
+  label: 'Log in',
+  href: '#login',
+};
+
+const ctaSecondary = {
+  id: 'cta-secondary',
+  label: 'Open an account',
+  href: '#open-account',
+};
+
+// N.B. these should be provided via api call
+const suggestions = ['A', 'B', 'C', 'D'];
+```
+
+```js preview-story
+export const navigationBar = () => {
+  return html`<demo-navigation-bar
+    .menuItems="${menuData}"
+    .menuSupportItems="${secondaryMenu}"
+    .ctaPrimary="${ctaPrimary}"
+    .ctaSecondary="${ctaSecondary}"
+    .suggestions="${suggestions}"
+  >
+    .prefilledSuggestion="${suggestions[0]}"</demo-navigation-bar
+  >`;
+};
+```