@pine-ds/core 4.0.0-mercury.0 → 4.1.0

package/dist/esm/pds-container.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
+
+const pdsContainerCss = () => `:host{display:block;margin-inline:auto;max-width:var(--pine-container-max-width, none);width:100%}:host(.pds-container--sm){--pine-container-max-width:340px}:host(.pds-container--md){--pine-container-max-width:520px}:host(.pds-container--lg){--pine-container-max-width:700px}:host(.pds-container--xl){--pine-container-max-width:1064px}:host(.pds-container--full){--pine-container-max-width:1440px}`;
+
+const NAMED_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'full']);
+const PdsContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Sets the semantic HTML tag rendered as the inner container element.
+         * @default 'div'
+         */
+        this.tag = 'div';
+        /**
+         * If `true`, the container is centered horizontally using `margin-inline: auto`.
+         * @default true
+         */
+        this.centered = true;
+    }
+    render() {
+        const Tag = this.tag;
+        const isNamed = this.size !== undefined && NAMED_SIZES.has(this.size);
+        const customSize = this.size !== undefined && !isNamed ? this.size : undefined;
+        const hostStyle = {};
+        if (customSize)
+            hostStyle['--pine-container-max-width'] = customSize;
+        if (!this.centered)
+            hostStyle['margin-inline'] = '0';
+        return (h(Host, { key: 'b8055b9add2e9abfeaf61f233a0f22e559829eb2', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '8aac62d1a6639063d10b8c51539ca0bc3ca0bae4', part: "container" }, h("slot", { key: '747e55553b7660159ee9d0192ccb8ed29a99f0b0' }))));
+    }
+};
+PdsContainer.style = pdsContainerCss();
+
+export { PdsContainer as pds_container };

package/dist/esm/pds-copytext.entry.js

@@ -1,13 +1,31 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-2a33b470.js';
-import { a as copy } from './index-a1e2f9af.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { a as copy } from './index-Bu9gFIxM.js';
+import { s as setupTruncationTooltip } from './truncation-tooltip-Blk4GigP.js';
+import './floating-ui.dom-DDtwbwIl.js';
 
-const pdsCopytextCss = ":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-125);--border-radius-hover:var(--pine-border-radius-0);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-charcoal-400);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-semi-bold);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);border-radius:var(--border-radius-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";
-const PdsCopytextStyle0 = pdsCopytextCss;
+const pdsCopytextCss = () => `:host(.pds-copytext){--copytext-color-background-hover:var(--pine-color-background-inset)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);border-width:var(--pine-dimension-none);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-body-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);max-width:100%}:host(.pds-copytext) pds-button::part(button){padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-xs)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);color:var(--pine-color-text-secondary-hover)}:host(.pds-copytext) pds-button span{font-weight:var(--pine-font-weight-medium);-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border-width:var(--pine-dimension-none);padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button){padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button):hover{background-color:transparent}:host(.pds-copytext):host(.pds-copytext--bordered) span{background:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--pine-border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-inline-flexbox;display:inline-flex;min-width:auto;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-text),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-text){-ms-flex-negative:1;flex-shrink:1;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{text-align:start;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{-ms-flex-pack:justify;justify-content:space-between}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-overflow:ellipsis}`;
 
 const PdsCopytext = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pdsCopyTextClick = createEvent(this, "pdsCopyTextClick", 7);
+        this.pdsCopyTextClick = createEvent(this, "pdsCopyTextClick");
+        this.truncationCleanup = null;
+        /**
+         * Determines whether `copytext` should have a visible border.
+         * @defaultValue true
+         */
+        this.border = true;
+        /**
+         * Determines whether `copytext` should expand to the full width of its container.
+         * @defaultValue false
+         */
+        this.fullWidth = false;
+        /**
+         * Determines whether the `value` should truncate and display with an ellipsis.
+         * When text overflows, a tooltip showing the full value will appear on hover/focus.
+         * @defaultValue false
+         */
+        this.truncate = false;
         this.copyToClipboard = async (value) => {
             try {
                 if (typeof navigator.clipboard !== 'undefined') {
@@ -22,11 +40,43 @@ const PdsCopytext = class {
         this.handleClick = () => {
             this.copyToClipboard(this.value);
         };
-        this.border = true;
-        this.componentId = undefined;
-        this.fullWidth = false;
-        this.truncate = false;
-        this.value = undefined;
+    }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    handleValueChange() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyTruncationTooltip();
+    }
+    initTruncationTooltip() {
+        this.destroyTruncationTooltip();
+        if (this.valueSpanEl) {
+            this.truncationCleanup = setupTruncationTooltip({
+                hostEl: this.el,
+                contentEl: this.valueSpanEl,
+                getTooltipText: () => this.value || '',
+            });
+        }
+    }
+    destroyTruncationTooltip() {
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
     }
     classNames() {
         const classNames = ['pds-copytext'];
@@ -39,14 +89,21 @@ const PdsCopytext = class {
         if (this.truncate) {
             classNames.push('pds-copytext--truncated');
         }
-        return classNames.join('  ');
+        return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '9960146a3ac3810bc14834a976f2e50627569dad', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '9d8c6dc9824be2483982d4362a5c8d8c4c232432', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '7c093ec0ae96afdbad02adda3901be87989c9ce4' }, this.value), h("pds-icon", { key: '466f5c685e32be0067938869afee751db522d3d3', icon: copy, size: "16px" }))));
+        return (h(Host, { key: '43a3870fa4c24416e2e6e99dd7c423a5c32ac91e', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f0735d3f245dd7150e88b3dd1a191c3ee86b6293', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'ddf7cf205f9bb11dd4b4111435bb7efc15b0af61', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '7ba6d0452e1726ff951ec46433f838669961c277', "aria-hidden": "true", icon: copy, size: "16px" }))));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "truncate": [{
+                "handleTruncateChange": 0
+            }],
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
 };
-PdsCopytext.style = PdsCopytextStyle0;
+PdsCopytext.style = pdsCopytextCss();
 
 export { PdsCopytext as pds_copytext };
-
-//# sourceMappingURL=pds-copytext.entry.js.map

package/dist/esm/pds-divider.entry.js

@@ -1,20 +1,28 @@
-import { r as registerInstance, h, H as Host } from './index-2a33b470.js';
+import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
 
-const pdsDividerCss = ":host{--color-background-default:var(--pine-color-grey-400);--spacing-offset-xxs:var(--pine-spacing-050);--spacing-offset-xs:var(--pine-spacing-100);--spacing-offset-sm:var(--pine-spacing-200);--spacing-offset-md:var(--pine-spacing-300);--spacing-offset-lg:var(--pine-spacing-450);--spacing-offset-xxl:var(--pine-spacing-800)}.pds-divider{background:var(--color-background-default);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--spacing-offset-xxs) * -1);padding:0 var(--spacing-offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--spacing-offset-xxs) * -1) 0;padding:var(--spacing-offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--spacing-offset-xs) * -1);padding:0 var(--spacing-offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--spacing-offset-xs) * -1) 0;padding:var(--spacing-offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--spacing-offset-sm) * -1);padding:0 var(--spacing-offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--spacing-offset-sm) * -1) 0;padding:var(--spacing-offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--spacing-offset-md) * -1);padding:0 var(--spacing-offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--spacing-offset-md) * -1) 0;padding:var(--spacing-offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--spacing-offset-lg) * -1);padding:0 var(--spacing-offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--spacing-offset-lg) * -1) 0;padding:var(--spacing-offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--spacing-offset-xl) * -1);padding:0 var(--spacing-offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--spacing-offset-xl) * -1) 0;padding:var(--spacing-offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--spacing-offset-xxl) * -1);padding:0 var(--spacing-offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--spacing-offset-xxl) * -1) 0;padding:var(--spacing-offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";
-const PdsDividerStyle0 = pdsDividerCss;
+const pdsDividerCss = () => `.pds-divider{background:var(--pine-color-border);border:0;display:-ms-flexbox;display:flex;height:var(--pine-border-width);margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--labeled{-ms-flex-align:center;align-items:center;background:none;color:var(--pine-color-text);font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-sm);height:auto;width:auto}.pds-divider--labeled::before,.pds-divider--labeled::after{background:var(--pine-color-border);content:"";-ms-flex:1;flex:1;height:var(--pine-border-width)}.pds-divider__label{text-align:center}.pds-divider--offset-xxs{margin:0 calc(var(--pine-dimension-2xs) * -1);padding:0 var(--pine-dimension-2xs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--pine-dimension-2xs) * -1) 0;padding:var(--pine-dimension-2xs) 0}.pds-divider--offset-xxs.pds-divider--labeled{padding:0}.pds-divider--offset-xs{margin:0 calc(var(--pine-dimension-xs) * -1);padding:0 var(--pine-dimension-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--pine-dimension-xs) * -1) 0;padding:var(--pine-dimension-xs) 0}.pds-divider--offset-xs.pds-divider--labeled{padding:0}.pds-divider--offset-sm{margin:0 calc(var(--pine-dimension-sm) * -1);padding:0 var(--pine-dimension-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--pine-dimension-sm) * -1) 0;padding:var(--pine-dimension-sm) 0}.pds-divider--offset-sm.pds-divider--labeled{padding:0}.pds-divider--offset-md{margin:0 calc(var(--pine-dimension-md) * -1);padding:0 var(--pine-dimension-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--pine-dimension-md) * -1) 0;padding:var(--pine-dimension-md) 0}.pds-divider--offset-md.pds-divider--labeled{padding:0}.pds-divider--offset-lg{margin:0 calc(var(--pine-dimension-lg) * -1);padding:0 var(--pine-dimension-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--pine-dimension-lg) * -1) 0;padding:var(--pine-dimension-lg) 0}.pds-divider--offset-lg.pds-divider--labeled{padding:0}.pds-divider--offset-xl{margin:0 calc(var(--pine-dimension-xl) * -1);padding:0 var(--pine-dimension-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--pine-dimension-xl) * -1) 0;padding:var(--pine-dimension-xl) 0}.pds-divider--offset-xl.pds-divider--labeled{padding:0}.pds-divider--offset-xxl{margin:0 calc(var(--pine-dimension-2xl) * -1);padding:0 var(--pine-dimension-2xl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--pine-dimension-2xl) * -1) 0;padding:var(--pine-dimension-2xl) 0}.pds-divider--offset-xxl.pds-divider--labeled{padding:0}@media (max-width: 767px){.pds-divider--vertical{display:none}}`;
 
 const PdsDivider = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.componentId = undefined;
-        this.offset = undefined;
+        /**
+         * Sets divider to display vertically.
+         * @defaultValue false
+         */
         this.vertical = false;
     }
+    get hasLabel() {
+        var _a;
+        return Boolean((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) && !this.vertical;
+    }
     classNames() {
         const classNames = ['pds-divider'];
         if (this.vertical) {
             classNames.push('pds-divider--vertical');
         }
+        if (this.hasLabel) {
+            classNames.push('pds-divider--labeled');
+        }
         if (this.offset) {
             const offsetClassName = 'pds-divider--offset-' + this.offset;
             classNames.push(offsetClassName);
@@ -22,11 +30,9 @@ const PdsDivider = class {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '3f2301abdcc69f48039e92ad5308ea7a27b3573f', id: this.componentId }, h("hr", { key: '763d4a15811b9298b77d0e6227e18dccdf61825e', class: this.classNames() })));
+        return (h(Host, { key: 'c6f887ca1f68c8e572bd518c43d88f052f6d9dd1', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
     }
 };
-PdsDivider.style = PdsDividerStyle0;
+PdsDivider.style = pdsDividerCss();
 
 export { PdsDivider as pds_divider };
-
-//# sourceMappingURL=pds-divider.entry.js.map

package/dist/esm/pds-dropdown-menu-item.entry.js

@@ -0,0 +1,83 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+
+const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
+
+const PdsDropdownMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pdsClick = createEvent(this, "pdsClick");
+        /**
+         * It determines whether or not the dropdown-item is destructive.
+         * @defaultValue false
+         */
+        this.destructive = false;
+        /**
+         * It determines whether or not the dropdown-item is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the link should open in a new tab and display an external icon.
+         * This is a simpler alternative to using `target="_blank"` for the common case.
+         * @defaultValue false
+         */
+        this.external = false;
+        this.hasFocus = false;
+        this.handleFocus = () => {
+            this.hasFocus = true;
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+        };
+        this.handleKeyDown = (event) => {
+            // Handle keyboard events
+            if (!this.disabled && (event.key === 'Enter')) {
+                // Only prevent default for button elements or Space key
+                // For links with Enter key, we want the default navigation behavior
+                if (!this.href) {
+                    event.preventDefault();
+                }
+                this.handleClick();
+            }
+        };
+    }
+    /**
+     * Trigger the click event
+     */
+    async clickItem() {
+        this.handleClick();
+    }
+    ;
+    handleClick() {
+        var _a;
+        // Filter only pds-dropdown-menu-item elements and find the index of the current item
+        const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
+        const itemIndex = menuItems.indexOf(this.host);
+        // Get the text content from the slotted content
+        const content = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        this.pdsClick.emit({
+            itemIndex,
+            item: this.host,
+            content
+        });
+    }
+    renderElement() {
+        if (this.href !== undefined) {
+            return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
+                    'pds-dropdown-menu-item__content': true,
+                    'has-focus': this.hasFocus
+                }, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
+        }
+        return (h("button", { class: {
+                'pds-dropdown-menu-item__content': true,
+                'has-focus': this.hasFocus
+            }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
+    }
+    render() {
+        return (h(Host, { key: '5d27080b7e129f69255ecb9dd1fab183a8f7c5f6', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+    }
+    get host() { return getElement(this); }
+};
+PdsDropdownMenuItem.style = pdsDropdownMenuItemCss();
+
+export { PdsDropdownMenuItem as pds_dropdown_menu_item };

package/dist/esm/pds-dropdown-menu-separator.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
+
+const pdsDropdownMenuSeparatorCss = () => `:host hr{border:0;border-top:var(--pine-border-width-thin) solid var(--pine-color-border);height:0;margin-block:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1)}`;
+
+const PdsDropdownMenuSeparator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * It determines whether or not the dropdown-item is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { key: 'd0fbf00978860c7a449b5781db2f10dd7e99d1b1', id: this.componentId }, h("hr", { key: 'a566c55fc3f15c0dab81fc90f5cf35d77fc0e35c' })));
+    }
+};
+PdsDropdownMenuSeparator.style = pdsDropdownMenuSeparatorCss();
+
+export { PdsDropdownMenuSeparator as pds_dropdown_menu_separator };

package/dist/esm/pds-dropdown-menu.entry.js

@@ -0,0 +1,316 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-DDtwbwIl.js';
+
+const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}::slotted(a),::slotted(button){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]),::slotted([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
+
+const PdsDropdownMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isOpen = false;
+        this.menuItems = [];
+        this.cleanupAutoUpdate = null;
+        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();
+            // 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 updatePosition = () => {
+                computePosition(this.triggerEl, this.panelEl, {
+                    placement: this.placement,
+                    strategy: 'fixed',
+                    middleware: [offset(6), flip(), shift({ padding: 5 })],
+                }).then(({ x, y }) => {
+                    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);
+            (_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;
+            // Clean up auto-update
+            if (this.cleanupAutoUpdate) {
+                this.cleanupAutoUpdate();
+                this.cleanupAutoUpdate = null;
+            }
+            // 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');
+    }
+    disconnectedCallback() {
+        // Clean up auto-update when component is removed from DOM
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+    }
+    // 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 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'))
+                    || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
+                if (innerButton) {
+                    innerButton.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);
+        }
+    }
+    // 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.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':
+                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.isItemDisabled(this.menuItems[firstFocusableIndex])) {
+                            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.isItemDisabled(this.menuItems[firstFocusableIndex])) {
+                            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: '30914965241f7e8e5af32e8576c651802026a996', id: this.componentId }, h("slot", { key: 'ec995c9437083ca28058b974df91491b0e634a07', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '590a22e556d4df23eb33cbe2fa2bda296ce59b01', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: '9b0d67a3cf63b33eb73d3e451b365dc4354a323c', onSlotchange: this.handleSlotChange }))));
+    }
+    get host() { return getElement(this); }
+};
+PdsDropdownMenu.style = pdsDropdownMenuCss();
+
+export { PdsDropdownMenu as pds_dropdown_menu };