@pine-ds/core 3.0.3 → 3.2.0

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

@@ -0,0 +1,72 @@
+import { Host, h } from "@stencil/core";
+export class PdsDropdownMenuSeparator {
+    constructor() {
+        /**
+         * It determines whether or not the dropdown-item is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { key: '71b19470921b7848e5f0c44ef82aa0d9f8ef2017', id: this.componentId }, h("hr", { key: 'efc84b6b3f3f35421c0af863fb2d4636e542773e' })));
+    }
+    static get is() { return "pds-dropdown-menu-separator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-dropdown-menu-separator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-dropdown-menu-separator.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 used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "It determines whether or not the dropdown-item is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-dropdown-menu-separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-dropdown-menu-separator.js","sourceRoot":"","sources":["../../../../src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,wBAAwB;IALrC;QAWE;;;WAGG;QACK,aAAQ,GAAY,KAAK,CAAC;KAUnC;IAPC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,4DAAK,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-separator',\n  styleUrl: 'pds-dropdown-menu-separator.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuSeparator implements BasePdsProps {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled: boolean = false;\n\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr/>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+.is-hidden {
+  display: none;
+}
+
+.pds-dropdown-menu--panel {
+  background-color: var(--pine-color-background-container);
+  left: var(--pine-dimension-none);
+  min-width: 170px;
+  padding: var(--pine-dimension-xs);
+  position: absolute;
+  z-index: 9999;
+}

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

@@ -0,0 +1,328 @@
+import { Host, h } from "@stencil/core";
+import { computePosition, flip, offset, shift, } from "@floating-ui/dom";
+export class PdsDropdownMenu {
+    constructor() {
+        this.isOpen = false;
+        this.menuItems = [];
+        this.currentFocusIndex = -1;
+        /**
+         * 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];
+            this.triggerEl.onclick = this.handleClick;
+            // Add accessibility attributes to trigger
+            this.triggerEl.setAttribute('aria-haspopup', 'menu');
+            this.triggerEl.setAttribute('aria-expanded', 'false');
+        };
+        this.handleSlotChange = (event) => {
+            this.slotEl = event.target;
+            // Get all elements assigned to this slot
+            const assignedElements = this.slotEl.assignedElements();
+            // ensure assignedElements only contains pds-dropdown-menu-item or pds-dropdown-menu-separator
+            // if there are other elements, throw an error
+            const invalidElements = assignedElements.filter(el => el.tagName.toLowerCase() !== 'pds-dropdown-menu-item' && el.tagName.toLowerCase() !== 'pds-dropdown-menu-separator');
+            if (invalidElements.length > 0) {
+                throw new Error(`pds-dropdown-menu only accepts pds-dropdown-menu-item and pds-dropdown-menu-separator elements`);
+            }
+            // Store all menu items for keyboard navigation
+            this.menuItems = assignedElements.filter(el => el.tagName.toLowerCase() === 'pds-dropdown-menu-item');
+        };
+        // 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;
+            computePosition(this.triggerEl, this.panelEl, {
+                placement: this.placement,
+                middleware: [offset(6), flip(), shift({ padding: 5 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.panelEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+            (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.remove('is-hidden');
+            this.isOpen = true;
+            // Update ARIA attributes
+            this.triggerEl.setAttribute('aria-expanded', 'true');
+        };
+        // Close the dropdown
+        this.closeDropdown = () => {
+            var _a;
+            (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.add('is-hidden');
+            this.isOpen = false;
+            // Update ARIA attributes
+            this.triggerEl.setAttribute('aria-expanded', 'false');
+            // Reset focus index
+            this.currentFocusIndex = -1;
+            // Return focus to trigger
+            this.triggerEl.focus();
+        };
+        // Handle click on the trigger element
+        this.handleClick = () => {
+            this.toggleDropdown();
+        };
+    }
+    componentDidRender() {
+        var _a;
+        this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
+    }
+    // Get the index of the currently focused menu item
+    getFocusedItemIndex() {
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return -1;
+        return this.menuItems.findIndex(item => item === activeElement);
+    }
+    // Focus a specific menu item by index
+    focusItemByIndex(index) {
+        var _a, _b, _c, _d;
+        if (index >= 0 && index < this.menuItems.length) {
+            this.currentFocusIndex = index;
+            // Focus the inner button/link instead of the host element
+            const menuItem = this.menuItems[index];
+            const innerButton = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+            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');
+            if (innerButton) {
+                return innerButton.focus();
+            }
+            else if (innerLink) {
+                return innerLink.focus();
+            }
+            else {
+                // Fallback to focusing the host if we can't find the inner element
+                menuItem.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.menuItems[nextIndex].disabled) {
+            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.menuItems[prevIndex].disabled) {
+            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);
+        }
+    }
+    // Handle keyboard events for the dropdown
+    handleKeyDown(event) {
+        if (!this.isOpen)
+            return;
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.closeDropdown();
+                break;
+            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.menuItems[firstIndex].disabled) {
+                        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.menuItems[lastIndex].disabled) {
+                        lastIndex--;
+                    }
+                    if (lastIndex >= 0) {
+                        this.focusItemByIndex(lastIndex);
+                    }
+                }
+                break;
+            case 'Tab':
+                if (event.shiftKey) {
+                    // Let Shift+Tab navigate naturally from first item to trigger
+                    // For all other items, move to previous item
+                    const currentIndex = this.getFocusedItemIndex();
+                    if (currentIndex > 0) {
+                        // If not on first item, prevent default and go to previous item
+                        event.preventDefault();
+                        this.focusPreviousItem(); // Use our method that skips disabled items
+                    }
+                    // If on first item or no item, let natural tab order move back to trigger
+                }
+                else {
+                    // Forward Tab navigation
+                    const activeElement = document.activeElement;
+                    const isTriggerFocused = activeElement === this.triggerEl;
+                    const currentIndex = this.getFocusedItemIndex();
+                    if (isTriggerFocused && this.menuItems.length > 0) {
+                        // If trigger is focused, move to first non-disabled menu item
+                        event.preventDefault();
+                        // Find the first non-disabled item
+                        let firstFocusableIndex = 0;
+                        while (firstFocusableIndex < this.menuItems.length && this.menuItems[firstFocusableIndex].disabled) {
+                            firstFocusableIndex++;
+                        }
+                        if (firstFocusableIndex < this.menuItems.length) {
+                            this.focusItemByIndex(firstFocusableIndex);
+                        }
+                    }
+                    else if (currentIndex === -1 && this.menuItems.length > 0) {
+                        // If no menu item is focused, focus the first non-disabled one
+                        event.preventDefault();
+                        // Find the first non-disabled item
+                        let firstFocusableIndex = 0;
+                        while (firstFocusableIndex < this.menuItems.length && this.menuItems[firstFocusableIndex].disabled) {
+                            firstFocusableIndex++;
+                        }
+                        if (firstFocusableIndex < this.menuItems.length) {
+                            this.focusItemByIndex(firstFocusableIndex);
+                        }
+                    }
+                    else if (currentIndex !== -1) {
+                        // Use our method that skips disabled items
+                        event.preventDefault();
+                        this.focusNextItem();
+                    }
+                }
+                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: '492d6a2baba8c0cf5e05a6c34b774900f5da6886', id: this.componentId }, h("slot", { key: '9d57ee287cff289693c941410bcc62bb9fb1da95', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '62ae569a3bf7f958c01cfe1a74d174e413763f72', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'ea6d26124c06683e4fde23bc29f955cb04468d7a', 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 used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the dropdown panel relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom-start'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentFocusIndex": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pds-dropdown-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-dropdown-menu.js","sourceRoot":"","sources":["../../../src/components/pds-dropdown-menu/pds-dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Listen, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\nimport { PlacementType } from '@utils/types';\nimport {  computePosition,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\n\n@Component({\n  tag: 'pds-dropdown-menu',\n  styleUrl: 'pds-dropdown-menu.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenu implements BasePdsProps {\n  private slotEl: HTMLSlotElement;\n  private triggerEl: HTMLElement;\n  private panelEl: HTMLPdsBoxElement;\n  private isOpen: boolean = false;\n  private menuItems: HTMLPdsDropdownMenuItemElement[] = [];\n\n  @Element() host: HTMLPdsDropdownMenuElement;\n\n  @State() currentFocusIndex: number = -1;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The placement of the dropdown panel relative to the trigger.\n   */\n  @Prop() placement: PlacementType = 'bottom-start';\n\n  componentDidRender() {\n    this.panelEl = this.host.shadowRoot?.querySelector('pds-box') as HTMLPdsBoxElement;\n  }\n\n  private handleTriggerSlotChange = (event: Event) => {\n    this.slotEl = event.target as HTMLSlotElement;\n\n    // Get all elements assigned to this slot\n    const assignedElements = this.slotEl.assignedElements();\n\n    this.triggerEl = assignedElements[0] as HTMLElement;\n    this.triggerEl.onclick = this.handleClick;\n\n    // Add accessibility attributes to trigger\n    this.triggerEl.setAttribute('aria-haspopup', 'menu');\n    this.triggerEl.setAttribute('aria-expanded', 'false');\n  }\n\n  private handleSlotChange = (event: Event) => {\n    this.slotEl = event.target as HTMLSlotElement;\n\n    // Get all elements assigned to this slot\n    const assignedElements = this.slotEl.assignedElements();\n\n    // ensure assignedElements only contains pds-dropdown-menu-item or pds-dropdown-menu-separator\n    // if there are other elements, throw an error\n    const invalidElements = assignedElements.filter(el => el.tagName.toLowerCase() !== 'pds-dropdown-menu-item' && el.tagName.toLowerCase() !== 'pds-dropdown-menu-separator');\n    if (invalidElements.length > 0) {\n      throw new Error(`pds-dropdown-menu only accepts pds-dropdown-menu-item and pds-dropdown-menu-separator elements`);\n    }\n\n    // Store all menu items for keyboard navigation\n    this.menuItems = assignedElements.filter(\n      el => el.tagName.toLowerCase() === 'pds-dropdown-menu-item'\n    ) as HTMLPdsDropdownMenuItemElement[];\n  }\n\n  // Toggle dropdown open/closed\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  // Open the dropdown and position it\n  private openDropdown = () => {\n    computePosition(this.triggerEl, this.panelEl, {\n      placement: this.placement,\n      middleware: [offset(6), flip(), shift({padding: 5})],\n    }).then(({ x, y }) => {\n      Object.assign(this.panelEl.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n    });\n\n    this.host.shadowRoot?.querySelector('pds-box').classList.remove('is-hidden');\n    this.isOpen = true;\n\n    // Update ARIA attributes\n    this.triggerEl.setAttribute('aria-expanded', 'true');\n  }\n\n  // Close the dropdown\n  private closeDropdown = () => {\n    this.host.shadowRoot?.querySelector('pds-box').classList.add('is-hidden');\n    this.isOpen = false;\n\n    // Update ARIA attributes\n    this.triggerEl.setAttribute('aria-expanded', 'false');\n\n    // Reset focus index\n    this.currentFocusIndex = -1;\n\n    // Return focus to trigger\n    this.triggerEl.focus();\n  }\n\n  // Handle click on the trigger element\n  private handleClick = () => {\n    this.toggleDropdown();\n  }\n\n  // Get the index of the currently focused menu item\n  private getFocusedItemIndex(): number {\n    const activeElement = document.activeElement as HTMLPdsDropdownMenuItemElement | null;\n    if (!activeElement) return -1;\n    return this.menuItems.findIndex(item => item === activeElement);\n  }\n\n  // Focus a specific menu item by index\n  private focusItemByIndex(index: number): void {\n    if (index >= 0 && index < this.menuItems.length) {\n      this.currentFocusIndex = index;\n\n      // Focus the inner button/link instead of the host element\n      const menuItem = this.menuItems[index];\n      const innerButton = menuItem.shadowRoot?.querySelector('button');\n      const innerLink = menuItem.shadowRoot?.querySelector('pds-link')?.shadowRoot?.querySelector('a');\n\n      if (innerButton) {\n        return innerButton.focus();\n      } else if (innerLink) {\n        return innerLink.focus();\n      } else {\n        // Fallback to focusing the host if we can't find the inner element\n        menuItem.focus();\n      }\n    }\n  }\n\n  // Focus the next menu item\n  private focusNextItem(): void {\n    let nextIndex = (this.currentFocusIndex + 1) % this.menuItems.length;\n\n    // Skip disabled items\n    let attempts = 0;\n    const maxAttempts = this.menuItems.length;\n\n    while (attempts < maxAttempts && this.menuItems[nextIndex].disabled) {\n      nextIndex = (nextIndex + 1) % this.menuItems.length;\n      attempts++;\n    }\n\n    // Only focus if we found a non-disabled item\n    if (attempts < maxAttempts) {\n      this.focusItemByIndex(nextIndex);\n    }\n  }\n\n  // Focus the previous menu item\n  private focusPreviousItem(): void {\n    let prevIndex = this.currentFocusIndex <= 0\n      ? this.menuItems.length - 1\n      : this.currentFocusIndex - 1;\n\n    // Skip disabled items\n    let attempts = 0;\n    const maxAttempts = this.menuItems.length;\n\n    while (attempts < maxAttempts && this.menuItems[prevIndex].disabled) {\n      prevIndex = prevIndex <= 0 ? this.menuItems.length - 1 : prevIndex - 1;\n      attempts++;\n    }\n\n    // Only focus if we found a non-disabled item\n    if (attempts < maxAttempts) {\n      this.focusItemByIndex(prevIndex);\n    }\n  }\n\n  // Handle keyboard events for the dropdown\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isOpen) return;\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.closeDropdown();\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusNextItem();\n        break;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusPreviousItem();\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        if (this.menuItems.length > 0) {\n          // Find first non-disabled item\n          let firstIndex = 0;\n          while (firstIndex < this.menuItems.length && this.menuItems[firstIndex].disabled) {\n            firstIndex++;\n          }\n          if (firstIndex < this.menuItems.length) {\n            this.focusItemByIndex(firstIndex);\n          }\n        }\n        break;\n\n      case 'End':\n        event.preventDefault();\n        if (this.menuItems.length > 0) {\n          // Find last non-disabled item\n          let lastIndex = this.menuItems.length - 1;\n          while (lastIndex >= 0 && this.menuItems[lastIndex].disabled) {\n            lastIndex--;\n          }\n          if (lastIndex >= 0) {\n            this.focusItemByIndex(lastIndex);\n          }\n        }\n        break;\n\n      case 'Tab':\n        if (event.shiftKey) {\n          // Let Shift+Tab navigate naturally from first item to trigger\n          // For all other items, move to previous item\n          const currentIndex = this.getFocusedItemIndex();\n\n          if (currentIndex > 0) {\n            // If not on first item, prevent default and go to previous item\n            event.preventDefault();\n            this.focusPreviousItem(); // Use our method that skips disabled items\n          }\n          // If on first item or no item, let natural tab order move back to trigger\n        } else {\n          // Forward Tab navigation\n          const activeElement = document.activeElement;\n          const isTriggerFocused = activeElement === this.triggerEl;\n          const currentIndex = this.getFocusedItemIndex();\n\n          if (isTriggerFocused && this.menuItems.length > 0) {\n            // If trigger is focused, move to first non-disabled menu item\n            event.preventDefault();\n\n            // Find the first non-disabled item\n            let firstFocusableIndex = 0;\n            while (firstFocusableIndex < this.menuItems.length && this.menuItems[firstFocusableIndex].disabled) {\n              firstFocusableIndex++;\n            }\n\n            if (firstFocusableIndex < this.menuItems.length) {\n              this.focusItemByIndex(firstFocusableIndex);\n            }\n          } else if (currentIndex === -1 && this.menuItems.length > 0) {\n            // If no menu item is focused, focus the first non-disabled one\n            event.preventDefault();\n\n            // Find the first non-disabled item\n            let firstFocusableIndex = 0;\n            while (firstFocusableIndex < this.menuItems.length && this.menuItems[firstFocusableIndex].disabled) {\n              firstFocusableIndex++;\n            }\n\n            if (firstFocusableIndex < this.menuItems.length) {\n              this.focusItemByIndex(firstFocusableIndex);\n            }\n          } else if (currentIndex !== -1) {\n            // Use our method that skips disabled items\n            event.preventDefault();\n            this.focusNextItem();\n          }\n        }\n        break;\n    }\n  }\n\n  // Handle clicks outside the dropdown to close it\n  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (this.isOpen && !this.host.contains(event.target as Node) && event.target !== this.triggerEl) {\n      this.closeDropdown();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <slot\n          name=\"trigger\"\n          onSlotchange={this.handleTriggerSlotChange}\n        ></slot>\n        <pds-box\n          border-radius=\"sm\"\n          display=\"flex\"\n          direction=\"column\"\n          class=\"pds-dropdown-menu--panel is-hidden\"\n          shadow=\"100\"\n          role=\"menu\"\n          aria-orientation=\"vertical\"\n        >\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-dropdown-menu'),
+  component: 'pds-dropdown-menu',
+  title: 'components/Dropdown Menu',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['pdsClick'],
+    }
+  }
+}
+
+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 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',
+}

package/dist/collection/components/pds-icon/stories/pds-icon.stories.js

@@ -8,7 +8,7 @@ export default {
   title: 'components/Icon'
 }
 
-const BaseTemplate = (args) => html`<pds-icon color=${args.color} name=${args.name} size=${args.size}></pds-icon>`;
+const BaseTemplate = (args) => html`<pds-icon color=${args.color} name=${args.name} size=${args.size} flip-rtl=${args.flipRtl}></pds-icon>`;
 
 export const Default = BaseTemplate.bind();
 Default.args = {

package/dist/collection/components/pds-image/pds-image.js

@@ -15,9 +15,9 @@ export class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (h(Host, { key: '043894e2963cd548dc165c5d877d217ebc28b1a4', class: {
+        return (h(Host, { key: 'a706be22398297ae7087239a3dc7474ae17ab358', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '1c0c68d060c938922f0df9d398943d033344a592', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '37a465ed175ae298e174370246885fb6d7837112', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-input/pds-input.js

@@ -114,10 +114,10 @@ export class PdsInput {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '6e4e04c4db43e707c0681e878c1b1f73deee86ae', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '6610ccb16fb657e6d97aca89b21ff2e2bc0e3fe1', class: "pds-input" }, this.label &&
-            h("label", { key: 'd85cdc84dcd35abcd592e6374e1e3d080f97ab8c', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'de33a9a5ca6901c9c745fcef9475557cfec1cf91', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
-            h("p", { key: '0721204043319effd9ce7ee3fd42a81570ffbdcc', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '68e71598657e55cb3ca4ad25a23b673bafe1eefb', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9d3969d79ecd3ab4bd2a83ff775409b00f8eb3c9', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'a2a05a1e0d3e7722c1dc3dea957facaf5ef24c3c', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'd95ad9600e7d80050bf41503a2eb9ccb91f77893', class: "pds-input" }, this.label &&
+            h("label", { key: 'b5772c8283fe3c8899235c432bbabd36012c2aef', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: '65a2ff8c31ebf545caf755609fa2f3e95cdd1098', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
+            h("p", { key: 'a7a30bc28a0e9aa16ebd842b8b3851569f556591', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '3ffc19523e9378534e665ba52247935e924d4168', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6961e5735ffe279414ea5333224baa72561697d5', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-link/pds-link.css

@@ -7,7 +7,7 @@
 
 .pds-link {
   align-items: center;
-  color: var(--pine-color-text);
+  color: var(--color, var(--pine-color-text));
   display: inline-flex;
   font-weight: var(--pine-font-weight-medium);
 }
@@ -17,6 +17,28 @@
   outline-offset: var(--pine-border-width-thick);
   position: relative;
 }
+.pds-link:hover {
+  color: var(--color, var(--pine-color-text-hover));
+  text-decoration: none;
+}
+:host([color=secondary]) .pds-link {
+  color: var(--pine-color-text-primary);
+}
+:host([color=secondary]) .pds-link:hover {
+  color: var(--pine-color-grey-150);
+}
+:host([color=accent]) .pds-link {
+  color: var(--pine-color-accent);
+}
+:host([color=accent]) .pds-link:hover {
+  color: var(--pine-color-accent-hover);
+}
+:host([color=danger]) .pds-link {
+  color: var(--pine-color-danger);
+}
+:host([color=danger]) .pds-link:hover {
+  color: var(--pine-color-danger-hover);
+}
 
 .pds-link--sm {
   font-size: var(--pine-font-size-body-xs);
@@ -48,12 +70,4 @@
 .pds-link--plain:hover {
   color: var(--pine-color-text-hover);
   text-decoration: underline;
-}
-
-.pds-link--default {
-  text-decoration: underline;
-}
-.pds-link--default:hover {
-  color: var(--pine-color-text-hover);
-  text-decoration: none;
 }