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

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

@@ -1,20 +1,29 @@
-import { r as registerInstance, h, H as Host } from './index-2a33b470.js';
+import { r as registerInstance, h, H as Host } from './index-4_RRPJTO.js';
+import './keep-hydrated-BgNaWLoS.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 +31,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: '27f21f0697085d75414da7e626b44f5c0ad5b0b3' }, 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-drawer-content.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, a as getElement } from './index-4_RRPJTO.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-BgNaWLoS.js';
+
+const pdsDrawerContentCss = () => `pds-drawer-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}.pds-drawer-content{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;height:100%;padding:var(--pine-dimension-md);width:100%}.pds-modal--scrollable pds-drawer-content{overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-drawer-content{overflow-y:visible}`;
+
+const PdsDrawerContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-drawer-content left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
+    }
+    render() {
+        return (h("div", { key: '0d59724de849bc2364d88c4460f70f8b1efa5d1b', class: "pds-drawer-content" }, h("slot", { key: '83782b9b4ad99f8075809c9e63d8351fa6109b11' })));
+    }
+    get el() { return getElement(this); }
+};
+PdsDrawerContent.style = pdsDrawerContentCss();
+
+export { PdsDrawerContent as pds_drawer_content };

package/dist/esm/pds-drawer-footer.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, a as getElement } from './index-4_RRPJTO.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-BgNaWLoS.js';
+
+const pdsDrawerFooterCss = () => `pds-drawer-footer{display:block;-ms-flex:0 0 auto;flex:0 0 auto;width:100%}.pds-drawer__footer{-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-sm);-ms-flex-pack:end;justify-content:flex-end;padding:var(--pine-dimension-md);width:100%}`;
+
+const PdsDrawerFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-drawer__footer left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
+    }
+    render() {
+        return (h("footer", { key: '1345b87580b1931d7c541fac71c0dff33b6cfbf9', class: "pds-drawer__footer" }, h("slot", { key: '638fa6bd14d28e814e0e40b02efb1b74f89f51dd' })));
+    }
+    get el() { return getElement(this); }
+};
+PdsDrawerFooter.style = pdsDrawerFooterCss();
+
+export { PdsDrawerFooter as pds_drawer_footer };

package/dist/esm/pds-drawer-header.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, a as getElement } from './index-4_RRPJTO.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-BgNaWLoS.js';
+
+const pdsDrawerHeaderCss = () => `pds-drawer-header{display:block;-ms-flex:0 0 auto;flex:0 0 auto;width:100%}.pds-drawer__header{-ms-flex-align:center;align-items:center;-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-md);width:100%}`;
+
+const PdsDrawerHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-drawer__header left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
+    }
+    render() {
+        return (h("header", { key: '6354f36d59e608a85c3cb75d1e5cf04c48dd7045', class: "pds-drawer__header" }, h("slot", { key: '2c9d8a405c8850588377553f3d9a19790828cba7' })));
+    }
+    get el() { return getElement(this); }
+};
+PdsDrawerHeader.style = pdsDrawerHeaderCss();
+
+export { PdsDrawerHeader as pds_drawer_header };

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

@@ -0,0 +1,154 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { c as containsComposed, a as closest } from './closest-DHPzKMVS.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-BgNaWLoS.js';
+
+const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop>*{pointer-events:auto}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
+
+// Known selectors for content Pine components portal out of place rather than
+// rendering where they are — pds-tooltip and pds-combobox's dropdown in
+// document.body, pds-popover in the body or the open dialog it's in.
+// A pointerdown landing on one of these is not "outside" the drawer in the
+// sense light dismiss cares about: it belongs to an overlay something inside
+// the drawer opened, even though it is not a DOM descendant of the drawer.
+const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal';
+const PdsDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pdsDrawerOpen = createEvent(this, "pdsDrawerOpen");
+        this.pdsDrawerClose = createEvent(this, "pdsDrawerClose");
+        /**
+         * Whether the drawer is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Which edge of the viewport the drawer is docked to. Logical: `end` is the
+         * inline-end edge, so an `end` drawer docks on the left in right-to-left layouts.
+         * @default 'end'
+         */
+        this.side = 'end';
+        /**
+         * The drawer's width.
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Whether the drawer content should be scrollable
+         * @default true
+         */
+        this.scrollable = true;
+        /**
+         * Whether the drawer is modal. A modal drawer dims the page behind it with a
+         * backdrop, makes the page inert, and keeps focus inside the drawer, like
+         * `pds-modal`. Use it for a task the page should wait on. Leave it off for a
+         * panel people work alongside the page. Read when the drawer opens; changing
+         * it while the drawer is open is not supported.
+         * @default false
+         */
+        this.modal = false;
+        /**
+         * Whether the drawer can be dismissed with a pointerdown outside it (in a
+         * `modal` drawer, a click on its backdrop).
+         * Setting it to `false` also turns off Escape, so the close button is the
+         * only way out.
+         *
+         * A trigger outside the drawer should only ever set `open` to `true` and
+         * leave closing to the drawer itself. A toggle-style trigger (`open =
+         * !open`) fights light dismiss: clicking it while open closes the drawer
+         * on `pointerdown`, then the trigger's own click handler re-opens it.
+         * @default true
+         */
+        this.lightDismiss = true;
+        /**
+         * Whether to move focus into the drawer when it opens. `auto` is right for
+         * a drawer opened by a direct user action (a click, a deep link the user
+         * just navigated to). Set to `none` for a drawer that can open from a
+         * background event while the user is mid-task elsewhere on the page —
+         * moving focus there would interrupt them, and the page stays live under
+         * a non-modal drawer, so it is a genuine data-entry risk, not just an
+         * annoyance. A `modal` drawer ignores `none`: the page behind it is inert,
+         * so focus starts in the drawer.
+         * @default 'auto'
+         */
+        this.initialFocus = 'auto';
+    }
+    // Unwraps a nested pds-modal left by a page-cache (Turbo, bfcache) reconnect
+    // — the same bug class fixed for pds-modal-header/-content/-footer. Every
+    // render wraps the slotted content in a fresh, marked pds-modal; a reconnect
+    // that restores a prior render's pds-modal in our light DOM ends up with
+    // that stale one nested inside the new one's content.
+    //
+    // The container has to be the inner `.pds-modal` content div, not the
+    // `<pds-modal>` tag itself — that tag's first child is always its own
+    // rendered `dialog.pds-modal__backdrop`, never another `<pds-modal>`, so a
+    // bare-tag check there never matches. The `.pds-drawer__modal` marker on
+    // the staleness selector (rather than the bare `pds-modal` tag) keeps this
+    // from also unwrapping a consumer's own nested pds-modal, like a confirm
+    // dialog placed first in the drawer's content — only a stale copy of our
+    // own wrapper carries that class.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('pds-modal.pds-drawer__modal .pds-modal'), 'pds-modal.pds-drawer__modal', '.pds-modal');
+    }
+    // pds-modal closes itself (Escape, light dismiss, a consumer's close
+    // button toggling its own `open`) and only updates its own `open` prop —
+    // mirror that back onto ours so a consumer's binding stays correct, and
+    // re-emit as our own event rather than leaking pds-modal's event name.
+    // Both events bubble, so a nested pds-modal (a confirm dialog inside the
+    // drawer's own content) would otherwise trigger these too — only react to
+    // our own direct inner modal.
+    handleModalClose(e) {
+        if (e.target !== this.modalEl)
+            return;
+        this.open = false;
+        this.pdsDrawerClose.emit();
+    }
+    handleModalOpen(e) {
+        if (e.target !== this.modalEl)
+            return;
+        this.pdsDrawerOpen.emit();
+    }
+    // Light dismiss: a pointerdown anywhere outside the drawer closes it. This
+    // has to be a listener of our own, not pds-modal's backdrop-click handler —
+    // the backdrop is pointer-events:none out here (see pds-drawer.scss) so the
+    // page underneath stays genuinely clickable, which means a click there
+    // never reaches pds-modal's backdrop element at all.
+    handleOutsidePointerDown(e) {
+        // A modal drawer's backdrop takes the click instead, through pds-modal.
+        if (this.modal || !this.lightDismiss || !this.open)
+            return;
+        const target = e.target;
+        if (!target)
+            return;
+        if (this.el.contains(target))
+            return;
+        if (target.closest(PORTALED_OVERLAY_SELECTOR))
+            return;
+        // A datepicker's portaled calendar counts as inside only when its datepicker is in the drawer,
+        // or in an overlay portaled from it (a pds-popover in the drawer puts its content beside it).
+        const calendar = target.closest('.pds-datepicker-calendar-portal');
+        const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
+        if (owner && (containsComposed(this.el, owner) || closest(PORTALED_OVERLAY_SELECTOR, owner)))
+            return;
+        // A sibling pds-modal — e.g. a confirm dialog opened from inside the
+        // drawer but mounted at the document root rather than nested in our own
+        // content — is neither a descendant of the drawer nor on the portaled
+        // list above, so without this it reads as "outside" and a click inside
+        // it (or on its own backdrop) would close the drawer underneath it. That
+        // modal already owns its own dismiss semantics; defer to them instead.
+        if (target.closest('pds-modal'))
+            return;
+        this.open = false;
+    }
+    render() {
+        return (h(Host, { key: 'dda3f1dc3013f28a3fc8d1894609dd4b14d227ee', class: {
+                'pds-drawer': true,
+                [`pds-drawer--${this.side}`]: true,
+                [`pds-drawer--${this.size}`]: true,
+            } }, h("pds-modal", { key: '3188b99ffb9b3ecb3eeb42fd3ba808d71c652b4f', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: 'ca4cd34297b4580d554edb45bfbec5b44d7d1fb0' }))));
+    }
+    get el() { return getElement(this); }
+};
+PdsDrawer.style = pdsDrawerCss();
+
+export { PdsDrawer as pds_drawer };

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

@@ -0,0 +1,149 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import './keep-hydrated-BgNaWLoS.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:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-dropdown-menu-item__start{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0}.pds-dropdown-menu-item__start--empty{display:none}:host(.is-informational){cursor:default}:host(.is-informational) .pds-dropdown-menu-item__content:hover{background-color:transparent;color:var(--pine-color-text)}: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-visible{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}:host(.destructive) pds-link::part(link):focus-visible{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger)}pds-link::part(link):focus-visible{border-radius:var(--pine-dimension-xs);-webkit-box-shadow:none;box-shadow:none;outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}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");
+        /**
+         * Determines whether or not the dropdown menu item is destructive.
+         * @defaultValue false
+         */
+        this.destructive = false;
+        /**
+         * Determines whether or not the dropdown menu item is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Determines whether or not the dropdown menu item is informational: text that the arrow keys
+         * reach but that can't be activated. Takes precedence over `href` and `destructive`.
+         * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
+         * @defaultValue false
+         */
+        this.informational = false;
+        /**
+         * Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.
+         * Only applies when href is set. Ignored when `informational` is set.
+         * @defaultValue false
+         */
+        this.external = false;
+        this.handleClick = () => {
+            var _a, _b;
+            if (this.disabled || this.informational)
+                return;
+            // Filter only pds-dropdown-menu-item elements and find the index of the current item
+            const menuItems = Array.from((_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
+            const itemIndex = menuItems.indexOf(this.host);
+            // The label's text: default-slot content only, so start-slot content stays out of it
+            const content = Array.from(this.host.childNodes)
+                .filter((node) => node.nodeType === Node.TEXT_NODE ||
+                (node.nodeType === Node.ELEMENT_NODE && !node.getAttribute('slot')))
+                .map((node) => node.textContent)
+                .join('')
+                .trim();
+            this.pdsClick.emit({
+                itemIndex,
+                item: this.host,
+                content
+            });
+        };
+        // Checked directly against the light DOM rather than kept in @State: Stencil's JSX doesn't
+        // type a `class` prop for `<slot>`, and a ref callback only fires once, on creation, so it
+        // can't push a later @State change back onto the element either way. Called once up front
+        // (from the ref, since nothing's assigned at componentWillLoad's point) and again on every
+        // native slotchange after that, both calling classList directly. add/remove, not the two-argument
+        // form of toggle(): Stencil's mock-doc (used by spec tests) implements toggle() as a plain flip
+        // and silently ignores a force argument, so a toggle() call that'd be correct against a real
+        // DOM can still fail there.
+        this.updateStartSlotEmpty = () => {
+            var _a, _b;
+            const hasContent = Array.from(this.host.children).some((child) => child.getAttribute('slot') === 'start');
+            if (hasContent) {
+                (_a = this.startSlotEl) === null || _a === void 0 ? void 0 : _a.classList.remove('pds-dropdown-menu-item__start--empty');
+            }
+            else {
+                (_b = this.startSlotEl) === null || _b === void 0 ? void 0 : _b.classList.add('pds-dropdown-menu-item__start--empty');
+            }
+        };
+        // Space would otherwise scroll the page, since nothing in the item takes the key.
+        this.handleInformationalKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (this.disabled || event.key !== 'Enter')
+                return;
+            if (this.href != null) {
+                // Enter on the inner <a> itself follows the link, and its native click reaches the host's
+                // click handler below, which emits pdsClick -- returning early here leaves that alone.
+                // Safari leaves focus on the pds-link host after a mouse click, not its inner <a>, where
+                // Enter would otherwise do nothing: an anchor only activates on Enter when it is itself the
+                // focused element, not an ancestor of it. Forwarding the click to the real anchor instead
+                // runs the browser's own navigation (hash, download, target), and still reaches the same
+                // host click handler, so pdsClick still isn't emitted twice.
+                if (event.composedPath()[0] !== this.innerAnchor())
+                    (_a = this.innerAnchor()) === null || _a === void 0 ? void 0 : _a.click();
+                return;
+            }
+            event.preventDefault();
+            this.handleClick();
+        };
+    }
+    /**
+     * Trigger the click event. Does nothing when the item is disabled or informational.
+     */
+    async clickItem() {
+        this.handleClick();
+    }
+    ;
+    // Always render the start slot so slotted content is projected reliably, with nothing wrapping
+    // it: a wrapper would sit between the slotted content and this host, leaving it without an
+    // assignedSlot, which breaks a click-target walk that follows assignedSlot up to find a link
+    // (Turbo's link lookup works this way). The --empty class hides it when nothing is slotted, so
+    // it adds no gap.
+    renderContent() {
+        return [
+            h("slot", { name: "start", onSlotchange: this.updateStartSlotEmpty, ref: (el) => {
+                    this.startSlotEl = el;
+                    if (el) {
+                        el.classList.add('pds-dropdown-menu-item__start');
+                        this.updateStartSlotEmpty();
+                    }
+                } }),
+            h("slot", null)
+        ];
+    }
+    renderElement() {
+        if (this.informational) {
+            return (h("div", { class: "pds-dropdown-menu-item__content", role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown }, this.renderContent()));
+        }
+        if (this.href != null) {
+            return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: "pds-dropdown-menu-item__content", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, "aria-disabled": this.disabled ? 'true' : null }, this.renderContent()));
+        }
+        return (h("button", { class: "pds-dropdown-menu-item__content", tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, this.renderContent()));
+    }
+    // pds-link's own shadow root, one level in from its host.
+    innerAnchor() {
+        var _a, _b, _c, _d;
+        return (_d = (_c = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-link')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('a')) !== null && _d !== void 0 ? _d : null;
+    }
+    render() {
+        return (h(Host, { key: '974b6da459ec11c49a0105b1b2f26eb134440d18', class: {
+                'is-disabled': this.disabled,
+                'is-informational': this.informational,
+                'destructive': !this.disabled && !this.informational && this.destructive
+            }, onClick: this.handleClick, role: "none",
+            // ARIA ignores role="none" on focusable elements, so a focusable host would sit between
+            // the menu and the informational menuitem as an unexpected child.
+            tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? '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,21 @@
+import { r as registerInstance, h, H as Host } from './index-4_RRPJTO.js';
+import './keep-hydrated-BgNaWLoS.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);
+        /**
+         * Has no effect. A separator can't be focused or activated.
+         * @defaultValue false
+         */
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { key: '247de1e84622fc816f541e95da022c7d07b3852c' }, h("hr", { key: 'd66e06eee972fa962003152a4ec7703d7c66d620' })));
+    }
+};
+PdsDropdownMenuSeparator.style = pdsDropdownMenuSeparatorCss();
+
+export { PdsDropdownMenuSeparator as pds_dropdown_menu_separator };