@dile/ui 3.16.2 → 3.17.0

package/components/bottom-nav/bottom-nav-item.js

@@ -0,0 +1,5 @@
+import { DileBottomNavItem } from "./src/DileBottomNavItem.js";
+
+if (!customElements.get("dile-bottom-nav-item")) {
+  window.customElements.define("dile-bottom-nav-item", DileBottomNavItem);
+}

package/components/bottom-nav/bottom-nav.js

@@ -0,0 +1,6 @@
+import './bottom-nav-item.js';
+import { DileBottomNav } from "./src/DileBottomNav.js";
+
+if (!customElements.get("dile-bottom-nav")) {
+  window.customElements.define("dile-bottom-nav", DileBottomNav);
+}

package/components/bottom-nav/bottom-nav.spec.js

@@ -0,0 +1,340 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import '@dile/iconlib/lucide-icons/house.js';
+import './bottom-nav.js';
+
+describe('dile-bottom-nav', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    document.documentElement.style.overflow = '';
+  });
+
+  async function renderNav(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-bottom-nav');
+    await el.updateComplete;
+    const items = [...el.querySelectorAll('dile-bottom-nav-item')];
+    await Promise.all(items.map((item) => item.updateComplete));
+    // Wait for slotchange to detect the sheets.
+    await new Promise((resolve) => setTimeout(resolve));
+    await Promise.all(items.map((item) => item.updateComplete));
+    return { el, items };
+  }
+
+  function trigger(item) {
+    return item.shadowRoot.querySelector('.trigger');
+  }
+
+  it('renders a navigation landmark with the slotted items', async () => {
+    const { el, items } = await renderNav(`
+      <dile-bottom-nav label="App navigation">
+        <dile-bottom-nav-item label="Home"></dile-bottom-nav-item>
+        <dile-bottom-nav-item label="Search"></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    const nav = el.shadowRoot.querySelector('nav');
+    expect(nav.getAttribute('aria-label')).toBe('App navigation');
+    expect(items.length).toBe(2);
+    expect(items[0].shadowRoot.querySelector('.label').textContent).toBe('Home');
+  });
+
+  it('is fixed by default and in the document flow when static', async () => {
+    const { el } = await renderNav(`<dile-bottom-nav></dile-bottom-nav>`);
+    expect(getComputedStyle(el).position).toBe('fixed');
+
+    el.static = true;
+    await el.updateComplete;
+    expect(getComputedStyle(el).position).toBe('relative');
+  });
+
+  it('compensates the scrollbar width in the fixed bar while the page scroll is locked', async () => {
+    const { el } = await renderNav(`<dile-bottom-nav></dile-bottom-nav>`);
+    document.documentElement.style.setProperty('--dile-bottom-nav-scrollbar-width', '15px');
+
+    expect(getComputedStyle(el).paddingRight).toBe('15px');
+    el.static = true;
+    await el.updateComplete;
+    expect(getComputedStyle(el).paddingRight).toBe('0px');
+
+    document.documentElement.style.removeProperty('--dile-bottom-nav-scrollbar-width');
+  });
+
+  it('renders the icon of the item from a dile-iconlib string', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Home" icon="lucide.house"></dile-bottom-nav-item>
+        <dile-bottom-nav-item label="Search"></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    const icon = items[0].shadowRoot.querySelector('dile-iconlib');
+    expect(icon.getAttribute('icon')).toBe('lucide.house');
+    expect(items[1].shadowRoot.querySelector('dile-iconlib')).toBeNull();
+  });
+
+  it('marks the selected item by attribute and changes selection on click', async () => {
+    const { el, items } = await renderNav(`
+      <dile-bottom-nav attrForSelected="name" selected="home">
+        <dile-bottom-nav-item name="home" label="Home"></dile-bottom-nav-item>
+        <dile-bottom-nav-item name="search" label="Search"></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    expect(items[0].selected).toBe(true);
+    expect(trigger(items[0]).getAttribute('aria-current')).toBe('page');
+
+    let detail;
+    el.addEventListener('dile-selected-changed', (e) => { detail = e.detail; });
+    trigger(items[1]).click();
+    await el.updateComplete;
+
+    expect(el.selected).toBe('search');
+    expect(detail.selected).toBe('search');
+    expect(items[1].selected).toBe(true);
+    expect(items[0].selected).toBe(false);
+  });
+
+  it('dispatches dile-bottom-nav-item-click with the item name', async () => {
+    const { el, items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item name="home" label="Home"></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    let detail;
+    el.addEventListener('dile-bottom-nav-item-click', (e) => { detail = e.detail; });
+    trigger(items[0]).click();
+
+    expect(detail.name).toBe('home');
+  });
+
+  it('renders a native link when the item has an href', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Home" href="#home" target="_self"></dile-bottom-nav-item>
+        <dile-bottom-nav-item label="Search"></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    const link = items[0].shadowRoot.querySelector('a');
+    expect(link.getAttribute('href')).toBe('#home');
+    expect(link.getAttribute('target')).toBe('_self');
+    expect(items[1].shadowRoot.querySelector('a')).toBeNull();
+  });
+
+  it('opens the bottom sheet of an item with slotted content without changing the selection', async () => {
+    const { el, items } = await renderNav(`
+      <dile-bottom-nav attrForSelected="name" selected="home">
+        <dile-bottom-nav-item name="home" label="Home"></dile-bottom-nav-item>
+        <dile-bottom-nav-item name="create" label="Create">
+          <a href="#new">New</a>
+        </dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    const button = trigger(items[1]);
+    expect(button.getAttribute('aria-haspopup')).toBe('dialog');
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+
+    let opened = false;
+    el.addEventListener('dile-bottom-nav-sheet-opened', () => { opened = true; });
+    button.click();
+    await items[1].updateComplete;
+
+    expect(items[1].opened).toBe(true);
+    expect(opened).toBe(true);
+    expect(button.getAttribute('aria-expanded')).toBe('true');
+    expect(document.documentElement.style.overflow).toBe('hidden');
+    expect(el.selected).toBe('home');
+    expect(items[0].selected).toBe(true);
+  });
+
+  it('closes the sheet when clicking the overlay', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    await items[0].open();
+    let closed = false;
+    items[0].addEventListener('dile-bottom-nav-sheet-closed', () => { closed = true; });
+    items[0].shadowRoot.querySelector('.overlay').click();
+    await items[0].updateComplete;
+
+    expect(items[0].opened).toBe(false);
+    expect(closed).toBe(true);
+    expect(document.documentElement.style.overflow).toBe('');
+  });
+
+  it('closes the sheet when pressing Escape', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    await items[0].open();
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await items[0].updateComplete;
+
+    expect(items[0].opened).toBe(false);
+  });
+
+  it('closes the sheet when clicking an element with data-close', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Create">
+          <button id="keep">Keep</button>
+          <button id="close" data-close>Close</button>
+        </dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    await items[0].open();
+    document.getElementById('keep').click();
+    await items[0].updateComplete;
+    expect(items[0].opened).toBe(true);
+
+    document.getElementById('close').click();
+    await items[0].updateComplete;
+    expect(items[0].opened).toBe(false);
+  });
+
+  it('closes the sheet when clicking any link or button with close-on-click', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Create" close-on-click>
+          <button id="action">Action</button>
+        </dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    await items[0].open();
+    document.getElementById('action').click();
+    await items[0].updateComplete;
+
+    expect(items[0].opened).toBe(false);
+  });
+
+  it('keeps only one sheet opened at a time', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="One"><p>One</p></dile-bottom-nav-item>
+        <dile-bottom-nav-item label="Two"><p>Two</p></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    await items[0].open();
+    await items[1].open();
+    await items[0].updateComplete;
+
+    expect(items[0].opened).toBe(false);
+    expect(items[1].opened).toBe(true);
+  });
+
+  it('replaces the item icon with the close icon while the sheet is opened', async () => {
+    const { items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    expect(items[0].shadowRoot.querySelector('.close-icon')).toBeNull();
+    await items[0].open();
+    expect(items[0].shadowRoot.querySelector('.close-icon dile-iconlib').getAttribute('icon')).toBe('lucide.x');
+    expect(items[0].shadowRoot.querySelector('.trigger').textContent).toContain('Create');
+
+    trigger(items[0]).click();
+    await items[0].updateComplete;
+    expect(items[0].opened).toBe(false);
+    expect(items[0].shadowRoot.querySelector('.close-icon')).toBeNull();
+  });
+
+  it('places the sheet and the overlay above the bar', async () => {
+    const { el, items } = await renderNav(`
+      <dile-bottom-nav>
+        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
+      </dile-bottom-nav>
+    `);
+
+    await items[0].open();
+    await items[0].updateComplete;
+    const barTop = el.getBoundingClientRect().top;
+    const barHeight = window.innerHeight - barTop;
+    // Read the computed bottom instead of the bounding box, which is affected by the opening transition.
+    const sheetBottom = parseFloat(getComputedStyle(items[0].shadowRoot.querySelector('.sheet')).bottom);
+    const overlay = items[0].shadowRoot.querySelector('.overlay').getBoundingClientRect();
+
+    expect(sheetBottom).toBeGreaterThanOrEqual(Math.floor(barHeight));
+    expect(Math.round(overlay.bottom)).toBe(Math.round(barTop));
+  });
+
+  describe('static bar', () => {
+    async function renderStatic() {
+      const result = await renderNav(`
+        <div style="height: 400px"></div>
+        <dile-bottom-nav static style="width: 300px; margin: 0 auto;">
+          <dile-bottom-nav-item label="Home"></dile-bottom-nav-item>
+          <dile-bottom-nav-item label="Create"><button id="inside">Inside</button></dile-bottom-nav-item>
+        </dile-bottom-nav>
+        <button id="outside">Outside</button>
+      `);
+      await result.items[1].open();
+      await result.items[1].updateComplete;
+      return result;
+    }
+
+    it('opens a floating sheet without overlay and without locking the page scroll', async () => {
+      const { items } = await renderStatic();
+      const overlay = items[1].shadowRoot.querySelector('.overlay');
+      const sheet = items[1].shadowRoot.querySelector('.sheet');
+
+      expect(getComputedStyle(overlay).display).toBe('none');
+      expect(sheet.classList.contains('floating')).toBe(true);
+      expect(sheet.getAttribute('aria-modal')).toBe('false');
+      expect(document.documentElement.style.overflow).toBe('');
+    });
+
+    it('places the floating sheet above the trigger, centered and inside the viewport', async () => {
+      const { items } = await renderStatic();
+      const sheet = items[1].shadowRoot.querySelector('.sheet');
+      const triggerRect = trigger(items[1]).getBoundingClientRect();
+      // Inline position set by DileOverlay, not affected by the opening transition.
+      const top = parseFloat(sheet.style.top);
+      const left = parseFloat(sheet.style.left);
+      const width = sheet.offsetWidth;
+
+      expect(top + sheet.offsetHeight).toBeLessThanOrEqual(triggerRect.top);
+      expect(left).toBeGreaterThanOrEqual(10);
+      expect(left + width).toBeLessThanOrEqual(document.documentElement.clientWidth - 10);
+      const centered = triggerRect.left + triggerRect.width / 2 - width / 2;
+      const clamped = Math.min(Math.max(centered, 10), document.documentElement.clientWidth - width - 15);
+      expect(Math.round(left)).toBe(Math.round(clamped));
+    });
+
+    it('closes the floating sheet when clicking outside, but not inside', async () => {
+      const { items } = await renderStatic();
+
+      document.getElementById('inside').click();
+      await items[1].updateComplete;
+      expect(items[1].opened).toBe(true);
+
+      document.getElementById('outside').click();
+      await items[1].updateComplete;
+      expect(items[1].opened).toBe(false);
+    });
+
+    it('toggles the floating sheet from the trigger', async () => {
+      const { items } = await renderStatic();
+
+      trigger(items[1]).click();
+      await items[1].updateComplete;
+      expect(items[1].opened).toBe(false);
+
+      trigger(items[1]).click();
+      await items[1].updateComplete;
+      expect(items[1].opened).toBe(true);
+    });
+  });
+});

package/components/bottom-nav/index.js

@@ -0,0 +1,2 @@
+export { DileBottomNav } from './src/DileBottomNav.js';
+export { DileBottomNavItem } from './src/DileBottomNavItem.js';

package/components/bottom-nav/src/DileBottomNav.js

@@ -0,0 +1,88 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectable } from "../../../mixins/selectable/index.js";
+
+export class DileBottomNav extends DileSelectable(LitElement) {
+  static get properties() {
+    return {
+      /**
+       * If true the bar is not fixed at the bottom of the viewport, it is rendered in the document flow.
+       */
+      static: { type: Boolean, reflect: true },
+      /**
+       * Accessible name of the navigation landmark.
+       */
+      label: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.static = false;
+    this.label = 'Main navigation';
+    this.sheetOpenedHandler = this._closeOtherSheets.bind(this);
+  }
+
+  static get styles() {
+    return css`
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        display: block;
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: var(--dile-bottom-nav-z-index, 100);
+        background-color: var(--dile-bottom-nav-background-color, var(--dile-background-color, #fff));
+        border-top: var(--dile-bottom-nav-border-top, 1px solid rgba(0, 0, 0, 0.1));
+        box-shadow: var(--dile-bottom-nav-box-shadow, 0 -2px 8px rgba(0, 0, 0, 0.08));
+        padding-bottom: env(safe-area-inset-bottom, 0);
+      }
+      :host(:not([static])) {
+        /* Set while a bottom sheet locks the page scroll, so the items don't move when the scrollbar disappears. */
+        padding-right: var(--dile-bottom-nav-scrollbar-width, 0px);
+      }
+      :host([static]) {
+        position: relative;
+      }
+      nav {
+        display: flex;
+        align-items: stretch;
+        height: var(--dile-bottom-nav-height, 56px);
+        max-width: var(--dile-bottom-nav-max-width, none);
+        margin: 0 auto;
+      }
+      ::slotted(*) {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('dile-bottom-nav-sheet-opened', this.sheetOpenedHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('dile-bottom-nav-sheet-opened', this.sheetOpenedHandler);
+  }
+
+  render() {
+    return html`
+      <nav aria-label="${this.label}">
+        <slot></slot>
+      </nav>
+    `;
+  }
+
+  _closeOtherSheets(e) {
+    this.getItems().forEach(item => {
+      if (item !== e.detail.item && item.opened && typeof item.close === 'function') {
+        item.close();
+      }
+    });
+  }
+}

package/components/bottom-nav/src/DileBottomNavItem.js

@@ -0,0 +1,482 @@
+import { html, css, LitElement } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { DileSelectableItem } from "../../../mixins/selectable/index.js";
+import { DileCloseOnEscPressed } from "../../../mixins/close-on-esc-pressed/index.js";
+import { DileOverlay } from "../../../mixins/overlay/index.js";
+import '@dile/iconlib/dile-iconlib.js';
+// Glyph of the default close icon.
+import '@dile/iconlib/lucide-icons/x.js';
+
+// Number of opened sheets. The page scroll is locked while any sheet is opened.
+let openedSheets = 0;
+// Inline styles of the document before locking the page scroll.
+let scrollLockBackup = null;
+
+function updateScrollLock() {
+  const root = document.documentElement;
+  if (openedSheets > 0 && !scrollLockBackup) {
+    const scrollbarWidth = window.innerWidth - root.clientWidth;
+    scrollLockBackup = {
+      overflow: root.style.overflow,
+      paddingRight: root.style.paddingRight,
+    };
+    root.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      // Avoids the layout shift caused by the scrollbar disappearing, in the page and in the fixed bar.
+      const paddingRight = parseFloat(getComputedStyle(root).paddingRight) || 0;
+      root.style.paddingRight = `${paddingRight + scrollbarWidth}px`;
+      root.style.setProperty('--dile-bottom-nav-scrollbar-width', `${scrollbarWidth}px`);
+    }
+  } else if (openedSheets === 0 && scrollLockBackup) {
+    root.style.overflow = scrollLockBackup.overflow;
+    root.style.paddingRight = scrollLockBackup.paddingRight;
+    root.style.removeProperty('--dile-bottom-nav-scrollbar-width');
+    scrollLockBackup = null;
+  }
+}
+
+// DileOverlay is only used for its updatePosition() method, which places the floating sheet
+// next to the trigger and keeps it inside the viewport. open(), close() and toggle() are overridden.
+export class DileBottomNavItem extends DileOverlay(DileCloseOnEscPressed(DileSelectableItem(LitElement))) {
+  static get properties() {
+    return {
+      /**
+       * Icon to display, in the dile-iconlib `"family.name"` format (e.g. "lucide.house").
+       */
+      icon: { type: String },
+      /**
+       * Text displayed under the icon.
+       */
+      label: { type: String },
+      /**
+       * Value used to select the item when the bar has attrForSelected="name".
+       */
+      name: { type: String, reflect: true },
+      /**
+       * If set, the item is rendered as a native link.
+       */
+      href: { type: String },
+      /**
+       * Target of the native link.
+       */
+      target: { type: String },
+      /**
+       * Opened status of the bottom sheet. Only applies when the item has slotted content.
+       */
+      opened: { type: Boolean, reflect: true },
+      /**
+       * If true, an item with a bottom sheet also becomes selected when it is clicked.
+       */
+      selectable: { type: Boolean },
+      /**
+       * If true, the bottom sheet closes when any link or button inside it is clicked.
+       */
+      closeOnClick: { type: Boolean, attribute: 'close-on-click' },
+      /**
+       * Icon displayed in the item while its bottom sheet is opened, in the dile-iconlib `"family.name"` format.
+       */
+      closeIcon: { type: String, attribute: 'close-icon' },
+      _hasSheet: { state: true },
+      _offset: { state: true },
+      _floating: { state: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this.label = '';
+    this.opened = false;
+    this.selectable = false;
+    this.closeOnClick = false;
+    this._hasSheet = false;
+    this._offset = 0;
+    this._floating = false;
+    this.icon = '';
+    this.closeIcon = 'lucide.x';
+    // Floating sheet position, used when the bar is static (DileOverlay properties).
+    this.verticalAlign = 'top';
+    this.horizontalAlign = 'center';
+    this.moveTop = -8;
+    this._positionRafId = null;
+    this.viewportChangeHandler = this._onViewportChange.bind(this);
+    this.documentClickHandler = this._onDocumentClick.bind(this);
+  }
+
+  static get styles() {
+    return css`
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        display: block;
+        --dile-icon-size: var(--dile-bottom-nav-icon-size, 24px);
+        --dile-icon-color: var(--dile-bottom-nav-item-color, var(--dile-on-background-color, #666));
+      }
+      :host([selected]) {
+        --dile-icon-color: var(--dile-bottom-nav-item-selected-color, var(--dile-primary-color, #039be5));
+      }
+      .trigger {
+        all: unset;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--dile-bottom-nav-item-gap, 2px);
+        width: 100%;
+        height: 100%;
+        padding: var(--dile-bottom-nav-item-padding, 4px 2px);
+        cursor: pointer;
+        color: var(--dile-bottom-nav-item-color, var(--dile-on-background-color, #666));
+        text-decoration: none;
+        -webkit-tap-highlight-color: transparent;
+        transition: color 0.2s ease;
+      }
+      :host([selected]) .trigger {
+        color: var(--dile-bottom-nav-item-selected-color, var(--dile-primary-color, #039be5));
+      }
+      .trigger:focus-visible {
+        outline: 2px solid var(--dile-bottom-nav-item-selected-color, var(--dile-primary-color, #039be5));
+        outline-offset: -2px;
+        border-radius: 4px;
+      }
+      .icon {
+        display: flex;
+      }
+      .label {
+        max-width: 100%;
+        font-size: var(--dile-bottom-nav-label-font-size, 0.75rem);
+        font-weight: var(--dile-bottom-nav-label-font-weight, normal);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      :host([selected]) .label {
+        font-weight: var(--dile-bottom-nav-label-selected-font-weight, bold);
+      }
+
+      .close-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--dile-bottom-nav-close-icon-size, 44px);
+        height: var(--dile-bottom-nav-close-icon-size, 44px);
+        border-radius: 50%;
+        background-color: var(--dile-bottom-nav-close-icon-background-color, var(--dile-bottom-nav-item-selected-color, var(--dile-primary-color, #039be5)));
+        --dile-icon-color: var(--dile-bottom-nav-close-icon-color, var(--dile-bottom-nav-background-color, var(--dile-background-color, #fff)));
+        animation: dile-bottom-nav-close-in 0.3s ease;
+      }
+      @keyframes dile-bottom-nav-close-in {
+        from {
+          transform: rotate(-90deg) scale(0.5);
+          opacity: 0;
+        }
+      }
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+      }
+
+      .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        background-color: var(--dile-bottom-nav-overlay-background-color, rgba(0, 0, 0, 0.5));
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+      }
+      .sheet {
+        position: fixed;
+        left: var(--dile-bottom-nav-sheet-gap, 8px);
+        right: calc(var(--dile-bottom-nav-sheet-gap, 8px) + var(--dile-bottom-nav-scrollbar-width, 0px));
+        z-index: 2;
+        max-width: var(--dile-bottom-nav-sheet-max-width, none);
+        max-height: var(--dile-bottom-nav-sheet-max-height, 75vh);
+        margin: 0 auto;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        background-color: var(--dile-bottom-nav-sheet-background-color, var(--dile-background-color, #fff));
+        color: var(--dile-bottom-nav-sheet-text-color, var(--dile-on-background-color, #303030));
+        border-radius: var(--dile-bottom-nav-sheet-border-radius, 12px);
+        box-shadow: var(--dile-bottom-nav-sheet-box-shadow, 0 -4px 16px rgba(0, 0, 0, 0.2));
+        padding: var(--dile-bottom-nav-sheet-padding, 1rem);
+        opacity: 0;
+        transform: translateY(24px);
+        visibility: hidden;
+        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
+        outline: none;
+      }
+      .sheet.floating {
+        right: auto;
+        width: var(--dile-bottom-nav-sheet-width, 280px);
+        max-width: calc(100vw - 25px);
+        margin: 0;
+      }
+      :host([opened]) .overlay {
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 0.3s ease, visibility 0s;
+      }
+      :host([opened]) .sheet {
+        opacity: 1;
+        transform: translateY(0);
+        visibility: visible;
+        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
+      }
+      .nosheet, .overlay.floating {
+        display: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .trigger, .overlay, .sheet,
+        :host([opened]) .overlay, :host([opened]) .sheet {
+          transition: none;
+        }
+        .close-icon {
+          animation: none;
+        }
+      }
+    `;
+  }
+
+  // DileOverlay looks for #overlay and #trigger elements, not used in this component.
+  firstUpdated() {}
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeOpenedListeners();
+    this._releaseScrollLock();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('opened')) {
+      const wasOpened = changedProperties.get('opened');
+      if (this.opened) {
+        this._onOpened();
+      } else if (wasOpened) {
+        this._releaseScrollLock();
+        this._removeOpenedListeners();
+      }
+    }
+  }
+
+  _onOpened() {
+    if (this._floating) {
+      this._positionFloating();
+      document.addEventListener('click', this.documentClickHandler);
+      window.addEventListener('scroll', this.viewportChangeHandler, { passive: true, capture: true });
+    } else {
+      const sheet = this.shadowRoot.querySelector('.sheet');
+      sheet.style.top = '';
+      sheet.style.left = '';
+      if (!this._lockingScroll) {
+        this._lockingScroll = true;
+        openedSheets++;
+        updateScrollLock();
+      }
+      this._computeOffset();
+    }
+    window.addEventListener('resize', this.viewportChangeHandler, { passive: true });
+  }
+
+  _removeOpenedListeners() {
+    document.removeEventListener('click', this.documentClickHandler);
+    window.removeEventListener('scroll', this.viewportChangeHandler, { capture: true });
+    window.removeEventListener('resize', this.viewportChangeHandler);
+    if (this._positionRafId) {
+      cancelAnimationFrame(this._positionRafId);
+      this._positionRafId = null;
+    }
+  }
+
+  _onViewportChange() {
+    if (this._positionRafId) return;
+    this._positionRafId = requestAnimationFrame(() => {
+      this._positionRafId = null;
+      if (!this.opened) return;
+      if (this._floating) {
+        this._positionFloating();
+      } else {
+        this._computeOffset();
+      }
+    });
+  }
+
+  // Places the floating sheet over the trigger, centered and inside the viewport.
+  _positionFloating() {
+    this.overlay = this.shadowRoot.querySelector('.sheet');
+    this.trigger = this.shadowRoot.querySelector('.trigger');
+    this.updatePosition();
+  }
+
+  _onDocumentClick(e) {
+    if (!e.composedPath().includes(this)) {
+      this.close();
+    }
+  }
+
+  // Distance from the top of the bar to the bottom of the viewport, so the sheet and the overlay do not cover the bar.
+  _computeOffset() {
+    const bar = this.closest('dile-bottom-nav') || this;
+    const offset = window.innerHeight - bar.getBoundingClientRect().top;
+    this._offset = Math.min(Math.max(offset, 0), window.innerHeight);
+  }
+
+  _releaseScrollLock() {
+    if (this._lockingScroll) {
+      this._lockingScroll = false;
+      openedSheets--;
+      updateScrollLock();
+    }
+  }
+
+  render() {
+    return html`
+      ${this.href && !this._hasSheet ? this.linkTemplate : this.buttonTemplate}
+      <div
+        class="overlay ${this._hasSheet ? '' : 'nosheet'} ${this._floating ? 'floating' : ''}"
+        style="bottom: ${this._offset}px"
+        @click="${this.close}"
+      ></div>
+      <div
+        class="sheet ${this._hasSheet ? '' : 'nosheet'} ${this._floating ? 'floating' : ''}"
+        style=${styleMap({ bottom: this._floating ? 'auto' : `calc(${this._offset}px + var(--dile-bottom-nav-sheet-gap, 8px))` })}
+        role="dialog"
+        aria-modal="${!this._floating}"
+        aria-label="${this.label}"
+        aria-hidden="${!this.opened}"
+        tabindex="-1"
+        ?inert="${!this.opened}"
+      >
+        <slot @slotchange="${this._onSlotChange}" @click="${this._onSheetClick}"></slot>
+      </div>
+    `;
+  }
+
+  get contentTemplate() {
+    if (this.opened && this._hasSheet) {
+      return html`
+        <span class="close-icon" aria-hidden="true"><dile-iconlib icon=${this.closeIcon}></dile-iconlib></span>
+        <span class="visually-hidden">${this.label}</span>
+      `;
+    }
+    return html`
+      <span class="icon" aria-hidden="true">
+        <slot name="icon">${this.icon ? html`<dile-iconlib icon=${this.icon}></dile-iconlib>` : ''}</slot>
+      </span>
+      <span class="label">${this.label}</span>
+    `;
+  }
+
+  get linkTemplate() {
+    return html`
+      <a
+        class="trigger"
+        href="${this.href}"
+        target="${ifDefined(this.target)}"
+        aria-current="${ifDefined(this.selected ? 'page' : undefined)}"
+        @click="${this._onTriggerClick}"
+      >${this.contentTemplate}</a>
+    `;
+  }
+
+  get buttonTemplate() {
+    return html`
+      <button
+        class="trigger"
+        type="button"
+        aria-current="${ifDefined(this.selected && !this._hasSheet ? 'page' : undefined)}"
+        aria-haspopup="${ifDefined(this._hasSheet ? 'dialog' : undefined)}"
+        aria-expanded="${ifDefined(this._hasSheet ? String(this.opened) : undefined)}"
+        @click="${this._onTriggerClick}"
+      >${this.contentTemplate}</button>
+    `;
+  }
+
+  _onSlotChange(e) {
+    this._hasSheet = e.target.assignedNodes({ flatten: true }).some(node =>
+      node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '')
+    );
+    if (!this._hasSheet && this.opened) {
+      this.close();
+    }
+  }
+
+  _onTriggerClick() {
+    if (this._hasSheet) {
+      if (this.selectable) {
+        this.select();
+      }
+      this.toggle();
+    } else {
+      this.select();
+    }
+    this.dispatchEvent(new CustomEvent('dile-bottom-nav-item-click', {
+      bubbles: true,
+      composed: true,
+      detail: { name: this.name, item: this },
+    }));
+  }
+
+  _onSheetClick(e) {
+    const path = e.composedPath();
+    const limit = path.indexOf(e.currentTarget);
+    const nodes = limit >= 0 ? path.slice(0, limit) : path;
+    const closer = nodes.find(node =>
+      node instanceof Element &&
+      (node.hasAttribute('data-close') || (this.closeOnClick && (node.tagName === 'A' || node.tagName === 'BUTTON')))
+    );
+    if (closer) {
+      this.close();
+    }
+  }
+
+  toggle() {
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  async open() {
+    if (this.opened || !this._hasSheet) {
+      return;
+    }
+    // When the bar is static the sheet is a floating card over the item, without overlay.
+    this._floating = !!this.closest('dile-bottom-nav')?.static;
+    this.opened = true;
+    this.dispatchEvent(new CustomEvent('dile-bottom-nav-sheet-opened', {
+      bubbles: true,
+      composed: true,
+      detail: { name: this.name, item: this },
+    }));
+    await this.updateComplete;
+    this.shadowRoot.querySelector('.sheet').focus({ preventScroll: true });
+  }
+
+  async close() {
+    if (!this.opened) {
+      return;
+    }
+    const hadFocus = this.matches(':focus-within');
+    this.opened = false;
+    this.dispatchEvent(new CustomEvent('dile-bottom-nav-sheet-closed', {
+      bubbles: true,
+      composed: true,
+      detail: { name: this.name, item: this },
+    }));
+    await this.updateComplete;
+    if (hadFocus) {
+      this.shadowRoot.querySelector('.trigger').focus({ preventScroll: true });
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.16.2",
+  "version": "3.17.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0f1a6553d287b706db6f42c7001a25fdebc3bd3a"
+  "gitHead": "ea92314b81f3274d6f843b7a926fc528f1a13879"
 }