@pine-ds/core 4.10.0 → 4.12.0

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

@@ -3,29 +3,171 @@
 var index = require('./index-D9iJuJCP.js');
 require('./keep-hydrated-AKoh0DG4.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) {
         index.registerInstance(this, hostRef);
+        this.pdsImageLoad = index.createEvent(this, "pdsImageLoad");
+        this.pdsImageError = index.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 (index.h(index.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 (index.h(index.Host, { key: 'cbc53c10c1ace7c37e3210f2a9f94043d6cd6e0c', class: {
                 'pds-image': true,
-            }, id: this.componentId }, index.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 }, index.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/cjs/pds-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-D9iJuJCP.js');
 var form = require('./form-MhwfKTuo.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 var utils = require('./utils-BhRmyxT8.js');
 var index$1 = require('./index-BDnbr0DK.js');
 require('./keep-hydrated-AKoh0DG4.js');
@@ -46,7 +46,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';
@@ -298,10 +298,10 @@ const PdsInput = class {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (index.h(index.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 }, index.h("div", { key: '1488b6ea995c4ffc4068757f566494c0ac073950', class: "pds-input" }, label && (index.h("div", { key: 'e2fe4e461e626648ec51882e92e02fea179e3e13', class: {
+        return (index.h(index.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 }, index.h("div", { key: '5c8c1488cd9041333cf22e5ef36c367d8bddcc21', class: "pds-input" }, label && (index.h("div", { key: '2fd1d0a71714e11ff7675f3ab376c859b717122e', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, index.h("label", { key: 'c926a6fbb3130afdc6c86d509b92fb6650391c4b', htmlFor: componentId, class: "pds-input__label" }, index.h("span", { key: 'dbbaf9d0db49f949f69f1faf848e7c6193e32793' }, label, this.required && index.h("span", { key: '42e6325a0f5ee276ed92cf2eb71942c268c3d1aa', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), index.h("div", { key: '4715743733f2d7d3e4edf9ac4ab6d69ffde04d00', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), index.h("input", Object.assign({ key: '438ac0fc6d497a8227c83e628d29d4633ffc208a', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": form.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 && (index.h("p", { key: '43b5c3a332072f19a38be316565602932c61504d', class: "pds-input__helper-message", id: form.messageId(componentId, 'helper') }, helperMessage)), errorMessage && (index.h("p", { key: '54fd4fc2dcbc645377edbe4d04cfd82c7d1591e8', class: "pds-input__error-message", id: form.messageId(componentId, 'error') }, index.h("pds-icon", { key: '2bd509a575ec5c7a548955dd7f706d7c1d42557e', "aria-hidden": "true", icon: index$1.danger, size: "small" }), errorMessage)))));
+            } }, index.h("label", { key: '82623092a61b5158daa39937a8c8e01081cb6fa3', htmlFor: componentId, class: "pds-input__label" }, index.h("span", { key: '10a973c6191458f1133c34ccfdfd5342d330829d' }, label, this.required && index.h("span", { key: '413deb83a0c8b7f0ab0e5648a7bde19166477a1c', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), index.h("div", { key: 'c90ff99e08ab480453015fa293d38077204ea07c', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), index.h("input", Object.assign({ key: 'd558ffc9369bd19c454f88c48acde45a4a992122', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": form.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 && (index.h("p", { key: '747fd78b735924efb0a0e074ef20eac011c8887b', class: "pds-input__helper-message", id: form.messageId(componentId, 'helper') }, helperMessage)), errorMessage && (index.h("p", { key: '1a1ce87923e24bd70fc85f410c1eb3e69f16171f', class: "pds-input__error-message", id: form.messageId(componentId, 'error') }, index.h("pds-icon", { key: 'be6bb7c6e24b379afd7cd6977b5555f680b41f6b', "aria-hidden": "true", icon: index$1.danger, size: "small" }), errorMessage)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -7,7 +7,7 @@ require('./keep-hydrated-AKoh0DG4.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) {
@@ -20,9 +20,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;
         /**
@@ -68,8 +67,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 (index.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 }, index.h("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
-            index.h("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: index$1.launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
+        return (index.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 }, index.h("slot", { key: '15552982e8f9ca7e8844f65e98f99df3101db8a5' }, this.href), showExternalIcon &&
+            index.h("pds-icon", { key: 'a4356792c73269a02397b543e1cc8b532ba3e690', icon: index$1.launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
     }
 };
 PdsLink.style = pdsLinkCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 var reflectedAttributeDefault = require('./reflected-attribute-default-DVYHG6O1.js');
 require('./keep-hydrated-AKoh0DG4.js');
 
@@ -20,7 +20,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';
         /**
@@ -69,7 +70,7 @@ const PdsLoader = class {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (index.h(index.Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (index.h("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, index.h("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, index.h("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, index.h("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, index.h("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, index.h("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, index.h("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, index.h("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), index.h("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), index.h("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), index.h("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
+        return (index.h(index.Host, Object.assign({ key: '25f67dfddaf7b5e5947e1b9e97a3a3341fc4a9ca', class: hostClass }, hostAttributes), this.variant === 'spinner' && (index.h("div", { key: 'bea9dd77e189750aac17522ae227ada7b14f15e2', class: "pds-loader--spinner" }, index.h("svg", { key: 'ab4fc80a77459c8f24e3327ed7f15070f34dd4a4', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, index.h("defs", { key: '997df5cefd2dd832f5ea9251b5fc80c2ce84a9c5' }, index.h("linearGradient", { key: '92084cf660d2fabd0e7375cbfaf2f5d87f2aa628', id: "spinner-secondHalf" }, index.h("stop", { key: 'ad8d852e05684a7611d833e0305ed4bbd5ca35d0', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '5664d937062006658a4aafe9b7e35131c9d34b75', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: 'f7dfa63b3ffa1904596bb0ac8f41d45d6614c660', id: "spinner-firstHalf" }, index.h("stop", { key: 'ec7a496b42d4782c0e48126408b403ca3bfddd21', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: '87b44ef8885072cb41629e0c58419be7aa832ebd', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'f6ead61041e2f6d06886f0d93b89da36c498ee2d', class: "pds-loader__spinner-path" }, index.h("path", { key: '8c0dd0255f75c7cba65cfe752e4626e9381de461', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: 'adb47eb99461bd721da58706930496d8a33101fa', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: '67ec5d33f29a617c074479fd976c7f4cfc0c8530', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: 'be149ae7df72a5aeda1c4f064e35c1ec201426f8', class: "pds-loader--typing" }, index.h("span", { key: '6f35aa1230b6ef6c4dada525a0406fcb484068c3' }), index.h("span", { key: 'fa523ebab73e1f4d225c4252514b1aed57503441' }), index.h("span", { key: 'bd1df232b4ea00971581956cc6208c816ae91430' }))), index.h("div", { key: 'aee3c4b21ed5b4efd7c47056af042c0c1d296ed9', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '0655b2f83082a960c859b978f858bc1238f30ac6', name: "label" }, "Loading..."))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

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

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

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

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

@@ -96,15 +96,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;
@@ -571,14 +568,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (index.h("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
+        return (index.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 }, index.h("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, index.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" }, index.h("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: 'd752edad801a28fcd5b93aa50f52528255a319b8' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -6,9 +6,11 @@ var utils = require('./utils-BhRmyxT8.js');
 var form = require('./form-MhwfKTuo.js');
 var index$1 = require('./index-BDnbr0DK.js');
 var i18nFormat = require('./i18n-format-BD0PmYzT.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
 require('./keep-hydrated-AKoh0DG4.js');
+require('./portal-target-e8WQ6dLx.js');
 
-const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
+const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-active);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
 
 // Names only: pds-icon's `icon` prop also fetches URLs and data: SVGs, unsanitized.
 const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
@@ -22,6 +24,21 @@ const PdsMultiselect = class {
         this.pdsMultiselectCreate = index.createEvent(this, "pdsMultiselectCreate");
         this.pdsMultiselectDismiss = index.createEvent(this, "pdsMultiselectDismiss");
         this.pdsMultiselectOptionAction = index.createEvent(this, "pdsMultiselectOptionAction");
+        this.triggerTextTooltip = truncationTooltip.bindTruncationTooltips((textEl) => {
+            var _a;
+            return ({
+                // Not the host, which holds the panel.
+                hostEl: (_a = textEl.closest('[part="trigger"]')) !== null && _a !== void 0 ? _a : textEl,
+                contentEl: textEl,
+                getTooltipText: () => this.getTriggerText(),
+                manageTabIndex: false,
+            });
+        });
+        this.selectedItemTooltips = truncationTooltip.bindTruncationTooltips((item) => ({
+            hostEl: item,
+            contentEl: item,
+            getTooltipText: () => { var _a; return (_a = item.textContent) !== null && _a !== void 0 ? _a : ''; },
+        }));
         this.hasDisabledSlottedTrigger = false;
         /**
          * Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
@@ -298,34 +315,31 @@ const PdsMultiselect = class {
                 }
                 // Escape is handled by the global @Listen('keydown') handler
                 case 'Tab': {
-                    const firstFooterTabbable = e.shiftKey ? undefined : this.getFooterTabbables()[0];
-                    firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.focus();
-                    if (firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.matches(':focus')) {
-                        // Each option's checkbox is a tab stop, so jump past them to the footer.
+                    const row = e.shiftKey ? undefined : this.getSelectedItemTabbables()[0];
+                    if (row !== undefined) {
+                        row.focus();
                         e.preventDefault();
                     }
                     else {
-                        this.closeDropdown();
-                        // Tab would move on to an option's checkbox, which closing removes, dropping focus to the page.
-                        // Land on the trigger instead, as Escape does; Shift+Tab already reaches it.
-                        const trigger = e.shiftKey ? undefined : this.activeTriggerEl;
-                        trigger === null || trigger === void 0 ? void 0 : trigger.focus();
-                        if (trigger === null || trigger === void 0 ? void 0 : trigger.matches(':focus'))
-                            e.preventDefault();
+                        this.tabPastOptions(e);
                     }
                     break;
                 }
             }
         };
+        this.handleSelectedListKeyDown = (e) => {
+            if (e.key === 'Tab' && !e.shiftKey && e.composedPath()[0] === this.getSelectedItemTabbables().pop())
+                this.tabPastOptions(e);
+        };
         this.handleFooterKeyDown = (e) => {
-            var _a;
+            var _a, _b;
             if (e.key !== 'Tab')
                 return;
             const tabbables = this.getFooterTabbables();
             const focused = e.composedPath()[0];
             if (e.shiftKey && focused === tabbables[0]) {
                 e.preventDefault();
-                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = ((_a = this.getSelectedItemTabbables().pop()) !== null && _a !== void 0 ? _a : this.searchInputEl)) === null || _b === void 0 ? void 0 : _b.focus();
             }
             else if (!e.shiftKey && focused === tabbables[tabbables.length - 1]) {
                 this.closeDropdown();
@@ -417,6 +431,7 @@ const PdsMultiselect = class {
         if (this.el.attachInternals && !this.internals) {
             this.internals = this.el.attachInternals();
         }
+        this.syncTruncationTooltips();
     }
     /**
      * Form Associated Custom Elements API: Called when the form is disabled
@@ -465,8 +480,19 @@ const PdsMultiselect = class {
             this.updateOptionsFromSlot();
         }
     }
+    componentDidRender() {
+        this.syncTruncationTooltips();
+    }
+    syncTruncationTooltips() {
+        var _a;
+        const root = this.el.shadowRoot;
+        this.triggerTextTooltip.sync([root === null || root === void 0 ? void 0 : root.querySelector('.pds-multiselect__trigger-text')]);
+        this.selectedItemTooltips.sync((_a = root === null || root === void 0 ? void 0 : root.querySelectorAll('.pds-multiselect__selected-item')) !== null && _a !== void 0 ? _a : []);
+    }
     disconnectedCallback() {
         var _a, _b;
+        this.triggerTextTooltip.destroy();
+        this.selectedItemTooltips.destroy();
         utils.cancelDebouncedEvent(this.pdsMultiselectSearch);
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
         (_b = this.cleanupAutoUpdate) === null || _b === void 0 ? void 0 : _b.call(this);
@@ -985,6 +1011,26 @@ const PdsMultiselect = class {
             this.creating = false;
         }
     }
+    tabPastOptions(e) {
+        const firstFooterTabbable = e.shiftKey ? undefined : this.getFooterTabbables()[0];
+        firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.focus();
+        if (firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.matches(':focus')) {
+            // Each option's checkbox is a tab stop, so jump past them to the footer.
+            e.preventDefault();
+        }
+        else {
+            this.closeDropdown();
+            // Tab would move on to an option's checkbox, which closing removes, dropping focus to the page.
+            // Land on the trigger instead, as Escape does; Shift+Tab already reaches it.
+            const trigger = e.shiftKey ? undefined : this.activeTriggerEl;
+            trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+            if (trigger === null || trigger === void 0 ? void 0 : trigger.matches(':focus'))
+                e.preventDefault();
+        }
+    }
+    getSelectedItemTabbables() {
+        return Array.from(this.el.shadowRoot.querySelectorAll('.pds-multiselect__selected-item[tabindex="0"]'));
+    }
     getFooterTabbables() {
         const candidates = [];
         Array.from(this.el.children)
@@ -1201,7 +1247,7 @@ const PdsMultiselect = class {
     renderSelectedItemsList() {
         if (this.hideSelectedItems || this.selectedItems.length === 0)
             return null;
-        return (index.h("div", { class: "pds-multiselect__selected-section" }, index.h("ul", { class: "pds-multiselect__selected-list", role: "list" }, this.selectedItems.map(item => (index.h("li", { key: String(item.id), class: "pds-multiselect__selected-item" }, item.text))))));
+        return (index.h("div", { class: "pds-multiselect__selected-section" }, index.h("ul", { class: "pds-multiselect__selected-list", role: "list", onKeyDown: this.handleSelectedListKeyDown }, this.selectedItems.map(item => (index.h("li", { key: String(item.id), class: "pds-multiselect__selected-item" }, item.text))))));
     }
     renderDropdown() {
         if (!this.isOpen)
@@ -1270,10 +1316,10 @@ const PdsMultiselect = class {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (index.h(index.Host, { key: '8f1ce5ef092285ce7c0855643fae76a4ec86ee17', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: 'c14c3d52c1d55fb33a89f1a25055728215a1e4ab', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: 'aacd3339b0db2048b31fbc5963f7232bbff78efe', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (index.h(index.Host, { key: '2e5f7188cbb3928df3098644f9437449f5d5128d', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: 'f6b7d9d70e7635510bbcff648e1547c9cc222005', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: '9e3f0bc63e20e0a1f03f87f4b89c478331bf4001', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), index.h("div", { key: '5e1ef76aa5d46798519e5ac885bfa1c8d7c7106c', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), index.h("div", { key: 'efdf274b7223f77d646ac838f4163291ae310c31', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1289,7 +1335,7 @@ const PdsMultiselect = class {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, index.h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: '590045e4769812a1a2f7a97580d21d95dbe4e872', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: '419f4349b7cb17260f03d2bdcfd777561a62de42', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'b922af14c83348607aa9aaaefe9b03b39e71bd42', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: 'bd08726adf14a42f2ecf0cdfcd390e5639f9fd96', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: '42ad7905fb1816ccdd29b6aa438779929804b368', style: { display: 'none' } }, index.h("slot", { key: '4f3bf380e93d216790efb0a5de85d6479862350e' })))));
+            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: 'd90262ab6971d16dab6f8a367d038ab2607d888c', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: '4baf142546462bea84ccb67b7ce288517f1de754', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'fdea175d93bc566d18cbad560e970f8c61495b1d', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '63977a25e35def8a6a4b39b0039e2da08f99d02e', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: 'cb43771ef04a682a6d14d80b0b37618acc5748ad', style: { display: 'none' } }, index.h("slot", { key: '7733626ae7bd4ba83cb30bbbdb81c28e413e46a3' })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }