@lion/ui 0.25.0 → 0.26.0

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

@@ -1,117 +0,0 @@
----
-parts:
-  - API Table
-  - Checkbox Group
-title: 'Checkbox Group: API Table'
-eleventyNavigation:
-  key: API Table >> Checkbox Group
-  title: API Table
-  order: 90
-  parent: Checkbox Group
----
-# Checkbox Group: API Table
- 
-
-## class: `LionCheckbox`, `lion-checkbox`
-
-### 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: `LionCheckboxGroup`, `lion-checkbox-group`
-
-### Fields
-
-| Name             | Privacy | Type      | Default | Description | Inherited From |
-| ---------------- | ------- | --------- | ------- | ----------- | -------------- |
-| `multipleChoice` | public  | `boolean` | `true`  |             |                |
-
-<hr/>
- 
-
-## class: `LionCheckboxIndeterminate`, `lion-checkbox-indeterminate`
-
-### Fields
-
-| Name                      | Privacy   | Type               | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------- | --------- | ------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `indeterminate`           | public    | `boolean`          | `false`  | Indeterminate state of the checkbox                                                                                                                                                                                                                                                                                                                                                                               |                |
-| `mixedState`              | public    | `boolean`          | `false`  |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `placeholder`             | public    | `string`           | `''`     |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `readOnly`                | public    | `boolean`          | `false`  | A Boolean attribute which, if present, indicates that the user should not be able to edit&#xA;the value of the input. The difference between disabled and readonly is that read-only&#xA;controls can still function, whereas disabled controls generally do not function as&#xA;controls until they are enabled.&#xA;&#xA;(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
-| `slots`                   | public    |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `type`                    | public    | `string`           | `'text'` |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_checkboxGroupNode`      | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_feedbackConditionMeta`  | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`          | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_indeterminateSubStates` | protected | `boolean[]`        | `[]`     |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_inputNode`              | protected | `HTMLInputElement` |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_subCheckboxes`          | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-
-### Methods
-
-| Name                            | Privacy   | Description                                                                                    | Parameters   | Return | Inherited From |
-| ------------------------------- | --------- | ---------------------------------------------------------------------------------------------- | ------------ | ------ | -------------- |
-| `clear`                         | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this) |              |        | LionField      |
-| `reset`                         | public    | Resets modelValue to initial value.&#xA;Interaction states are cleared                         |              |        | LionField      |
-| `resetInteractionState`         | public    |                                                                                                |              |        | LionField      |
-| `_afterTemplate`                | protected |                                                                                                |              |        |                |
-| `_onChange`                     | protected | Dispatches custom bubble event                                                                 | `ev: Event=` |        | LionField      |
-| `_onRequestToAddFormElement`    | protected |                                                                                                | `ev: Event`  |        |                |
-| `_onRequestToRemoveFormElement` | protected |                                                                                                | `ev: Event`  |        |                |
-| `_setBasedOnMixedState`         | protected |                                                                                                |              |        |                |
-| `_setOldState`                  | protected |                                                                                                |              |        |                |
-| `_setOwnCheckedState`           | protected |                                                                                                |              |        |                |
-| `_storeIndeterminateState`      | protected |                                                                                                |              |        |                |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name            | Field         | Inherited From |
-| --------------- | ------------- | -------------- |
-| `indeterminate` | indeterminate |                |
-| `mixed-state`   | mixedState    |                |
-| `readonly`      | readOnly      | LionInput      |
-| `type`          | type          | LionInput      |
-| `placeholder`   | placeholder   | LionInput      |
-
-<hr/>

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

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

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

@@ -1,51 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Checkbox Group
-  - Overview
-eleventyNavigation:
-  key: 'Checkbox Group: Overview'
-  order: 10
-  parent: Checkbox Group
-  title: Overview
----
-
-# Overview
-
-A checkbox group enhances the functionality of the native `<input type="checkbox">` element.
-Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.
-
-> You should use our `checkbox` elements as children in checkbox group.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-checkbox.js';
-```
-
-```html preview-story
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
-  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
-</lion-checkbox-group>
-```
-
-> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/components/form/overview.md)'s serialization result.
-
-## 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.
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-checkbox-indeterminate.js';
-import '@lion/ui/define/lion-checkbox.js';
-```

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

@@ -1,192 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Checkbox Group
-  - Use Cases
-eleventyNavigation:
-  key: 'Checkbox Group: Use Cases'
-  order: 20
-  parent: Checkbox Group
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-checkbox-indeterminate.js';
-import '@lion/ui/define/lion-checkbox.js';
-```
-
-## Model value
-
-The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
-
-Given the scientists example above, say that we were to select the first and last options
-(Archimedes & Marie Curie).
-
-Then the `modelValue` of the `lion-checkbox-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-checkbox-group');
-groupElement.modelValue;
-  => ["Archimedes", "Marie Curie"];
-```
-
-## The `name` attribute
-
-The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements.
-
-## Example
-
-```html
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
-  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
-</lion-checkbox-group>
-```
-
-## Pre-select
-
-You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
-
-```html preview-story
-<lion-checkbox-group name="scientists" label="Favorite scientists">
-  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}" checked></lion-checkbox>
-  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
-</lion-checkbox-group>
-```
-
-## Disabled
-
-You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`.
-
-```html preview-story
-<lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
-  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
-  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
-</lion-checkbox-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.
-
-```html preview-story
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox .choiceValue="${'Archimedes'}">
-    <label slot="label"><strong>Archimedes</strong></label>
-  </lion-checkbox>
-  <lion-checkbox .choiceValue="${'Francis Bacon'}">
-    <label slot="label"><strong>Francis Bacon</strong></label>
-  </lion-checkbox>
-  <lion-checkbox .choiceValue="${'Marie Curie'}">
-    <label slot="label"><strong>Marie Curie</strong></label>
-  </lion-checkbox>
-</lion-checkbox-group>
-```
-
-## Help text
-
-You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.
-
-```html preview-story
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox
-    label="Archimedes"
-    .choiceValue="${'Archimedes'}"
-    help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Francis Bacon"
-    .choiceValue="${'Francis Bacon'}"
-    help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Marie Curie"
-    .choiceValue="${'Marie Curie'}"
-    help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
-  ></lion-checkbox>
-</lion-checkbox-group>
-```
-
-## Event
-
-You can listen to the `model-value-changed` event whenever the value of the checkbox group is changed.
-
-```js preview-story
-export const event = ({ shadowRoot }) => html`
-  <lion-checkbox-group
-    name="scientists[]"
-    label="Favorite scientists"
-    @model-value-changed=${ev =>
-      (ev.target.parentElement.querySelector('#selectedDinosaur').innerText = JSON.stringify(
-        ev.target.modelValue,
-        null,
-        4,
-      ))}
-  >
-    <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-    <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
-    <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
-  </lion-checkbox-group>
-  <br />
-  <span>Selected scientists: <strong id="selectedDinosaur">N/A</strong></span>
-`;
-```
-
-## Indeterminate
-
-A `checkbox-indeterminate`'s value is neither true nor false, but is instead indeterminate, meaning that its state cannot be determined or stated in pure binary terms, based on it's `checkbox` children.
-
-```html preview-story
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox-indeterminate label="Old Greek scientists">
-    <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-    <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
-    <lion-checkbox label="Pythagoras" .choiceValue="${'Pythagoras'}"></lion-checkbox>
-  </lion-checkbox-indeterminate>
-  <lion-checkbox-indeterminate label="17th Century scientists">
-    <lion-checkbox label="Isaac Newton" .choiceValue="${'Isaac Newton'}"></lion-checkbox>
-    <lion-checkbox label="Galileo Galilei" .choiceValue="${'Galileo Galilei'}"></lion-checkbox>
-  </lion-checkbox-indeterminate>
-</lion-checkbox-group>
-```
-
-The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a child.
-
-```html preview-story
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox-indeterminate label="Scientists">
-    <lion-checkbox label="Isaac Newton" .choiceValue="${'Isaac Newton'}"></lion-checkbox>
-    <lion-checkbox label="Galileo Galilei" .choiceValue="${'Galileo Galilei'}"></lion-checkbox>
-    <lion-checkbox-indeterminate label="Old Greek scientists">
-      <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-      <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
-      <lion-checkbox label="Pythagoras" .choiceValue="${'Pythagoras'}"></lion-checkbox>
-    </lion-checkbox-indeterminate>
-  </lion-checkbox-indeterminate>
-</lion-checkbox-group>
-```
-
-You can also use `mixed-state` attribute so your indeterminate checkbox toggles through three states (indeterminate, checked, unchecked), where for indeterminate state the old children states are restored when you toggle back into this.
-
-```html preview-story
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox-indeterminate mixed-state label="Scientists">
-    <lion-checkbox label="Isaac Newton" .choiceValue="${'Isaac Newton'}"></lion-checkbox>
-    <lion-checkbox label="Galileo Galilei" .choiceValue="${'Galileo Galilei'}"></lion-checkbox>
-    <lion-checkbox-indeterminate mixed-state label="Old Greek scientists">
-      <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
-      <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
-      <lion-checkbox label="Pythagoras" .choiceValue="${'Pythagoras'}"></lion-checkbox>
-    </lion-checkbox-indeterminate>
-  </lion-checkbox-indeterminate>
-</lion-checkbox-group>
-```

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

@@ -1,55 +0,0 @@
----
-parts:
-  - API Table
-  - Collapsible
-title: 'Collapsible: API Table'
-eleventyNavigation:
-  key: API Table >> Collapsible
-  title: API Table
-  order: 90
-  parent: Collapsible
----
-# Collapsible: API Table
- 
-
-## class: `LionCollapsible`, `lion-collapsible`
-
-### Fields
-
-| Name             | Privacy   | Type      | Default | Description | Inherited From |
-| ---------------- | --------- | --------- | ------- | ----------- | -------------- |
-| `opened`         | public    | `boolean` | `false` |             |                |
-| `_contentHeight` | protected |           |         |             |                |
-| `_contentNode`   | protected |           |         |             |                |
-| `_invokerNode`   | protected |           |         |             |                |
-
-### Methods
-
-| Name             | Privacy   | Description                                   | Parameters     | Return | Inherited From |
-| ---------------- | --------- | --------------------------------------------- | -------------- | ------ | -------------- |
-| `hide`           | public    | Hide extra content.                           |                |        |                |
-| `show`           | public    | Show extra content.                           |                |        |                |
-| `toggle`         | public    | Toggle the current(opened/closed) state.      |                |        |                |
-| `_hideAnimation` | protected | Hide animation implementation in sub-classer. | `opts: Object` |        |                |
-| `_showAnimation` | protected | Show animation implementation in sub-classer. | `opts: Object` |        |                |
-
-### Events
-
-| Name             | Type          | Description | Inherited From |
-| ---------------- | ------------- | ----------- | -------------- |
-| `opened-changed` | `CustomEvent` |             |                |
-
-### Attributes
-
-| Name     | Field  | Inherited From |
-| -------- | ------ | -------------- |
-| `opened` | opened |                |
-
-### Slots
-
-| Name      | Description                             |
-| --------- | --------------------------------------- |
-| `invoker` | The invoker element for the collapsible |
-| `content` | The content element for the collapsible |
-
-<hr/>

package/docs/components/collapsible/assets/CustomCollapsible.js

@@ -1,117 +0,0 @@
-import { LionCollapsible } from '@lion/ui/collapsible.js';
-
-const EVENT = {
-  TRANSITION_END: 'transitionend',
-  TRANSITION_START: 'transitionstart',
-};
-/**
- * `CustomCollapsible` is a class for custom collapsible element (`<custom-collapsible>` web component).
- * @customElement custom-collapsible
- */
-// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
-export class CustomCollapsible extends LionCollapsible {
-  static get properties() {
-    return {
-      transitioning: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.transitioning = false;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._contentNode?.style.setProperty(
-      'transition',
-      'max-height 0.35s, padding 0.35s, opacity 0.35s',
-    );
-    if (this.opened) {
-      this._contentNode?.style.setProperty('padding', '12px 0');
-    }
-  }
-
-  /**
-   * Wait until transition is finished.
-   * @override
-   */
-  toggle() {
-    if (!this.transitioning) {
-      super.toggle();
-    }
-  }
-
-  /**
-   * Trigger show animation and wait for transition to be finished.
-   * @param {Object} options - element node and its options
-   * @param {HTMLElement} options.contentNode
-   * @override
-   */
-  async _showAnimation({ contentNode }) {
-    const expectedHeight = await this.__calculateHeight(contentNode);
-    contentNode.style.setProperty('opacity', '1');
-    contentNode.style.setProperty('padding', '12px 0');
-    contentNode.style.setProperty('max-height', '0px');
-    // @ts-ignore
-    // eslint-disable-next-line no-promise-executor-return
-    await new Promise(resolve => requestAnimationFrame(() => resolve()));
-    contentNode.style.setProperty('max-height', expectedHeight);
-    await this._waitForTransition({ contentNode });
-  }
-
-  /**
-   * Trigger hide animation and wait for transition to be finished.
-   * @param {Object} options - element node and its options
-   * @param {HTMLElement} options.contentNode
-   * @override
-   */
-  async _hideAnimation({ contentNode }) {
-    if (this._contentHeight === '0px') {
-      return;
-    }
-    ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, '0'));
-    await this._waitForTransition({ contentNode });
-  }
-
-  /**
-   *  Wait until the transition event is finished.
-   * @param {Object} options - element node and its options
-   * @param {HTMLElement} options.contentNode
-   * @returns {Promise<void>} transition event
-   */
-  _waitForTransition({ contentNode }) {
-    return new Promise(resolve => {
-      const transitionStarted = () => {
-        contentNode.removeEventListener(EVENT.TRANSITION_START, transitionStarted);
-        this.transitioning = true;
-      };
-      contentNode.addEventListener(EVENT.TRANSITION_START, transitionStarted);
-
-      const transitionEnded = () => {
-        contentNode.removeEventListener(EVENT.TRANSITION_END, transitionEnded);
-        this.transitioning = false;
-        resolve();
-      };
-      contentNode.addEventListener(EVENT.TRANSITION_END, transitionEnded);
-    });
-  }
-
-  /**
-   * Calculate total content height after collapsible opens
-   * @param {HTMLElement} contentNode content node
-   * @private
-   */
-  async __calculateHeight(contentNode) {
-    contentNode.style.setProperty('max-height', '');
-    // @ts-ignore
-    // eslint-disable-next-line no-promise-executor-return
-    await new Promise(resolve => requestAnimationFrame(() => resolve()));
-    return this._contentHeight; // Expected height i.e. actual size once collapsed after animation
-  }
-}
-
-customElements.define('custom-collapsible', CustomCollapsible);

package/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js

@@ -1,41 +0,0 @@
-import { css } from 'lit';
-
-const applyDemoCollapsibleStyles = () => {
-  const demoCollapsibleStyles = css`
-    .demo-custom-collapsible-container {
-      padding: 16px;
-      margin: 16px;
-      border-radius: 4px;
-      width: 400px;
-      box-shadow:
-        0 1px 3px rgba(0, 0, 0, 0.12),
-        0 1px 2px rgba(0, 0, 0, 0.24);
-    }
-
-    .demo-custom-collapsible-body {
-      padding: 12px 0px;
-    }
-
-    .demo-custom-collapsible-invoker {
-      border-width: 0;
-      border-radius: 2px;
-      padding: 12px 24px;
-      box-shadow:
-        0 1px 3px rgba(0, 0, 0, 0.12),
-        0 1px 2px rgba(0, 0, 0, 0.24);
-      font-weight: bold;
-      color: #3f51b5;
-    }
-
-    .demo-custom-collapsible-state-container {
-      padding: 12px 0;
-    }
-  `;
-
-  const styleTag = document.createElement('style');
-  styleTag.setAttribute('data-demo-collapsible', '');
-  styleTag.textContent = demoCollapsibleStyles.cssText;
-  document.head.appendChild(styleTag);
-};
-
-applyDemoCollapsibleStyles();