@pine-ds/core 4.11.0 → 4.12.0

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

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 var index$1 = require('./index-BDnbr0DK.js');
 var reflectedAttributeDefault = require('./reflected-attribute-default-DVYHG6O1.js');
-var truncationTooltip = require('./truncation-tooltip-Bikp7n9I.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
 require('./keep-hydrated-AKoh0DG4.js');
 require('./floating-ui.dom-Dw41zbyY.js');
 require('./portal-target-e8WQ6dLx.js');
@@ -117,7 +117,7 @@ const PdsCopytext = class {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (index.h(index.Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, index.h("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, index.h("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), index.h("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "aria-hidden": "true", icon: index$1.copy, size: "16px" }))));
+        return (index.h(index.Host, { key: '2c3bf9cd49adf9a68be5f6cf3bdf0bb29aab956a', class: hostClass, id: this.componentId }, index.h("pds-button", { key: '88ff5d9b7071583c76c8875834b9d4fda274d711', type: "button", variant: "unstyled", onClick: this.handleClick }, index.h("span", { key: '5dee0ec40cbabf3d781037a785ec7c5aa7621121', ref: (el) => this.valueSpanEl = el }, this.value), index.h("pds-icon", { key: '3399b3573670f32f6a70f78f1ae60c9cba031955', "aria-hidden": "true", icon: index$1.copy, size: "16px" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pds-datepicker.cjs.entry.js

@@ -337,12 +337,35 @@ function builtInPresetRange(key, now) {
             return null;
     }
 }
+const isWholeNumber = (value) => typeof value === 'number' && Number.isInteger(value);
+/** A preset's offset range: whole days from today, a missing or `null` one being today. `null` if unusable. */
+function offsetPresetRange(preset, now) {
+    const { startOffset, endOffset } = preset;
+    // Checked at runtime, as offsets often come from JSON, where a missing one is often written `null`.
+    if (startOffset == null && endOffset == null)
+        return null;
+    if (startOffset != null && !isWholeNumber(startOffset))
+        return null;
+    if (endOffset != null && !isWholeNumber(endOffset))
+        return null;
+    const start = addDays(now, startOffset !== null && startOffset !== void 0 ? startOffset : 0);
+    const end = addDays(now, endOffset !== null && endOffset !== void 0 ? endOffset : 0);
+    return start <= end ? [start, end] : null;
+}
+// The list is re-resolved on every read, so each warning is said once.
+const warned = new Set();
+function warnOnce(message) {
+    if (warned.has(message))
+        return;
+    warned.add(message);
+    console.warn(`PDS Datepicker: ${message}`);
+}
 /**
  * Normalizes the `presets` prop: a comma-separated list of built-in keys, or an array of presets
- * that may relabel a built-in (for translation) or give their own `start` and `end`. Entries that
- * resolve to no range are dropped.
+ * that may relabel a built-in or give their own range. Unusable entries are dropped with a warning.
  */
 function resolvePresets(presets, now) {
+    var _a;
     const entries = typeof presets === 'string'
         ? presets
             .split(',')
@@ -356,14 +379,26 @@ function resolvePresets(presets, now) {
     for (const preset of entries) {
         // Presets often come from parsed JSON, so check types at runtime: a non-string label would
         // otherwise reach the render as an object, which Stencil can turn into nodes.
-        if (!preset || typeof preset.key !== 'string')
+        if (!preset || typeof preset.key !== 'string') {
+            warnOnce('a preset with no string key was left out.');
             continue;
+        }
         const start = typeof preset.start === 'string' ? parseIsoDate(preset.start) : null;
         const end = typeof preset.end === 'string' ? parseIsoDate(preset.end) : null;
-        const range = start && end && start <= end ? [start, end] : builtInPresetRange(preset.key, now);
-        const label = typeof preset.label === 'string' ? preset.label : DEFAULT_LABELS[preset.key];
-        if (range && label)
-            resolved.push({ key: preset.key, label, start: range[0], end: range[1] });
+        // Fixed days, then offsets, then the built-in range.
+        const fixed = start !== null && end !== null && start <= end ? [start, end] : null;
+        const range = (_a = fixed !== null && fixed !== void 0 ? fixed : offsetPresetRange(preset, now)) !== null && _a !== void 0 ? _a : builtInPresetRange(preset.key, now);
+        // A blank label would leave the button unnamed.
+        const label = typeof preset.label === 'string' && preset.label.trim() !== '' ? preset.label : DEFAULT_LABELS[preset.key];
+        if (range === null) {
+            warnOnce(`preset "${preset.key}" has no usable range and was left out. Give it whole-day startOffset/endOffset or YYYY-MM-DD start/end, start first.`);
+            continue;
+        }
+        if (label === undefined) {
+            warnOnce(`preset "${preset.key}" has no label and was left out.`);
+            continue;
+        }
+        resolved.push({ key: preset.key, label, start: range[0], end: range[1] });
     }
     return resolved;
 }
@@ -2049,14 +2084,14 @@ const PdsDatepicker = class {
     }
     render() {
         const locale = this.resolvedLocale;
-        return (index.h(index.Host, { key: '7c5388369fe78becfd26b0807f1c6cb54c7934a1', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, index.h("pds-input", { key: 'fc565c99359715415886ae63ef1bcbf8671569c9', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (index.h("button", {
+        return (index.h(index.Host, { key: 'd40bce6136eca084b23d38d995010592bfd702bd', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, index.h("pds-input", { key: 'a047df90ca3e013a2eeb1f88e8fb033b24754f0d', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (index.h("button", {
             // Keyed, as is the calendar button: when Clear appears after a pick, the focused
             // calendar button must stay that button rather than be reused as Clear.
             key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
             // Out of the tab order, as a native search field's clear button is: Tab from a field
             // just emptied would land on it as the change removes it, dropping focus to the page.
             tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
-        }, index.h("pds-icon", { key: '6a7da726d86654d3598f84b8ea7a8ed244a8e5da', icon: index$1.remove, "aria-hidden": "true" }))), index.h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, index.h("pds-icon", { key: '92af87e66b7bb2e95861b873077a7bfb0268c2e0', icon: index$1.calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
+        }, index.h("pds-icon", { key: '934fc6303da1dca04cb073c5875a0f9fc286fdd1', icon: index$1.remove, "aria-hidden": "true" }))), index.h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, index.h("pds-icon", { key: '75ab4fc79ce9f95e7ee6555763166d800a2f1135', icon: index$1.calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/pds-drawer-content.cjs.entry.js

@@ -15,7 +15,7 @@ const PdsDrawerContent = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (index.h("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, index.h("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
+        return (index.h("div", { key: '0d59724de849bc2364d88c4460f70f8b1efa5d1b', class: "pds-drawer-content" }, index.h("slot", { key: '83782b9b4ad99f8075809c9e63d8351fa6109b11' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -15,7 +15,7 @@ const PdsDrawerFooter = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (index.h("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, index.h("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
+        return (index.h("footer", { key: '1345b87580b1931d7c541fac71c0dff33b6cfbf9', class: "pds-drawer__footer" }, index.h("slot", { key: '638fa6bd14d28e814e0e40b02efb1b74f89f51dd' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -15,7 +15,7 @@ const PdsDrawerHeader = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (index.h("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, index.h("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
+        return (index.h("header", { key: '6354f36d59e608a85c3cb75d1e5cf04c48dd7045', class: "pds-drawer__header" }, index.h("slot", { key: '2c9d8a405c8850588377553f3d9a19790828cba7' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -25,8 +25,8 @@ const PdsDrawer = class {
          */
         this.open = false;
         /**
-         * Which edge of the viewport the drawer is docked to. Logical, so this is
-         * free under RTL — `end` is the inline-end edge regardless of direction.
+         * 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';
@@ -52,9 +52,7 @@ const PdsDrawer = class {
         /**
          * Whether the drawer can be dismissed with a pointerdown outside it (in a
          * `modal` drawer, a click on its backdrop).
-         * Replaces `pds-modal`'s `backdropDismiss`.
-         * This also gates Escape, matching how `backdropDismiss` gates Escape on
-         * `pds-modal` today: setting this to `false` means the close button is the
+         * 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
@@ -145,11 +143,11 @@ const PdsDrawer = class {
         this.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
+        return (index.h(index.Host, { key: 'dda3f1dc3013f28a3fc8d1894609dd4b14d227ee', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, index.h("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', 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' }, index.h("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
+            } }, index.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' }, index.h("slot", { key: 'ca4cd34297b4580d554edb45bfbec5b44d7d1fb0' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,42 +3,72 @@
 var index = require('./index-D9iJuJCP.js');
 require('./keep-hydrated-AKoh0DG4.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(.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,: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 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) {
         index.registerInstance(this, hostRef);
         this.pdsClick = index.createEvent(this, "pdsClick");
         /**
-         * It determines whether or not the dropdown-item is destructive.
+         * Determines whether or not the dropdown menu item is destructive.
          * @defaultValue false
          */
         this.destructive = false;
         /**
-         * It determines whether or not the dropdown-item is disabled.
+         * Determines whether or not the dropdown menu item is disabled.
          * @defaultValue false
          */
         this.disabled = false;
         /**
-         * It determines whether or not the dropdown-item is informational: text that the arrow keys
+         * 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;
         /**
-         * 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.
-         * Ignored when `informational` is set.
+         * 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.hasFocus = false;
-        this.handleFocus = () => {
-            this.hasFocus = true;
+        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
+            });
         };
-        this.handleBlur = () => {
-            this.hasFocus = false;
+        // 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) => {
@@ -47,63 +77,69 @@ const PdsDropdownMenuItem = class {
             }
         };
         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();
+            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
+     * Trigger the click event. Does nothing when the item is disabled or informational.
      */
     async clickItem() {
         this.handleClick();
     }
     ;
-    handleClick() {
-        var _a;
-        if (this.informational)
-            return;
-        // 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
-        });
+    // 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 [
+            index.h("slot", { name: "start", onSlotchange: this.updateStartSlotEmpty, ref: (el) => {
+                    this.startSlotEl = el;
+                    if (el) {
+                        el.classList.add('pds-dropdown-menu-item__start');
+                        this.updateStartSlotEmpty();
+                    }
+                } }),
+            index.h("slot", null)
+        ];
     }
     renderElement() {
         if (this.informational) {
-            return (index.h("div", { class: {
-                    'pds-dropdown-menu-item__content': true,
-                    'has-focus': this.hasFocus
-                }, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("slot", null)));
+            return (index.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 (index.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': 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 }, index.h("slot", null)));
+            return (index.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 (index.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 }, index.h("slot", null)));
+        return (index.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 (index.h(index.Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
+        return (index.h(index.Host, { key: '139943faad1c0047bb0363e0eaa0cde9efb2f957', id: this.componentId, class: {
                 'is-disabled': this.disabled,
                 'is-informational': this.informational,
                 'destructive': !this.disabled && !this.informational && this.destructive
-            }, onClick: () => !this.disabled && this.handleClick(), role: "none",
+            }, 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()));

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

@@ -9,13 +9,13 @@ const PdsDropdownMenuSeparator = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
-         * It determines whether or not the dropdown-item is disabled.
+         * Has no effect. A separator can't be focused or activated.
          * @defaultValue false
          */
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, index.h("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
+        return (index.h(index.Host, { key: '74a214d61042d5759af5aef9d6410ed1a267083c', id: this.componentId }, index.h("hr", { key: 'c521eda51523fce09bd408af2586645fc9a9cd03' })));
     }
 };
 PdsDropdownMenuSeparator.style = pdsDropdownMenuSeparatorCss();

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

@@ -1,11 +1,11 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 var keepHydrated = require('./keep-hydrated-AKoh0DG4.js');
 var floatingUi_dom = require('./floating-ui.dom-Dw41zbyY.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)}.pds-dropdown-menu__header{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1);-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs);padding-inline:calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);text-align:start}.pds-dropdown-menu__items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted(a:not([slot=header])),::slotted(button:not([slot=header])){-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:not([slot=header])){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]:not([slot=header])),::slotted([disabled]:not([disabled=false]):not([slot=header])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
+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;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;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)}.pds-dropdown-menu__header{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1);-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs);padding-inline:calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);text-align:start}.pds-dropdown-menu__items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted(a:not([slot=header])),::slotted(button:not([slot=header])){-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:not([slot=header])){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]:not([slot=header])),::slotted([disabled]:not([disabled=false]):not([slot=header])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
 
 const PdsDropdownMenu = class {
     constructor(hostRef) {
@@ -13,7 +13,10 @@ const PdsDropdownMenu = class {
         this.isOpen = false;
         this.menuItems = [];
         this.cleanupAutoUpdate = null;
+        // Counts each opening, so a position worked out for an earlier opening is ignored.
+        this.openCount = 0;
         this.triggerObserver = null;
+        this.triggerVisibility = null;
         this.currentFocusIndex = -1;
         this.hasHeader = false;
         /**
@@ -74,12 +77,20 @@ const PdsDropdownMenu = class {
         // Open the dropdown and position it
         this.openDropdown = () => {
             var _a;
+            const opening = ++this.openCount;
             const updatePosition = () => {
                 floatingUi_dom.computePosition(this.triggerEl, this.panelEl, {
                     placement: this.placement,
                     strategy: 'fixed',
-                    middleware: [floatingUi_dom.offset(6), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 5 })],
+                    middleware: [
+                        floatingUi_dom.offset(6),
+                        floatingUi_dom.flip(),
+                        floatingUi_dom.shift({ padding: 5 }),
+                        floatingUi_dom.size({ padding: 5, apply: ({ availableHeight, elements }) => this.capPanelHeight(elements.floating, availableHeight) }),
+                    ],
                 }).then(({ x, y }) => {
+                    if (!this.isOpen || opening !== this.openCount)
+                        return;
                     Object.assign(this.panelEl.style, {
                         left: `${x}px`,
                         top: `${y}px`,
@@ -90,12 +101,15 @@ const PdsDropdownMenu = class {
             updatePosition();
             // Set up auto-update for window resize and scroll
             this.cleanupAutoUpdate = floatingUi_dom.autoUpdate(this.triggerEl, this.panelEl, updatePosition);
+            this.watchTriggerVisibility();
             (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.remove('is-hidden');
             this.isOpen = true;
             this.syncTriggerAria();
         };
-        // Close the dropdown
-        this.closeDropdown = () => {
+        // Close the dropdown. Closed because its trigger left the view, focus from the menu still goes back
+        // to the trigger, so it isn't lost, but without scrolling the trigger back into view. The next Tab
+        // carries on from there.
+        this.closeDropdown = ({ preventScroll = false } = {}) => {
             var _a;
             (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.add('is-hidden');
             this.isOpen = false;
@@ -104,12 +118,13 @@ const PdsDropdownMenu = class {
                 this.cleanupAutoUpdate();
                 this.cleanupAutoUpdate = null;
             }
+            this.stopWatchingTriggerVisibility();
             this.syncTriggerAria();
             // Reset focus index
             this.currentFocusIndex = -1;
             // Return focus to trigger
             if (this.isFocusInMenu()) {
-                this.focusTrigger();
+                this.focusTrigger(preventScroll);
             }
         };
         // Handle click on the trigger element
@@ -139,6 +154,10 @@ const PdsDropdownMenu = class {
         }
         (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.triggerObserver = null;
+        this.stopWatchingTriggerVisibility();
+        // The menu was detached, so a position still being worked out for it is dropped. The menu
+        // itself stays open.
+        this.openCount++;
     }
     // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
     // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
@@ -155,18 +174,72 @@ const PdsDropdownMenu = class {
             attributeFilter: ['aria-haspopup', 'aria-expanded'],
         });
     }
+    // The panel is fixed, so a menu taller than the room beside its trigger would run off the window
+    // with no way to reach its last items. It's capped to that room and scrolls inside itself. A
+    // smaller max-height set through the menu-panel part is kept. The cap is important, as a
+    // ::part() rule outside the shadow root otherwise beats the panel's own inline style.
+    //
+    // Removing `max-height` lifts the panel's own scroll constraint, so a layout read in between
+    // (`getComputedStyle`) can commit a frame with nothing left to scroll, and the browser resets
+    // `scrollTop` to 0. This runs on every `autoUpdate` pass, including a small ancestor scroll that
+    // leaves the trigger in view, so a menu scrolled partway down would otherwise jump back to the
+    // top on its own. Restoring `scrollTop` afterward keeps the user's place; the browser clamps it
+    // automatically if the new max-height is shorter than before.
+    capPanelHeight(panel, availableHeight) {
+        const { scrollTop } = panel;
+        panel.style.removeProperty('max-height');
+        const partMaxHeight = getComputedStyle(panel).maxHeight;
+        const room = `${Math.max(0, availableHeight)}px`;
+        panel.style.setProperty('max-height', partMaxHeight === 'none' ? room : `min(${partMaxHeight}, ${room})`, 'important');
+        panel.scrollTop = scrollTop;
+    }
+    // Once the trigger is fully out of view, scrolled or clipped by any container or the window, the
+    // menu closes rather than float away from it, much as a native select's list does. An
+    // IntersectionObserver measures against the layout viewport, so panning a pinch-zoomed page
+    // doesn't close it, as Floating UI's hide() would.
+    watchTriggerVisibility() {
+        this.stopWatchingTriggerVisibility();
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        // Only a trigger seen in view this opening closes the menu when it leaves.
+        let triggerSeen = false;
+        let broughtIntoView = false;
+        this.triggerVisibility = new IntersectionObserver((entries) => {
+            if (!this.isOpen)
+                return;
+            if (entries[entries.length - 1].isIntersecting) {
+                triggerSeen = true;
+            }
+            else if (triggerSeen) {
+                this.closeDropdown({ preventScroll: true });
+            }
+            else if (!broughtIntoView) {
+                // Opened with its trigger out of view, from the keyboard after an earlier close or from a
+                // script, the trigger is scrolled into view so the menu opens beside it. A trigger that
+                // still can't be seen leaves the menu open.
+                broughtIntoView = true;
+                this.triggerEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        });
+        this.triggerVisibility.observe(this.triggerEl);
+    }
+    stopWatchingTriggerVisibility() {
+        var _a;
+        (_a = this.triggerVisibility) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerVisibility = null;
+    }
     // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
     isFocusInMenu() {
         const focused = this.host.getRootNode().activeElement;
         return focused != null && this.host.contains(focused);
     }
     // A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
-    focusTrigger() {
+    focusTrigger(preventScroll = false) {
         var _a, _b;
-        this.triggerEl.focus();
+        this.triggerEl.focus({ preventScroll });
         if (this.host.getRootNode().activeElement === this.triggerEl)
             return;
-        (_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus();
+        (_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll });
     }
     // Check if a menu item is disabled (handles both component and raw elements)
     isItemDisabled(item) {
@@ -371,7 +444,7 @@ const PdsDropdownMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'aa4ce84354cf87638ee46fd7ed69520228b7e656', id: this.componentId }, index.h("slot", { key: '948800e67d18c8c6cc9e77ef3aeab635c5035453', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.h("pds-box", { key: '3ce2a2879b14aad975cea8ae72fcbf8c3abcf20c', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, index.h("div", { key: 'ad25fbf4f3c7a24653c229e64fe2ce893a92e4c8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, index.h("slot", { key: '35a5903543e08577997b456bcd312bdd009fd8fc', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: 'a9593adacf047918c1d87494f8c951a2a4a5f76f', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, index.h("slot", { key: '8d2def1cc7020608220099f4ced0f44e9838cce8', onSlotchange: this.handleSlotChange })))));
+        return (index.h(index.Host, { key: '1776921b263178df0de2cdf07a9fb81c668381b6', id: this.componentId }, index.h("slot", { key: '952fdc2b6bb3f1fca5a17dc1962af0e4c38f92e2', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.h("pds-box", { key: 'f5f95cebdcf4a4d78d0e4bc47b99c681045f8d38', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, index.h("div", { key: '8bff8a8dd06fe1f433bc512bc0ac9030fc9714e7', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, index.h("slot", { key: '1c248f137414dd00037d333b1e07c6b04a7b079d', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: 'db9954f26762a65e762f8c7b3dfd60e363ff8573', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, index.h("slot", { key: 'd5cb929db03966d673b23de150970744936cf26d', onSlotchange: this.handleSlotChange })))));
     }
     get host() { return index.getElement(this); }
 };