@pine-ds/core 4.8.0 → 4.9.1

package/dist/collection/components/pds-link/pds-link.css

@@ -13,9 +13,9 @@
 }
 .pds-link:focus-visible {
   border-radius: var(--pine-dimension-2xs);
+  isolation: isolate;
   outline: var(--pine-outline-focus);
   outline-offset: var(--pine-border-width-thick);
-  position: relative;
 }
 .pds-link:hover {
   color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));

package/dist/collection/components/pds-link/pds-link.js

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 import { setColor } from "../../utils/utils";
 import { launch } from "@pine-ds/icons/icons";
+// Used when `externalLabel` is unset; an empty string hides the icon instead.
+const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
 /**
  * @part link - Link element styles.
  * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
@@ -53,11 +55,18 @@ export class PdsLink {
         return linkStyles;
     }
     render() {
+        var _a;
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
-        const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '3b6f9d19d7f50d0606cf5f3c3a97b85ee4aa63b0', 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: 'a265f1c4c9b6ff089b23906d8f650bfd65b25013' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '9553a8256b6811296ea4b762e32662c1a2f4aecf', icon: launch, size: this.fontSize })));
+        const opensInNewTab = targetValue === '_blank';
+        const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
+        // A `target` other than _blank overrides `external`, and then the label
+        // would be false, so the icon is decorative there, as it is when the
+        // 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 })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +188,28 @@ export class PdsLink {
                 "attribute": "external",
                 "defaultValue": "false"
             },
+            "externalLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'(opens in a new tab)'"
+                        }],
+                    "text": "Accessible label for the icon that `external` shows, appended to the\nlink's name. It isn't announced when `target` keeps the link in the same\ntab. Pass a translated string to localize it; defaults to English. Pass an\nempty string to make the icon decorative."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external-label"
+            },
             "target": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/pds-link/stories/pds-link.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 export default {
   args: { href: '#some-anchor' },
@@ -12,8 +13,8 @@ export default {
   title: 'components/Link'
 }
 
-const BaseTemplate = (args) => html`<pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
-const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+const BaseTemplate = (args) => html`<pds-link color=${args.color} ?external=${args.external} external-label=${ifDefined(args.externalLabel)} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
+const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} ?external=${args.external} external-label=${ifDefined(args.externalLabel)} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
 
 export const Colors = BaseTemplate.bind();
 Colors.args = {
@@ -72,3 +73,51 @@ export const NavTabs = {
     </nav>
   `,
 };
+
+// A whole row that is one link. The click area is the link part's ::after stretched over
+// the positioned row, so the row activates the link without nesting anything inside it.
+// Trailing controls sit above that box so they stay separately clickable, and the focus
+// ring is drawn on the stretched box rather than on the text.
+export const WholeRowLink = {
+  render: () => html`
+    <style>
+      .pds-link-row {
+        position: relative;
+      }
+
+      .pds-link-row:hover {
+        background-color: var(--pine-color-background-muted);
+      }
+
+      .pds-link-row pds-link::part(link)::after {
+        border-radius: var(--pine-border-radius-md);
+        content: "";
+        inset: 0;
+        position: absolute;
+      }
+
+      .pds-link-row pds-link::part(link):focus-visible {
+        outline: none;
+      }
+
+      .pds-link-row pds-link::part(link):focus-visible::after {
+        outline: var(--pine-outline-focus);
+        outline-offset: var(--pine-border-width-thick);
+      }
+
+      .pds-link-row__trailing {
+        position: relative;
+        z-index: 1;
+      }
+    </style>
+    <pds-box class="pds-link-row" border border-radius="md" padding="sm" align-items="center" justify-content="space-between">
+      <pds-box gap="xs" align-items="center">
+        <pds-icon name="file" aria-hidden="true"></pds-icon>
+        <pds-link href="#row-target" variant="plain">Quarterly report</pds-link>
+      </pds-box>
+      <pds-box class="pds-link-row__trailing">
+        <pds-button variant="secondary" size="small">Download</pds-button>
+      </pds-box>
+    </pds-box>
+  `,
+};

package/dist/collection/components/pds-loader/pds-loader.js

@@ -66,7 +66,7 @@ export class PdsLoader {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: 'c42c1aeec5c8db9a1065f35492734a8cb265f3ce', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: 'dc1b7943709d03e02467cca0817fb6a7ad5ed10a', class: "pds-loader--spinner" }, h("svg", { key: 'db38e607541ac1eb91be87b2cd0240341c8fb51d', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd734ef70b0039758a25881c22bb3e6453ac40012' }, h("linearGradient", { key: '697627f516c5f7b4cd5351dd39de231c0cb9e429', id: "spinner-secondHalf" }, h("stop", { key: '03082c0ec354685eebf7d0132202d54b083d26df', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '181b661b36aeb44943e20dec513f7265a9487004', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '67f6c51aefe99bcbfdb741290337364501fc4fcb', id: "spinner-firstHalf" }, h("stop", { key: 'cb6adf27ecb06b42ba572a702153de960491b0b6', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'aeebabfa1ac00391937388feefa120bd0bb4d26c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f06ca75e4df171b6db426fce9bc34076cfee5bca', class: "pds-loader__spinner-path" }, h("path", { key: 'a278b37de8f77a1000efecb62b89e3f751712a98', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a035add4d01b60bcebf7625c8730d6a41ddf40ff', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1189c8299d33a2a6bb6a8345b60f22bf4ad9beee', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '39826fae20e8826d9c73cf57ba938583d610e1ea', class: "pds-loader--typing" }, h("span", { key: '8f2b837c79548a1080710a7cc30c3be3a051e1dd' }), h("span", { key: '8efb1193ef51f110950861767eccc3896e90b81e' }), h("span", { key: '366f2d205adbb043691c253cff17d2d29d56a2cc' }))), h("div", { key: 'aeaa4aa12863b34088e84fd2791c2ce32dc05248', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '7a8ec45aed1cd6f9e60f4db2ec5376439fa41c81', name: "label" }, "Loading..."))));
+        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..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js

@@ -183,10 +183,10 @@ export class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: 'c83e230d23444e3d5358d995170e2b8386884fe8' }, h("div", { key: 'b91de2c71e693b5a1ba2b257d741e7b0418c2d76', class: {
+        return (h(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, h("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '971cbd44ffeac4bb13a651948a119c603bed9e4f' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -9,7 +9,7 @@ export class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
+        return (h("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, h("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -9,7 +9,7 @@ export class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, h("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
+        return (h("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, h("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal.css

@@ -23,7 +23,7 @@
     backdrop-filter: blur(3px);
   }
 }
-pds-modal .pds-modal__backdrop {
+pds-modal pds-modal .pds-modal__backdrop {
   z-index: var(--pine-z-index-priority);
 }
 .pds-modal__backdrop::backdrop {

package/dist/collection/components/pds-modal/pds-modal.js

@@ -1,91 +1,11 @@
 import { h } from "@stencil/core";
 import { closest } from "../../utils/closest";
+import { tabbableIn } from "../../utils/tabbable";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
 const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
 const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
     /\d/.test(value) &&
     (typeof CSS === 'undefined' || CSS.supports('max-width', value));
-const TABBABLE = [
-    'a[href]',
-    'area[href]',
-    'button',
-    'input:not([type="hidden"])',
-    'select',
-    'textarea',
-    'iframe',
-    'summary',
-    '[contenteditable]:not([contenteditable="false"])',
-    '[tabindex]',
-].join(',');
-/**
- * Collects the tabbable elements under `root` in focus order, walking into open shadow roots and
- * following slots, so a component's own controls (the input inside pds-combobox or pds-textarea)
- * count without being registered here by tag name. Positive tabindex values are not reordered,
- * and a closed shadow root can't be seen into.
- */
-function collectTabbable(root, found) {
-    for (const child of Array.from(root.children))
-        visitTabbable(child, found);
-}
-// An editing host reports tabIndex -1 but is still a Tab stop; editable content inside it is not.
-const isTabStop = (el) => { var _a; return el.tabIndex >= 0 || (el.isContentEditable && !el.hasAttribute('tabindex') && !((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable)); };
-function visitTabbable(el, found) {
-    var _a, _b, _c, _d;
-    if (el.hasAttribute('inert'))
-        return;
-    if (el.localName === 'slot') {
-        const slot = el;
-        // Fallback content renders only when nothing at all is assigned, text included.
-        if (((_b = (_a = slot.assignedNodes) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : []).length === 0)
-            return collectTabbable(el, found);
-        for (const slotted of slot.assignedElements({ flatten: true }))
-            visitTabbable(slotted, found);
-        return;
-    }
-    // A delegatesFocus host passes focus to its first control, which the walk below finds.
-    const delegates = ((_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.delegatesFocus) === true;
-    if (el instanceof HTMLElement && !delegates && isTabStop(el) && el.matches(TABBABLE) && !el.matches(':disabled')) {
-        found.push(el);
-    }
-    // A shadow host's light children render only through its slots, which the walk reaches.
-    collectTabbable((_d = el.shadowRoot) !== null && _d !== void 0 ? _d : el, found);
-}
-/** The element as a radio in a named group, or `null`. */
-const groupedRadio = (el) => el instanceof HTMLInputElement && el.type === 'radio' && el.name !== '' ? el : null;
-/**
- * Keeps one radio per named group, as the browser does: the checked one, or the first. The others
- * are reached with the arrow keys, so they can't be the first or last stop of the trap.
- */
-function oneRadioPerGroup(elements) {
-    // Radios group by name and form within one tree, so each shadow root starts its own groups.
-    const groups = [];
-    for (const el of elements) {
-        const radio = groupedRadio(el);
-        if (radio === null)
-            continue;
-        const group = groups.find(([first]) => first.name === radio.name && first.form === radio.form && first.getRootNode() === radio.getRootNode());
-        if (group)
-            group.push(radio);
-        else
-            groups.push([radio]);
-    }
-    const stops = new Set(groups.map((radios) => { var _a; return (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0]; }));
-    return elements.filter((el) => groupedRadio(el) === null || stops.has(el));
-}
-/** The controls Tab reaches in `root`, in order: visible ones, and one radio per group. */
-function tabbableIn(root) {
-    const found = [];
-    collectTabbable(root, found);
-    // checkVisibility() also drops an element inside a hidden ancestor, whose own computed
-    // display isn't none; such an element can't take focus.
-    const visible = found.filter(el => {
-        if (typeof el.checkVisibility === 'function')
-            return el.checkVisibility({ checkVisibilityCSS: true });
-        const style = window.getComputedStyle(el);
-        return style.display !== 'none' && style.visibility !== 'hidden';
-    });
-    return oneRadioPerGroup(visible);
-}
 /** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
 function containsComposed(ancestor, node) {
     for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
@@ -645,14 +565,14 @@ export class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: '0a3ea92246b5ae704bc7dcbadf4f4e0d5a54e9e6', class: {
+        return (h("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', 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: 'a38029c2284ed345bec2ce7638fc3415818cd609', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', 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: '396da81af42685f5c083f853afa207a6844e444e' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -77,7 +77,7 @@ export class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: '3a526f6883d7e7df35985a145962f656621535c1', class: backdropClasses }, h("div", { key: '3af0487dc8c8831903cd7c22ffbf3e708b067ad7', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '94e6205042ee91dac0823901cc97b79e93a515f2', class: "pds-modal__header" }, h("slot", { key: 'ca04b575ccceabd431e3f5c57189f17f9aae6089', name: "header" })), h("div", { key: 'f8327a261e70b622add1dd4ee21b5f8e8d91e603', class: "pds-modal-content" }, h("slot", { key: 'a1a9c30d0f5479b0004ace4544e3d96ae87465be' })), h("div", { key: 'af5fa59922047eeec7cbf0a0e1ee4b472b16079c', class: "pds-modal__footer" }, h("slot", { key: '3c469bf94bb3a26dfd8046a5eda481f9d55edca1', name: "footer" })))));
+        return (h("div", { key: '6e165638f8f4699fa242f3045155c392f9f529b2', class: backdropClasses }, h("div", { key: 'f4b8db3093a6fbe24be8035a826e8289815e4afb', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: 'fa846f66e539ea0d1b73820abb991fdb02902499', class: "pds-modal__header" }, h("slot", { key: '0faaa6858fecd9d0c48c7f183d4f2101c1bed785', name: "header" })), h("div", { key: 'a896fba9494fcdee9dde7e0d9f7baf708095ee6f', class: "pds-modal-content" }, h("slot", { key: '4091e70b2a744c36c8249aa8664937d227145c14' })), h("div", { key: 'cbf4bdd80cc3575d8c7e2e0e2078e28c4f185920', class: "pds-modal__footer" }, h("slot", { key: '56ed3a26c36fd70d7ec9f033951d1b1d9e044957', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-multiselect/pds-multiselect.js

@@ -302,6 +302,12 @@ export class PdsMultiselect {
                     }
                     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();
                     }
                     break;
                 }
@@ -1260,10 +1266,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: 'd0879469e6ff943374c2f035c0a8d6d57c25dc5f', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '80caa694099218561b85c93d547ec9208def0ec7', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'b4eaa2c9e2901c28ecb0b8f55e63e33ad899e945', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: '8f1ce5ef092285ce7c0855643fae76a4ec86ee17', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'c14c3d52c1d55fb33a89f1a25055728215a1e4ab', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'aacd3339b0db2048b31fbc5963f7232bbff78efe', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '404ed58aa6bfb2248ffad5e56ebabfe65149b9a4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '5e1ef76aa5d46798519e5ac885bfa1c8d7c7106c', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (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,
@@ -1279,7 +1285,7 @@ export class PdsMultiselect {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": 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 }, h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '73f17916a37722fefebd6b5a184a7b3dca6f4a9d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '1a987562b21da6f8d2f8c9f94e93e8c99a7abd74', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'ce1f7f48d6f8dee320d87cb7088f084e68cb3ab5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '8347dfdec6ef1b81d4cf9f72cba3d9ec965dcf08', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '74cd840e102ad635d2f4bc23cf3bcfaa61d5cea1', style: { display: 'none' } }, h("slot", { key: 'c2fd9e71363a9661062c8d88be0dd78fc98b964d' })))));
+            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '590045e4769812a1a2f7a97580d21d95dbe4e872', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '419f4349b7cb17260f03d2bdcfd777561a62de42', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'b922af14c83348607aa9aaaefe9b03b39e71bd42', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'bd08726adf14a42f2ecf0cdfcd390e5639f9fd96', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '42ad7905fb1816ccdd29b6aa438779929804b368', style: { display: 'none' } }, h("slot", { key: '4f3bf380e93d216790efb0a5de85d6479862350e' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-popover/pds-popover.css

@@ -5,6 +5,12 @@
 :host .pds-popover__trigger-wrapper {
   display: inline-block;
 }
+:host .pds-popover__tab-guard {
+  opacity: 0;
+  outline: none;
+  pointer-events: none;
+  position: fixed;
+}
 :host .pds-popover__content-slot-wrapper {
   display: none;
 }