@pine-ds/core 4.10.0 → 4.12.0

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

@@ -1,11 +1,11 @@
 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.
+// Used when `externalLabel` is unset; an empty string makes the icon decorative 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.
+ * @slot (default) - Text content placed between the opening and closing tags. If the slot is empty (whitespace counts as content), the **href** will be used as a fallback.
  */
 export class PdsLink {
     constructor() {
@@ -17,9 +17,8 @@ export class PdsLink {
          */
         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;
         /**
@@ -65,8 +64,8 @@ export class PdsLink {
         // label is empty.
         const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
         const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
-        return (h("a", { key: 'ae7928aa6dce42657545a1d17581818d3724746f', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
+        return (h("a", { key: '43d5871702d13430c5759b28887c146263e4ee0d', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '15552982e8f9ca7e8844f65e98f99df3101db8a5' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: 'a4356792c73269a02397b543e1cc8b532ba3e690', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -176,11 +175,8 @@ export class PdsLink {
                     "tags": [{
                             "name": "defaultValue",
                             "text": "false"
-                        }, {
-                            "name": "deprecated",
-                            "text": "Consider using the `target` prop for more control. This prop will be maintained for backward compatibility."
                         }],
-                    "text": "Determines whether the link should open in a new tab."
+                    "text": "Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise."
                 },
                 "getter": false,
                 "setter": false,
@@ -203,7 +199,7 @@ export class PdsLink {
                             "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."
+                    "text": "Accessible label for the icon that `external` shows, appended to the\nlink's name. It isn't announced when `target` is anything other than\n`_blank`. Pass a translated string to localize it; defaults to English. Pass an\nempty string to make the icon decorative."
                 },
                 "getter": false,
                 "setter": false,
@@ -226,9 +222,9 @@ export class PdsLink {
                             "text": "undefined"
                         }, {
                             "name": "example",
-                            "text": "<pds-link href=\"https://example.com\" target=\"_blank\">Opens in new tab</pds-link>"
+                            "text": "<pds-link href=\"/dashboard\" target=\"_top\">Opens in the top-level frame</pds-link>"
                         }],
-                    "text": "Specifies where to open the linked document."
+                    "text": "Specifies where to open the linked document. Overrides the new-tab\ndefault of `external`; the icon still shows."
                 },
                 "getter": false,
                 "setter": false,
@@ -293,7 +289,7 @@ export class PdsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used."
+                    "text": "The hyperlink's destination URL. If the default slot is empty (whitespace counts as content), the href will be used as the link text."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -4,6 +4,10 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 export default {
   args: { href: '#some-anchor' },
   argTypes: {
+    target: {
+      control: 'select',
+      options: [undefined, '_blank', '_self', '_parent', '_top'],
+    },
     variant: {
       control: 'radio',
       options: ['inline', 'plain'],
@@ -13,8 +17,8 @@ export default {
   title: 'components/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>`;
+const BaseTemplate = (args) => html`<pds-link color=${args.color} ?external=${args.external} external-label=${ifDefined(args.externalLabel)} target=${ifDefined(args.target)} 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)} target=${ifDefined(args.target)} 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 = {

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

@@ -3,7 +3,7 @@ import { HostStylingKeeper } from "../../utils/attributes";
 import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 /**
  * @part loader-svg - Exposes the spinner SVG element for color customization.
- * @slot label - Default slot for Loader label text.
+ * @slot label - Label text. Defaults to "Loading...". Text outside this slot isn't shown or read.
  */
 export class PdsLoader {
     constructor() {
@@ -17,7 +17,8 @@ export class PdsLoader {
          */
         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';
         /**
@@ -66,7 +67,7 @@ export class PdsLoader {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, h("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, h("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, h("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, h("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, h("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, h("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), h("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), h("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), h("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
+        return (h(Host, Object.assign({ key: '25f67dfddaf7b5e5947e1b9e97a3a3341fc4a9ca', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: 'bea9dd77e189750aac17522ae227ada7b14f15e2', class: "pds-loader--spinner" }, h("svg", { key: 'ab4fc80a77459c8f24e3327ed7f15070f34dd4a4', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '997df5cefd2dd832f5ea9251b5fc80c2ce84a9c5' }, h("linearGradient", { key: '92084cf660d2fabd0e7375cbfaf2f5d87f2aa628', id: "spinner-secondHalf" }, h("stop", { key: 'ad8d852e05684a7611d833e0305ed4bbd5ca35d0', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '5664d937062006658a4aafe9b7e35131c9d34b75', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'f7dfa63b3ffa1904596bb0ac8f41d45d6614c660', id: "spinner-firstHalf" }, h("stop", { key: 'ec7a496b42d4782c0e48126408b403ca3bfddd21', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '87b44ef8885072cb41629e0c58419be7aa832ebd', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f6ead61041e2f6d06886f0d93b89da36c498ee2d', class: "pds-loader__spinner-path" }, h("path", { key: '8c0dd0255f75c7cba65cfe752e4626e9381de461', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'adb47eb99461bd721da58706930496d8a33101fa', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '67ec5d33f29a617c074479fd976c7f4cfc0c8530', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'be149ae7df72a5aeda1c4f064e35c1ec201426f8', class: "pds-loader--typing" }, h("span", { key: '6f35aa1230b6ef6c4dada525a0406fcb484068c3' }), h("span", { key: 'fa523ebab73e1f4d225c4252514b1aed57503441' }), h("span", { key: 'bd1df232b4ea00971581956cc6208c816ae91430' }))), h("div", { key: 'aee3c4b21ed5b4efd7c47056af042c0c1d296ed9', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '0655b2f83082a960c859b978f858bc1238f30ac6', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -134,7 +135,7 @@ export class PdsLoader {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the size of the spinner loader. Value can be preset or custom."
+                    "text": "Sets the size of the spinner loader: `xs` (24px), `sm` (32px), `md` (48px), `lg` (64px), `xl` (80px),\nor a custom CSS length such as `128px`. The `typing` variant ignores it."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
+ * Holds the modal's actions. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
  * @lightDom renders-markup
  */
 export class PdsModalFooter {
@@ -9,7 +10,7 @@ export class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, h("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
+        return (h("footer", { key: '3ea8f3a2b955f75682f7ab212f4fc7b05a13cbba', class: "pds-modal__footer" }, h("slot", { key: 'e9e53c0d225e48ec1f271646907194421ab2bc68' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
+ * Holds the modal's title and close control. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
  * @lightDom renders-markup
  */
 export class PdsModalHeader {
@@ -9,7 +10,7 @@ export class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, h("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
+        return (h("header", { key: '9778bdebb88711827eeb0268298e269b920999bd', class: "pds-modal__header" }, h("slot", { key: 'e806f49f030839540317cf524ec6058388606cc9' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -52,6 +52,7 @@ function deepActiveElement() {
 }
 /**
  * @lightDom renders-markup
+ * @part modal - The panel inside the dialog that holds the modal's content. `pds-modal` has no shadow root, so `::part(modal)` doesn't match it; select it with `pds-modal [part="modal"]` instead.
  */
 export class PdsModal {
     constructor() {
@@ -90,15 +91,12 @@ export class PdsModal {
          */
         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;
@@ -565,14 +563,14 @@ export class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
+        return (h("dialog", { key: '39f42306fff4fae51a9dffe86500a2c7e55cf8f5', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: 'baff708cc933457027074dda27ce440e7a65a0da', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: 'd752edad801a28fcd5b93aa50f52528255a319b8' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {
@@ -747,7 +745,7 @@ export class PdsModal {
                             "name": "default",
                             "text": "false"
                         }],
-                    "text": "Whether to skip moving focus into the modal when it opens \u2014 both our own\n`setInitialFocus()` and the browser's native \"dialog focusing steps\",\nwhich move focus into the dialog as soon as `show()`/`showModal()` is\ncalled regardless of application code. Focus return on close is\nunaffected either way. For a modal opened by something other than a\ndirect user click \u2014 a redirect, a deep link, a background event \u2014\nstealing focus on open can interrupt whatever the user was already\ndoing. Default `false` preserves today's behavior for every existing\nconsumer."
+                    "text": "Whether to skip moving focus into the modal when it opens. Set it for a\nmodal that can open from a background event while the user is mid-task\nelsewhere on the page, where moving focus would interrupt them. Pair it\nwith `disableTopLayer`: in the top layer the rest of the page is inert, so\nfocus can't stay there. On close, focus moves back only if nothing outside\nthe modal has taken it."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -32,7 +32,7 @@ const BaseTemplate = (args) => html`
       id="${args.componentId}"
       component-id="${args.componentId}"
       size="${args.size}"
-      ?backdrop-dismiss=${args.backdropDismiss}
+      backdrop-dismiss="${args.backdropDismiss}"
       ?disable-top-layer=${args.disableTopLayer}
       scrollable="${args.scrollable}"
       ?open=${args.open}
@@ -113,7 +113,7 @@ const DestructiveTemplate = (args) => html`
       id="${args.componentId}"
       component-id="${args.componentId}"
       size="${args.size}"
-      ?backdrop-dismiss=${args.backdropDismiss}
+      backdrop-dismiss="${args.backdropDismiss}"
       ?open=${args.open}
     >
       <pds-modal-header>
@@ -179,7 +179,7 @@ const CustomContentTemplate = (args) => html`
       <pds-modal
         id="${args.componentId}"
         size="${args.size}"
-        ?backdrop-dismiss=${args.backdropDismiss}
+        backdrop-dismiss="${args.backdropDismiss}"
         ?open=${args.open}
       >
 
@@ -267,7 +267,7 @@ const ScrollableTemplate = (args) => {
       <pds-modal
         id="${args.componentId}"
         size="${args.size}"
-        ?backdrop-dismiss=${args.backdropDismiss}
+        backdrop-dismiss="${args.backdropDismiss}"
         ?open=${args.open}
       >
         <pds-modal-header>
@@ -350,7 +350,7 @@ const FullscreenTemplate = (args) => html`
     <pds-modal
       id="${args.componentId}"
       size=${args.size}
-      ?backdrop-dismiss=${args.backdropDismiss}
+      backdrop-dismiss="${args.backdropDismiss}"
       ?open=${args.open}
     >
       <pds-modal-header>
@@ -437,7 +437,7 @@ const NonScrollableTemplate = (args) => html`
       id="${args.componentId}"
       component-id="${args.componentId}"
       size="${args.size}"
-      ?backdrop-dismiss=${args.backdropDismiss}
+      backdrop-dismiss="${args.backdropDismiss}"
       scrollable="${args.scrollable}"
       ?open=${args.open}
       key="${args.scrollable ? 'scrollable' : 'non-scrollable'}"
@@ -683,7 +683,7 @@ const DisableTopLayerTemplate = (args) => html`
       id="${args.componentId}"
       component-id="${args.componentId}"
       size="${args.size}"
-      ?backdrop-dismiss=${args.backdropDismiss}
+      backdrop-dismiss="${args.backdropDismiss}"
       ?disable-top-layer=${args.disableTopLayer}
       ?open=${args.open}
     >

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

@@ -35,7 +35,7 @@
   border-radius: var(--pine-dimension-125);
   cursor: pointer;
   display: flex;
-  font: var(--pine-typography-body-medium);
+  font: var(--pine-typography-body);
   gap: var(--pine-dimension-xs);
   justify-content: space-between;
   letter-spacing: var(--pine-letter-spacing);
@@ -163,7 +163,7 @@
 .pds-multiselect__search {
   align-items: center;
   border-block-end: var(--pine-border);
-  border-block-end-color: var(--pine-color-border-subtle);
+  border-block-end-color: var(--pine-color-border-active);
   display: flex;
   gap: var(--pine-dimension-xs);
   padding: var(--pine-dimension-xs) var(--pine-dimension-sm);

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

@@ -4,6 +4,7 @@ import { cancelDebouncedEvent, debounceEvent, flushDebouncedEvent } from "../../
 import { isSpecTest, messageId, assignDescription } from "../../utils/form";
 import { danger, enlarge } from "@pine-ds/icons/icons";
 import { formatMessage, pluralize } from "../../i18n";
+import { bindTruncationTooltips } from "../../utils/truncation-tooltip";
 // Names only: pds-icon's `icon` prop also fetches URLs and data: SVGs, unsanitized.
 const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
 const TABBABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -18,6 +19,21 @@ const TABBABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]
  */
 export class PdsMultiselect {
     constructor() {
+        this.triggerTextTooltip = 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 = 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.
@@ -294,34 +310,31 @@ export class PdsMultiselect {
                 }
                 // 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();
@@ -413,6 +426,7 @@ export class PdsMultiselect {
         if (this.el.attachInternals && !this.internals) {
             this.internals = this.el.attachInternals();
         }
+        this.syncTruncationTooltips();
     }
     /**
      * Form Associated Custom Elements API: Called when the form is disabled
@@ -461,8 +475,19 @@ export class PdsMultiselect {
             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();
         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);
@@ -981,6 +1006,26 @@ export class PdsMultiselect {
             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)
@@ -1197,7 +1242,7 @@ export class PdsMultiselect {
     renderSelectedItemsList() {
         if (this.hideSelectedItems || this.selectedItems.length === 0)
             return null;
-        return (h("div", { class: "pds-multiselect__selected-section" }, h("ul", { class: "pds-multiselect__selected-list", role: "list" }, this.selectedItems.map(item => (h("li", { key: String(item.id), class: "pds-multiselect__selected-item" }, item.text))))));
+        return (h("div", { class: "pds-multiselect__selected-section" }, h("ul", { class: "pds-multiselect__selected-list", role: "list", onKeyDown: this.handleSelectedListKeyDown }, this.selectedItems.map(item => (h("li", { key: String(item.id), class: "pds-multiselect__selected-item" }, item.text))))));
     }
     renderDropdown() {
         if (!this.isOpen)
@@ -1266,10 +1311,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        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: {
+        return (h(Host, { key: '2e5f7188cbb3928df3098644f9437449f5d5128d', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f6b7d9d70e7635510bbcff648e1547c9cc222005', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '9e3f0bc63e20e0a1f03f87f4b89c478331bf4001', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, 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: {
+            } }, this.label)), h("div", { key: 'efdf274b7223f77d646ac838f4163291ae310c31', 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,
@@ -1285,7 +1330,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: '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' })))));
+            } }, 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: 'd90262ab6971d16dab6f8a367d038ab2607d888c', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '4baf142546462bea84ccb67b7ce288517f1de754', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'fdea175d93bc566d18cbad560e970f8c61495b1d', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '63977a25e35def8a6a4b39b0039e2da08f99d02e', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'cb43771ef04a682a6d14d80b0b37618acc5748ad', style: { display: 'none' } }, h("slot", { key: '7733626ae7bd4ba83cb30bbbdb81c28e413e46a3' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -2413,7 +2458,7 @@ export class PdsMultiselect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the dropdown is dismissed via Escape key or click outside.\n\nThis event fires only when the user explicitly dismisses the panel without making a selection:\n- \u2705 Fires: Pressing Escape key while dropdown is open\n- \u2705 Fires: Clicking outside the component while dropdown is open\n- \u274C Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)\n- \u274C Does NOT fire: When panel closes programmatically via `closeDropdown()`\n\nEquivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction."
+                    "text": "Emitted when the dropdown is dismissed with the Escape key, or by focus moving outside the\ncomponent, such as with a click elsewhere on the page.\n\nIt doesn't fire when the panel closes any other way: from a selection (including with\n`closePanelOnSelect`) or an option action, a click on the trigger, Tab, or the multiselect\nbecoming disabled. Safari doesn't focus a clicked button, so there a click on the trigger while\nthe panel is open fires this event, and the panel opens again.\nUse it to restore parent UI state or run cleanup when the user cancels."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1,5 +1,5 @@
 :host {
-  --sizing-max-width-default: 352px;
+  --sizing-max-width-default: 400px;
   display: inline-block;
 }
 :host .pds-popover__trigger-wrapper {

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

@@ -159,10 +159,10 @@ export class PdsPopover {
          */
         this.popoverType = 'auto';
         /**
-         * Sets the maximum width of the popover content
-         * @defaultValue 352
+         * Sets the maximum width of the popover, in pixels, including its padding.
+         * @defaultValue 400
          */
-        this.maxWidth = 352;
+        this.maxWidth = 400;
         /**
          * Sets the padding of the popover content
          * @defaultValue "md"
@@ -562,6 +562,8 @@ export class PdsPopover {
         this.portalEl.style.backgroundColor = 'var(--pine-color-background-overlay)';
         this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
         this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
+        // So the padding below stays inside max-width rather than adding to it.
+        this.portalEl.style.boxSizing = 'border-box';
         this.portalEl.style.margin = 'var(--pine-dimension-none)';
         this.portalEl.style.padding = this.paddingToken();
         // Generate unique ID
@@ -1032,7 +1034,7 @@ export class PdsPopover {
         portal.style.left = `${left - origin.left}px`;
     }
     render() {
-        return (h(Host, { key: '85422eb7544a4795ce78b51684b7224a5d856a4e', id: this.componentId }, h("span", { key: '6fe9c827ed4d46ca723d6013f296faf80ba31366', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '970d1974d2be1451e670a36e7d2ccdc5979595bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("span", { key: '0c76f76286a30d8e6e948bd0abab3317b3673aa6', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), h("div", { key: '692c45e93899e74a3d5970f3a3625f6115ab63b0', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'f1566e0eb1eb08626f2a8285447702ce96b09f4d', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: 'c76e121eb82b0d4f89f49bc83ff592ccf5774d57', id: this.componentId }, h("span", { key: '01061721f373e6f83729624d19f0beac0d6f093e', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'e68a2bd22ee6657e534da3d097bdaf3189815262', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("span", { key: 'd48301ebb6a9e0729083829a0587a0a285faedda', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), h("div", { key: 'c7d2e348545adaa7566da7c4f6b13a7ee78d1322', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '312f54fa917c135adc2f2a5ccbbb3159a980df24', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -1146,15 +1148,15 @@ export class PdsPopover {
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "352"
+                            "text": "400"
                         }],
-                    "text": "Sets the maximum width of the popover content"
+                    "text": "Sets the maximum width of the popover, in pixels, including its padding."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "max-width",
-                "defaultValue": "352"
+                "defaultValue": "400"
             },
             "padding": {
                 "type": "string",

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

@@ -10,7 +10,7 @@ export class PdsProgress {
         */
         this.animated = false;
         /**
-        * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.
+        * Sets the progress fill percentage (0–100). Shown as text when `show-percent` is set.
         * @defaultValue 0
         */
         this.percent = 0;
@@ -30,7 +30,7 @@ export class PdsProgress {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
         const hostClass = this.animated ? { 'is-animated': this.animated } : '';
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, h("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, h("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '494b5fcb8cbfbb54570e05bf5cb3e122f281b0aa', class: hostClass }, h("div", { key: '9b1d956ac587add8d7bf46d258a04043484d65bb', class: "pds-progress" }, h("label", { key: '20f7a7e3107ee1f87eb7ebcd74baf484aefeaa15', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '3eb27fc07b60196b9528b200db990faf3c8f1293', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '68ec67c4e415eaee29cc1eb66786f356768ed585', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -101,7 +101,7 @@ export class PdsProgress {
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "'var(--pine-color-blue-300)'"
+                            "text": "'var(--pine-color-primary)'"
                         }],
                     "text": "Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."
                 },
@@ -144,7 +144,7 @@ export class PdsProgress {
                             "name": "defaultValue",
                             "text": "0"
                         }],
-                    "text": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`."
+                    "text": "Sets the progress fill percentage (0\u2013100). Shown as text when `show-percent` is set."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -196,7 +196,11 @@ label:has(input:disabled) {
   border: var(--pine-border-hover);
 }
 :host(.has-image):has(input:checked) {
-  box-shadow: 0 0 0 2px var(--pine-color-primary-hover);
+  box-shadow: 0 0 0 var(--pine-border-width-thick) var(--pine-color-primary-hover);
+}
+:host(.has-image):has(input:focus-visible) {
+  outline: var(--pine-outline-focus);
+  outline-offset: calc(var(--pine-border-width-thick) + var(--pine-border-width));
 }
 :host(.has-image) label {
   color: var(--pine-color-text);