@lion/ui 0.25.0 → 0.26.0

package/docs/components/button/examples.md

@@ -1,42 +0,0 @@
----
-title: 'Examples'
-parts:
-  - Button
-  - Examples
-eleventyNavigation:
-  key: 'Button: Examples'
-  order: 30
-  parent: Button
-  title: Examples
----
-
-# Examples
-
-```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/extensions.md

@@ -1,42 +0,0 @@
----
-title: 'Extensions'
-parts:
-  - Button
-  - Extensions
-eleventyNavigation:
-  key: 'Button: Extensions'
-  order: 90
-  parent: Button
-  title: Extensions
----
-
-# Extensions
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import './assets/bootstrap-button.js';
-```
-
-## Bootstrap button
-
-```js preview-story
-const capitalize = s => s[0].toUpperCase() + s.slice(1);
-
-export const bootstrapButton = () => {
-  const variants = [
-    'primary',
-    'secondary',
-    'success',
-    'danger',
-    'warning',
-    'info',
-    'light',
-    'dark',
-    'link',
-  ];
-
-  return html`<div>
-    ${variants.map(v => html`<bootstrap-button variant="${v}">${capitalize(v)}</bootstrap-button>`)}
-  </div>`;
-};
-```

package/docs/components/button/index.md

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

package/docs/components/button/overview.md

@@ -1,42 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Overview
-  - Button
-eleventyNavigation:
-  key: Button >> Overview
-  title: Overview
-  order: 10
-  parent: Button
----
-
-# Overview
-
-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

@@ -1,5 +0,0 @@
-/**
- * @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

@@ -1,121 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Use Cases
-  - Button
-eleventyNavigation:
-  key: Button >> Use Cases
-  title: Use Cases
-  order: 20
-  parent: Button
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-button.js';
-import '@lion/ui/define/lion-button-reset.js';
-import '@lion/ui/define/lion-button-submit.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/api-table.md

@@ -1,56 +0,0 @@
----
-parts:
-  - API Table
-  - Calendar
-title: 'Calendar: API Table'
-eleventyNavigation:
-  key: API Table >> Calendar
-  title: API Table
-  order: 90
-  parent: Calendar
----
-# Calendar: API Table
- 
-
-## class: `LionCalendar`, `lion-calendar`
-
-### Fields
-
-| Name                    | Privacy | Type     | Default                      | Description                                                                                                                                                             | Inherited From |
-| ----------------------- | ------- | -------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `centralDate`           | public  | `Date`   |                              | The date that
1\. determines the currently visible month
2\. will be focused when the month grid gets focused by the keyboard                                   |                |
-| `dayPreprocessor`       | public  |          |                              |                                                                                                                                                                         |                |
-| `disableDates`          | public  |          |                              | Disable certain dates                                                                                                                                                   |                |
-| `firstDayOfWeek`        | public  | `number` | `0`                          | Weekday that will be displayed in first column of month grid.
0: sunday, 1: monday, 2: tuesday, 3: wednesday , 4: thursday, 5: friday, 6: saturday
Default is 0 |                |
-| `focusedDate`           | public  |          |                              |                                                                                                                                                                         |                |
-| `locale`                | public  | `string` | `''`                         | Different locale for this component scope                                                                                                                               |                |
-| `maxDate`               | public  |          | `new Date(8640000000000000)` | Maximum date. All dates after will be disabled                                                                                                                          |                |
-| `minDate`               | public  |          | `new Date(0)`                | Minimum date. All dates before will be disabled                                                                                                                         |                |
-| `selectedDate`          | public  |          |                              | The selected date, usually synchronized with datepicker-input
Not to be confused with the focused date (therefore not necessarily in active month view)             |                |
-| `weekdayHeaderNotation` | public  | `string` | `'short'`                    | Weekday header notation, based on Intl DatetimeFormat:
- 'long' (e.g., Thursday)
- 'short' (e.g., Thu)
- 'narrow' (e.g., T).
Default is 'short'         |                |
-
-### Methods
-
-| Name                      | Privacy   | Description                                                                                     | Parameters   | Return | Inherited From |
-| ------------------------- | --------- | ----------------------------------------------------------------------------------------------- | ------------ | ------ | -------------- |
-| `findNearestEnabledDate`  | public    |                                                                                                 | `date: Date` |        |                |
-| `findNextEnabledDate`     | public    |                                                                                                 | `date: Date` |        |                |
-| `findPreviousEnabledDate` | public    |                                                                                                 | `date: Date` |        |                |
-| `focusCentralDate`        | public    |                                                                                                 |              |        |                |
-| `focusDate`               | public    |                                                                                                 | `date: Date` |        |                |
-| `focusSelectedDate`       | public    |                                                                                                 |              |        |                |
-| `goToNextMonth`           | public    |                                                                                                 |              |        |                |
-| `goToNextYear`            | public    |                                                                                                 |              |        |                |
-| `goToPreviousMonth`       | public    |                                                                                                 |              |        |                |
-| `goToPreviousYear`        | public    |                                                                                                 |              |        |                |
-| `initCentralDate`         | public    | This exposes an interface for datepickers that want to
reinitialize when calendar is opened |              |        |                |
-| `_nextIconTemplate`       | protected |                                                                                                 |              |        |                |
-| `_previousIconTemplate`   | protected |                                                                                                 |              |        |                |
-
-### Events
-
-| Name                         | Type          | Description | Inherited From |
-| ---------------------------- | ------------- | ----------- | -------------- |
-| `user-selected-date-changed` | `CustomEvent` |             |                |
-
-<hr/>

package/docs/components/calendar/index.md

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

package/docs/components/calendar/overview.md

@@ -1,61 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Calendar
-  - Overview
-eleventyNavigation:
-  key: 'Calendar: Overview'
-  order: 10
-  parent: Calendar
-  title: Overview
----
-
-# Overview
-
-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';
-```

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

@@ -1,243 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Calendar
-  - Use Cases
-eleventyNavigation:
-  key: 'Calendar: Use Cases'
-  order: 0
-  parent: Calendar
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html, css } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-calendar.js';
-```
-
-## Selected date
-
-The `selectedDate` is the date which is currently marked as selected.
-You usually select a date by clicking on it with the mouse or hitting Enter on the keyboard.
-
-The `selectedDate` might not be within the dates in the current month view.
-
-```js preview-story
-export const selectedDate = () => html`
-  <style>
-    .demo-calendar {
-      border: 1px solid #adadad;
-      box-shadow: 0 0 16px #ccc;
-      max-width: 500px;
-    }
-  </style>
-  <lion-calendar class="demo-calendar" .selectedDate="${new Date(1988, 2, 5)}"></lion-calendar>
-`;
-```
-
-## Central Date
-
-The `centralDate` defines which day will be focused when keyboard moves the focus to the current month grid.
-By default it is set to today, or the enabled day of the current month view that is closest to today's date.
-
-The next and previous months' buttons work by changing the `centralDate` with plus or minus one month.
-Changing the `centralDate` may mean a different view will be displayed to your users if it is in a different month.
-Usually if you change only the day, "nothing" happens as it's already currently in view.
-
-The `centralDate` can be different from `selectedDate` as you can have today as actively selected but still look at date that is years ago.
-When the `selectedDate` changes, it will sync its value to the `centralDate`.
-
-```js preview-story
-export const centralDate = () => {
-  const today = new Date();
-  const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
-  return html`
-    <style>
-      .demo-calendar {
-        border: 1px solid #adadad;
-        box-shadow: 0 0 16px #ccc;
-        max-width: 500px;
-      }
-    </style>
-    <lion-calendar class="demo-calendar" .centralDate="${centralDate}"></lion-calendar>
-  `;
-};
-```
-
-## Controlling focus
-
-You can control the focus by calling the following methods
-
-- `focusCentralDate()`
-- `focusSelectedDate()`
-- `focusDate(dateInstanceToFocus)`
-
-> Be aware that the central date changes when a new date is focused.
-
-```js preview-story
-export const controllingFocus = () => {
-  const today = new Date();
-  const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
-  const centralDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5);
-  return html`
-    <style>
-      .demo-calendar {
-        border: 1px solid #adadad;
-        box-shadow: 0 0 16px #ccc;
-        max-width: 500px;
-      }
-    </style>
-    <lion-calendar
-      id="js-demo-calendar"
-      class="demo-calendar"
-      .selectedDate="${selectedDate}"
-      .centralDate="${centralDate}"
-    ></lion-calendar>
-    <button
-      @click="${e => e.target.parentElement.querySelector('#js-demo-calendar').focusCentralDate()}"
-    >
-      Set focus on: Central date
-    </button>
-    <button
-      @click="${e => e.target.parentElement.querySelector('#js-demo-calendar').focusSelectedDate()}"
-    >
-      Set focus on: Selected date
-    </button>
-    <button
-      @click="${e => e.target.parentElement.querySelector('#js-demo-calendar').focusDate(today)}"
-    >
-      Set focus on: Today
-    </button>
-  `;
-};
-```
-
-## Limiting selectable values
-
-### Providing a lower limit
-
-To give a lower limit you can bind a date to the `minDate` property.
-
-```js preview-story
-export const providingLowerLimit = () => {
-  const minDate = new Date();
-  return html`
-    <style>
-      .demo-calendar {
-        border: 1px solid #adadad;
-        box-shadow: 0 0 16px #ccc;
-        max-width: 500px;
-      }
-    </style>
-    <lion-calendar class="demo-calendar" .minDate="${minDate}"></lion-calendar>
-  `;
-};
-```
-
-### Provide a higher limit
-
-To give a higher limit you can bind a date to the `maxDate` property. In this example, we show how to create an offset of + 2 days.
-
-```js preview-story
-export const providingHigherLimit = () => {
-  const today = new Date();
-  const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2);
-  return html`
-    <style>
-      .demo-calendar {
-        border: 1px solid #adadad;
-        box-shadow: 0 0 16px #ccc;
-        max-width: 500px;
-      }
-    </style>
-    <lion-calendar class="demo-calendar" .maxDate="${maxDate}"></lion-calendar>
-  `;
-};
-```
-
-### Provide a list of disabled dates
-
-In some cases a specific date or day of the week needs to be disabled, supply those days to the `disableDates` property.
-
-```js preview-story
-export const disabledDates = () => html`
-  <style>
-    .demo-calendar {
-      border: 1px solid #adadad;
-      box-shadow: 0 0 16px #ccc;
-      max-width: 500px;
-    }
-  </style>
-  <lion-calendar
-    class="demo-calendar"
-    .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
-  ></lion-calendar>
-`;
-```
-
-### Combined disable dates
-
-To limit the scope of possible dates further, combine the methods mentioned above.
-
-```js preview-story
-export const combinedDisabledDates = () => {
-  const today = new Date();
-  const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, today.getDate());
-  return html`
-    <style>
-      .demo-calendar {
-        border: 1px solid #adadad;
-        box-shadow: 0 0 16px #ccc;
-        max-width: 500px;
-      }
-    </style>
-    <lion-calendar
-      class="demo-calendar"
-      .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
-      .minDate="${new Date()}"
-      .maxDate="${maxDate}"
-    ></lion-calendar>
-  `;
-};
-```
-
-### Finding enabled dates
-
-The next available date may be multiple days/month in the future/past.
-For that we offer convenient helpers as
-
-- `findNextEnabledDate()`
-- `findPreviousEnabledDate()`
-- `findNearestEnabledDate()`
-
-```js preview-story
-export const findingEnabledDates = () => {
-  function getCalendar(ev) {
-    return ev.target.parentElement.querySelector('.js-calendar');
-  }
-  return html`
-    <style>
-      .demo-calendar {
-        border: 1px solid #adadad;
-        box-shadow: 0 0 16px #ccc;
-        max-width: 500px;
-      }
-    </style>
-    <lion-calendar
-      class="demo-calendar js-calendar"
-      .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
-    ></lion-calendar>
-    <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNextEnabledDate())}">
-      focus findNextEnabledDate
-    </button>
-    <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findPreviousEnabledDate())}">
-      focus findPreviousEnabledDate
-    </button>
-    <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNearestEnabledDate())}">
-      focus findNearestEnabledDate
-    </button>
-  `;
-};
-```