@lion/ui 0.24.0 → 0.26.0

package/docs/components/tabs/src/lea-tab.js

@@ -1,50 +0,0 @@
-import { css, html, LitElement } from 'lit';
-
-export class LeaTab extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        box-shadow: -4px 0 0 rgba(0, 0, 0, 0.2);
-        background: #ad1c1c;
-        background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
-        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
-        color: #fff;
-        float: left;
-        font:
-          bold 12px/35px 'Lucida sans',
-          Arial,
-          Helvetica;
-        height: 35px;
-        padding: 0 30px;
-        text-decoration: none;
-      }
-
-      :host(:hover) {
-        background: #c93434;
-        background: linear-gradient(220deg, transparent 10px, #c93434 10px);
-      }
-
-      :host(:focus) {
-        border-radius: 4px;
-        box-shadow:
-          0 0 8px #9fcaea,
-          0 0 0 1px #559bd1;
-
-        /* outline: 0; */
-      }
-
-      :host([selected]) {
-        background: #fff;
-        background: linear-gradient(220deg, transparent 10px, #fff 10px);
-        text-shadow: none;
-        color: #333;
-      }
-    `;
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-customElements.define('lea-tab', LeaTab);

package/docs/components/tabs/src/lea-tabs.js

@@ -1,28 +0,0 @@
-import { css } from 'lit';
-import { LionTabs } from '@lion/ui/tabs.js';
-
-export class LeaTabs extends LionTabs {
-  static get styles() {
-    return [
-      ...super.styles,
-      css`
-        :host {
-          background: #222;
-          display: block;
-          padding: 20px;
-        }
-      `,
-    ];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._setupFeature();
-  }
-
-  _setupFeature() {
-    // being awesome
-  }
-}
-
-customElements.define('lea-tabs', LeaTabs);

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

@@ -1,231 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Tabs
-  - Use Cases
-eleventyNavigation:
-  key: 'Tabs: Use Cases'
-  order: 20
-  parent: Tabs
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { LitElement, html } from '@mdjs/mdjs-preview';
-
-import '@lion/ui/define/lion-tabs.js';
-```
-
-## Selected Index
-
-You can set the `selectedIndex` to select a certain tab.
-
-```js preview-story
-export const selectedIndex = () => html`
-  <lion-tabs .selectedIndex="${1}">
-    <button slot="tab">Info</button>
-    <p slot="panel">Info page with lots of information about us.</p>
-    <button slot="tab">Work</button>
-    <p slot="panel">Work page that showcases our work.</p>
-  </lion-tabs>
-`;
-```
-
-## Slots Order
-
-The tab and panel slots are ordered by DOM order.
-
-This means you can switch the grouping in your `lion-tabs` from tab + panel to all tabs first or all panels first.
-
-```js preview-story
-export const slotsOrder = () => html`
-  <lion-tabs>
-    <button slot="tab">Info</button>
-    <button slot="tab">Work</button>
-    <p slot="panel">Info page with lots of information about us.</p>
-    <p slot="panel">Work page that showcases our work.</p>
-  </lion-tabs>
-`;
-```
-
-## Disabled tabs
-
-You can disable specific tabs by adding the `disabled` attribute to a tab button.
-
-When using the arrow keys to switch tabs, it will skip disabled tabs, but it will not cycle from last to first or vice versa.
-
-```js preview-story
-export const tabsDisabled = () => html`
-  <lion-tabs>
-    <button slot="tab">tab 1</button>
-    <div slot="panel">panel 1</div>
-    <button slot="tab" disabled>tab 2</button>
-    <div slot="panel">panel 2</div>
-    <button slot="tab" disabled>tab 3</button>
-    <div slot="panel">panel 3</div>
-    <button slot="tab">tab 4</button>
-    <div slot="panel">panel 4</div>
-    <button slot="tab">tab 5</button>
-    <div slot="panel">panel 5</div>
-    <button slot="tab" disabled>tab 6</button>
-    <div slot="panel">panel 6</div>
-  </lion-tabs>
-`;
-```
-
-## Nesting tabs
-
-You can include tabs within tabs
-
-```js preview-story
-export const nestedTabs = () => html`
-  <lion-tabs>
-    <button slot="tab">Movies</button>
-    <button slot="tab">Work</button>
-    <div slot="panel">
-      <p>Find some more info about our favorite movies:</p>
-      <lion-tabs>
-        <button slot="tab">Info about Cars</button>
-        <button slot="tab">Info about Toy Story</button>
-        <p slot="panel">
-          Cars is a 2006 American computer-animated comedy film produced by Pixar Animation Studios
-          and released by Walt Disney Pictures.
-        </p>
-        <p slot="panel">
-          The feature film directorial debut of John Lasseter, it was the first entirely
-          computer-animated feature film, as well as the first feature film from Pixar.
-        </p>
-      </lion-tabs>
-    </div>
-    <p slot="panel">Work page that showcases our work.</p>
-  </lion-tabs>
-`;
-```
-
-## Distribute New Elements
-
-Below, we demonstrate on how you could dynamically add new tab + panels.
-
-```js preview-story
-export const distributeNewElement = () => {
-  const tagName = 'demo-tabs-add-dynamically';
-  if (!customElements.get(tagName)) {
-    customElements.define(
-      tagName,
-      class extends LitElement {
-        static get properties() {
-          return {
-            __collection: { type: Array },
-          };
-        }
-        render() {
-          return html`
-            <h3>Append</h3>
-            <lion-tabs id="appendTabs">
-              <button slot="tab">tab 1</button>
-              <p slot="panel">panel 1</p>
-              <button slot="tab">tab 2</button>
-              <p slot="panel">panel 2</p>
-            </lion-tabs>
-            <button @click="${this.__handleAppendClick}">Append</button>
-            <hr />
-            <h3>Push</h3>
-            <lion-tabs id="pushTabs">
-              <button slot="tab">tab 1</button>
-              <p slot="panel">panel 1</p>
-              <button slot="tab">tab 2</button>
-              <p slot="panel">panel 2</p>
-              ${this.__collection.map(
-                item => html`
-                  <button slot="tab">${item.button}</button>
-                  <p slot="panel">${item.panel}</p>
-                `,
-              )}
-            </lion-tabs>
-            <button @click="${this.__handlePushClick}">Push</button>
-          `;
-        }
-        constructor() {
-          super();
-          this.__collection = [];
-        }
-        __handleAppendClick() {
-          const tabsElement = this.shadowRoot.querySelector('#appendTabs');
-          const c = 2;
-          const n = Math.floor(tabsElement.children.length / 2);
-          for (let i = n + 1; i < n + c; i += 1) {
-            const tab = document.createElement('button');
-            tab.setAttribute('slot', 'tab');
-            tab.innerText = `tab ${i}`;
-            const panel = document.createElement('p');
-            panel.setAttribute('slot', 'panel');
-            panel.innerText = `panel ${i}`;
-            tabsElement.append(tab);
-            tabsElement.append(panel);
-          }
-        }
-        __handlePushClick() {
-          const tabsElement = this.shadowRoot.querySelector('#pushTabs');
-          const i = Math.floor(tabsElement.children.length / 2) + 1;
-          this.__collection = [
-            ...this.__collection,
-            {
-              button: `tab ${i}`,
-              panel: `panel ${i}`,
-            },
-          ];
-        }
-      },
-    );
-  }
-  return html` <demo-tabs-add-dynamically></demo-tabs-add-dynamically> `;
-};
-```
-
-One way is by creating the DOM elements and appending them as needed.
-
-Inside your `lion-tabs` extension, an example for appending nodes on a certain button click:
-
-```js
-__handleAppendClick() {
-  const tabsAmount = this.children.length / 2;
-  const tab = document.createElement('button');
-  tab.setAttribute('slot', 'tab');
-  tab.innerText = `tab ${tabsAmount + 1}`;
-  const panel = document.createElement('p');
-  panel.setAttribute('slot', 'panel');
-  panel.innerText = `panel ${tabsAmount + 1}`;
-  this.append(tab);
-  this.append(panel);
-}
-```
-
-The other way is by adding data to a Lit property where you loop over this property in your template.
-You then need to ensure this causes a re-render.
-
-```js
-__handlePushClick() {
-  const tabsAmount = this.children.length;
-  myCollection = [
-    ...myCollection,
-    {
-      button: `tab ${tabsAmount + 1}`,
-      panel: `panel ${tabsAmount + 1}`,
-    },
-  ];
-  renderMyCollection();
-}
-```
-
-Make sure your template re-renders when myCollection is updated.
-
-```html
-<lion-tabs id="pushTabs">
-  ${myCollection.map(item => html`
-  <button slot="tab">${item.button}</button>
-  <p slot="panel">${item.panel}</p>
-  `)}
-</lion-tabs>
-```

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

@@ -1,57 +0,0 @@
----
-parts:
-  - API Table
-  - Textarea
-title: 'Textarea: API Table'
-eleventyNavigation:
-  key: API Table >> Textarea
-  title: API Table
-  order: 90
-  parent: Textarea
----
-# Textarea: API Table
- 
-
-## class: `LionTextarea`, `lion-textarea`
-
-### Fields
-
-| Name                     | Privacy   | Type      | Default | Description | Inherited From        |
-| ------------------------ | --------- | --------- | ------- | ----------- | --------------------- |
-| `maxRows`                | public    | `number`  | `6`     |             |                       |
-| `placeholder`            | public    | `string`  | `''`    |             |                       |
-| `readOnly`               | public    | `boolean` | `false` |             |                       |
-| `rows`                   | public    | `number`  | `2`     |             |                       |
-| `slots`                  | public    |           |         |             |                       |
-| `updateComplete`         | public    |           |         |             |                       |
-| `_feedbackConditionMeta` | protected |           |         |             | LionField             |
-| `_focusableNode`         | protected |           |         |             | LionField             |
-| `_inputNode`             | protected |           |         |             | LionFieldWithTextArea |
-
-### Methods
-
-| Name                    | Privacy   | Description                                                                                    | Parameters   | Return | Inherited From |
-| ----------------------- | --------- | ---------------------------------------------------------------------------------------------- | ------------ | ------ | -------------- |
-| `clear`                 | public    | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) |              |        | LionField      |
-| `reset`                 | public    | Resets modelValue to initial value.
Interaction states are cleared                         |              |        | LionField      |
-| `resetInteractionState` | public    |                                                                                                |              |        | LionField      |
-| `resizeTextarea`        | public    |                                                                                                |              |        |                |
-| `setTextareaMaxHeight`  | public    | To support maxRows we need to set max-height of the textarea                                   |              |        |                |
-| `_onChange`             | protected | Dispatches custom bubble event                                                                 | `ev: Event=` |        | LionField      |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name          | Field       | Inherited From |
-| ------------- | ----------- | -------------- |
-| `max-rows`    | maxRows     |                |
-| `rows`        | rows        |                |
-| `readonly`    | readOnly    |                |
-| `placeholder` | placeholder |                |
-
-<hr/>

package/docs/components/textarea/index.md

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

package/docs/components/textarea/overview.md

@@ -1,47 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Textarea
-  - Overview
-eleventyNavigation:
-  key: 'Textarea: Overview'
-  order: 10
-  parent: Textarea
-  title: Overview
----
-
-# Overview
-
-A webcomponent that enhances the functionality of the native `<input type="textarea">` element.
-Its purpose is to provide a way for users to write text that is multiple lines long.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-textarea.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-textarea label="Stops growing after 4 rows" max-rows="4"></lion-textarea>
-`;
-```
-
-## Features
-
-- Default rows is 2 and it will grow to max-rows of 6.
-- `max-rows` attribute to set the amount of rows it should resize to, before it will scroll
-- `rows` attribute to set the minimum amount of rows
-- `readonly` attribute to prevent changing the content
-- Uses Intersection Observer for detecting visibility change, making sure it resizes
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionTextarea } from '@lion/ui/textarea.js';
-// or
-import '@lion/ui/define/lion-textarea.js';
-```

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

@@ -1,107 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Textarea
-  - Use Cases
-eleventyNavigation:
-  key: 'Textarea: Use Cases'
-  order: 20
-  parent: Textarea
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-textarea.js';
-```
-
-## Prefilled
-
-You can prefill the textarea. If you want to prefill on multiline, you will have to add newline characters `'\n'`.
-
-```js preview-story
-export const prefilled = () => html`
-  <lion-textarea
-    label="Prefilled"
-    .modelValue="${['batman', 'and', 'robin'].join('\n')}"
-  ></lion-textarea>
-`;
-```
-
-## Disabled
-
-The textarea can be disabled with the `disabled` attribute.
-
-```js preview-story
-export const disabled = () => html` <lion-textarea label="Disabled" disabled></lion-textarea> `;
-```
-
-## Readonly
-
-`readonly` attribute indicate that you can't change the content. Compared with `disabled` attribute, the `readonly` attribute doesn't prevent clicking or selecting the element.
-
-```js preview-story
-export const readonly = () => html`
-  <lion-textarea
-    label="Readonly"
-    readonly
-    .modelValue="${['batman', 'and', 'robin'].join('\n')}"
-  ></lion-textarea>
-`;
-```
-
-## Stop growing
-
-Use the `max-rows` attribute to make it stop growing after a certain amount of lines.
-
-```js preview-story
-export const stopGrowing = () => html`
-  <lion-textarea
-    label="Stop growing"
-    max-rows="4"
-    .modelValue="${['batman', 'and', 'robin'].join('\n')}"
-  ></lion-textarea>
-`;
-```
-
-## Non-growing
-
-To have a fixed size provide `rows` and `max-rows` with the same value.
-
-```js preview-story
-export const nonGrowing = () => html`
-  <lion-textarea label="Non Growing" rows="3" max-rows="3"></lion-textarea>
-`;
-```
-
-## Intersection Observer
-
-It could be that your textarea is inside a hidden container, for example for a dialog or accordion or tabs.
-When it is hidden, the resizing is calculated based on the visible space of the text.
-Therefore, an Intersection Observer observes visibility changes of the textarea relative to the viewport, and resizes the textarea when a visibility change happens.
-
-> For old browsers like old Edge or IE11, a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) is required to be added on the application level for this to work.
-> For most cases, the optimized default will suffice.
-
-In the demo below you can see that the textarea is correctly calculated to 4 maximum rows, whereas without the observer, it would be on 2 rows and only resize on user input.
-
-```js preview-story
-export const hidden = () => html`
-  <div style="display: none">
-    <lion-textarea
-      .modelValue="${'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
-      label="Stops growing after 4 rows"
-      max-rows="4"
-    ></lion-textarea>
-  </div>
-  <button
-    @click=${e =>
-      (e.target.previousElementSibling.style.display =
-        e.target.previousElementSibling.style.display === 'block' ? 'none' : 'block')}
-  >
-    Toggle display
-  </button>
-`;
-```

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

@@ -1,62 +0,0 @@
----
-parts:
-  - API Table
-  - Tooltip
-title: 'Tooltip: API Table'
-eleventyNavigation:
-  key: API Table >> Tooltip
-  title: API Table
-  order: 90
-  parent: Tooltip
----
-# Tooltip: API Table
- 
-
-## class: `LionTooltip`, `lion-tooltip`
-
-### Fields
-
-| Name                         | Privacy   | Type                     | Default         | Description                                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
-| ---------------------------- | --------- | ------------------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `config`                     | public    | `Partial<OverlayConfig>` | `{}`            | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
-| `hasArrow`                   | public    | `boolean`                | `false`         | Whether an arrow should be displayed                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `invokerRelation`            | public    | `'label'\|'description'` | `'description'` | Decides whether the tooltip invoker text should be considered a description&#xA;(sets aria-describedby) or a label (sets aria-labelledby).                                                                                                                                                                                                                                                                |                |
-| `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   |
-| `_overlayBackdropNode`       | protected |                          |                 |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `_overlayContentNode`        | protected |                          |                 |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `_overlayContentWrapperNode` | protected |                          |                 |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `_overlayInvokerNode`        | protected |                          |                 | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\` | OverlayMixin   |
-| `_overlayReferenceNode`      | protected |                          |                 |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-
-### 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   |
-| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
-| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
-| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
-| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
-| `_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   |
-| `_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   |
-| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-
-### Events
-
-| Name             | Type          | Description | Inherited From |
-| ---------------- | ------------- | ----------- | -------------- |
-| `opened-changed` | `CustomEvent` |             | OverlayMixin   |
-
-### Attributes
-
-| Name               | Field           | Inherited From |
-| ------------------ | --------------- | -------------- |
-| `invoker-relation` | invokerRelation |                |
-| `opened`           | opened          | OverlayMixin   |
-
-<hr/>

package/docs/components/tooltip/examples.md

@@ -1,51 +0,0 @@
----
-title: 'Examples'
-parts:
-  - Tooltip
-  - Examples
-eleventyNavigation:
-  key: 'Tooltip: Examples'
-  order: 30
-  parent: Tooltip
-  title: Examples
----
-
-# Examples
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-tooltip.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <style>
-    .demo-tooltip-invoker {
-      margin: 50px;
-    }
-
-    .demo-tooltip-content {
-      display: block;
-      font-size: 16px;
-      color: white;
-      background-color: black;
-      border-radius: 4px;
-      padding: 8px;
-    }
-
-    .demo-box-placements {
-      display: flex;
-      flex-direction: column;
-      margin: 40px 0 0 200px;
-    }
-
-    .demo-box-placements lion-tooltip {
-      margin: 20px;
-    }
-  </style>
-  <lion-tooltip has-arrow>
-    <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-    <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
-  </lion-tooltip>
-`;
-```

package/docs/components/tooltip/index.md

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