@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -0,0 +1,545 @@
+import { Host, h } from "@stencil/core";
+import { setAttributesIfChanged } from "../../utils/attributes";
+import { limitRestores } from "../../utils/keep-hydrated";
+import { computePosition, flip, offset, shift, size, autoUpdate, } from "@floating-ui/dom";
+/**
+ * @slot trigger - The trigger element for the dropdown menu. It receives `aria-expanded` and `aria-haspopup`, so slot the focusable control itself, such as a `pds-button`, not a wrapper around it.
+ * @slot (default) - The menu items: `pds-dropdown-menu-item` and `pds-dropdown-menu-separator` elements, or raw `<a>` and `<button>` elements.
+ * @slot header - Non-interactive content displayed above the menu items inside the dropdown panel. It renders outside the menu role, so assistive tech reads it as plain content rather than as a menu item.
+ * @part menu-panel - Exposes the dropdown menu container for styling.
+ */
+export class PdsDropdownMenu {
+    constructor() {
+        this.isOpen = false;
+        this.menuItems = [];
+        this.cleanupAutoUpdate = null;
+        // Counts each opening, so a position worked out for an earlier opening is ignored.
+        this.openCount = 0;
+        this.triggerObserver = null;
+        this.triggerVisibility = null;
+        this.currentFocusIndex = -1;
+        this.hasHeader = false;
+        /**
+         * The placement of the dropdown panel relative to the trigger.
+         */
+        this.placement = 'bottom-start';
+        this.handleTriggerSlotChange = (event) => {
+            this.slotEl = event.target;
+            // Get all elements assigned to this slot
+            const assignedElements = this.slotEl.assignedElements();
+            this.triggerEl = assignedElements[0];
+            if (this.triggerEl) {
+                this.triggerEl.onclick = this.handleClick;
+                this.syncTriggerAria();
+            }
+            this.observeTrigger();
+        };
+        // Writes the trigger's ARIA from the menu's state, so the observer's own callback doesn't loop.
+        this.syncTriggerAria = () => {
+            if (!this.triggerEl)
+                return false;
+            return setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+        };
+        this.handleHeaderSlotChange = (event) => {
+            this.hasHeader = event.target.assignedElements().length > 0;
+        };
+        this.handleSlotChange = (event) => {
+            this.slotEl = event.target;
+            // Get all elements assigned to this slot
+            const assignedElements = this.slotEl.assignedElements();
+            // Allowed elements: pds-dropdown-menu-item, pds-dropdown-menu-separator, <a>, <button>
+            // Raw <a> and <button> elements are allowed for edge cases requiring native browser/framework
+            // behavior (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.
+            const allowedTags = ['pds-dropdown-menu-item', 'pds-dropdown-menu-separator', 'a', 'button'];
+            const invalidElements = assignedElements.filter(el => !allowedTags.includes(el.tagName.toLowerCase()));
+            if (invalidElements.length > 0) {
+                const invalidTags = invalidElements.map(el => el.tagName.toLowerCase()).join(', ');
+                console.warn(`pds-dropdown-menu: Unexpected element(s) found: ${invalidTags}. ` +
+                    `Expected: ${allowedTags.join(', ')}`);
+            }
+            // Store all focusable items for keyboard navigation
+            // This includes pds-dropdown-menu-item components and raw <a>/<button> elements
+            this.menuItems = assignedElements.filter(el => {
+                const tag = el.tagName.toLowerCase();
+                return tag === 'pds-dropdown-menu-item' || tag === 'a' || tag === 'button';
+            });
+        };
+        // Toggle dropdown open/closed
+        this.toggleDropdown = () => {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.openDropdown();
+            }
+            else {
+                this.closeDropdown();
+            }
+        };
+        // Open the dropdown and position it
+        this.openDropdown = () => {
+            var _a;
+            const opening = ++this.openCount;
+            const updatePosition = () => {
+                computePosition(this.triggerEl, this.panelEl, {
+                    placement: this.placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset(6),
+                        flip(),
+                        shift({ padding: 5 }),
+                        size({ padding: 5, apply: ({ availableHeight, elements }) => this.capPanelHeight(elements.floating, availableHeight) }),
+                    ],
+                }).then(({ x, y }) => {
+                    if (!this.isOpen || opening !== this.openCount)
+                        return;
+                    Object.assign(this.panelEl.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                    });
+                });
+            };
+            // Initial position
+            updatePosition();
+            // Set up auto-update for window resize and scroll
+            this.cleanupAutoUpdate = autoUpdate(this.triggerEl, this.panelEl, updatePosition);
+            this.watchTriggerVisibility();
+            (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.remove('is-hidden');
+            this.isOpen = true;
+            this.syncTriggerAria();
+        };
+        // Close the dropdown. Closed because its trigger left the view, focus from the menu still goes back
+        // to the trigger, so it isn't lost, but without scrolling the trigger back into view. The next Tab
+        // carries on from there.
+        this.closeDropdown = ({ preventScroll = false } = {}) => {
+            var _a;
+            (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.add('is-hidden');
+            this.isOpen = false;
+            // Clean up auto-update
+            if (this.cleanupAutoUpdate) {
+                this.cleanupAutoUpdate();
+                this.cleanupAutoUpdate = null;
+            }
+            this.stopWatchingTriggerVisibility();
+            this.syncTriggerAria();
+            // Reset focus index
+            this.currentFocusIndex = -1;
+            // Return focus to trigger
+            if (this.isFocusInMenu()) {
+                this.focusTrigger(preventScroll);
+            }
+        };
+        // Handle click on the trigger element
+        this.handleClick = () => {
+            this.toggleDropdown();
+        };
+    }
+    componentWillLoad() {
+        this.hasHeader = Array.from(this.host.children).some(el => el.getAttribute('slot') === 'header');
+    }
+    componentDidRender() {
+        var _a;
+        this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
+    }
+    connectedCallback() {
+        // Moved within the page, the trigger slot doesn't change, so watch the same trigger again, and
+        // fix anything changed while the menu was detached and unobserved.
+        this.observeTrigger();
+        this.syncTriggerAria();
+    }
+    disconnectedCallback() {
+        var _a;
+        // Clean up auto-update when component is removed from DOM
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        this.stopWatchingTriggerVisibility();
+        // The menu was detached, so a position still being worked out for it is dropped. The menu
+        // itself stays open.
+        this.openCount++;
+    }
+    // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
+    // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
+    observeTrigger() {
+        var _a;
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        if (!this.triggerEl || typeof MutationObserver === 'undefined')
+            return;
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(this.syncTriggerAria, 'pds-dropdown-menu: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the menu opens or closes.', this.triggerEl));
+        this.triggerObserver.observe(this.triggerEl, {
+            attributes: true,
+            attributeFilter: ['aria-haspopup', 'aria-expanded'],
+        });
+    }
+    // The panel is fixed, so a menu taller than the room beside its trigger would run off the window
+    // with no way to reach its last items. It's capped to that room and scrolls inside itself. A
+    // smaller max-height set through the menu-panel part is kept. The cap is important, as a
+    // ::part() rule outside the shadow root otherwise beats the panel's own inline style.
+    //
+    // Removing `max-height` lifts the panel's own scroll constraint, so a layout read in between
+    // (`getComputedStyle`) can commit a frame with nothing left to scroll, and the browser resets
+    // `scrollTop` to 0. This runs on every `autoUpdate` pass, including a small ancestor scroll that
+    // leaves the trigger in view, so a menu scrolled partway down would otherwise jump back to the
+    // top on its own. Restoring `scrollTop` afterward keeps the user's place; the browser clamps it
+    // automatically if the new max-height is shorter than before.
+    capPanelHeight(panel, availableHeight) {
+        const { scrollTop } = panel;
+        panel.style.removeProperty('max-height');
+        const partMaxHeight = getComputedStyle(panel).maxHeight;
+        const room = `${Math.max(0, availableHeight)}px`;
+        panel.style.setProperty('max-height', partMaxHeight === 'none' ? room : `min(${partMaxHeight}, ${room})`, 'important');
+        panel.scrollTop = scrollTop;
+    }
+    // Once the trigger is fully out of view, scrolled or clipped by any container or the window, the
+    // menu closes rather than float away from it, much as a native select's list does. An
+    // IntersectionObserver measures against the layout viewport, so panning a pinch-zoomed page
+    // doesn't close it, as Floating UI's hide() would.
+    watchTriggerVisibility() {
+        this.stopWatchingTriggerVisibility();
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        // Only a trigger seen in view this opening closes the menu when it leaves.
+        let triggerSeen = false;
+        let broughtIntoView = false;
+        this.triggerVisibility = new IntersectionObserver((entries) => {
+            if (!this.isOpen)
+                return;
+            if (entries[entries.length - 1].isIntersecting) {
+                triggerSeen = true;
+            }
+            else if (triggerSeen) {
+                this.closeDropdown({ preventScroll: true });
+            }
+            else if (!broughtIntoView) {
+                // Opened with its trigger out of view, from the keyboard after an earlier close or from a
+                // script, the trigger is scrolled into view so the menu opens beside it. A trigger that
+                // still can't be seen leaves the menu open.
+                broughtIntoView = true;
+                this.triggerEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        });
+        this.triggerVisibility.observe(this.triggerEl);
+    }
+    stopWatchingTriggerVisibility() {
+        var _a;
+        (_a = this.triggerVisibility) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerVisibility = null;
+    }
+    // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
+    isFocusInMenu() {
+        const focused = this.host.getRootNode().activeElement;
+        return focused != null && this.host.contains(focused);
+    }
+    // A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
+    focusTrigger(preventScroll = false) {
+        var _a, _b;
+        this.triggerEl.focus({ preventScroll });
+        if (this.host.getRootNode().activeElement === this.triggerEl)
+            return;
+        (_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll });
+    }
+    // Check if a menu item is disabled (handles both component and raw elements)
+    isItemDisabled(item) {
+        const tagName = item.tagName.toLowerCase();
+        if (tagName === 'pds-dropdown-menu-item') {
+            return item.disabled;
+        }
+        else if (tagName === 'button') {
+            return item.disabled;
+        }
+        else if (tagName === 'a') {
+            return item.getAttribute('aria-disabled') === 'true';
+        }
+        return false;
+    }
+    // Get the index of the currently focused menu item
+    getFocusedItemIndex() {
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return -1;
+        // For raw elements, check direct match
+        // For pds-dropdown-menu-item, also check if the active element is inside the shadow root
+        return this.menuItems.findIndex(item => {
+            if (item === activeElement)
+                return true;
+            // Check if activeElement is inside the item's shadow root (for pds-dropdown-menu-item)
+            if (item.tagName.toLowerCase() === 'pds-dropdown-menu-item') {
+                const shadowRoot = item.shadowRoot;
+                if (shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.contains(activeElement))
+                    return true;
+            }
+            return false;
+        });
+    }
+    // Focus a specific menu item by index
+    focusItemByIndex(index) {
+        var _a, _b, _c, _d, _e;
+        if (index >= 0 && index < this.menuItems.length) {
+            this.currentFocusIndex = index;
+            const item = this.menuItems[index];
+            const tagName = item.tagName.toLowerCase();
+            if (tagName === 'pds-dropdown-menu-item') {
+                // For pds-dropdown-menu-item, focus the inner element
+                const menuItem = item;
+                const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
+                const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
+                    || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
+                if (innerControl) {
+                    innerControl.focus();
+                }
+                else if (innerLink) {
+                    innerLink.focus();
+                }
+                else {
+                    // Fallback to focusing the host
+                    menuItem.focus();
+                }
+            }
+            else {
+                // For raw <a> or <button> elements, focus directly
+                item.focus();
+            }
+        }
+    }
+    // Focus the next menu item
+    focusNextItem() {
+        let nextIndex = (this.currentFocusIndex + 1) % this.menuItems.length;
+        // Skip disabled items
+        let attempts = 0;
+        const maxAttempts = this.menuItems.length;
+        while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[nextIndex])) {
+            nextIndex = (nextIndex + 1) % this.menuItems.length;
+            attempts++;
+        }
+        // Only focus if we found a non-disabled item
+        if (attempts < maxAttempts) {
+            this.focusItemByIndex(nextIndex);
+        }
+    }
+    // Focus the previous menu item
+    focusPreviousItem() {
+        let prevIndex = this.currentFocusIndex <= 0
+            ? this.menuItems.length - 1
+            : this.currentFocusIndex - 1;
+        // Skip disabled items
+        let attempts = 0;
+        const maxAttempts = this.menuItems.length;
+        while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[prevIndex])) {
+            prevIndex = prevIndex <= 0 ? this.menuItems.length - 1 : prevIndex - 1;
+            attempts++;
+        }
+        // Only focus if we found a non-disabled item
+        if (attempts < maxAttempts) {
+            this.focusItemByIndex(prevIndex);
+        }
+    }
+    // Unlike the arrow keys, Tab stops at either end of the menu instead of wrapping.
+    adjacentEnabledIndex(fromIndex, step) {
+        for (let index = fromIndex + step; index >= 0 && index < this.menuItems.length; index += step) {
+            if (!this.isItemDisabled(this.menuItems[index]))
+                return index;
+        }
+        return -1;
+    }
+    // An enabled item can still refuse focus (hidden, or a link with no href), so each one is tried in turn.
+    focusAdjacentItem(fromIndex, step) {
+        for (let index = this.adjacentEnabledIndex(fromIndex, step); index !== -1; index = this.adjacentEnabledIndex(index, step)) {
+            this.focusItemByIndex(index);
+            if (this.getFocusedItemIndex() === index)
+                return true;
+        }
+        return false;
+    }
+    // Escape is taken in document's capture phase, before a modal around the menu hears it on
+    // document and closes too.
+    handleEscapeKeyDown(event) {
+        if (!this.isOpen || event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        event.preventDefault();
+        this.closeDropdown();
+    }
+    // Taken in the capture phase, so a modal or popover around the menu that traps Tab finds the key
+    // already handled, or focus back on the trigger with the items hidden.
+    handleTabKeyDown(event) {
+        if (!this.isOpen || event.key !== 'Tab' || event.defaultPrevented)
+            return;
+        const currentIndex = this.getFocusedItemIndex();
+        if (currentIndex === -1) {
+            // The menu sits after the trigger, so Shift+Tab from the trigger leaves it behind. So does Shift+Tab
+            // from outside the menu, where focus stays after a mouse open in Safari.
+            if (event.shiftKey && (document.activeElement === this.triggerEl || !this.isFocusInMenu()))
+                this.closeDropdown();
+            return;
+        }
+        if (this.focusAdjacentItem(currentIndex, event.shiftKey ? -1 : 1)) {
+            event.preventDefault();
+            return;
+        }
+        // Past either end, closing moves focus to the trigger. Shift+Tab stays there; Tab carries on past it.
+        if (event.shiftKey)
+            event.preventDefault();
+        this.closeDropdown();
+    }
+    // Handle keyboard events for the dropdown
+    handleKeyDown(event) {
+        if (!this.isOpen)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNextItem();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusPreviousItem();
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (this.menuItems.length > 0) {
+                    // Find first non-disabled item
+                    let firstIndex = 0;
+                    while (firstIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstIndex])) {
+                        firstIndex++;
+                    }
+                    if (firstIndex < this.menuItems.length) {
+                        this.focusItemByIndex(firstIndex);
+                    }
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                if (this.menuItems.length > 0) {
+                    // Find last non-disabled item
+                    let lastIndex = this.menuItems.length - 1;
+                    while (lastIndex >= 0 && this.isItemDisabled(this.menuItems[lastIndex])) {
+                        lastIndex--;
+                    }
+                    if (lastIndex >= 0) {
+                        this.focusItemByIndex(lastIndex);
+                    }
+                }
+                break;
+            case 'Tab': {
+                // Tab from an item is handled in handleTabKeyDown; from anywhere else it moves into the menu.
+                if (event.shiftKey || this.getFocusedItemIndex() !== -1)
+                    break;
+                if (this.focusAdjacentItem(-1, 1)) {
+                    event.preventDefault();
+                }
+                else {
+                    // With no item to move to, Tab carries on past the menu, as it does past the last item.
+                    this.closeDropdown();
+                }
+                break;
+            }
+        }
+    }
+    // Handle clicks outside the dropdown to close it
+    handleWindowClick(event) {
+        if (this.isOpen && !this.host.contains(event.target) && event.target !== this.triggerEl) {
+            this.closeDropdown();
+        }
+    }
+    render() {
+        return (h(Host, { key: '3baa07d7761a581606704b5e79e68d7bc585ff36' }, h("slot", { key: '527afc60b7b6f7c869c62924fd00791de2538955', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '2efeff541331bc0b39ed271984c680e14892ed0b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '591d61a9c12e10aef64638f1f51073321bddae69', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: 'c3a7fd69e0074be99508ae6b6c14bbd78fbc1f03', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '84c4f0cb77eadc86a5bb2b59c4b33f8691d2adfb', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '8c16bfd158a2be6009545562940c38ca433e1c47', onSlotchange: this.handleSlotChange })))));
+    }
+    static get is() { return "pds-dropdown-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-dropdown-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-dropdown-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlacementType",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PlacementType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::PlacementType",
+                            "referenceLocation": "PlacementType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the dropdown panel relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentFocusIndex": {},
+            "hasHeader": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleEscapeKeyDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleTabKeyDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/pds-dropdown-menu/stories/pds-dropdown-menu.stories.js

@@ -0,0 +1,100 @@
+import { html } from 'lit';
+
+
+export default {
+
+  component: 'pds-dropdown-menu',
+  title: 'components/Dropdown Menu',
+  parameters: {}
+}
+
+const BaseTemplate = (args) => html`
+<div style="height: 200px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger">My Trigger</pds-button>
+    <pds-dropdown-menu-item>Item 1</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item>Item 2</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item>Item 3</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item>Item 4</pds-dropdown-menu-item>
+    <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+    <pds-dropdown-menu-item>Item 5</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item>Item 6</pds-dropdown-menu-item>
+    <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+    <pds-dropdown-menu-item disabled>disabled</pds-dropdown-menu-item>
+    <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+    <pds-dropdown-menu-item destructive><pds-icon slot="start" name="trash"></pds-icon>Delete</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item href="https://wwww.google.com">Go to Google</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item href="https://wwww.google.com" disabled>Go to Google</pds-dropdown-menu-item>
+  </pds-dropdown-menu></div>`;
+
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'base-dropdown',
+  placement: 'bottom-start',
+}
+
+const InformationalTemplate = (args) => html`
+<div style="height: 200px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger" variant="secondary">Used on</pds-button>
+    <pds-dropdown-menu-item href="#products">3 products</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>2 forms</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item href="#emails">5 emails</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational href="#pages">1 page</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const Informational = InformationalTemplate.bind();
+Informational.args = {
+  componentId: 'informational-dropdown',
+  placement: 'bottom-start',
+}
+
+const InformationalOnlyTemplate = (args) => html`
+<div style="height: 200px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger" variant="secondary">Used on</pds-button>
+    <pds-dropdown-menu-item informational>3 products</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>2 forms</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>5 emails</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const InformationalOnly = InformationalOnlyTemplate.bind();
+InformationalOnly.args = {
+  componentId: 'informational-only-dropdown',
+  placement: 'bottom-start',
+}
+
+const WithIconsTemplate = (args) => html`
+<div style="height: 250px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger">Actions</pds-button>
+    <pds-dropdown-menu-item><pds-icon slot="start" name="pen"></pds-icon>Edit</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item><pds-icon slot="start" name="duplicate"></pds-icon>Duplicate</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item href="#export"><pds-icon slot="start" name="download"></pds-icon>Download</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item disabled><pds-icon slot="start" name="archive"></pds-icon>Archive</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational><pds-icon slot="start" name="gear"></pds-icon>Managed in settings</pds-dropdown-menu-item>
+    <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+    <pds-dropdown-menu-item destructive><pds-icon slot="start" name="trash"></pds-icon>Delete</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const WithIcons = WithIconsTemplate.bind();
+WithIcons.args = {
+  componentId: 'icons-dropdown',
+  placement: 'bottom-start',
+}

package/dist/collection/components/pds-filters/pds-filter/filter-interface.js

@@ -0,0 +1 @@
+export {};