@lion/ui 0.0.2 → 0.0.4

package/docs/components/accordion/index.md

@@ -0,0 +1,3 @@
+# Accordion
+
+-> go to Overview

package/docs/components/accordion/overview.md

@@ -0,0 +1,129 @@
+# Accordion >> Overview ||10
+
+<p class="lion-paragraph--emphasis">An accordion is a vertically stacked set of interactive headings that each contain a title representing a section of content. It allows users to toggle the display of sections of content.</p>
+
+```js script
+import { html as previewHtml } from '@mdjs/mdjs-preview';
+```
+
+```js preview-story
+import { html, LitElement } from 'lit';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { LionAccordion } from '@lion/ui/accordion.js';
+
+class MyComponent extends ScopedElementsMixin(LitElement) {
+  static get scopedElements() {
+    return { 'lion-accordion': LionAccordion };
+  }
+  render() {
+    return html`
+      <lion-accordion>
+        <h3 slot="invoker">
+          <button>Sensory Factors</button>
+        </h3>
+        <div slot="content">
+          <p>
+            The taste of oranges is determined mainly by the relative ratios of sugars and acids,
+            whereas orange aroma derives from volatile organic compounds, including alcohols,
+            aldehydes, ketones, terpenes, and esters. Bitter limonoid compounds, such as limonin,
+            decrease gradually during development, whereas volatile aroma compounds tend to peak in
+            mid– to late–season development. Taste quality tends to improve later in harvests when
+            there is a higher sugar/acid ratio with less bitterness. As a citrus fruit, the orange
+            is acidic, with pH levels ranging from 2.9 to 4.0. <a href="#">Link</a>
+          </p>
+          <p>
+            Sensory qualities vary according to genetic background, environmental conditions during
+            development, ripeness at harvest, postharvest conditions, and storage duration.
+          </p>
+        </div>
+        <h3 slot="invoker">
+          <button>Nutritional value</button>
+        </h3>
+        <div slot="content">
+          Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat
+          (table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich
+          source of vitamin C, providing 64% of the Daily Value. No other micronutrients are present
+          in significant amounts (table).
+        </div>
+      </lion-accordion>
+    `;
+  }
+}
+
+customElements.define('my-component', MyComponent);
+
+export const overview = () => previewHtml`<my-component></my-component>`;
+```
+
+## When to use
+
+- Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page
+- Longer pages can benefit users. Accordions shorten pages and reduce scrolling, but they increase the interaction cost by requiring people to decide on topic headings.
+- Accordions conserve space on mobile but they can also cause disorientation and too much scrolling.
+- Accordions should be avoided when your audience needs most or all of the content on the page to answer their question. Better to show all page content at once when the use case supports it.
+- Accordions are more suitable when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
+
+## Features
+
+- Content gets provided by users (slotted in)
+- Handles accessibility
+- Support navigation via keyboard
+
+## How to use
+
+### Code
+
+1. Install
+
+```bash
+npm i --save @lion/ui
+```
+
+2. Use scoped registry
+
+```js
+import { html, LitElement } from 'lit';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { LionAccordion } from '@lion/ui/accordion.js';
+
+class MyComponent extends ScopedElementsMixin(LitElement) {
+  static get scopedElements() {
+    return { 'lion-accordion': LionAccordion };
+  }
+  render() {
+    return html`
+      <lion-accordion>
+        <h3 slot="invoker">
+          <button>Nutritional value</button>
+        </h3>
+        <p slot="content">
+          Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat
+          (table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich
+          source of vitamin C, providing 64% of the Daily Value. No other micronutrients are present
+          in significant amounts (table).
+        </p>
+      </lion-accordion>
+    `;
+  }
+}
+```
+
+3. Use html
+
+```html
+<script type="module">
+  import '@lion/ui/define/lion-accordion.js';
+</script>
+
+<lion-accordion>
+  <h3 slot="invoker">
+    <button>Nutritional value</button>
+  </h3>
+  <p slot="content">
+    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
+    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
+    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
+    amounts (table).
+  </p>
+</lion-accordion>
+```

package/docs/components/accordion/reference.md

@@ -0,0 +1,47 @@
+# Accordion >> Reference ||30
+
+<p class="lion-paragraph--emphasis">Everything you need to re-use the accordion.</p>
+
+## Requirements
+
+This component fulfils the following requirements:
+
+1. An Accordion lets you toggle the visibility of content for a specific section
+2. An Accordion contains a visual indicator/icon as an affordance to toggle the visibility of the content
+3. Every section consists of a section title (always visible) and section content (visible when expanded)
+4. The individual sections (title + content) are clearly grouped
+5. Multiple sections can be expanded at the same time
+6. The section heading (title + visual indicator) is used as the interaction trigger
+7. An Accordion does not reposition the page when content drops out of the viewport when expanding a section (no auto scrolling)
+
+## Rationale
+
+### Contents are not focusable
+
+Focusable elements should be interactive. Contents themselves do not offer any interactivity.
+If there is a button or a form inside the tab panel then these elements get focused directly.
+
+## Keyboard interactions
+
+| <kbd>Key</kbd>               | Action                                                                                                                                                                                                                |
+| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <kbd>Enter or Spacebar</kbd> | When focus is on the accordion header for a collapsed panel, expands the associated panel. When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing |
+| <kbd>Tab</kbd>               | Moves focus to the next focusable element; all focusable elements in the accordion are included in the page Tab sequence.                                                                                             |
+| <kbd>Shift+Tab</kbd>         | Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.                                                                                         |
+| <kbd>Down arrow </kbd>       | If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.                             |
+| <kbd>Up arrow</kbd>          | If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.                         |
+| <kbd>Home</kbd>              | When focus is on an accordion header, moves focus to the first accordion header.                                                                                                                                      |
+| <kbd>End</kbd>               | When focus is on an accordion header, moves focus to the last accordion header.                                                                                                                                       |
+
+## WAI-ARIA roles
+
+- The title of each accordion header is contained in an element with role button.
+- Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
+  - If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used.
+  - The button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element.
+- If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.
+- The accordion header button element has aria-controls set to the ID element containing the accordion panel content.
+- If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has aria-disabled set to true.
+- Optionally, each element that serves as a container for panel content has role region and aria-labelledby with a value that refers to the button that controls display of the panel.
+  - Avoid using the region role in circumstances that create landmark region proliferation, e.g. in an accordion that contains more than approximately 6 panels that can be expanded at the same time.
+  - Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.

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

@@ -0,0 +1,252 @@
+# Accordion >> Use Cases ||20
+
+```js script
+import { html as previewHtml } from '@mdjs/mdjs-preview';
+
+import '@lion/ui/define/lion-accordion.js';
+```
+
+## Default Accordion collapsed
+
+All accordion panels are collapsed by default.
+
+```html preview-story
+<lion-accordion>
+  <h3 slot="invoker">
+    <button>Sensory Factors</button>
+  </h3>
+  <div slot="content" class="lion-paragraph-container">
+    <p>
+      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
+      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
+      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
+      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
+      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
+      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
+      4.0.
+    </p>
+
+    <p>
+      Sensory qualities vary according to genetic background, environmental conditions during
+      development, ripeness at harvest, postharvest conditions, and storage duration.
+    </p>
+  </div>
+  <h3 slot="invoker">
+    <button>Nutritional value</button>
+  </h3>
+  <div slot="content">
+    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
+    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
+    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
+    amounts (table).
+  </div>
+</lion-accordion>
+```
+
+## Expanded
+
+Multiple accordion panels can be expanded at the same time. When content drops out of the viewport when expanding an accordion panel, the accordion does not reposition the page (no autoscrolling).
+
+```html preview-story
+<lion-accordion expanded="[1]">
+  <h3 slot="invoker">
+    <button>Sensory Factors</button>
+  </h3>
+  <div slot="content" class="lion-paragraph-container">
+    <p>
+      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
+      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
+      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
+      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
+      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
+      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
+      4.0.
+    </p>
+
+    <p>
+      Sensory qualities vary according to genetic background, environmental conditions during
+      development, ripeness at harvest, postharvest conditions, and storage duration.
+    </p>
+  </div>
+  <h3 slot="invoker">
+    <button>Nutritional value</button>
+  </h3>
+  <div slot="content">
+    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
+    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
+    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
+    amounts (table).
+  </div>
+</lion-accordion>
+```
+
+## Slots Order
+
+The invoker and content slots are ordered by DOM order. This means you can put all invoker nodes at the top followed by all container nodes and it will still retain the correct order.
+
+```html preview-story
+<lion-accordion>
+  <h3 slot="invoker">
+    <button>Sensory Factors</button>
+  </h3>
+  <h3 slot="invoker">
+    <button>Nutritional value</button>
+  </h3>
+  <div slot="content" class="lion-paragraph-container">
+    <p>
+      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
+      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
+      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
+      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
+      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
+      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
+      4.0.
+    </p>
+
+    <p>
+      Sensory qualities vary according to genetic background, environmental conditions during
+      development, ripeness at harvest, postharvest conditions, and storage duration.
+    </p>
+  </div>
+  <div slot="content">
+    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
+    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
+    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
+    amounts (table).
+  </div>
+</lion-accordion>
+```
+
+## Multiline header
+
+A header can be multiline.
+
+```html preview-story
+<lion-accordion>
+  <h3 slot="invoker">
+    <button>
+      Sensory Factors <br />
+      <small>or the experience of taste</small>
+    </button>
+  </h3>
+  <div slot="content" class="lion-paragraph-container">
+    <p>
+      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
+      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
+      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
+      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
+      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
+      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
+      4.0.
+    </p>
+
+    <p>
+      Sensory qualities vary according to genetic background, environmental conditions during
+      development, ripeness at harvest, postharvest conditions, and storage duration.
+    </p>
+  </div>
+  <h3 slot="invoker">
+    <button>
+      Nutritional value
+      <small>or the raw data</small>
+    </button>
+  </h3>
+  <div slot="content">
+    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
+    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
+    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
+    amounts (table).
+  </div>
+</lion-accordion>
+```
+
+## Distribute New Elements
+
+Below, we demonstrate how you could dynamically add a new invoker + content.
+
+One way is by creating the DOM elements and appending them as needed. For how this work feel tree to check out the `__handleAppendClick` function.
+Another way is by adding data to the Lit property that you loop over in your template. See `__handlePushClick` for an example.
+
+```js preview-story
+import { html, LitElement } from 'lit';
+
+export const distributeNewElement = () => {
+  class DemoDistribute extends LitElement {
+    static get properties() {
+      return {
+        __collection: { type: Array },
+      };
+    }
+    render() {
+      return html`
+        <h3>Append</h3>
+        <lion-accordion id="appendAccordion">
+          <h4 slot="invoker">
+            <button>header 1</button>
+          </h4>
+          <p slot="content">content 1</p>
+          <h4 slot="invoker">
+            <button>header 2</button>
+          </h4>
+          <p slot="content">content 2</p>
+        </lion-accordion>
+        <button @click="${this.__handleAppendClick}">Append dom elements</button>
+        <hr />
+        <h3>Push</h3>
+        <lion-accordion id="pushTabs">
+          <h4 slot="invoker">
+            <button>header 1</button>
+          </h4>
+          <p slot="content">content 1</p>
+          <h4 slot="invoker">
+            <button>header 2</button>
+          </h4>
+          <p slot="content">content 2</p>
+          ${this.__collection.map(
+            item => html`
+              <h4 slot="invoker"><button>${item.invoker}</button></h4>
+              <p slot="content">${item.content}</p>
+            `,
+          )}
+        </lion-accordion>
+        <button @click="${this.__handlePushClick}">Push to tabs collection</button>
+      `;
+    }
+    constructor() {
+      super();
+      this.__collection = [];
+    }
+    __handleAppendClick() {
+      const accordionElement = this.shadowRoot.querySelector('#appendAccordion');
+      const c = 2;
+      const n = Math.floor(accordionElement.children.length / 2);
+      for (let i = n + 1; i < n + c; i += 1) {
+        const invoker = document.createElement('h4');
+        const button = document.createElement('button');
+        button.innerText = `header ${i}`;
+        invoker.setAttribute('slot', 'invoker');
+        invoker.appendChild(button);
+        const content = document.createElement('p');
+        content.setAttribute('slot', 'content');
+        content.innerText = `content ${i}`;
+        accordionElement.append(invoker);
+        accordionElement.append(content);
+      }
+    }
+    __handlePushClick() {
+      const accordionElement = this.shadowRoot.querySelector('#pushTabs');
+      const i = Math.floor(accordionElement.children.length / 2) + 1;
+      this.__collection = [
+        ...this.__collection,
+        {
+          invoker: `header ${i}`,
+          content: `content ${i}`,
+        },
+      ];
+    }
+  }
+  customElements.define('demo-distribute', DemoDistribute);
+
+  return previewHtml`<demo-distribute></demo-distribute>`;
+};
+```

package/docs/components/button/examples.md

@@ -0,0 +1,30 @@
+# Button >> Examples ||30
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-button.js';
+import iconSvg from './src/icon.svg.js';
+```
+
+## Icon button
+
+```js preview-story
+export const iconButton = () => html`<lion-button>${iconSvg(html)}Bug</lion-button>`;
+```
+
+## Icon only button
+
+When only an icon is used, make sure the button still have an accessible name, via `aria-label`.
+
+```js preview-story
+export const iconOnly = () => html`<lion-button aria-label="Bug">${iconSvg(html)}</lion-button>`;
+```
+
+## Multiple buttons inline
+
+```js preview-story
+export const mainAndIconButton = () => html`
+  <lion-button>Default</lion-button>
+  <lion-button>${iconSvg(html)} Bug</lion-button>
+`;
+```

package/docs/components/button/index.md

@@ -0,0 +1,3 @@
+# Button ||10
+
+-> go to Overview

package/docs/components/button/overview.md

@@ -0,0 +1,30 @@
+# Button >> Overview ||10
+
+A button web component that is easily stylable and accessible.
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-button.js';
+```
+
+```js preview-story
+export const main = () => html` <lion-button>Default</lion-button> `;
+```
+
+## Features
+
+- Clickable area that is bigger than visual size
+- A special `button-reset` and `button-submit` works with native form / inputs
+- `button-submit` has integration for implicit form submission similar to how native `<form>`, `<input>` and `<button>` work together.
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import { LionButton, LionButtonReset, LionButtonSubmit } from '@lion/ui/button.js';
+// or
+import '@lion/ui/define/lion-button.js';
+```

package/docs/components/button/src/icon.svg.js

@@ -0,0 +1,5 @@
+/**
+ * @param {Function} tag
+ */
+export default tag =>
+  tag`<svg focusable="false" style="width: 24px; height: 24px;" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M44.8,44.2c-0.3-0.1-6.9-2.3-10-8c-0.9-1.7-1.7-3.6-2.4-5.4c-1.4-3.4-2.7-6.6-4.6-6.8l0.1-1.9c3.1,0.2,4.5,3.8,6.2,7.9    c0.7,1.7,1.4,3.5,2.3,5.2c2.7,5.1,8.9,7.1,8.9,7.1L44.8,44.2z"/></g><g><path d="M19.8,61.7v-1.9c4.7,0,10.7-6.6,13.4-10.7c2.6-4,11.2-2.1,12.2-1.9l-0.4,1.8c-2.3-0.5-8.6-1.4-10.2,1.1    C32.7,53.4,25.9,61.7,19.8,61.7z"/></g><g><path d="M25.1,86.5l-0.3-1.9c6-0.9,6.9-9.7,7.6-16.8c0.2-1.9,0.4-3.6,0.6-5.1c1.4-7.4,11.6-10.3,12.1-10.4l0.5,1.8    c-0.1,0-9.6,2.7-10.7,8.9c-0.3,1.4-0.4,3.1-0.6,5C33.5,75.3,32.5,85.4,25.1,86.5z"/></g><g><path d="M45.8,25.4c-0.1-1.4-0.1-4.7,0.9-5.7c0.3-0.3,0.6-0.4,1-0.4v1.9c0.2,0,0.3-0.1,0.4-0.2c-0.3,0.4-0.5,2.4-0.4,4.4    L45.8,25.4z"/></g><g><path d="M43.6,28c-0.3-0.3-6.8-6.2-6.8-11.4c0-5,1.4-8.7,1.5-8.8L40,8.5c0,0-1.3,3.6-1.3,8.1c0,4.4,6.2,10,6.2,10L43.6,28z"/></g><g><path d="M54.6,54.5c0-2.7,0.8-13-0.3-13c-1.1,0-1.8-2.2-1.8-3.4c0-1.1,4.1-3.4,4.1-8.1c0-4.8-6.6-5.6-6.6-5.6s-6.6,0.8-6.6,5.6    c0,4.8,4.1,7,4.1,8.1c0,1.1-0.7,3.4-1.8,3.4c-1.1,0-0.3,10.4-0.3,13c0,2.7-5.3,7.7-5.3,17.2s5.9,19.5,9.9,19.5    c4.1,0,9.9-9.9,9.9-19.5S54.6,57.2,54.6,54.5z"/></g><g><path d="M50,92.2c-5,0-10.9-11.1-10.9-20.4c0-6.5,2.4-11,4-14c0.7-1.4,1.4-2.6,1.4-3.3c0-0.6-0.1-1.8-0.1-3.1    c-0.3-7.6-0.2-9.8,0.5-10.5c0.2-0.2,0.5-0.4,0.8-0.4c0.3-0.1,0.8-1.4,0.9-2.3c-0.1-0.2-0.5-0.6-0.8-1c-1.2-1.4-3.3-3.7-3.3-7.3    c0-5.5,7.1-6.5,7.4-6.5c0.1,0,0.2,0,0.2,0c0.3,0,7.4,1,7.4,6.5c0,3.6-2.1,5.9-3.3,7.3c-0.3,0.3-0.7,0.8-0.8,1    c0,0.9,0.6,2.2,0.9,2.3c0.3,0,0.6,0.1,0.8,0.4c0.7,0.8,0.8,2.9,0.5,10.5c-0.1,1.3-0.1,2.4-0.1,3.1c0,0.7,0.6,1.9,1.4,3.3    c1.6,3,4,7.5,4,14C60.9,81.1,55,92.2,50,92.2z M46.2,42.4c-0.3,1.4-0.1,6.5,0,9c0.1,1.3,0.1,2.5,0.1,3.2c0,1.2-0.7,2.4-1.6,4.1    c-1.6,3-3.7,7.1-3.7,13.1c0,9.4,5.7,18.5,9,18.5s9-9.2,9-18.5c0-6-2.2-10.1-3.7-13.1c-0.9-1.7-1.6-3-1.6-4.1    c0-0.7,0.1-1.8,0.1-3.2c0.1-2.5,0.3-7.6,0-9c-1.6-0.5-2.2-3.1-2.2-4.2c0-0.7,0.5-1.3,1.3-2.1c1.2-1.3,2.8-3.1,2.8-6    c0-3.6-4.8-4.5-5.6-4.6c-0.8,0.1-5.6,1.1-5.6,4.6c0,2.8,1.6,4.7,2.8,6c0.7,0.8,1.3,1.4,1.3,2.1C48.4,39.3,47.8,41.9,46.2,42.4z"/></g><g><path d="M55.2,44.2l-0.6-1.8c0.1,0,6.2-2.1,9-7.1c0.9-1.7,1.6-3.4,2.3-5.2c1.7-4.2,3.2-7.7,6.2-7.9l0.1,1.9    c-1.9,0.1-3.2,3.3-4.6,6.8c-0.7,1.8-1.5,3.6-2.4,5.4C62.1,41.9,55.4,44.1,55.2,44.2z"/></g><g><path d="M80.2,61.7c-6.1,0-12.9-8.4-15-11.6c-1.6-2.5-8-1.6-10.2-1.1l-0.4-1.8c1-0.2,9.6-2.1,12.2,1.9c2.7,4.1,8.7,10.7,13.4,10.7    V61.7z"/></g><g><path d="M74.9,86.5c-7.4-1.1-8.5-11.2-9.2-18.5c-0.2-1.8-0.4-3.6-0.6-5c-1.1-6.3-10.6-8.9-10.7-8.9l0.5-1.8    c0.4,0.1,10.7,3,12.1,10.4c0.3,1.5,0.4,3.2,0.6,5.1c0.7,7.1,1.6,16,7.6,16.9L74.9,86.5z"/></g><g><path d="M54.2,25.4l-1.9-0.1c0.1-1.9-0.1-4-0.4-4.4c0,0,0.2,0.2,0.4,0.2v-1.9c0.4,0,0.7,0.2,1,0.4C54.3,20.7,54.3,24.1,54.2,25.4z    "/></g><g><path d="M56.4,28l-1.3-1.4c0.1-0.1,6.2-5.7,6.2-10c0-4.6-1.3-8.1-1.3-8.1l1.8-0.7c0.1,0.2,1.5,3.9,1.5,8.8    C63.2,21.8,56.6,27.8,56.4,28z"/></g></g></svg>`;

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

@@ -0,0 +1,106 @@
+# Button >> Use Cases ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-button.js';
+```
+
+## With click handler
+
+```js preview-story
+export const handler = () => html`
+  <lion-button @click="${ev => console.log('clicked/spaced/entered', ev)}">
+    Click | Space | Enter me and see log
+  </lion-button>
+`;
+```
+
+## Disabled button
+
+```js preview-story
+export const disabled = () => html`<lion-button disabled>Disabled</lion-button>`;
+```
+
+## Minimum click area
+
+The minimum click area needs to be at least `44px` by `44px` according to [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced).
+
+```js preview-story
+export const minimumClickArea = () => html` <style>
+    .small {
+      padding: 4px;
+      line-height: 1em;
+    }
+    .small::before {
+      border: 1px dashed #000;
+    }
+  </style>
+  <lion-button class="small">xs</lion-button>`;
+```
+
+## Usage with native form
+
+`<lion-button-reset>` and `<lion-button-submit>` are especially created to supports the following use cases:
+
+- Submit on button click
+- Submit on button enter or space keypress
+- Submit on enter keypress inside an input
+- Reset native form fields when using type="reset"
+
+```js preview-story
+export const withinForm = () => html`
+  <form
+    @submit=${ev => {
+      ev.preventDefault();
+      console.log('submit handler', ev.target);
+    }}
+  >
+    <label for="firstNameId">First name</label>
+    <input id="firstNameId" name="firstName" />
+    <label for="lastNameId">Last name</label>
+    <input id="lastNameId" name="lastName" />
+    <lion-button-submit @click=${ev => console.log('click submit handler', ev.target)}
+      >Submit</lion-button-submit
+    >
+    <lion-button-reset @click=${ev => console.log('click reset handler', ev.target)}
+      >Reset</lion-button-reset
+    >
+  </form>
+`;
+```
+
+Important notes:
+
+- A `<lion-button-submit>` is mandatory for the last use case, if you have multiple inputs. This is native behaviour.
+- `@click` on `<lion-button-submit>` and `@submit` on `<form>` are triggered by these use cases. We strongly encourage you to listen to the submit handler if your goal is to do something on form-submit.
+- To prevent form submission full page reloads, add a **submit handler on the form** `@submit` with `event.preventDefault()`. Adding it on the `<lion-button-submit>` is not enough.
+
+## Considerations
+
+### Why a Web Component?
+
+There are multiple reasons why we used a Web Component as opposed to a CSS component.
+
+- **Target size**: The minimum target size is 40 pixels, which makes even the small buttons easy to activate. A container element was needed to make this size possible.
+- **Advanced styling**: There are advanced styling options regarding icons in buttons, where it is a lot more maintainable to handle icons in our button using slots. An example is that a sticky icon-only buttons may looks different from buttons which have both icons and text.
+- **Native form integration**: The `<lion-button-submit>` works with native `<form>` submission, and even implicit form submission on-enter. A lot of delegation logic had to be created for this to work.
+
+### Event target
+
+We want to ensure that the event target returned to the user is `<lion-button>`, not `<button>`. Therefore, simply delegating the click to the native button immediately, is not desired. Instead, we catch the click event in the `<lion-button>`, and ensure delegation inside of there.
+
+### Flashing a native button click as a direct child of form
+
+By delegating the `click()` to the native button, it will bubble back up to `<lion-button-reset>` and `<lion-button-submit>` which would cause duplicate actions. We have to simulate the full `.click()` however, otherwise form submission is not triggered. So this bubbling cannot be prevented.
+Therefore, on click, we flash a `<button>` to the form as a direct child and fire the click on that button. We then immediately remove that button. This is a fully synchronous process; users or developers will not notice this, it should not cause problems.
+
+### Native button & implicit form submission
+
+Flashing the button in the way we do solves almost all issues except for one.
+One of the specs of W3C is that when you have a form with multiple inputs,
+pressing enter while inside one of the inputs only triggers a form submit if that form has a button of type submit.
+
+To get this particular implicit form submission to work, having a native button in our `<lion-button-submit>` is a hard requirement.
+Therefore, not only do we flash a native button on the form to delegate `<lion-button-submit>` trigger to `<button>`
+and thereby trigger form submission, we **also** add a native `button` inside the `<lion-button-submit>`
+whose `type` property is synchronized with the type of the `<lion-button-submit>`.

package/docs/components/calendar/index.md

@@ -0,0 +1,3 @@
+# Calendar ||10
+
+-> go to Overview

package/docs/components/calendar/overview.md

@@ -0,0 +1,49 @@
+# Calendar >> Overview ||10
+
+A reusable and accessible calendar view web component.
+
+```js script
+import { html, css } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-calendar.js';
+```
+
+```js preview-story
+export const main = () => {
+  return html`
+    <style>
+      .demo-calendar {
+        border: 1px solid #adadad;
+        box-shadow: 0 0 16px #ccc;
+        max-width: 500px;
+      }
+    </style>
+    <lion-calendar class="demo-calendar"></lion-calendar>
+  `;
+};
+```
+
+## Features
+
+- fully accessible keyboard navigation (Arrow Keys, PgUp, PgDn, ALT+PgUp, ALT+PgDn)
+- **minDate**: disables all dates before a given date
+- **maxDate**: disables all dates after a given date
+- **disableDates**: disables some dates within an available range
+- **selectedDate**: currently selected date
+- **centralDate**: date that determines the currently visible month and that will be focused when keyboard moves the focus to the month grid
+- **focusedDate**: (getter only) currently focused date (if there is any with real focus)
+- **focusDate(date)**: focus on a certain date
+- **focusSelectedDate()**: focus on the current selected date
+- **focusCentralDate()**: focus on the current central date
+- **firstDayOfWeek**: typically Sunday (default) or Monday
+- **weekdayHeaderNotation**: long/short/narrow for the current locale (e.g. Thursday/Thu/T)
+- **locale**: different locale for the current component only
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import '@lion/ui/define/lion-calendar.js';
+```