@lion/ui 0.25.0 → 0.26.0

package/docs/components/progress-indicator/examples.md

@@ -1,137 +0,0 @@
----
-title: 'Examples'
-parts:
-  - Progress Indicator
-  - Examples
-eleventyNavigation:
-  key: 'Progress Indicator: Examples'
-  order: 30
-  parent: Progress Indicator
-  title: Examples
----
-
-# Examples
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-progress-indicator.js';
-import './assets/my-indeterminate-progress-spinner.js';
-import './assets/my-determinate-progress-bar.js';
-
-const changeProgress = () => {
-  const progressBar = document.getElementsByName('my-bar')[0];
-  progressBar.value = Math.floor(Math.random() * 101);
-};
-```
-
-## Styled progress bar example
-
-Add custom styles and more features by extending the `LionProgressIndicator`.
-
-```js
-export class MyDeterminateProgressBar extends LionProgressIndicator {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          position: relative;
-          width: 100%;
-          height: 6px;
-          overflow: hidden;
-          background-color: #eee;
-        }
-
-        .progress__filled {
-          height: inherit;
-          background-color: green;
-          border-radius: inherit;
-        }
-      `,
-    ];
-  }
-
-  _graphicTemplate() {
-    return html`
-      <div class="progress__filled" style="width: \${this._progressPercentage}%"></div>
-    `;
-  }
-}
-```
-
-By given the progress-indicator a value it becomes determinate.
-The min is automatically set to "0" and max to "100", but they can be set to your local needs.
-
-```js preview-story
-export const progressBarDemo = () => html`
-  <my-determinate-progress-bar
-    aria-label="Interest rate"
-    name="my-bar"
-    value="50"
-  ></my-determinate-progress-bar>
-  <button @click="${changeProgress}">Randomize Value</button>
-`;
-```
-
-## Styled progress spinner example
-
-`LionProgressIndicator` is designed to be extended to add visuals. Implement the `_graphicTemplate()` method to set the rendered content and apply styles normally.
-
-```js
-class MyIndeterminateProgressSpinner extends LionProgressIndicator {
-  static get styles() {
-    return [
-      css`
-        .progress__icon {
-          display: inline-block;
-          width: 48px;
-          height: 48px;
-          animation: spinner-rotate 2s linear infinite;
-        }
-
-        .progress__filled {
-          animation: spinner-dash 1.35s ease-in-out infinite;
-          fill: none;
-          stroke-width: 6px;
-          stroke: var(--primary-color);
-        }
-
-        @keyframes spinner-rotate {
-          to {
-            transform: rotate(360deg);
-          }
-        }
-
-        @keyframes spinner-dash {
-          0% {
-            stroke-dasharray: 6, 122;
-            stroke-dashoffset: 0;
-          }
-          50% {
-            stroke-dasharray: 100, 28;
-            stroke-dashoffset: -16;
-          }
-          100% {
-            stroke-dasharray: 6, 122;
-            stroke-dashoffset: -127;
-          }
-        }
-      `,
-    ];
-  }
-
-  _graphicTemplate() {
-    return html`
-      <svg class="progress__icon" viewBox="20 20 47 47">
-        <circle class="progress__filled" cx="44" cy="44" r="20.2" />
-      </svg>
-    `;
-  }
-}
-```
-
-```js preview-story
-export const main = () => html`
-  <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner>
-`;
-```

package/docs/components/progress-indicator/index.md

@@ -1,13 +0,0 @@
----
-title: Progress Indicator
-parts:
-  - Progress Indicator
-eleventyNavigation:
-  key: Progress Indicator
-  order: 30
-  title: Progress Indicator
----
-
-# Progress Indicator
-
--> go to Overview

package/docs/components/progress-indicator/overview.md

@@ -1,48 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Progress Indicator
-  - Overview
-eleventyNavigation:
-  key: 'Progress Indicator: Overview'
-  order: 10
-  parent: Progress Indicator
-  title: Overview
----
-
-# Overview
-
-A web component that implements accessibility requirements for progress indicators.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-progress-indicator.js';
-```
-
-```html
-<lion-progress-indicator aria-label="Interest rate" value="50"></lion-progress-indicator>
-```
-
-## Features
-
-This component is designed to be extended in order to add visuals.
-
-- Can be indeterminate or determinate, depending on whether it has a value.
-- Accessibility compliant
-- Localized "Loading" label in case of an indeterminate progress-indicator
-- Implementation independent of visuals
-- `value`: progress value, setting this makes the progress-indicator determinate.
-- `min`: progress min value
-- `max`: progress max value
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
-// or
-import '@lion/ui/define/lion-progress-indicator.js';
-```

package/docs/components/radio-group/api-table.md

@@ -1,63 +0,0 @@
----
-parts:
-  - API Table
-  - Radio Group
-title: 'Radio Group: API Table'
-eleventyNavigation:
-  key: API Table >> Radio Group
-  title: API Table
-  order: 90
-  parent: Radio Group
----
-# Radio Group: API Table
- 
-
-## class: `LionRadio`, `lion-radio`
-
-### Fields
-
-| Name                     | Privacy   | Type               | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------ | --------- | ------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `placeholder`            | public    | `string`           | `''`     |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `readOnly`               | public    | `boolean`          | `false`  | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
-| `slots`                  | public    |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `type`                   | public    | `string`           | `'text'` |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_feedbackConditionMeta` | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`         | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_inputNode`             | protected | `HTMLInputElement` |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-
-### 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      |
-| `_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 |
-| ------------- | ----------- | -------------- |
-| `readonly`    | readOnly    | LionInput      |
-| `type`        | type        | LionInput      |
-| `placeholder` | placeholder | LionInput      |
-
-<hr/>
- 
-
-## class: `LionRadioGroup`, `lion-radio-group`
-
-### Methods
-
-| Name         | Privacy | Description | Parameters | Return | Inherited From |
-| ------------ | ------- | ----------- | ---------- | ------ | -------------- |
-| `resetGroup` | public  |             |            |        |                |
-
-<hr/>

package/docs/components/radio-group/index.md

@@ -1,13 +0,0 @@
----
-title: Radio Group
-parts:
-  - Radio Group
-eleventyNavigation:
-  key: Radio Group
-  order: 30
-  title: Radio Group
----
-
-# Radio Group
-
--> go to Overview

package/docs/components/radio-group/overview.md

@@ -1,58 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Radio Group
-  - Overview
-eleventyNavigation:
-  key: 'Radio Group: Overview'
-  order: 10
-  parent: Radio Group
-  title: Overview
----
-
-# Overview
-
-A web component that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
-
-You should use our `radio` inside this element.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-radio-group.js';
-import '@lion/ui/define/lion-radio.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
-    <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
-    <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
-    <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-  </lion-radio-group>
-`;
-```
-
-- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/components/form/overview.md)'s serialization result.
-- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/components/select/overview.md) instead.
-
-## Features
-
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/components/fieldset/overview.md), it has all the features a fieldset has.
-
-- Get or set the checked value of the group:
-  - modelValue (default) - `checkedValue()`
-  - formattedValue - `formattedValue()`
-  - serializedValue - `serializedValue()`
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionRadioGroup, LionRadio } from '@lion/ui/radio-group.js';
-// or
-import '@lion/ui/define/lion-radio-group.js';
-import '@lion/ui/define/lion-radio.js';
-```

package/docs/components/radio-group/use-cases.md

@@ -1,146 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Radio Group
-  - Use Cases
-eleventyNavigation:
-  key: 'Radio Group: Use Cases'
-  order: 20
-  parent: Radio Group
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-radio-group.js';
-import '@lion/ui/define/lion-radio.js';
-```
-
-## Model value
-
-The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
-
-Given the dinosaur example above, say that we were to select the last option (diplodocus).
-
-Then the `modelValue` of the `lion-radio-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-radio-group');
-groupElement.modelValue;
-  => "diplodocus";
-```
-
-## The `name` attribute
-
-The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.
-
-## Pre-select
-
-You can pre-select an option by adding the checked attribute to the selected `lion-radio`.
-
-```js preview-story
-export const preSelect = () => html`
-  <lion-radio-group name="dinos_2" label="What are your favourite dinosaurs?">
-    <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
-    <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" checked></lion-radio>
-    <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-  </lion-radio-group>
-`;
-```
-
-## Disabled
-
-You can disable a specific `lion-radio` option by adding the `disabled` attribute.
-
-```js preview-story
-export const disabledRadio = () => html`
-  <lion-radio-group name="dinos_4" label="What are your favourite dinosaurs?">
-    <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
-    <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" disabled></lion-radio>
-    <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-  </lion-radio-group>
-`;
-```
-
-You can do the same thing for the entire group by setting the `disabled` attribute on the `lion-radio-group` element.
-
-```js preview-story
-export const disabledGroup = () => html`
-  <lion-radio-group name="dinos_6" label="What are your favourite dinosaurs?" disabled>
-    <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
-    <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
-    <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-  </lion-radio-group>
-`;
-```
-
-## Label
-
-You can use `slot="label"` instead of the `label` attribute for defining more complex labels, such as containing screen reader only text or an anchor.
-
-```js preview-story
-export const label = () => html`
-  <lion-radio-group name="dinos_7" label="Favourite dinosaur">
-    <lion-radio .choiceValue="${'allosaurus'}">
-      <label slot="label"><strong>allosaurus</strong></label>
-    </lion-radio>
-    <lion-radio .choiceValue="${'brontosaurus'}">
-      <label slot="label"><strong>brontosaurus</strong></label>
-    </lion-radio>
-    <lion-radio .choiceValue="${'diplodocus'}">
-      <label slot="label"><strong>diplodocus</strong></label>
-    </lion-radio>
-  </lion-radio-group>
-`;
-```
-
-## Help text
-
-You can add help text on each checkbox with `help-text` attribute on the `<lion-radio>`.
-
-```js preview-story
-export const helpText = () => html`
-  <lion-radio-group name="dinosTwo" label="Favourite dinosaur">
-    <lion-radio
-      label="allosaurus"
-      .choiceValue="${'allosaurus'}"
-      help-text="Allosaurus is a genus of carnivorous theropod dinosaur that lived 155 to 145 million years ago during the late Jurassic period"
-    ></lion-radio>
-    <lion-radio
-      label="brontosaurus"
-      .choiceValue="${'brontosaurus'}"
-      help-text="Brontosaurus is a genus of gigantic quadruped sauropod dinosaurs"
-    ></lion-radio>
-    <lion-radio
-      label="diplodocus"
-      .choiceValue="${'diplodocus'}"
-      help-text="Diplodocus is a genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston"
-    ></lion-radio>
-  </lion-radio-group>
-`;
-```
-
-## Event
-
-You can listen to the `model-value-changed` event whenever the value of the radio group is changed.
-
-```js preview-story
-export const event = ({ shadowRoot }) => html`
-  <lion-radio-group
-    name="dinosTwo"
-    label="Favourite dinosaur"
-    @model-value-changed=${ev =>
-      (ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)}
-  >
-    <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
-    <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
-    <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-  </lion-radio-group>
-  <br />
-  <span>Selected dinosaur: <strong id="selectedDinosaur">N/A</strong></span>
-`;
-```

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

@@ -1,51 +0,0 @@
----
-parts:
-  - API Table
-  - Select
-title: 'Select: API Table'
-eleventyNavigation:
-  key: API Table >> Select
-  title: API Table
-  order: 90
-  parent: Select
----
-# Select: API Table
- 
-
-## class: `LionSelect`, `lion-select`
-
-### Fields
-
-| Name                     | Privacy   | Type                | Default     | Description                      | Inherited From      |
-| ------------------------ | --------- | ------------------- | ----------- | -------------------------------- | ------------------- |
-| `autocomplete`           | public    | `string\|undefined` | `undefined` | Delegates autocomplete to select | LionFieldWithSelect |
-| `operationMode`          | public    |                     |             |                                  |                     |
-| `_feedbackConditionMeta` | protected |                     |             |                                  | LionField           |
-| `_focusableNode`         | protected |                     |             |                                  | LionField           |
-| `_inputNode`             | protected |                     |             |                                  | LionFieldWithSelect |
-
-### Methods
-
-| Name                               | Privacy   | Description                                                                                    | Parameters   | Return   | Inherited From |
-| ---------------------------------- | --------- | ---------------------------------------------------------------------------------------------- | ------------ | -------- | -------------- |
-| `clear`                            | public    | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) |              |          | LionField      |
-| `formatter`                        | public    |                                                                                                | `v: *`       | `string` |                |
-| `reset`                            | public    | Resets modelValue to initial value.
Interaction states are cleared                         |              |          | LionField      |
-| `resetInteractionState`            | public    |                                                                                                |              |          | LionField      |
-| `_onChange`                        | protected | Dispatches custom bubble event                                                                 | `ev: Event=` |          | LionField      |
-| `_proxyChangeEvent`                | protected |                                                                                                |              |          |                |
-| `_reflectBackFormattedValueToUser` | protected |                                                                                                |              |          |                |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name           | Field        | Inherited From      |
-| -------------- | ------------ | ------------------- |
-| `autocomplete` | autocomplete | LionFieldWithSelect |
-
-<hr/>

package/docs/components/select/index.md

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

package/docs/components/select/overview.md

@@ -1,56 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Select
-  - Overview
-eleventyNavigation:
-  key: 'Select: Overview'
-  order: 10
-  parent: Select
-  title: Overview
----
-
-# Overview
-
-A web component that works as a wrapper around the native `select`.
-
-You cannot use interactive elements inside the options. Avoid very long names to facilitate the understandability and perceivability for screen reader users.
-Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-select.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-select name="favoriteColor" label="Favorite color">
-    <select slot="input">
-      <option selected value>Please select</option>
-      <option value="red">Red</option>
-      <option value="hotpink">Hotpink</option>
-      <option value="teal">Teal</option>
-    </select>
-  </lion-select>
-`;
-```
-
-For this form element it is important to put the `slot="input"` with the native `select` yourself, because you are responsible for filling it with `<option>`s.
-For most other form elements we do this for you, because there's no need to put html inside the native form inputs.
-
-## Features
-
-- Catches and forwards the select events
-- Can be set to required or disabled
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionSelect } from '@lion/ui/select.js';
-// or
-import '@lion/ui/define/lion-select.js';
-```