@universal-material/web 3.7.2 → 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-item.d.ts

@@ -2,8 +2,16 @@ import { HTMLTemplateResult, LitElement } from 'lit';
 export declare class OverflowMenuItem extends LitElement {
     #private;
     static styles: import("lit").CSSResult;
+    /**
+     * The accessible label for the action, used as the icon button's title
+     */
     get label(): string;
     set label(label: string);
+    /**
+     * Controls how the item behaves when space is limited.
+     * `'auto'` allows the item to be moved into the overflow menu;
+     * `'always'` keeps it permanently hidden behind the overflow trigger.
+     */
     collapse: 'auto' | 'always';
     icons: HTMLElement[];
     connectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu-item.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKhE,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,OAAgB,MAAM,0BAIpB;IASF,IACI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAE4B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEzC,KAAK,EAAG,WAAW,EAAE,CAAC;IAEtC,iBAAiB;IAUjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAOhD"}
+{"version":3,"file":"overflow-menu-item.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKhE,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,OAAgB,MAAM,0BAIpB;IASF;;OAEG;IACH,IACI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED;;;;OAIG;IAC0B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEzC,KAAK,EAAG,WAAW,EAAE,CAAC;IAEtC,iBAAiB;IAUjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAOhD"}

package/overflow-menu/overflow-menu-item.js

@@ -6,6 +6,11 @@ let OverflowMenuItem = class OverflowMenuItem extends LitElement {
         super(...arguments);
         this.#label = '';
         this.#mutationObserver = new MutationObserver(() => this.#parent?._renderMenuItems());
+        /**
+         * Controls how the item behaves when space is limited.
+         * `'auto'` allows the item to be moved into the overflow menu;
+         * `'always'` keeps it permanently hidden behind the overflow trigger.
+         */
         this.collapse = 'auto';
     }
     static { this.styles = css `
@@ -18,6 +23,9 @@ let OverflowMenuItem = class OverflowMenuItem extends LitElement {
     get #parent() {
         return this.parentElement;
     }
+    /**
+     * The accessible label for the action, used as the icon button's title
+     */
     get label() {
         return this.#label;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu-item.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK5E,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAOL,WAAM,GAAG,EAAE,CAAC;QACH,sBAAiB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC;QAgB7D,aAAQ,GAAsB,MAAM,CAAC;IA0BpE,CAAC;aAjDiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IAEF,MAAM,CAAM;IACH,iBAAiB,CAAgE;IAE1F,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,aAAoC,CAAC;IACnD,CAAC;IAGD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IACnC,CAAC;IAMQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,KAAK;;;KAGnC,CAAC;IACJ,CAAC;;AAlCD;IADC,QAAQ,EAAE;6CAGV;AAO4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAsC;AAEzC;IAAxB,qBAAqB,EAAE;+CAAuB;AA1BpC,gBAAgB;IAD5B,aAAa,CAAC,sBAAsB,CAAC;GACzB,gBAAgB,CAkD5B","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { type OverflowMenu } from './overflow-menu.js';\n\n@customElement('u-overflow-menu-item')\nexport class OverflowMenuItem extends LitElement {\n  static override styles = css`\n    :host([collapse=always]) {\n      display: none;\n    }\n  `;\n\n  #label = '';\n  readonly #mutationObserver = new MutationObserver(() => this.#parent?._renderMenuItems());\n\n  get #parent(): OverflowMenu | null {\n    return this.parentElement as OverflowMenu | null;\n  }\n\n  @property()\n  get label() {\n    return this.#label;\n  }\n\n  set label(label) {\n    this.#label = label;\n    this.#parent?._renderMenuItems();\n  }\n\n  @property({ reflect: true }) collapse: 'auto' | 'always' = 'auto';\n\n  @queryAssignedElements() icons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#mutationObserver.observe(this, {\n      subtree: true,\n      characterData: true,\n      childList: true,\n    });\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#mutationObserver.disconnect();\n  }\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <u-icon-button title=\"${this.label}\">\n        <slot></slot>\n      </u-icon-button>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"overflow-menu-item.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK5E,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAOL,WAAM,GAAG,EAAE,CAAC;QACH,sBAAiB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC;QAmB1F;;;;WAIG;QAC0B,aAAQ,GAAsB,MAAM,CAAC;IA0BpE,CAAC;aAzDiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IAEF,MAAM,CAAM;IACH,iBAAiB,CAAgE;IAE1F,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,aAAoC,CAAC;IACnD,CAAC;IAED;;OAEG;IAEH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IACnC,CAAC;IAWQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,KAAK;;;KAGnC,CAAC;IACJ,CAAC;;AAvCD;IADC,QAAQ,EAAE;6CAGV;AAY4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAsC;AAEzC;IAAxB,qBAAqB,EAAE;+CAAuB;AAlCpC,gBAAgB;IAD5B,aAAa,CAAC,sBAAsB,CAAC;GACzB,gBAAgB,CA0D5B","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { type OverflowMenu } from './overflow-menu.js';\n\n@customElement('u-overflow-menu-item')\nexport class OverflowMenuItem extends LitElement {\n  static override styles = css`\n    :host([collapse=always]) {\n      display: none;\n    }\n  `;\n\n  #label = '';\n  readonly #mutationObserver = new MutationObserver(() => this.#parent?._renderMenuItems());\n\n  get #parent(): OverflowMenu | null {\n    return this.parentElement as OverflowMenu | null;\n  }\n\n  /**\n   * The accessible label for the action, used as the icon button's title\n   */\n  @property()\n  get label() {\n    return this.#label;\n  }\n\n  set label(label) {\n    this.#label = label;\n    this.#parent?._renderMenuItems();\n  }\n\n  /**\n   * Controls how the item behaves when space is limited.\n   * `'auto'` allows the item to be moved into the overflow menu;\n   * `'always'` keeps it permanently hidden behind the overflow trigger.\n   */\n  @property({ reflect: true }) collapse: 'auto' | 'always' = 'auto';\n\n  @queryAssignedElements() icons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#mutationObserver.observe(this, {\n      subtree: true,\n      characterData: true,\n      childList: true,\n    });\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#mutationObserver.disconnect();\n  }\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <u-icon-button title=\"${this.label}\">\n        <slot></slot>\n      </u-icon-button>\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);