@universal-material/web 3.8.0 → 3.9.0

package/navigation-rail/navigation-rail.js

@@ -0,0 +1,223 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './navigation-rail.styles.js';
+import '../elevation/elevation.js';
+import './navigation-rail-headline.js';
+import './navigation-rail-item.js';
+/**
+ * Material 3 navigation rail — a responsive primary navigation surface that
+ * adapts to the viewport with two independently configurable destination
+ * sets:
+ *
+ * - **Mobile (< 840px)**: rail is hidden. `toggleDrawer` slides the
+ *   expanded rail in from the left as a **modal** over the content (with
+ *   scrim).
+ * - **Medium (840–1199px)**: a permanent 96dp **collapsed** sidebar shows
+ *   `slot="rail"` items. `toggleDrawer` slides the expanded rail in over
+ *   it as a **modal** (with scrim).
+ * - **Large (≥ 1200px)**: the expanded rail is permanent (no modal,
+ *   no scrim). `toggleDrawer` slides it back off the leading edge,
+ *   revealing the collapsed bar underneath.
+ *
+ * The expanded panel animates exactly like the side-navigation drawer:
+ * `inset-inline-start` transitions 375ms with the project's awesome cubic
+ * bezier easing.
+ *
+ * Slots:
+ *  - `rail`: primary destinations shown in the permanent collapsed bar
+ *    (`u-navigation-rail-item`s, no headlines).
+ *  - `expanded`: full destination list shown in the expanded panel —
+ *    `u-navigation-rail-item`s grouped by optional
+ *    `u-navigation-rail-headline`s.
+ *  - `top`: optional area pinned to the top of the rail (menu button,
+ *    brand mark, etc.).
+ *  - `bottom`: optional area pinned to the bottom of the rail (FAB,
+ *    secondary action, etc.).
+ *  - default: page content.
+ */
+let NavigationRail = class NavigationRail extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Toggle the rail's secondary state:
+         *
+         * - On mobile/medium: slides the expanded rail in from the left as a
+         *   modal overlay (with scrim). Click on the scrim to close.
+         * - On large: slides the expanded rail off, revealing the collapsed
+         *   96dp bar underneath.
+         */
+        this.toggleDrawer = false;
+        this.#handleScrimClick = () => {
+            this.toggleDrawer = false;
+        };
+        this.#handleCollapsedSlotChange = () => {
+            if (this.assignedCollapsedItems.length > 0) {
+                this.setAttribute('has-rail-items', '');
+            }
+            else {
+                this.removeAttribute('has-rail-items');
+            }
+            for (const item of this.assignedCollapsedItems) {
+                if (this.#isRailItem(item)) {
+                    item.variant = 'collapsed';
+                }
+            }
+        };
+        this.#handleExpandedSlotChange = () => {
+            if (this.assignedExpandedElements.length > 0) {
+                this.setAttribute('has-expanded-items', '');
+            }
+            else {
+                this.removeAttribute('has-expanded-items');
+            }
+            for (const el of this.assignedExpandedElements) {
+                if (this.#isRailItem(el)) {
+                    el.variant = 'expanded';
+                }
+            }
+        };
+        this.#handleTopSlotChange = () => {
+            if (this.assignedTop.length > 0) {
+                this.setAttribute('has-top', '');
+            }
+            else {
+                this.removeAttribute('has-top');
+            }
+        };
+        this.#handleBottomSlotChange = () => {
+            if (this.assignedBottom.length > 0) {
+                this.setAttribute('has-bottom', '');
+            }
+            else {
+                this.removeAttribute('has-bottom');
+            }
+        };
+    }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        return html `
+      <div class="grid">
+        <div class="rail-column"></div>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="scrim" part="scrim" @click=${this.#handleScrimClick}></div>
+      <aside class="rail" part="rail">
+        <div class="top" part="top">
+          <slot name="top" @slotchange=${this.#handleTopSlotChange}></slot>
+        </div>
+        <div class="rail-items" part="rail-items">
+          <slot name="rail" @slotchange=${this.#handleCollapsedSlotChange}></slot>
+        </div>
+        <div class="bottom" part="bottom">
+          <slot name="bottom" @slotchange=${this.#handleBottomSlotChange}></slot>
+        </div>
+        <div class="scroll-thumb" part="scroll-thumb" aria-hidden="true"></div>
+      </aside>
+      <aside class="rail-expanded" part="rail-expanded">
+        <div class="rail-items-expanded" part="rail-items-expanded">
+          <slot name="expanded" @slotchange=${this.#handleExpandedSlotChange}></slot>
+        </div>
+        <div class="scroll-thumb" part="scroll-thumb" aria-hidden="true"></div>
+      </aside>
+    `;
+    }
+    firstUpdated() {
+        this.#setupScrollThumb(this.railItemsEl, this.railThumbEl, this.railEl);
+        this.#setupScrollThumb(this.railItemsExpandedEl, this.railExpandedThumbEl, this.railExpandedEl);
+    }
+    // Builds the custom thumb behavior for one (container, thumb, parent) trio.
+    // Native scrollbar is hidden via CSS; this paints a thin overlay thumb
+    // whose top/height reflect the container's scroll metrics. Visible while
+    // the parent is hovered or has the `.scrolling` class (set briefly on
+    // every scroll event).
+    #setupScrollThumb(container, thumb, parent) {
+        const minThumbHeight = 24;
+        // Inset from the trailing rounded corners, matching the radius so the
+        // thumb visually sits inside the curve.
+        const trackInset = () => {
+            const v = getComputedStyle(parent).getPropertyValue('--_nav-rail-expanded-corner-shape').trim();
+            const n = parseFloat(v);
+            return Number.isFinite(n) ? n : 16;
+        };
+        const update = () => {
+            const ch = container.clientHeight;
+            const sh = container.scrollHeight;
+            if (sh <= ch + 1 || ch === 0) {
+                thumb.style.display = 'none';
+                return;
+            }
+            thumb.style.display = '';
+            const inset = trackInset();
+            const trackH = Math.max(0, ch - inset * 2);
+            const ratio = ch / sh;
+            const thumbH = Math.max(minThumbHeight, Math.floor(trackH * ratio));
+            const maxOffset = Math.max(0, trackH - thumbH);
+            const offset = ((sh - ch) <= 0 ? 0 : container.scrollTop / (sh - ch)) * maxOffset;
+            thumb.style.height = `${thumbH}px`;
+            thumb.style.top = `${inset + offset}px`;
+        };
+        let scrollTimer = 0;
+        container.addEventListener('scroll', () => {
+            update();
+            parent.classList.add('scrolling');
+            window.clearTimeout(scrollTimer);
+            scrollTimer = window.setTimeout(() => parent.classList.remove('scrolling'), 800);
+        }, { passive: true });
+        new ResizeObserver(update).observe(container);
+        update();
+        // Items added/removed by Lit changes scrollHeight without resizing the
+        // container, so we also refresh on slot mutations.
+        const slot = container.querySelector('slot');
+        slot?.addEventListener('slotchange', () => requestAnimationFrame(update));
+    }
+    #handleScrimClick;
+    #handleCollapsedSlotChange;
+    #handleExpandedSlotChange;
+    #handleTopSlotChange;
+    #handleBottomSlotChange;
+    #isRailItem(el) {
+        return el.tagName === 'U-NAVIGATION-RAIL-ITEM';
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'toggle-drawer', reflect: true })
+], NavigationRail.prototype, "toggleDrawer", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'rail', flatten: true })
+], NavigationRail.prototype, "assignedCollapsedItems", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'expanded', flatten: true })
+], NavigationRail.prototype, "assignedExpandedElements", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'top', flatten: true })
+], NavigationRail.prototype, "assignedTop", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'bottom', flatten: true })
+], NavigationRail.prototype, "assignedBottom", void 0);
+__decorate([
+    query('.rail')
+], NavigationRail.prototype, "railEl", void 0);
+__decorate([
+    query('.rail-expanded')
+], NavigationRail.prototype, "railExpandedEl", void 0);
+__decorate([
+    query('.rail-items')
+], NavigationRail.prototype, "railItemsEl", void 0);
+__decorate([
+    query('.rail-items-expanded')
+], NavigationRail.prototype, "railItemsExpandedEl", void 0);
+__decorate([
+    query('.rail .scroll-thumb')
+], NavigationRail.prototype, "railThumbEl", void 0);
+__decorate([
+    query('.rail-expanded .scroll-thumb')
+], NavigationRail.prototype, "railExpandedThumbEl", void 0);
+NavigationRail = __decorate([
+    customElement('u-navigation-rail')
+], NavigationRail);
+export { NavigationRail };
+//# sourceMappingURL=navigation-rail.js.map

package/navigation-rail/navigation-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.js","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './navigation-rail.styles.js';\n\nimport '../elevation/elevation.js';\nimport './navigation-rail-headline.js';\nimport './navigation-rail-item.js';\nimport type { NavigationRailItem } from './navigation-rail-item.js';\n\n/**\n * Material 3 navigation rail — a responsive primary navigation surface that\n * adapts to the viewport with two independently configurable destination\n * sets:\n *\n * - **Mobile (< 840px)**: rail is hidden. `toggleDrawer` slides the\n *   expanded rail in from the left as a **modal** over the content (with\n *   scrim).\n * - **Medium (840–1199px)**: a permanent 96dp **collapsed** sidebar shows\n *   `slot=\"rail\"` items. `toggleDrawer` slides the expanded rail in over\n *   it as a **modal** (with scrim).\n * - **Large (≥ 1200px)**: the expanded rail is permanent (no modal,\n *   no scrim). `toggleDrawer` slides it back off the leading edge,\n *   revealing the collapsed bar underneath.\n *\n * The expanded panel animates exactly like the side-navigation drawer:\n * `inset-inline-start` transitions 375ms with the project's awesome cubic\n * bezier easing.\n *\n * Slots:\n *  - `rail`: primary destinations shown in the permanent collapsed bar\n *    (`u-navigation-rail-item`s, no headlines).\n *  - `expanded`: full destination list shown in the expanded panel —\n *    `u-navigation-rail-item`s grouped by optional\n *    `u-navigation-rail-headline`s.\n *  - `top`: optional area pinned to the top of the rail (menu button,\n *    brand mark, etc.).\n *  - `bottom`: optional area pinned to the bottom of the rail (FAB,\n *    secondary action, etc.).\n *  - default: page content.\n */\n@customElement('u-navigation-rail')\nexport class NavigationRail extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  /**\n   * Toggle the rail's secondary state:\n   *\n   * - On mobile/medium: slides the expanded rail in from the left as a\n   *   modal overlay (with scrim). Click on the scrim to close.\n   * - On large: slides the expanded rail off, revealing the collapsed\n   *   96dp bar underneath.\n   */\n  @property({ type: Boolean, attribute: 'toggle-drawer', reflect: true }) toggleDrawer = false;\n\n  @queryAssignedElements({ slot: 'rail', flatten: true })\n  private readonly assignedCollapsedItems!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'expanded', flatten: true })\n  private readonly assignedExpandedElements!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'top', flatten: true })\n  private readonly assignedTop!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'bottom', flatten: true })\n  private readonly assignedBottom!: HTMLElement[];\n\n  @query('.rail') private readonly railEl!: HTMLElement;\n  @query('.rail-expanded') private readonly railExpandedEl!: HTMLElement;\n  @query('.rail-items') private readonly railItemsEl!: HTMLElement;\n  @query('.rail-items-expanded') private readonly railItemsExpandedEl!: HTMLElement;\n  @query('.rail .scroll-thumb') private readonly railThumbEl!: HTMLElement;\n  @query('.rail-expanded .scroll-thumb') private readonly railExpandedThumbEl!: HTMLElement;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"grid\">\n        <div class=\"rail-column\"></div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"scrim\" part=\"scrim\" @click=${this.#handleScrimClick}></div>\n      <aside class=\"rail\" part=\"rail\">\n        <div class=\"top\" part=\"top\">\n          <slot name=\"top\" @slotchange=${this.#handleTopSlotChange}></slot>\n        </div>\n        <div class=\"rail-items\" part=\"rail-items\">\n          <slot name=\"rail\" @slotchange=${this.#handleCollapsedSlotChange}></slot>\n        </div>\n        <div class=\"bottom\" part=\"bottom\">\n          <slot name=\"bottom\" @slotchange=${this.#handleBottomSlotChange}></slot>\n        </div>\n        <div class=\"scroll-thumb\" part=\"scroll-thumb\" aria-hidden=\"true\"></div>\n      </aside>\n      <aside class=\"rail-expanded\" part=\"rail-expanded\">\n        <div class=\"rail-items-expanded\" part=\"rail-items-expanded\">\n          <slot name=\"expanded\" @slotchange=${this.#handleExpandedSlotChange}></slot>\n        </div>\n        <div class=\"scroll-thumb\" part=\"scroll-thumb\" aria-hidden=\"true\"></div>\n      </aside>\n    `;\n  }\n\n  override firstUpdated(): void {\n    this.#setupScrollThumb(this.railItemsEl, this.railThumbEl, this.railEl);\n    this.#setupScrollThumb(this.railItemsExpandedEl, this.railExpandedThumbEl, this.railExpandedEl);\n  }\n\n  // Builds the custom thumb behavior for one (container, thumb, parent) trio.\n  // Native scrollbar is hidden via CSS; this paints a thin overlay thumb\n  // whose top/height reflect the container's scroll metrics. Visible while\n  // the parent is hovered or has the `.scrolling` class (set briefly on\n  // every scroll event).\n  #setupScrollThumb(container: HTMLElement, thumb: HTMLElement, parent: HTMLElement): void {\n    const minThumbHeight = 24;\n    // Inset from the trailing rounded corners, matching the radius so the\n    // thumb visually sits inside the curve.\n    const trackInset = (): number => {\n      const v = getComputedStyle(parent).getPropertyValue('--_nav-rail-expanded-corner-shape').trim();\n      const n = parseFloat(v);\n      return Number.isFinite(n) ? n : 16;\n    };\n\n    const update = (): void => {\n      const ch = container.clientHeight;\n      const sh = container.scrollHeight;\n      if (sh <= ch + 1 || ch === 0) {\n        thumb.style.display = 'none';\n        return;\n      }\n      thumb.style.display = '';\n      const inset = trackInset();\n      const trackH = Math.max(0, ch - inset * 2);\n      const ratio = ch / sh;\n      const thumbH = Math.max(minThumbHeight, Math.floor(trackH * ratio));\n      const maxOffset = Math.max(0, trackH - thumbH);\n      const offset = ((sh - ch) <= 0 ? 0 : container.scrollTop / (sh - ch)) * maxOffset;\n      thumb.style.height = `${thumbH}px`;\n      thumb.style.top = `${inset + offset}px`;\n    };\n\n    let scrollTimer = 0;\n    container.addEventListener('scroll', () => {\n      update();\n      parent.classList.add('scrolling');\n      window.clearTimeout(scrollTimer);\n      scrollTimer = window.setTimeout(() => parent.classList.remove('scrolling'), 800);\n    }, { passive: true });\n\n    new ResizeObserver(update).observe(container);\n    update();\n\n    // Items added/removed by Lit changes scrollHeight without resizing the\n    // container, so we also refresh on slot mutations.\n    const slot = container.querySelector('slot');\n    slot?.addEventListener('slotchange', () => requestAnimationFrame(update));\n  }\n\n  #handleScrimClick = (): void => {\n    this.toggleDrawer = false;\n  };\n\n  #handleCollapsedSlotChange = (): void => {\n    if (this.assignedCollapsedItems.length > 0) {\n      this.setAttribute('has-rail-items', '');\n    } else {\n      this.removeAttribute('has-rail-items');\n    }\n    for (const item of this.assignedCollapsedItems) {\n      if (this.#isRailItem(item)) {\n        item.variant = 'collapsed';\n      }\n    }\n  };\n\n  #handleExpandedSlotChange = (): void => {\n    if (this.assignedExpandedElements.length > 0) {\n      this.setAttribute('has-expanded-items', '');\n    } else {\n      this.removeAttribute('has-expanded-items');\n    }\n    for (const el of this.assignedExpandedElements) {\n      if (this.#isRailItem(el)) {\n        el.variant = 'expanded';\n      }\n    }\n  };\n\n  #handleTopSlotChange = (): void => {\n    if (this.assignedTop.length > 0) {\n      this.setAttribute('has-top', '');\n    } else {\n      this.removeAttribute('has-top');\n    }\n  };\n\n  #handleBottomSlotChange = (): void => {\n    if (this.assignedBottom.length > 0) {\n      this.setAttribute('has-bottom', '');\n    } else {\n      this.removeAttribute('has-bottom');\n    }\n  };\n\n  #isRailItem(el: Element): el is NavigationRailItem {\n    return el.tagName === 'U-NAVIGATION-RAIL-ITEM';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-navigation-rail': NavigationRail;\n  }\n}\n"]}

package/navigation-rail/navigation-rail.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=navigation-rail.styles.d.ts.map

package/navigation-rail/navigation-rail.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.styles.d.ts","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyNlB,CAAC"}

package/navigation-rail/navigation-rail.styles.js

@@ -0,0 +1,220 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_nav-rail-width: var(--u-nav-rail-width, 96px);
+    --_nav-rail-expanded-width: clamp(
+      var(--u-nav-rail-expanded-width-minimum, 220px),
+      var(--u-nav-rail-expanded-width, 360px),
+      var(--u-nav-rail-expanded-width-maximum, 360px)
+    );
+    --_nav-rail-expanded-width-negative: calc(var(--_nav-rail-expanded-width) * -1);
+    --_nav-rail-expanded-corner-shape: var(--u-nav-rail-expanded-corner-shape, var(--u-shape-corner-large, 16px));
+    --_navigation-width: 0;
+    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    --u-app-bar-offset: var(--_navigation-width);
+  }
+
+  :host(.disable-transition) * {
+    transition: none !important;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    transition: grid-template-columns 375ms cubic-bezier(0.19, 1, 0.22, 1);
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    --u-app-bar-offset: var(--_navigation-width);
+  }
+
+  .rail-column {
+    height: 100%;
+  }
+
+  .content {
+    height: 100%;
+    min-width: 0;
+  }
+
+  .rail {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: var(--_nav-rail-width);
+    height: 100%;
+    background-color: var(--u-nav-rail-container-color, var(--u-color-surface, rgb(254, 247, 255)));
+    color: var(--u-nav-rail-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+    overflow: hidden;
+    z-index: var(--u-nav-rail-z-index, 1030);
+  }
+
+  .rail-items {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--u-nav-rail-item-vertical-space, 4px);
+    padding-block: var(--u-nav-rail-vertical-trailing-space, 20px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .rail-expanded {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    inset-inline-start: var(--_nav-rail-expanded-width-negative);
+    inset-block-start: 0;
+    width: var(--_nav-rail-expanded-width);
+    height: 100%;
+    background-color: var(--u-nav-rail-container-color, var(--u-color-surface, rgb(254, 247, 255)));
+    color: var(--u-nav-rail-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+    overflow: hidden;
+    z-index: calc(var(--u-nav-rail-z-index, 1030) + 1);
+    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);
+    border-start-end-radius: var(--_nav-rail-expanded-corner-shape);
+    border-end-end-radius: var(--_nav-rail-expanded-corner-shape);
+  }
+
+  .top,
+  .bottom {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--u-nav-rail-edge-gap, 4px);
+  }
+
+  :host([has-top]) .top {
+    display: flex;
+    padding-block-start: var(--u-nav-rail-top-space, 44px);
+    min-height: calc(var(--u-nav-rail-top-space, 44px) + var(--u-nav-rail-header-space-minimum, 40px));
+  }
+
+  :host([has-bottom]) .bottom {
+    display: flex;
+    padding-block-end: var(--u-nav-rail-vertical-trailing-space, 20px);
+  }
+
+  .rail-items-expanded {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--u-nav-rail-expanded-between-item-space, 0);
+    padding-block: var(--u-nav-rail-vertical-trailing-space, 20px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+  }
+
+  :host([has-bottom]) .rail-items-expanded {
+    padding-block-end: 0;
+  }
+
+  :host([has-bottom]) .bottom {
+    padding-block-end: var(--u-nav-rail-vertical-trailing-space, 20px);
+  }
+
+  .rail-items,
+  .rail-items-expanded {
+    scrollbar-width: none;
+  }
+  .rail-items::-webkit-scrollbar,
+  .rail-items-expanded::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  .scroll-thumb {
+    position: absolute;
+    inset-inline-end: var(--u-nav-rail-scrollbar-inline-inset, 2px);
+    width: var(--u-nav-rail-scrollbar-width, 4px);
+    background: var(--u-nav-rail-scrollbar-thumb-color, var(--u-color-outline-variant, rgb(202, 196, 208)));
+    border-radius: 999px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 200ms;
+  }
+
+  .rail:hover .scroll-thumb,
+  .rail.scrolling .scroll-thumb,
+  .rail-expanded:hover .scroll-thumb,
+  .rail-expanded.scrolling .scroll-thumb {
+    opacity: 1;
+  }
+
+  .scrim {
+    --_modal-rail-open-progress: 0;
+    position: absolute;
+    inset: 0;
+    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));
+    pointer-events: none;
+    opacity: calc(var(--_scrim-opacity) * var(--_modal-rail-open-progress));
+    transition: opacity 375ms linear;
+    z-index: var(--u-nav-rail-z-index, 1030);
+  }
+
+  :host([toggle-drawer][has-expanded-items]) .rail-expanded {
+    display: flex;
+    inset-inline-start: 0;
+  }
+  :host([toggle-drawer][has-expanded-items]) .scrim {
+    --_modal-rail-open-progress: 1;
+    pointer-events: auto;
+  }
+
+  :host([has-expanded-items]) .rail-expanded {
+    display: flex;
+  }
+
+  @media (min-width: 840px) and (max-width: 1200px) {
+    :host([has-rail-items]) {
+      --_navigation-width: var(--_nav-rail-width);
+    }
+    :host([has-rail-items]) .rail {
+      display: flex;
+    }
+  }
+  @media (min-width: 1200px) {
+    :host,
+    :host([has-rail-items]) {
+      --_navigation-width: var(--_nav-rail-expanded-width);
+    }
+    :host([has-rail-items]:not([has-expanded-items])) {
+      --_navigation-width: var(--_nav-rail-width);
+    }
+    :host([toggle-drawer][has-rail-items]) {
+      --_navigation-width: var(--_nav-rail-width);
+    }
+    :host([toggle-drawer]:not([has-rail-items])) {
+      --_navigation-width: 0;
+    }
+    :host([toggle-drawer][has-rail-items]) .rail,
+    :host([has-rail-items]:not([has-expanded-items])) .rail {
+      display: flex;
+    }
+    :host([has-expanded-items]) .rail-expanded {
+      display: flex;
+      inset-inline-start: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+    :host([toggle-drawer][has-expanded-items]) .rail-expanded {
+      inset-inline-start: var(--_nav-rail-expanded-width-negative);
+    }
+    .scrim,
+    :host([toggle-drawer][has-expanded-items]) .scrim {
+      --_modal-rail-open-progress: 0;
+      pointer-events: none;
+    }
+  }
+`;
+//# sourceMappingURL=navigation-rail.styles.js.map

package/navigation-rail/navigation-rail.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.styles.js","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_nav-rail-width: var(--u-nav-rail-width, 96px);\n    --_nav-rail-expanded-width: clamp(\n      var(--u-nav-rail-expanded-width-minimum, 220px),\n      var(--u-nav-rail-expanded-width, 360px),\n      var(--u-nav-rail-expanded-width-maximum, 360px)\n    );\n    --_nav-rail-expanded-width-negative: calc(var(--_nav-rail-expanded-width) * -1);\n    --_nav-rail-expanded-corner-shape: var(--u-nav-rail-expanded-corner-shape, var(--u-shape-corner-large, 16px));\n    --_navigation-width: 0;\n    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  :host(.disable-transition) * {\n    transition: none !important;\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);\n    grid-template-rows: minmax(0, 1fr);\n    transition: grid-template-columns 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  .rail-column {\n    height: 100%;\n  }\n\n  .content {\n    height: 100%;\n    min-width: 0;\n  }\n\n  .rail {\n    display: none;\n    flex-direction: column;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: var(--_nav-rail-width);\n    height: 100%;\n    background-color: var(--u-nav-rail-container-color, var(--u-color-surface, rgb(254, 247, 255)));\n    color: var(--u-nav-rail-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    overflow: hidden;\n    z-index: var(--u-nav-rail-z-index, 1030);\n  }\n\n  .rail-items {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--u-nav-rail-item-vertical-space, 4px);\n    padding-block: var(--u-nav-rail-vertical-trailing-space, 20px);\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  .rail-expanded {\n    display: none;\n    flex-direction: column;\n    position: absolute;\n    inset-inline-start: var(--_nav-rail-expanded-width-negative);\n    inset-block-start: 0;\n    width: var(--_nav-rail-expanded-width);\n    height: 100%;\n    background-color: var(--u-nav-rail-container-color, var(--u-color-surface, rgb(254, 247, 255)));\n    color: var(--u-nav-rail-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    overflow: hidden;\n    z-index: calc(var(--u-nav-rail-z-index, 1030) + 1);\n    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    border-start-end-radius: var(--_nav-rail-expanded-corner-shape);\n    border-end-end-radius: var(--_nav-rail-expanded-corner-shape);\n  }\n\n  .top,\n  .bottom {\n    display: none;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--u-nav-rail-edge-gap, 4px);\n  }\n\n  :host([has-top]) .top {\n    display: flex;\n    padding-block-start: var(--u-nav-rail-top-space, 44px);\n    min-height: calc(var(--u-nav-rail-top-space, 44px) + var(--u-nav-rail-header-space-minimum, 40px));\n  }\n\n  :host([has-bottom]) .bottom {\n    display: flex;\n    padding-block-end: var(--u-nav-rail-vertical-trailing-space, 20px);\n  }\n\n  .rail-items-expanded {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--u-nav-rail-expanded-between-item-space, 0);\n    padding-block: var(--u-nav-rail-vertical-trailing-space, 20px);\n    overflow-y: auto;\n    overflow-x: hidden;\n    min-height: 0;\n  }\n\n  :host([has-bottom]) .rail-items-expanded {\n    padding-block-end: 0;\n  }\n\n  :host([has-bottom]) .bottom {\n    padding-block-end: var(--u-nav-rail-vertical-trailing-space, 20px);\n  }\n\n  .rail-items,\n  .rail-items-expanded {\n    scrollbar-width: none;\n  }\n  .rail-items::-webkit-scrollbar,\n  .rail-items-expanded::-webkit-scrollbar {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  .scroll-thumb {\n    position: absolute;\n    inset-inline-end: var(--u-nav-rail-scrollbar-inline-inset, 2px);\n    width: var(--u-nav-rail-scrollbar-width, 4px);\n    background: var(--u-nav-rail-scrollbar-thumb-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n    border-radius: 999px;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  .rail:hover .scroll-thumb,\n  .rail.scrolling .scroll-thumb,\n  .rail-expanded:hover .scroll-thumb,\n  .rail-expanded.scrolling .scroll-thumb {\n    opacity: 1;\n  }\n\n  .scrim {\n    --_modal-rail-open-progress: 0;\n    position: absolute;\n    inset: 0;\n    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    pointer-events: none;\n    opacity: calc(var(--_scrim-opacity) * var(--_modal-rail-open-progress));\n    transition: opacity 375ms linear;\n    z-index: var(--u-nav-rail-z-index, 1030);\n  }\n\n  :host([toggle-drawer][has-expanded-items]) .rail-expanded {\n    display: flex;\n    inset-inline-start: 0;\n  }\n  :host([toggle-drawer][has-expanded-items]) .scrim {\n    --_modal-rail-open-progress: 1;\n    pointer-events: auto;\n  }\n\n  :host([has-expanded-items]) .rail-expanded {\n    display: flex;\n  }\n\n  @media (min-width: 840px) and (max-width: 1200px) {\n    :host([has-rail-items]) {\n      --_navigation-width: var(--_nav-rail-width);\n    }\n    :host([has-rail-items]) .rail {\n      display: flex;\n    }\n  }\n  @media (min-width: 1200px) {\n    :host,\n    :host([has-rail-items]) {\n      --_navigation-width: var(--_nav-rail-expanded-width);\n    }\n    :host([has-rail-items]:not([has-expanded-items])) {\n      --_navigation-width: var(--_nav-rail-width);\n    }\n    :host([toggle-drawer][has-rail-items]) {\n      --_navigation-width: var(--_nav-rail-width);\n    }\n    :host([toggle-drawer]:not([has-rail-items])) {\n      --_navigation-width: 0;\n    }\n    :host([toggle-drawer][has-rail-items]) .rail,\n    :host([has-rail-items]:not([has-expanded-items])) .rail {\n      display: flex;\n    }\n    :host([has-expanded-items]) .rail-expanded {\n      display: flex;\n      inset-inline-start: 0;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n    :host([toggle-drawer][has-expanded-items]) .rail-expanded {\n      inset-inline-start: var(--_nav-rail-expanded-width-negative);\n    }\n    .scrim,\n    :host([toggle-drawer][has-expanded-items]) .scrim {\n      --_modal-rail-open-progress: 0;\n      pointer-events: none;\n    }\n  }\n`;\n"]}

package/overflow-menu/overflow-menu.d.ts

@@ -1,10 +1,16 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
-import { UmMenu } from '../menu/menu.js';
+import { Menu } from '../menu/menu.js';
 export declare class OverflowMenu extends LitElement {
     #private;
     static styles: import("lit").CSSResult;
     _renderMenu: boolean;
-    menu?: UmMenu;
+    /**
+     * The positioning strategy used by the collapsed-items popover. Use
+     * `'fixed'` when the overflow menu is rendered inside a clipped/scrollable
+     * container so the popover can escape its bounds.
+     */
+    menuPositioning: 'relative' | 'fixed';
+    menu?: Menu;
     set anchor(value: HTMLElement | null);
     get anchor(): HTMLElement | null;
     constructor();

package/overflow-menu/overflow-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAU,MAAM,KAAK,CAAC;AAMnE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIzC,qBACa,YAAa,SAAQ,UAAU;;IAC1C,OAAgB,MAAM,0BAAU;IAMvB,WAAW,UAAS;IAEZ,IAAI,CAAC,EAAE,MAAM,CAAC;IAG/B,IACI,MAAM,CAAC,KAAK,EAQF,WAAW,GAAG,IAAI,AARhB,EAMf;IAED,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;;IAaQ,iBAAiB;IAMjB,oBAAoB;cA+EV,MAAM,IAAI,kBAAkB;IAiC/C,gBAAgB;CAoBjB"}
+{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAU,MAAM,KAAK,CAAC;AAMnE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAIvC,qBACa,YAAa,SAAQ,UAAU;;IAC1C,OAAgB,MAAM,0BAAU;IAMvB,WAAW,UAAS;IAE7B;;;;OAIG;IAC0B,eAAe,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/D,IAAI,CAAC,EAAE,IAAI,CAAC;IAG7B,IACI,MAAM,CAAC,KAAK,EAQF,WAAW,GAAG,IAAI,AARhB,EAMf;IAED,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;;IAaQ,iBAAiB;IAMjB,oBAAoB;cA+EV,MAAM,IAAI,kBAAkB;IAiC/C,gBAAgB;CAoBjB"}

package/overflow-menu/overflow-menu.js

@@ -28,6 +28,12 @@ let OverflowMenu = class OverflowMenu extends LitElement {
         this.#items = [];
         this.#collapsedItems = [];
         this._renderMenu = false;
+        /**
+         * The positioning strategy used by the collapsed-items popover. Use
+         * `'fixed'` when the overflow menu is rendered inside a clipped/scrollable
+         * container so the popover can escape its bounds.
+         */
+        this.menuPositioning = 'relative';
         this.#anchor = null;
         this.#menuItemsContainer = document.createElement('div');
         this.#updateMenusTimeout = 0;
@@ -117,7 +123,7 @@ let OverflowMenu = class OverflowMenu extends LitElement {
                 </svg>
               </slot>
             </u-icon-button>
-            <u-menu anchor-corner="end-end">
+            <u-menu anchor-corner="end-end" positioning=${this.menuPositioning}>
               <slot name="menu-items"></slot>
             </u-menu>
           </div>
@@ -145,6 +151,9 @@ let OverflowMenu = class OverflowMenu extends LitElement {
 __decorate([
     state()
 ], OverflowMenu.prototype, "_renderMenu", void 0);
+__decorate([
+    property({ reflect: true })
+], OverflowMenu.prototype, "menuPositioning", void 0);
 __decorate([
     query('u-menu')
 ], OverflowMenu.prototype, "menu", void 0);

package/overflow-menu/overflow-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, render } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { OverflowMenuItem } from './overflow-menu-item.js';\nimport { styles } from './overflow-menu.styles.js';\n\n@customElement('u-overflow-menu')\nexport class OverflowMenu extends LitElement {\n  static override styles = styles;\n  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => this.#invalidate());\n  #items: OverflowMenuItem[] = [];\n\n  readonly #collapsedItems: OverflowMenuItem[] = [];\n\n  @state() _renderMenu = false;\n\n  @query('u-menu') menu?: UmMenu;\n\n  #anchor: HTMLElement | null = null;\n  @property()\n  set anchor(value) {\n    this.#anchor = value;\n\n    this.#invalidate();\n    this.#resizeObserver.disconnect();\n    this.#resizeObserver.observe(this.anchor!);\n  }\n\n  get anchor(): HTMLElement | null {\n    return this.#anchor ?? this;\n  }\n\n  readonly #menuItemsContainer = document.createElement('div');\n\n  #updateMenusTimeout = 0;\n\n  constructor() {\n    super();\n\n    this.#menuItemsContainer.slot = 'menu-items';\n    setTimeout(() => this.appendChild(this.#menuItemsContainer));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.anchor = this.anchor;\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#resizeObserver.disconnect();\n  }\n\n  #invalidate(): void {\n\n    this.#updateMenuToggleVisibility();\n    this.#updateMenuItems();\n  }\n\n  #updateMenuToggleVisibility(): void {\n\n    let collapsedCount = 0;\n    let hasAlwaysCollapsedItems = false;\n\n    for (const item of this.#items) {\n\n      hasAlwaysCollapsedItems = hasAlwaysCollapsedItems || item.collapse === 'always';\n\n      if (this.#isNotCollapsedMenuItem(item)) {\n        continue;\n      }\n\n      collapsedCount++;\n    }\n\n    const firstItem = this.#items[0];\n    const renderMenu = hasAlwaysCollapsedItems || !!firstItem && (this._renderMenu\n      ? collapsedCount > 1\n      : collapsedCount > 0);\n\n    if (this._renderMenu !== renderMenu) {\n      this._renderMenu = renderMenu;\n    }\n  }\n\n  #updateMenuItems(): void {\n\n    if (!this._renderMenu) {\n      this.#collapsedItems.length = 0;\n      return;\n    }\n\n    clearTimeout(this.#updateMenusTimeout);\n\n    this.#updateMenusTimeout = setTimeout(() => {\n      const previousCollapsedLength = this.#collapsedItems.length;\n      this.#collapsedItems.length = 0;\n\n      for (const item of this.#items) {\n\n        if (this.#isNotCollapsedMenuItem(item)) {\n          continue;\n        }\n\n        this.#collapsedItems.push(item);\n      }\n\n      if (previousCollapsedLength !== this.#collapsedItems.length) {\n        this.requestUpdate();\n      }\n    }, 100);\n  }\n\n  #isNotCollapsedMenuItem(item: OverflowMenuItem) {\n    return item.offsetTop === this.offsetTop && item.collapse !== 'always';\n  }\n\n  #handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.#items = slot\n      .assignedElements()\n      .filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')\n      .reverse() as OverflowMenuItem[];\n\n    this.#invalidate();\n  }\n\n  protected override render(): HTMLTemplateResult {\n    this._renderMenuItems();\n\n    const classes = { 'show-menu': this._renderMenu };\n\n    return html`\n      <div class=\"container ${classMap(classes)}\">\n        <div class=\"items-set\">\n          <div class=\"empty-space\"></div>\n          <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\n        </div>\n        ${when(this._renderMenu, () => html`\n          <div class=\"inner-menu\">\n            <u-icon-button @click=${{ handleEvent: () => this.menu?.toggle() }}>\n              <slot name=\"icon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\"\n                     fill=\"currentColor\">\n                  <path\n                    d=\"M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 \n                      33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 \n                      33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z\"/>\n                </svg>\n              </slot>\n            </u-icon-button>\n            <u-menu anchor-corner=\"end-end\">\n              <slot name=\"menu-items\"></slot>\n            </u-menu>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n\n  _renderMenuItems() {\n    const menuItems = html`\n      ${map(\n        this.#collapsedItems,\n        item => {\n          const nodes = item.childNodes.values();\n\n          return html`\n            <u-menu-item @click=${{ handleEvent: () => item.click() }}>\n              <div slot=\"leading-icon\">\n                ${map(nodes, node => node.cloneNode(true))}\n              </div>\n              \n              ${item.label}\n            </u-menu-item>\n          `;\n        })}`;\n\n    render(menuItems, this.#menuItemsContainer);\n  }\n}\n"]}
+{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, render } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { Menu } from '../menu/menu.js';\nimport { OverflowMenuItem } from './overflow-menu-item.js';\nimport { styles } from './overflow-menu.styles.js';\n\n@customElement('u-overflow-menu')\nexport class OverflowMenu extends LitElement {\n  static override styles = styles;\n  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => this.#invalidate());\n  #items: OverflowMenuItem[] = [];\n\n  readonly #collapsedItems: OverflowMenuItem[] = [];\n\n  @state() _renderMenu = false;\n\n  /**\n   * The positioning strategy used by the collapsed-items popover. Use\n   * `'fixed'` when the overflow menu is rendered inside a clipped/scrollable\n   * container so the popover can escape its bounds.\n   */\n  @property({ reflect: true }) menuPositioning: 'relative' | 'fixed' = 'relative';\n\n  @query('u-menu') menu?: Menu;\n\n  #anchor: HTMLElement | null = null;\n  @property()\n  set anchor(value) {\n    this.#anchor = value;\n\n    this.#invalidate();\n    this.#resizeObserver.disconnect();\n    this.#resizeObserver.observe(this.anchor!);\n  }\n\n  get anchor(): HTMLElement | null {\n    return this.#anchor ?? this;\n  }\n\n  readonly #menuItemsContainer = document.createElement('div');\n\n  #updateMenusTimeout = 0;\n\n  constructor() {\n    super();\n\n    this.#menuItemsContainer.slot = 'menu-items';\n    setTimeout(() => this.appendChild(this.#menuItemsContainer));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.anchor = this.anchor;\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#resizeObserver.disconnect();\n  }\n\n  #invalidate(): void {\n\n    this.#updateMenuToggleVisibility();\n    this.#updateMenuItems();\n  }\n\n  #updateMenuToggleVisibility(): void {\n\n    let collapsedCount = 0;\n    let hasAlwaysCollapsedItems = false;\n\n    for (const item of this.#items) {\n\n      hasAlwaysCollapsedItems = hasAlwaysCollapsedItems || item.collapse === 'always';\n\n      if (this.#isNotCollapsedMenuItem(item)) {\n        continue;\n      }\n\n      collapsedCount++;\n    }\n\n    const firstItem = this.#items[0];\n    const renderMenu = hasAlwaysCollapsedItems || !!firstItem && (this._renderMenu\n      ? collapsedCount > 1\n      : collapsedCount > 0);\n\n    if (this._renderMenu !== renderMenu) {\n      this._renderMenu = renderMenu;\n    }\n  }\n\n  #updateMenuItems(): void {\n\n    if (!this._renderMenu) {\n      this.#collapsedItems.length = 0;\n      return;\n    }\n\n    clearTimeout(this.#updateMenusTimeout);\n\n    this.#updateMenusTimeout = setTimeout(() => {\n      const previousCollapsedLength = this.#collapsedItems.length;\n      this.#collapsedItems.length = 0;\n\n      for (const item of this.#items) {\n\n        if (this.#isNotCollapsedMenuItem(item)) {\n          continue;\n        }\n\n        this.#collapsedItems.push(item);\n      }\n\n      if (previousCollapsedLength !== this.#collapsedItems.length) {\n        this.requestUpdate();\n      }\n    }, 100);\n  }\n\n  #isNotCollapsedMenuItem(item: OverflowMenuItem) {\n    return item.offsetTop === this.offsetTop && item.collapse !== 'always';\n  }\n\n  #handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.#items = slot\n      .assignedElements()\n      .filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')\n      .reverse() as OverflowMenuItem[];\n\n    this.#invalidate();\n  }\n\n  protected override render(): HTMLTemplateResult {\n    this._renderMenuItems();\n\n    const classes = { 'show-menu': this._renderMenu };\n\n    return html`\n      <div class=\"container ${classMap(classes)}\">\n        <div class=\"items-set\">\n          <div class=\"empty-space\"></div>\n          <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\n        </div>\n        ${when(this._renderMenu, () => html`\n          <div class=\"inner-menu\">\n            <u-icon-button @click=${{ handleEvent: () => this.menu?.toggle() }}>\n              <slot name=\"icon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\"\n                     fill=\"currentColor\">\n                  <path\n                    d=\"M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 \n                      33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 \n                      33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z\"/>\n                </svg>\n              </slot>\n            </u-icon-button>\n            <u-menu anchor-corner=\"end-end\" positioning=${this.menuPositioning}>\n              <slot name=\"menu-items\"></slot>\n            </u-menu>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n\n  _renderMenuItems() {\n    const menuItems = html`\n      ${map(\n        this.#collapsedItems,\n        item => {\n          const nodes = item.childNodes.values();\n\n          return html`\n            <u-menu-item @click=${{ handleEvent: () => item.click() }}>\n              <div slot=\"leading-icon\">\n                ${map(nodes, node => node.cloneNode(true))}\n              </div>\n              \n              ${item.label}\n            </u-menu-item>\n          `;\n        })}`;\n\n    render(menuItems, this.#menuItemsContainer);\n  }\n}\n"]}