@lion/ui 0.25.0 → 0.26.0

package/docs/components/menu/src/DemoToolbar.js

@@ -1,101 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/no-relative-packages */
-import { LionMenu } from '@lion/ui/menu.js';
-import {
-  setChecked,
-  toggleChecked,
-} from '../../../../packages/ui/components/menu/src/utils/listItemInteractions.js';
-
-/**
- * @typedef {import('../../../../packages/ui/components/menu/types/InteractiveListMixinTypes.js').InteractiveListItemRole} InteractiveListItemRole
- */
-
-// @ts-ignore - class extension properties mismatch at the OverlayWithListInvokerMixin boundary
-export class DemoToolbar extends LionMenu {
-  constructor() {
-    super();
-
-    this._listRole = 'toolbar';
-    this.bar = true;
-  }
-
-  /**
-   * Allows groups ([role=radiogroup|checkboxgroup]) within one level.
-   * In case we deal with [role=checkbox], we treat it as multiple choice group
-   * @override InteractiveListMixin
-   * @param {number} index
-   */
-  setCheckedIndex(index) {
-    const item = this.listItems[index];
-    if (item) {
-      // @ts-ignore - InteractiveListItemRole type
-      const role = /** @type {InteractiveListItemRole} */ (item.getAttribute('role'));
-      let listItemsWithinGroup = this.listItems;
-      let { multiple } = this;
-      if (role === 'radio' || role === 'checkbox') {
-        /**
-         * If index = 1 (radio 'Red'), closest group will be div[role=radiogroup]
-         * @example
-         * <demo-toolbar>
-         *   <div role="radiogroup" aria-label="Text Color">
-         *     <button role="radio" aria-checked="false">Blue</button>
-         *     <button role="radio" aria-checked="true">Red</button>
-         *     <button role="radio" aria-checked="false">Green</button>
-         *   </div>
-         *   <div role="separator"></div>
-         *   <div role="checkboxgroup" aria-label="Text Color">
-         *     <button role="checkbox" aria-checked="false">Blue</button>
-         *     <button role="checkbox" aria-checked="true">Red</button>
-         *     <button role="checkbox" aria-checked="false">Green</button>
-         *   </div>
-         * </demo-toolbar>
-         */
-        let closestGroup;
-        if (role === 'radio') {
-          closestGroup = item.closest('[role="radiogroup"]');
-        } else if (role === 'checkbox') {
-          closestGroup = item.closest('[role="checkboxgroup"]');
-        }
-
-        const group = closestGroup && this.contains(closestGroup) ? closestGroup : this;
-        listItemsWithinGroup = this.listItems.filter(listItem => group.contains(listItem));
-        multiple = role === 'checkbox';
-      }
-
-      if (!multiple) {
-        // Uncheck all
-        listItemsWithinGroup.forEach(listItem => {
-          setChecked(listItem, true);
-        });
-        setChecked(this.listItems[index]);
-      } else {
-        toggleChecked(this.listItems[index]);
-      }
-    }
-  }
-
-  /**
-   * @param {*} newItems
-   */
-  _initListItems(newItems) {
-    super._initListItems(newItems);
-
-    // @ts-ignore - forEach parameter
-    newItems.forEach(item => {
-      if (
-        item.getAttribute('role') === 'button' ||
-        (item.tagName === 'BUTTON' && !item.hasAttribute('role'))
-      ) {
-        const initialAriaPressed = item.getAttribute('aria-pressed');
-        item.setAttribute('aria-pressed', initialAriaPressed || 'false');
-
-        item.addEventListener('click', () => {
-          const ariaPressed = item.getAttribute('aria-pressed') === 'true';
-          item.setAttribute('aria-pressed', `${!ariaPressed}`);
-        });
-      }
-    });
-  }
-}
-
-customElements.define('demo-toolbar', DemoToolbar);

package/docs/components/menu/src/DemoTree.js

@@ -1,55 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/no-relative-packages */
-import { LitElement } from 'lit';
-import { MultiLevelListMixin } from '../../../../packages/ui/components/menu/src/MultiLevelListMixin.js';
-
-// @ts-ignore - class extension with mixin
-export class DemoTree extends MultiLevelListMixin(LitElement) {
-  constructor() {
-    super();
-
-    /** @configure InteractiveListMixin */
-    this._listRole = 'tree';
-    /** @configure InteractiveListMixin */
-    this._activateOnTypedChars = true;
-    /** @configure DisclosureMixin */
-    this.invokerInteraction = 'click';
-  }
-
-  /**
-   * @param {*} changedProperties
-   */
-  updated(changedProperties) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('level')) {
-      if (this.level > 1) {
-        this._listNode.setAttribute('role', 'group');
-      }
-      this.__setAriaLevelForListItems();
-    }
-  }
-
-  /**
-   * @param {*} newItems
-   */
-  _initListItems(newItems) {
-    // @ts-ignore - parameter types
-    super._initListItems(newItems);
-
-    this.__setAriaLevelForListItems();
-    // @ts-ignore - forEach parameters
-    newItems.forEach((item, index) => {
-      item.setAttribute('aria-posinset', `${index + 1}`);
-      item.setAttribute('aria-setsize', `${this.listItems.length}`);
-    });
-  }
-
-  __setAriaLevelForListItems() {
-    this.listItems.forEach(item => {
-      item.setAttribute?.('aria-level', `${this.level + 1}`);
-    });
-  }
-}
-
-customElements.define('demo-tree', DemoTree);

package/docs/components/menu/src/navigation-bar-types.js

@@ -1,41 +0,0 @@
-/**
- * @typedef {'mobile' | 'desktop'} NavBarResponsiveMode
- * Responsive mode for the navigation bar
- */
-
-/**
- * @typedef {Object} MenuItem
- * Navigation menu item
- * @property {string} [id] - Optional unique identifier
- * @property {string} title - Display title of the menu item
- * @property {string} [link] - URL for the menu item (for leaf items)
- * @property {MenuItem[]} [sub] - Submenu items (for parent items)
- */
-
-/**
- * @typedef {Object} CtaLink
- * Call-to-action link
- * @property {string} [id] - Optional unique identifier
- * @property {string} [href] - URL for the CTA
- * @property {string} [text] - Display text for the CTA
- * @property {string} [label] - Accessible label for the CTA
- */
-
-/**
- * @typedef {Object} Logo
- * Logo configuration for the navigation bar
- * @property {string} type - Logo type (e.g., 'ing')
- * @property {string} alt - Alternative text for the logo
- * @property {string} href - URL the logo links to
- * @property {string} [src] - Optional custom logo source URL
- */
-
-/**
- * @typedef {Object} LevelConfig
- * Configuration for a menu level
- * @property {boolean} [isBar] - Whether this level is displayed as a bar
- * @property {boolean} [hasFullWidthFlyout] - Whether this level has a full-width flyout
- * @property {object} [openableConfig] - Configuration for the openable overlay
- */
-
-export {};

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

@@ -1,74 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Menu
-  - Use Cases
-eleventyNavigation:
-  key: 'Menu: Use Cases'
-  order: 20
-  parent: Menu
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from 'lit';
-import '@lion/ui/define/lion-item.js';
-import '@lion/ui/define/lion-menu.js';
-import { applyMenuDemoStyles } from './applyMenuDemoStyles.js';
-
-applyMenuDemoStyles();
-```
-
-## Default
-
-```html preview-story
-<nav>
-  <button data-invoker>Open menu</button>
-  <lion-menu>
-    <div role="menuitem">Go to Definition</div>
-    <div role="menuitem">Go to Type Definition</div>
-    <div>
-      <button role="menuitem" data-invoker>Peek</button>
-      <lion-menu>
-        <div role="menuitem">Peek Call Hierarchy</div>
-        <div role="separator"></div>
-        <div role="menuitem">Peek Definition</div>
-      </lion-menu>
-    </div>
-    <div role="separator"></div>
-    <div role="menuitem">Find all References</div>
-  </lion-menu>
-</nav>
-```
-
-## Overflow
-
-## Attributes & Properties
-
-### Bar
-
-By adding the `bar` attribute the axis will be set to `inline` and the role will be set to menubar.
-
-```html preview-story
-<nav>
-  <lion-menu bar>
-    <div>
-      <a role="menuitem" data-invoker href="#home">home</a>
-    </div>
-    <div role="menuitem">Go to Definition</div>
-    <div role="menuitem">Go to Type Definition</div>
-    <div>
-      <button role="menuitem" data-invoker>Details</button>
-      <lion-menu>
-        <div role="menuitem">Peek Call Hierarchy</div>
-        <div role="separator"></div>
-        <div role="menuitem">Peek Definition</div>
-      </lion-menu>
-    </div>
-    <div role="separator"></div>
-    <div role="menuitem">Find all References</div>
-  </lion-menu>
-</nav>
-```

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

@@ -1,45 +0,0 @@
----
-parts:
-  - API Table
-  - Pagination
-title: 'Pagination: API Table'
-eleventyNavigation:
-  key: API Table >> Pagination
-  title: API Table
-  order: 90
-  parent: Pagination
----
-# Pagination: API Table
- 
-
-## class: `LionPagination`, `lion-pagination`
-
-### Fields
-
-| Name      | Privacy | Type     | Default | Description | Inherited From |
-| --------- | ------- | -------- | ------- | ----------- | -------------- |
-| `count`   | public  | `number` | `0`     |             |                |
-| `current` | public  | `number` | `1`     |             |                |
-
-### Methods
-
-| Name                      | Privacy   | Description                                                                                                      | Parameters                                             | Return             | Inherited From |
-| ------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------ | -------------- |
-| `first`                   | public    | Go to first page                                                                                                 |                                                        |                    |                |
-| `goto`                    | public    | Go to the specific page                                                                                          | `pageNumber: number`                                   |                    |                |
-| `last`                    | public    | Go to the last page                                                                                              |                                                        |                    |                |
-| `next`                    | public    | Go next in pagination                                                                                            |                                                        |                    |                |
-| `previous`                | public    | Go back in pagination                                                                                            |                                                        |                    |                |
-| `_disabledButtonTemplate` | protected | Get disabled button template.
This method can be overridden to apply customized template in wrapper.         | `label: String`                                        | `TemplateResult`   |                |
-| `_prevNextButtonTemplate` | protected | Get next or previous button template.
This method can be overridden to apply customized template in wrapper. | `label: String, pageNumber: Number, namespace: String` | `TemplateResult`   |                |
-| `_prevNextIconTemplate`   | protected | Get previous or next button template.
This method can be overridden to apply customized template in wrapper. | `label: String`                                        | `TemplateResult`   |                |
-| `_renderNavList`          | protected | Render navigation list                                                                                           |                                                        | `TemplateResult[]` |                |
-
-### Attributes
-
-| Name      | Field   | Inherited From |
-| --------- | ------- | -------------- |
-| `current` | current |                |
-| `count`   | count   |                |
-
-<hr/>

package/docs/components/pagination/index.md

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

package/docs/components/pagination/overview.md

@@ -1,41 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Pagination
-  - Overview
-eleventyNavigation:
-  key: 'Pagination: Overview'
-  order: 10
-  parent: Pagination
-  title: Overview
----
-
-# Overview
-
-A web component that handles pagination.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-pagination.js';
-```
-
-```js preview-story
-export const main = () => html` <lion-pagination count="20" current="10"></lion-pagination> `;
-```
-
-## Features
-
-- You can pass the total number of pages in the `count` parameter, and the current page in the `current` parameter. If `current` is not defined it will default to the value 1.
-- On a click or parameter change of `current` it will fire an event back called `current-changed`.
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionPagination } from '@lion/ui/pagination.js';
-// or
-import '@lion/ui/define/lion-pagination.js';
-```

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

@@ -1,113 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Pagination
-  - Use Cases
-eleventyNavigation:
-  key: 'Pagination: Use Cases'
-  order: 20
-  parent: Pagination
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-pagination.js';
-```
-
-## Without current defined
-
-```js preview-story
-export const withoutCurrentPage = () => {
-  return html` <lion-pagination count="20"></lion-pagination> `;
-};
-```
-
-## Ensure a count value
-
-Be sure to set a count value or you will get an "empty" pagination.
-
-```js preview-story
-export const ensureCount = () => {
-  return html` <lion-pagination></lion-pagination> `;
-};
-```
-
-### Methods
-
-There are the following methods available to control the pagination.
-
-- `next()`: move forward in pagination
-- `previous()`: goes back to pagination
-- `first()`: to the first page
-- `last()`: to the last page
-- `goto(pageNumber)`: to the specific page
-
-```js preview-story
-export const methods = ({ shadowRoot }) => {
-  setTimeout(() => {
-    shadowRoot.getElementById('pagination-method-demo').innerText =
-      shadowRoot.getElementById('pagination-method').current;
-  });
-
-  return html`
-    <p>The current page is: <span id="pagination-method-demo"></span></p>
-    <lion-pagination
-      id="pagination-method"
-      count="100"
-      current="75"
-      @current-changed=${e => {
-        const paginationState = shadowRoot.getElementById('pagination-method-demo');
-        paginationState.innerText = e.target.current;
-      }}
-    ></lion-pagination>
-    <section style="margin-top:16px">
-      <button @click="${() => shadowRoot.getElementById('pagination-method').previous()}">
-        Previous
-      </button>
-      <button @click="${() => shadowRoot.getElementById('pagination-method').next()}">Next</button>
-      <br />
-      <br />
-      <button @click="${() => shadowRoot.getElementById('pagination-method').first()}">
-        First
-      </button>
-      <button @click="${() => shadowRoot.getElementById('pagination-method').last()}">Last</button>
-      <br />
-      <br />
-      <button @click="${() => shadowRoot.getElementById('pagination-method').goto(55)}">
-        Go to 55
-      </button>
-    </section>
-  `;
-};
-```
-
-### Event
-
-`lion-pagination` fires an event on button click to notify the component's current state. It is useful for analytics purposes or to perform some actions on page change.
-
-- `@current-changed`: triggers when the current page is changed
-
-```js preview-story
-export const event = ({ shadowRoot }) => {
-  setTimeout(() => {
-    shadowRoot.getElementById('pagination-event-demo-text').innerText =
-      shadowRoot.getElementById('pagination-event-demo').current;
-  });
-
-  return html`
-    <p>The current page is: <span id="pagination-event-demo-text"></span></p>
-    <lion-pagination
-      id="pagination-event-demo"
-      count="10"
-      current="5"
-      @current-changed=${e => {
-        const paginationState = shadowRoot.getElementById('pagination-event-demo-text');
-        paginationState.innerText = e.target.current;
-      }}
-    ></lion-pagination>
-  `;
-};
-```

package/docs/components/progress-indicator/api-table.md

@@ -1,48 +0,0 @@
----
-parts:
-  - API Table
-  - Progress Indicator
-title: 'Progress Indicator: API Table'
-eleventyNavigation:
-  key: API Table >> Progress Indicator
-  title: API Table
-  order: 90
-  parent: Progress Indicator
----
-# Progress Indicator: API Table
- 
-
-## class: `LionProgressIndicator`, `lion-progress-indicator`
-
-### Fields
-
-| Name                  | Privacy   | Type      | Default | Description                                                                                                                                                              | Inherited From |
-| --------------------- | --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
-| `indeterminate`       | public    | `boolean` |         |                                                                                                                                                                          |                |
-| `max`                 | public    | `number`  | `100`   |                                                                                                                                                                          |                |
-| `min`                 | public    | `number`  | `0`     |                                                                                                                                                                          |                |
-| `value`               | public    | `number`  | `0`     |                                                                                                                                                                          |                |
-| `_ariaLabel`          | public    | `string`  | `''`    |                                                                                                                                                                          |                |
-| `_ariaLabelledby`     | public    | `string`  | `''`    |                                                                                                                                                                          |                |
-| `_progressPercentage` | protected |           |         | In case of a determinate progress-indicator it returns the progress percentage
based on value, min & max.
Could be used for styling inside the \_graphicTemplate |                |
-
-### Methods
-
-| Name                        | Privacy   | Description | Parameters | Return | Inherited From |
-| --------------------------- | --------- | ----------- | ---------- | ------ | -------------- |
-| `onLocaleUpdated`           | public    |             |            |        |                |
-| `_graphicTemplate`          | protected |             |            |        |                |
-| `_resetAriaValueAttributes` | protected |             |            |        |                |
-| `_setDefaultLabel`          | protected |             |            |        |                |
-
-### Attributes
-
-| Name              | Field            | Inherited From |
-| ----------------- | ---------------- | -------------- |
-| `value`           | value            |                |
-| `min`             | min              |                |
-| `max`             | max              |                |
-| `aria-label`      | \_ariaLabel      |                |
-| `aria-labelledby` | \_ariaLabelledby |                |
-
-<hr/>

package/docs/components/progress-indicator/assets/my-determinate-progress-bar.js

@@ -1,30 +0,0 @@
-import { css, html } from 'lit';
-import { LionProgressIndicator } from '@lion/ui/progress-indicator.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;
-        }
-      `,
-    ];
-  }
-
-  _graphicTemplate() {
-    return html` <div class="progress__filled" style="width: ${this._progressPercentage}%"></div> `;
-  }
-}
-
-customElements.define('my-determinate-progress-bar', MyDeterminateProgressBar);

package/docs/components/progress-indicator/assets/my-indeterminate-progress-spinner.js

@@ -1,55 +0,0 @@
-import { html, css } from 'lit';
-import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
-
-export 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>
-    `;
-  }
-}
-
-customElements.define('my-indeterminate-progress-spinner', MyIndeterminateProgressSpinner);