@lion/ui 0.24.0 → 0.26.0

package/components/select-rich/test/demos.screenshots-test.js

@@ -1,168 +0,0 @@
-// @ts-nocheck
-/* globals capture getStoryPage */
-
-const selector = 'lion-select-rich';
-describe('forms-select-rich', () => {
-  it('main', async () => {
-    const id = `forms-select-rich--main`;
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('main-opened', async () => {
-    const id = `forms-select-rich--main`;
-    const page = await getStoryPage(id);
-    await page.waitForSelector(selector);
-    await page.evaluate(() => {
-      const el = document.querySelector('lion-select-rich');
-      el.opened = true;
-    });
-    await capture({
-      selector,
-      id: `${id}-opened`,
-      page,
-      endClipSelector: 'lion-options',
-    });
-  });
-  it('options-with-html', async () => {
-    const id = `forms-select-rich--options-with-html`;
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('options-with-html-opened', async () => {
-    const id = `forms-select-rich--options-with-html`;
-    const page = await getStoryPage(id);
-    await page.waitForSelector(selector);
-    await page.evaluate(() => {
-      const el = document.querySelector('lion-select-rich');
-      el.opened = true;
-    });
-    await capture({
-      selector,
-      id: `${id}-opened`,
-      page,
-      endClipSelector: 'lion-options',
-    });
-  });
-  it('many-options-with-scrolling-opened', async () => {
-    const id = `forms-select-rich--many-options-with-scrolling`;
-    const page = await getStoryPage(id);
-    await page.waitForSelector(selector);
-    await page.evaluate(() => {
-      const el = document.querySelector('lion-select-rich');
-      el.opened = true;
-    });
-    await capture({
-      selector,
-      id: `${id}-opened`,
-      page,
-      endClipSelector: 'lion-options',
-    });
-  });
-  it('read-only-prefilled', async () => {
-    const id = `forms-select-rich--read-only-prefilled`;
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('disabled-select', async () => {
-    const id = `forms-select-rich--disabled-select`;
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('disabled-option-opened', async () => {
-    const id = `forms-select-rich--disabled-option`;
-    const page = await getStoryPage(id);
-    await page.waitForSelector(selector);
-    await page.evaluate(() => {
-      const el = document.querySelector('lion-select-rich');
-      el.opened = true;
-    });
-    await capture({
-      selector,
-      id: `${id}-opened`,
-      page,
-      endClipSelector: 'lion-options',
-    });
-  });
-  it('validation', async () => {
-    const id = `forms-select-rich--validation`;
-    const page = await getStoryPage(id);
-    await page.waitForSelector(selector);
-    await page.evaluate(() => {
-      const el = document.querySelector('lion-select-rich');
-      el.updateComplete.then(() => {
-        el.touched = true;
-        el.dirty = true;
-      });
-    });
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('render-options', async () => {
-    const id = `forms-select-rich--render-options`;
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('interaction-mode-mac', async () => {
-    const id = `forms-select-rich--interaction-mode`;
-    const page = await getStoryPage(id);
-    await page.click('lion-select-rich');
-    await page.keyboard.press('ArrowDown');
-    await capture({
-      selector,
-      id: `${id}-mac`,
-      page,
-    });
-  });
-  it('interaction-mode-windows-linux', async () => {
-    const id = `forms-select-rich--interaction-mode`;
-    const page = await getStoryPage(id);
-    await page.click('lion-select-rich:last-of-type');
-    await page.keyboard.press('ArrowDown');
-    await capture({
-      selector: 'lion-select-rich:last-of-type',
-      id: `${id}-windows-linux`,
-      page,
-    });
-  });
-  it('no-default-selection', async () => {
-    const id = `forms-select-rich--no-default-selection`;
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('single-option', async () => {
-    const id = `forms-select-rich--single-option`;
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-});

package/components/switch/test/lion-switch-button.test.js

@@ -1,204 +0,0 @@
-import { expect, fixture as _fixture, fixtureSync, elementUpdated } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-import sinon from 'sinon';
-import '@lion/ui/define/lion-switch-button.js';
-
-/**
- * @typedef {import('../src/LionSwitchButton.js').LionSwitchButton} LionSwitchButton
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionSwitchButton>} */ _fixture;
-describe('lion-switch-button', () => {
-  /** @type {LionSwitchButton} */
-  let el;
-  beforeEach(async () => {
-    el = await fixture(html`<lion-switch-button></lion-switch-button>`);
-  });
-  it('should be focusable', () => {
-    expect(el.tabIndex).to.equal(0);
-    expect(el.getAttribute('tabindex')).to.equal('0');
-  });
-  it('should not have a [type]', () => {
-    expect(el.hasAttribute('type')).to.be.false;
-  });
-  it('should have checked=false by default', () => {
-    expect(el.checked).to.equal(false);
-    expect(el.hasAttribute('checked')).to.be.false;
-  });
-  it('is hidden when attribute hidden is true', async () => {
-    el.hidden = true;
-    await el.updateComplete;
-    expect(el).not.to.be.displayed;
-  });
-  it('should toggle the value of "checked" on click', async () => {
-    expect(el.checked).to.be.false;
-    expect(el.hasAttribute('checked')).to.be.false;
-    el.click();
-    await el.updateComplete;
-    expect(el.checked).to.be.true;
-    expect(el.hasAttribute('checked')).to.be.true;
-    el.click();
-    await el.updateComplete;
-    expect(el.checked).to.be.false;
-    expect(el.hasAttribute('checked')).to.be.false;
-  });
-  it('should toggle the value of "checked" on key-up', async () => {
-    expect(el.checked).to.be.false;
-    expect(el.hasAttribute('checked')).to.be.false;
-    el.dispatchEvent(
-      new KeyboardEvent('keyup', {
-        key: 'Enter',
-      }),
-    );
-    await el.updateComplete;
-    expect(el.checked).to.be.true;
-    expect(el.hasAttribute('checked')).to.be.true;
-    el.dispatchEvent(
-      new KeyboardEvent('keyup', {
-        key: ' ',
-      }),
-    );
-    await el.updateComplete;
-    expect(el.checked).to.be.false;
-    expect(el.hasAttribute('checked')).to.be.false;
-  });
-  it('can be disabled', async () => {
-    el.disabled = true;
-    expect(el.checked).to.be.false;
-    el.click();
-    await el.updateComplete;
-    expect(el.checked).to.be.false;
-    expect(el.hasAttribute('checked')).to.be.false;
-    el.disabled = true;
-    el.checked = true;
-    el.click();
-    await el.updateComplete;
-    expect(el.checked).to.be.true;
-    expect(el.hasAttribute('checked')).to.be.true;
-  });
-  it('can be readonly', async () => {
-    el.readOnly = true;
-    expect(el.checked).to.be.false;
-    el.click();
-    await el.updateComplete;
-    expect(el.checked).to.be.false;
-    expect(el.hasAttribute('checked')).to.be.false;
-    el.checked = true;
-    el.click();
-    await el.updateComplete;
-    expect(el.checked).to.be.true;
-    expect(el.hasAttribute('checked')).to.be.true;
-  });
-  it('should dispatch "checked-changed" event when toggled', () => {
-    const handlerSpy = sinon.spy();
-    el.addEventListener('checked-changed', handlerSpy);
-    el.click();
-    el.click();
-    expect(handlerSpy.callCount).to.equal(2);
-    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ (call) => {
-      expect(call.args).to.have.lengthOf(1);
-      const e = call.args[0];
-      expect(e).to.be.an.instanceof(Event);
-      expect(e.bubbles).to.be.true;
-    };
-    checkCall(handlerSpy.getCall(0));
-    checkCall(handlerSpy.getCall(1));
-  });
-  it('should dispatch "checked-changed" event when checked changed', () => {
-    const handlerSpy = sinon.spy();
-    el.addEventListener('checked-changed', handlerSpy);
-    el.checked = true;
-    el.checked = false;
-    expect(handlerSpy.callCount).to.equal(2);
-    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ (call) => {
-      expect(call.args).to.have.lengthOf(1);
-      const e = call.args[0];
-      expect(e).to.be.an.instanceof(Event);
-      expect(e.bubbles).to.be.true;
-    };
-    checkCall(handlerSpy.getCall(0));
-    checkCall(handlerSpy.getCall(1));
-  });
-  it('should not dispatch "checked-changed" event if disabled', () => {
-    const handlerSpy = sinon.spy();
-    el.disabled = true;
-    el.addEventListener('checked-changed', handlerSpy);
-    el.click();
-    expect(handlerSpy.called).to.be.false;
-  });
-  it('should not dispatch "checked-changed" event if readonly', () => {
-    const handlerSpy = sinon.spy();
-    el.readOnly = true;
-    el.addEventListener('checked-changed', handlerSpy);
-    el.click();
-    expect(handlerSpy.called).to.be.false;
-  });
-  it('should not dispatch "checked-changed" event if disabled on update', () => {
-    const handlerSpy = sinon.spy();
-    el.disabled = true;
-    el.addEventListener('checked-changed', handlerSpy);
-    el.checked = !el.checked;
-    expect(handlerSpy.called).to.be.false;
-  });
-  it('should not dispatch "checked-changed" event if readonly on update', () => {
-    const handlerSpy = sinon.spy();
-    el.readOnly = true;
-    el.addEventListener('checked-changed', handlerSpy);
-    el.checked = !el.checked;
-    expect(handlerSpy.called).to.be.false;
-  });
-  it('should not dispatch "checked-changed" event if not initialized on update', async () => {
-    const handlerSpy = sinon.spy();
-    const elSync =
-      /** @type {LionSwitchButton} */
-      fixtureSync(html`<lion-switch-button @checked-changed="${handlerSpy}" .checked=${true} />`);
-    expect(elSync.__initialized).to.be.false;
-    await elementUpdated(elSync);
-    expect(elSync.__initialized).to.be.true;
-    expect(handlerSpy.called).to.be.false;
-    elSync.checked = !elSync.checked;
-    await elementUpdated(elSync);
-    expect(handlerSpy.called).to.be.true;
-  });
-  describe('a11y', () => {
-    it('should manage "aria-checked"', async () => {
-      expect(el.hasAttribute('aria-checked')).to.be.true;
-      expect(el.getAttribute('aria-checked')).to.equal('false');
-      el.click();
-      await el.updateComplete;
-      expect(el.getAttribute('aria-checked')).to.equal('true');
-      el.click();
-      await el.updateComplete;
-      expect(el.getAttribute('aria-checked')).to.equal('false');
-      el.checked = true;
-      await el.updateComplete;
-      expect(el.getAttribute('aria-checked')).to.equal('true');
-      el.checked = false;
-      await el.updateComplete;
-      expect(el.getAttribute('aria-checked')).to.equal('false');
-      el.setAttribute('checked', '');
-      await el.updateComplete;
-      expect(el.getAttribute('aria-checked')).to.equal('true');
-      el.removeAttribute('checked');
-      await el.updateComplete;
-      expect(el.getAttribute('aria-checked')).to.equal('false');
-    });
-  });
-  it('should manage "aria-disabled"', async () => {
-    el.disabled = true;
-    await el.updateComplete;
-    expect(el.getAttribute('aria-disabled')).to.equal('true');
-    el.disabled = false;
-    await el.updateComplete;
-    expect(el.getAttribute('aria-disabled')).to.equal('false');
-  });
-  it('should manage "aria-readonly"', async () => {
-    el.readOnly = true;
-    await el.updateComplete;
-    expect(el.getAttribute('aria-readonly')).to.equal('true');
-    el.readOnly = false;
-    await el.updateComplete;
-    expect(el.getAttribute('aria-readonly')).to.equal('false');
-  });
-});

package/dist-types/components/button/test/demos.screenshots-test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=demos.screenshots-test.d.ts.map

package/dist-types/components/button/test/demos.screenshots-test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"demos.screenshots-test.d.ts","sourceRoot":"","sources":["../../../../components/button/test/demos.screenshots-test.js"],"names":[],"mappings":""}

package/dist-types/components/calendar/test/demos.screenshots-test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=demos.screenshots-test.d.ts.map

package/dist-types/components/calendar/test/demos.screenshots-test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"demos.screenshots-test.d.ts","sourceRoot":"","sources":["../../../../components/calendar/test/demos.screenshots-test.js"],"names":[],"mappings":""}

package/dist-types/components/input-file/test/lion-selected-file-list.test.d.ts

@@ -1,5 +0,0 @@
-import '@lion/ui/define/lion-selected-file-list.js';
-export type LionSelectedFileList = import('../src/LionSelectedFileList.js').LionSelectedFileList;
-export type InputFile = import('../types/input-file.js').InputFile;
-export type TemplateResult = import('lit').TemplateResult;
-//# sourceMappingURL=lion-selected-file-list.test.d.ts.map

package/dist-types/components/input-file/test/lion-selected-file-list.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lion-selected-file-list.test.d.ts","sourceRoot":"","sources":["../../../../components/input-file/test/lion-selected-file-list.test.js"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAC;AAKjD,YAAyE,oBAAoB,GAAnF,OAAO,gCAAgC,EAAE,oBAAoB,CAAsB;AAC7F,YAAsD,SAAS,GAArD,OAAO,wBAAwB,EAAE,SAAS,CAAW;AAC/D,YAAwC,cAAc,GAA5C,OAAO,KAAK,EAAE,cAAc,CAAgB"}

package/dist-types/components/select-rich/test/demos.screenshots-test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=demos.screenshots-test.d.ts.map

package/dist-types/components/select-rich/test/demos.screenshots-test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"demos.screenshots-test.d.ts","sourceRoot":"","sources":["../../../../components/select-rich/test/demos.screenshots-test.js"],"names":[],"mappings":""}

package/dist-types/components/switch/test/lion-switch-button.test.d.ts

@@ -1,4 +0,0 @@
-import '@lion/ui/define/lion-switch-button.js';
-export type LionSwitchButton = import('../src/LionSwitchButton.js').LionSwitchButton;
-export type TemplateResult = import('lit').TemplateResult;
-//# sourceMappingURL=lion-switch-button.test.d.ts.map

package/dist-types/components/switch/test/lion-switch-button.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lion-switch-button.test.d.ts","sourceRoot":"","sources":["../../../../components/switch/test/lion-switch-button.test.js"],"names":[],"mappings":"AAGA,OAAO,uCAAuC,CAAC;AAG5C,YAAiE,gBAAgB,GAAvE,OAAO,4BAA4B,EAAE,gBAAgB,CAAkB;AACjF,YAAwC,cAAc,GAA5C,OAAO,KAAK,EAAE,cAAc,CAAgB"}

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

@@ -1,53 +0,0 @@
----
-parts:
-  - API Table
-  - Accordion
-title: 'Accordion: API Table'
-eleventyNavigation:
-  key: API Table >> Accordion
-  title: API Table
-  order: 90
-  parent: Accordion
----
-# Accordion: API Table
- 
-
-## class: `LionAccordion`, `lion-accordion`
-
-### Fields
-
-| Name           | Privacy | Type      | Default | Description                                                            | Inherited From |
-| -------------- | ------- | --------- | ------- | ---------------------------------------------------------------------- | -------------- |
-| `exclusive`    | public  | `boolean` | `false` | exclusive property allows only one accordion slot to be open at a time |                |
-| `expanded`     | public  | `array`   |         | array of indices of the expanded accordions                            |                |
-| `focusedIndex` | public  | `number`  |         | index number of the focused accordion                                  |                |
-
-### Methods
-
-| Name              | Privacy   | Description | Parameters          | Return | Inherited From |
-| ----------------- | --------- | ----------- | ------------------- | ------ | -------------- |
-| `_cleanInvoker`   | protected |             | `entry: StoreEntry` |        |                |
-| `_collapse`       | protected |             | `entry: StoreEntry` |        |                |
-| `_expand`         | protected |             | `entry: StoreEntry` |        |                |
-| `_focusInvoker`   | protected |             | `entry: StoreEntry` |        |                |
-| `_setupContent`   | protected |             | `entry: StoreEntry` |        |                |
-| `_setupInvoker`   | protected |             | `entry: StoreEntry` |        |                |
-| `_unfocusInvoker` | protected |             | `entry: StoreEntry` |        |                |
-
-### Attributes
-
-| Name           | Field        | Inherited From |
-| -------------- | ------------ | -------------- |
-| `focusedIndex` | focusedIndex |                |
-| `expanded`     | expanded     |                |
-| `exclusive`    | exclusive    |                |
-
-### Slots
-
-| Name         | Description                                                        |
-| ------------ | ------------------------------------------------------------------ |
-| `invoker`    | The invoker element for the accordion                              |
-| `content`    | The content element for the accordion                              |
-| `_accordion` | The slot for the accordion, used to rearrange invokers and content |
-
-<hr/>

package/docs/components/accordion/index.md

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

package/docs/components/accordion/overview.md

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