@pine-ds/core 4.11.0 → 4.12.0

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

@@ -1,9 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
 import { i as isRtlDirection } from './scroll-DtgUQhjl.js';
-import { t as trash, e as enlarge } from './index-DvN3tyZp.js';
+import { t as trash, e as enlarge } from './index-B0DXTeeV.js';
+import { b as bindTruncationTooltips } from './truncation-tooltip-CkIWm6Z-.js';
 import './keep-hydrated-BgNaWLoS.js';
+import './floating-ui.dom-Cuc0DYlm.js';
+import './portal-target-CKRzRKdO.js';
 
-const pdsFilterCss = () => `:host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}`;
+const pdsFilterCss = () => `:host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);-webkit-box-sizing:border-box;box-sizing:border-box;display:none;inline-size:244px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}`;
 
 const PdsFilter = class {
     constructor(hostRef) {
@@ -13,6 +16,16 @@ const PdsFilter = class {
         this.pdsFilterClear = createEvent(this, "pdsFilterClear");
         this.scrollRAF = null;
         this.lastScrollTime = 0;
+        this.truncationTooltip = bindTruncationTooltips((textEl) => {
+            var _a;
+            return ({
+                // The trigger, not the host, whose child the popover is; `__button-content` holds the max width, so the text overflows.
+                hostEl: (_a = textEl.closest('button')) !== null && _a !== void 0 ? _a : textEl,
+                contentEl: textEl,
+                getTooltipText: () => { var _a; return (_a = this.text) !== null && _a !== void 0 ? _a : ''; },
+                manageTabIndex: false,
+            });
+        });
         /**
          * The variant style of the filter trigger.
          * @defaultValue 'default'
@@ -116,11 +129,15 @@ const PdsFilter = class {
             // The toggle event listener will capture the state change and emit events
         };
     }
+    connectedCallback() {
+        this.syncTruncationTooltip();
+    }
     /**
      * Component lifecycle: Clean up when disconnected from DOM.
      * Prevents memory leaks by canceling pending operations and closing popovers.
      */
     disconnectedCallback() {
+        this.truncationTooltip.destroy();
         // Cancel pending animation frames
         if (this.scrollRAF) {
             cancelAnimationFrame(this.scrollRAF);
@@ -146,6 +163,7 @@ const PdsFilter = class {
         }
     }
     componentDidRender() {
+        this.syncTruncationTooltip();
         // Note: popoverEl is set via ref callback in render method
         // For browsers with native popover API, we need direct element listeners
         // since the document listener may not capture native popover toggle events
@@ -159,6 +177,10 @@ const PdsFilter = class {
             }
         }
     }
+    syncTruncationTooltip() {
+        var _a;
+        this.truncationTooltip.sync([(_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__button-text')]);
+    }
     /**
      * Reposition popovers on window resize.
      */
@@ -479,7 +501,7 @@ const PdsFilter = class {
         return null;
     }
     render() {
-        return (h(Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, h("button", { key: '968953600d615f2739757a91422dafdb817c9a6f', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
+        return (h(Host, { key: '0876855dacf0172f83a6e1afcc8b9b1b6acf1251', id: this.componentId }, h("button", { key: 'e20b93644a520ed3351fb5802d1e6f0cb2465248', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '075e2f221d297ede0a52185853acbd3e74b99339', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'cd1d3a15e0969c3d960786a7fd7fd7b3195dd4de', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '6524cb11b96f03ef5c528325a950c9f80f5ae9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '06cc2ca22068ccedbddf3ff69ce4a352fd01d142' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,29 +1,171 @@
-import { r as registerInstance, h, H as Host } from './index-4_RRPJTO.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4_RRPJTO.js';
 import './keep-hydrated-BgNaWLoS.js';
 
-const pdsImageCss = () => `:host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);display:block;height:auto;max-width:100%}`;
+const pdsImageCss = () => `:host{--dimension-aspect-ratio:auto;--dimension-object-fit:cover;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);display:block;height:auto;max-width:100%;-o-object-fit:var(--dimension-object-fit);object-fit:var(--dimension-object-fit)}:host(.pds-image--has-ratio){display:block}:host(.pds-image--has-ratio) img{width:100%}`;
 
 const PdsImage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.pdsImageLoad = createEvent(this, "pdsImageLoad");
+        this.pdsImageError = createEvent(this, "pdsImageError");
         /**
-         * The image's alt tag. If none is provided,
-         * it will default to an empty string, which is desired for
-         * decorative images.
+         * The image's alt text. Defaults to an empty string, which marks the image
+         * as decorative and hides it from screen readers, so set it on any image
+         * that carries information.
          * @defaultValue ''
          */
         this.alt = '';
+        /**
+         * Determines how the image fills the shape set by `ratio`.
+         * Has no effect if `ratio` is not set.
+         * @defaultValue cover
+         */
+        this.fit = 'cover';
         /**
          * Indicates how the browser should load the image.
          * @defaultValue eager
          */
         this.loading = 'eager';
+        /**
+         * The source and event last emitted. A cached image can report `complete` on first
+         * render and still fire its own `load` event afterwards, so this keeps one source
+         * from emitting twice. A `load` still replaces an `error` for the same source, in
+         * case `decode()` misjudged an image that did load.
+         */
+        this.settled = null;
+        this.emitLoad = () => {
+            var _a;
+            if (!this.hasSource())
+                return;
+            const { currentSrc, naturalHeight, naturalWidth } = this.imageEl;
+            if (!this.showsCurrentSource())
+                return;
+            if (((_a = this.settled) === null || _a === void 0 ? void 0 : _a.src) === currentSrc && this.settled.type === 'load')
+                return;
+            this.settled = { src: currentSrc, type: 'load' };
+            this.pdsImageLoad.emit({ currentSrc, naturalHeight, naturalWidth });
+        };
+        this.emitError = () => {
+            var _a;
+            if (!this.hasSource())
+                return;
+            const { currentSrc } = this.imageEl;
+            if (!this.showsCurrentSource())
+                return;
+            if (((_a = this.settled) === null || _a === void 0 ? void 0 : _a.src) === currentSrc)
+                return;
+            this.settled = { src: currentSrc, type: 'error' };
+            this.pdsImageError.emit({ currentSrc });
+        };
+    }
+    handleSourceChange() {
+        this.settled = null;
+    }
+    componentDidLoad() {
+        const img = this.imageEl;
+        // With no `src` or `srcset` there is nothing to load and no event to emit. An empty
+        // `src` still counts: the browser treats it as a failed load.
+        if (!(img === null || img === void 0 ? void 0 : img.complete) || !this.hasSource())
+            return;
+        if (img.naturalWidth > 0) {
+            this.emitLoad();
+            return;
+        }
+        // `complete` with no intrinsic width is either a broken image or an SVG with no
+        // intrinsic size, and only decoding tells them apart. Without `decode()`, leave it
+        // to the native events.
+        if (typeof img.decode !== 'function')
+            return;
+        const src = img.currentSrc;
+        img.decode().then(() => img.currentSrc === src && this.emitLoad(), () => img.currentSrc === src && this.emitError());
+    }
+    // With no `src` or `srcset` attribute at all there is nothing to load and no event to
+    // emit. Clearing `src` can leave a brief window where Stencil has removed the attribute
+    // but a native `error` for the old, momentarily-empty `src` is still in flight (Firefox,
+    // Safari) — this check, read live at emit time, is what catches that window.
+    hasSource() {
+        const img = this.imageEl;
+        return img.hasAttribute('src') || img.hasAttribute('srcset');
+    }
+    /**
+     * The resolved absolute URL `src` would become once applied, or `undefined` for no
+     * `src`. Resolving it (rather than comparing raw attribute text) matches `img.src`
+     * even when Stencil skipped writing the attribute because the resolved value already
+     * equaled it, such as a `src` change from a relative to an equivalent absolute URL.
+     */
+    resolvedSrc() {
+        if (this.src == null)
+            return undefined;
+        try {
+            return new URL(this.src, document.baseURI).href;
+        }
+        catch (_a) {
+            return this.src;
+        }
+    }
+    /**
+     * Whether the inner image is showing the current `src` and `srcset`. Right after
+     * either changes, and before the next render applies it, an event can still arrive
+     * for the old source, and it shouldn't be emitted for the new one.
+     */
+    showsCurrentSource() {
+        var _a, _b;
+        const img = this.imageEl;
+        if (((_a = img.getAttribute('srcset')) !== null && _a !== void 0 ? _a : undefined) !== ((_b = this.srcset) !== null && _b !== void 0 ? _b : undefined))
+            return false;
+        const expectedSrc = this.resolvedSrc();
+        const srcMatches = expectedSrc === undefined ? !img.hasAttribute('src') : img.src === expectedSrc;
+        if (!srcMatches)
+            return false;
+        // Without `srcset`, a `load`/`error` for the right `src` should already be reflected in
+        // `currentSrc`. If it isn't yet, a stale native event from the previous source is still in
+        // flight — such as a cached image's `load` arriving just after a same-tick re-render
+        // already applied the new `src`. Skipped for an empty `src`: an empty attribute resolves
+        // `img.src` to the document's own URL, which `currentSrc` never settles to. `currentSrc` is
+        // already an absolute URL in a real browser, so resolving it here is a no-op there; it only
+        // matters in test environments whose mocked `currentSrc` isn't resolved the way `img.src` is.
+        if (!this.srcset && this.src) {
+            try {
+                return new URL(img.currentSrc, document.baseURI).href === img.src;
+            }
+            catch (_c) {
+                return img.currentSrc === img.src;
+            }
+        }
+        return true;
+    }
+    imageRatio() {
+        var _a;
+        const ratios = {
+            square: '1 / 1',
+            landscape: '4 / 3',
+            wide: '16 / 9',
+            portrait: '3 / 4',
+            tall: '9 / 16',
+        };
+        return (_a = ratios[this.ratio]) !== null && _a !== void 0 ? _a : this.ratio;
     }
     render() {
-        return (h(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
+        // `!= null`, not `!== undefined`: removing the attribute sets the prop to `null`, not `undefined`.
+        const hasRatio = this.ratio != null && this.ratio !== '';
+        // `fit` only means something once a ratio gives the image a shape to
+        // overflow, so neither is applied until `ratio` is set.
+        const ratioStyle = hasRatio
+            ? { aspectRatio: this.imageRatio(), objectFit: this.fit }
+            : undefined;
+        return (h(Host, { key: 'cbc53c10c1ace7c37e3210f2a9f94043d6cd6e0c', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '393cc584586e37e8d5b602fbdcda1783bf80cf9b', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+                'pds-image--has-ratio': hasRatio,
+            }, id: this.componentId }, h("img", { key: '139dbcebc7a71aa237deb8e2d7281abd40488096', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, style: ratioStyle, width: this.width, onLoad: this.emitLoad, onError: this.emitError, ref: (el) => (this.imageEl = el) })));
     }
+    static get watchers() { return {
+        "src": [{
+                "handleSourceChange": 0
+            }],
+        "srcset": [{
+                "handleSourceChange": 0
+            }]
+    }; }
 };
 PdsImage.style = pdsImageCss();
 

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
 import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
-import { i as inheritAriaAttributes } from './attributes-DkeVeN0g.js';
+import { i as inheritAriaAttributes } from './attributes-CD8knu3a.js';
 import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
-import { b as danger } from './index-DvN3tyZp.js';
+import { b as danger } from './index-B0DXTeeV.js';
 import './keep-hydrated-BgNaWLoS.js';
 
 const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
@@ -44,7 +44,7 @@ const PdsInput = class {
         this.hasAction = false;
         /**
          * Determines the type of control that will be displayed
-         * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
+         * `'email'`, `'number'`, `'password'`, `'search'`, `'tel'`, `'text'`, `'url'`
          * @defaultValue "text"
          */
         this.type = 'text';
@@ -296,10 +296,10 @@ const PdsInput = class {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: '1706e29a68d25a8bb83c36d6bddace04a448f6f5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '1488b6ea995c4ffc4068757f566494c0ac073950', class: "pds-input" }, label && (h("div", { key: 'e2fe4e461e626648ec51882e92e02fea179e3e13', class: {
+        return (h(Host, { key: '12dd9f60e5b7401fdad3d81aacf174d1465dfdd6', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '5c8c1488cd9041333cf22e5ef36c367d8bddcc21', class: "pds-input" }, label && (h("div", { key: '2fd1d0a71714e11ff7675f3ab376c859b717122e', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: 'c926a6fbb3130afdc6c86d509b92fb6650391c4b', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'dbbaf9d0db49f949f69f1faf848e7c6193e32793' }, label, this.required && h("span", { key: '42e6325a0f5ee276ed92cf2eb71942c268c3d1aa', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '4715743733f2d7d3e4edf9ac4ab6d69ffde04d00', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '438ac0fc6d497a8227c83e628d29d4633ffc208a', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '43b5c3a332072f19a38be316565602932c61504d', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: '54fd4fc2dcbc645377edbe4d04cfd82c7d1591e8', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '2bd509a575ec5c7a548955dd7f706d7c1d42557e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: '82623092a61b5158daa39937a8c8e01081cb6fa3', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '10a973c6191458f1133c34ccfdfd5342d330829d' }, label, this.required && h("span", { key: '413deb83a0c8b7f0ab0e5648a7bde19166477a1c', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: 'c90ff99e08ab480453015fa293d38077204ea07c', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'd558ffc9369bd19c454f88c48acde45a4a992122', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '747fd78b735924efb0a0e074ef20eac011c8887b', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: '1a1ce87923e24bd70fc85f410c1eb3e69f16171f', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'be6bb7c6e24b379afd7cd6977b5555f680b41f6b', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1,11 +1,11 @@
 import { r as registerInstance, h } from './index-4_RRPJTO.js';
 import { s as setColor } from './utils-OYK5-nwe.js';
-import { l as launch } from './index-DvN3tyZp.js';
+import { l as launch } from './index-B0DXTeeV.js';
 import './keep-hydrated-BgNaWLoS.js';
 
 const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);isolation:isolate;outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
 
-// Used when `externalLabel` is unset; an empty string hides the icon instead.
+// Used when `externalLabel` is unset; an empty string makes the icon decorative instead.
 const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
 const PdsLink = class {
     constructor(hostRef) {
@@ -18,9 +18,8 @@ const PdsLink = class {
          */
         this.active = false;
         /**
-         * Determines whether the link should open in a new tab.
+         * Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.
          * @defaultValue false
-         * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
          */
         this.external = false;
         /**
@@ -66,8 +65,8 @@ const PdsLink = class {
         // label is empty.
         const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
         const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
-        return (h("a", { key: 'ae7928aa6dce42657545a1d17581818d3724746f', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
+        return (h("a", { key: '43d5871702d13430c5759b28887c146263e4ee0d', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '15552982e8f9ca7e8844f65e98f99df3101db8a5' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: 'a4356792c73269a02397b543e1cc8b532ba3e690', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
     }
 };
 PdsLink.style = pdsLinkCss();

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
-import { H as HostStylingKeeper } from './attributes-DkeVeN0g.js';
+import { H as HostStylingKeeper } from './attributes-CD8knu3a.js';
 import { r as restoreReflectedDefault } from './reflected-attribute-default-t3idJwV0.js';
 import './keep-hydrated-BgNaWLoS.js';
 
@@ -18,7 +18,8 @@ const PdsLoader = class {
          */
         this.showLabel = false;
         /**
-         * Sets the size of the spinner loader. Value can be preset or custom.
+         * Sets the size of the spinner loader: `xs` (24px), `sm` (32px), `md` (48px), `lg` (64px), `xl` (80px),
+         * or a custom CSS length such as `128px`. The `typing` variant ignores it.
          */
         this.size = 'md';
         /**
@@ -67,7 +68,7 @@ const PdsLoader = class {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, h("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, h("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, h("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, h("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, h("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, h("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), h("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), h("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), h("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
+        return (h(Host, Object.assign({ key: '25f67dfddaf7b5e5947e1b9e97a3a3341fc4a9ca', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: 'bea9dd77e189750aac17522ae227ada7b14f15e2', class: "pds-loader--spinner" }, h("svg", { key: 'ab4fc80a77459c8f24e3327ed7f15070f34dd4a4', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '997df5cefd2dd832f5ea9251b5fc80c2ce84a9c5' }, h("linearGradient", { key: '92084cf660d2fabd0e7375cbfaf2f5d87f2aa628', id: "spinner-secondHalf" }, h("stop", { key: 'ad8d852e05684a7611d833e0305ed4bbd5ca35d0', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '5664d937062006658a4aafe9b7e35131c9d34b75', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'f7dfa63b3ffa1904596bb0ac8f41d45d6614c660', id: "spinner-firstHalf" }, h("stop", { key: 'ec7a496b42d4782c0e48126408b403ca3bfddd21', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '87b44ef8885072cb41629e0c58419be7aa832ebd', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f6ead61041e2f6d06886f0d93b89da36c498ee2d', class: "pds-loader__spinner-path" }, h("path", { key: '8c0dd0255f75c7cba65cfe752e4626e9381de461', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'adb47eb99461bd721da58706930496d8a33101fa', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '67ec5d33f29a617c074479fd976c7f4cfc0c8530', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'be149ae7df72a5aeda1c4f064e35c1ec201426f8', class: "pds-loader--typing" }, h("span", { key: '6f35aa1230b6ef6c4dada525a0406fcb484068c3' }), h("span", { key: 'fa523ebab73e1f4d225c4252514b1aed57503441' }), h("span", { key: 'bd1df232b4ea00971581956cc6208c816ae91430' }))), h("div", { key: 'aee3c4b21ed5b4efd7c47056af042c0c1d296ed9', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '0655b2f83082a960c859b978f858bc1238f30ac6', name: "label" }, "Loading..."))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -13,7 +13,7 @@ const PdsModalFooter = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, h("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
+        return (h("footer", { key: '3ea8f3a2b955f75682f7ab212f4fc7b05a13cbba', class: "pds-modal__footer" }, h("slot", { key: 'e9e53c0d225e48ec1f271646907194421ab2bc68' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -13,7 +13,7 @@ const PdsModalHeader = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, h("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
+        return (h("header", { key: '9778bdebb88711827eeb0268298e269b920999bd', class: "pds-modal__header" }, h("slot", { key: 'e806f49f030839540317cf524ec6058388606cc9' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -94,15 +94,12 @@ const PdsModal = class {
          */
         this.disableTopLayer = false;
         /**
-         * Whether to skip moving focus into the modal when it opens — both our own
-         * `setInitialFocus()` and the browser's native "dialog focusing steps",
-         * which move focus into the dialog as soon as `show()`/`showModal()` is
-         * called regardless of application code. Focus return on close is
-         * unaffected either way. For a modal opened by something other than a
-         * direct user click — a redirect, a deep link, a background event —
-         * stealing focus on open can interrupt whatever the user was already
-         * doing. Default `false` preserves today's behavior for every existing
-         * consumer.
+         * Whether to skip moving focus into the modal when it opens. Set it for a
+         * modal that can open from a background event while the user is mid-task
+         * elsewhere on the page, where moving focus would interrupt them. Pair it
+         * with `disableTopLayer`: in the top layer the rest of the page is inert, so
+         * focus can't stay there. On close, focus moves back only if nothing outside
+         * the modal has taken it.
          * @default false
          */
         this.disableInitialFocus = false;
@@ -569,14 +566,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
+        return (h("dialog", { key: '39f42306fff4fae51a9dffe86500a2c7e55cf8f5', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: 'baff708cc933457027074dda27ce440e7a65a0da', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: 'd752edad801a28fcd5b93aa50f52528255a319b8' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {