@pine-ds/core 4.11.0 → 4.12.0

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { setColor } from "../../utils/utils";
-import { FOCUSABLE_WRAPPER, setupTruncationTooltip } from "../../utils/truncation-tooltip";
+import { FOCUSABLE_WRAPPER, flattenedText, setupTruncationTooltip } from "../../utils/truncation-tooltip";
 import { TEXT_SIZES } from "../../utils/types";
 // Re-runs setup for each text bound to its wrapping control, keyed by host, so a truncated
 // text that joins the same control later can take that control's focus away from it.
@@ -80,7 +80,9 @@ export class PdsText {
             this.truncationCleanup = setupTruncationTooltip({
                 hostEl: this.el,
                 contentEl: this.contentEl,
-                getTooltipText: () => this.el.textContent || '',
+                // Not `textContent`: a consumer that wraps its own slot in this text, as `pds-alert` does, holds a
+                // `<slot>` here, which counts as empty and would leave the tooltip with nothing to show.
+                getTooltipText: () => flattenedText(this.el),
                 // A wrapping link or button already takes focus, so its focus reveals the text instead of a nested tab stop.
                 manageTabIndex: !usesWrapper,
                 focusEl: usesWrapper ? wrapper : this.el,
@@ -116,7 +118,7 @@ export class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (h(Tag, { key: '30566c7810d3fd7f76ae281ae6d9a7e66803f0a3', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'f5113458aa9295803fc1c0bc552f9f92602cacba' })));
+        return (h(Tag, { key: '3b9efbad7872410a7e07438801ec17382282ab16', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '0784e6aee6ce23f93f0e3c077da5fa3ca944aebb' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,6 +6,7 @@ import { danger } from "@pine-ds/icons/icons";
 import { formatMessage } from "../../i18n";
 /**
  * @slot action - Content to be displayed in the label area, typically for help icons or links
+ * @part action - Exposes the wrapper around the `action` slot for styling. Appears only when the `action` slot has content.
  */
 export class PdsTextarea {
     constructor() {
@@ -17,12 +18,13 @@ export class PdsTextarea {
          */
         this.disabled = false;
         /**
-         * Determines whether or not the textarea is invalid or throws an error.
+         * Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it
+         * itself each time `pdsTextareaChange` fires, replacing a value you set.
          * @defaultValue false
          */
         this.invalid = false; // eslint-disable-line @stencil-community/strict-mutable
         /**
-         * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
+         * Specifies the name. Submitted with the form name/value pair.
          */
         this.name = this.componentId;
         /**
@@ -306,10 +308,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '76e445d135191df3090620f2c2eaf6ed8d7eb9cb', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '836815333b0ca925bc205a4b8b25086fe82fcedc', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'e8633457c994d3387ec277fd9945afb2c653d27a', class: "pds-textarea__label-wrapper" }, h("label", { key: '977bb1c171b68242ab06e01ef94ecc4e4cb26880', htmlFor: this.componentId }, h("span", { key: 'ef87433d6524296b3153e8d04e6406c9287e3f2e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '92952c76f5f4a87da4953f792a9a5589d7765451', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'a61f39d0e299cb6b3e6d1beed37805ad9a71b579', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'f95f566b79215a4a128fe92c02be244219f843e5', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '08f649e4b32551d59d60b978262cd7beaa99e08d', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '96f8863a39579b421057fa9b2857753785d4c585', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '89ae283a1674af03795c0443ee7fea2bac658c9e', class: "pds-textarea" }, this.label &&
+            h("div", { key: '7da482f50cfbf7361c457d79e9185bdf204d728d', class: "pds-textarea__label-wrapper" }, h("label", { key: '3c1a24beae7a190e11a686c4f15dbc175221db0b', htmlFor: this.componentId }, h("span", { key: '7d2f5618fe0893bca5926237adfc610adfaf7cc7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '371d16fe7e0446658316d4f2047776ef4429346c', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '6e433b544a20b82d16ce8522196c41ca8b22411f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '7b7117493340f25be2c4d18b48e00add775155d3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '79a604af17aa9a6735d44aa52a858881e053de43', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '765e5df4a34b583183f1ceeb92fb596067d4a212', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -399,7 +401,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The amount of time, in milliseconds, to wait to trigger the event after each keystroke."
+                    "text": "Sets the number of milliseconds to wait after each input event before emitting `pdsInput`."
                 },
                 "getter": false,
                 "setter": false,
@@ -418,7 +420,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays an error message below the textarea field."
+                    "text": "Displays an error message below the textarea while `invalid` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -459,7 +461,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether or not the textarea is invalid or throws an error."
+                    "text": "Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it\nitself each time `pdsTextareaChange` fires, replacing a value you set."
                 },
                 "getter": false,
                 "setter": false,
@@ -517,7 +519,7 @@ export class PdsTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId."
+                    "text": "Specifies the name. Submitted with the form name/value pair."
                 },
                 "getter": false,
                 "setter": false,
@@ -707,7 +709,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the input loses focus."
+                    "text": "Emitted when the textarea loses focus."
                 },
                 "complexType": {
                     "original": "FocusEvent",
@@ -727,7 +729,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the input has focus."
+                    "text": "Emitted when the textarea has focus."
                 },
                 "complexType": {
                     "original": "FocusEvent",
@@ -747,7 +749,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a keyboard input occurs.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`."
+                    "text": "Emitted after each `input` event, such as typing or pasting. With `debounce`, it waits until that many milliseconds have passed since the last one.\n`detail` has `value`, the current text, and `event`, the native `input` event.\n\nThis event will not emit when programmatically setting the `value` property."
                 },
                 "complexType": {
                     "original": "TextareaInputEventDetail",
@@ -769,7 +771,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted whenever the value of the textarea changes.\n\nThis event will not emit when programmatically setting the `value` property."
+                    "text": "Emitted when the user changes the value and then leaves the textarea. `Enter` adds a new line, so it doesn't emit this event.\n`detail` has `value`, the text, and `event`, the native event behind it, usually `change`.\n\nThis event will not emit when programmatically setting the `value` property, unless the field has focus at the time;\nthen it emits when the field loses focus."
                 },
                 "complexType": {
                     "original": "TextareaChangeEventDetail",

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

@@ -5,7 +5,6 @@ export default {
 
   args: {
     autocomplete: null,
-    clearOnEdit: false,
     componentId: null,
     debounce: null,
     disabled: false,
@@ -29,7 +28,6 @@ export default {
 
 const BaseTemplate = (args) => html`<pds-textarea
   autocomplete="${args.autocomplete}"
-  ?clear-on-edit=${args.clearOnEdit}
   component-id="${args.componentId}"
   ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
@@ -40,14 +38,11 @@ const BaseTemplate = (args) => html`<pds-textarea
   label="${args.label}"
   max-length="${args.maxLength}"
   name="${args.name}"
-  onChange="${args.onChange}"
   placeholder="${args.placeholder}"
   ?readonly=${args.readonly}
   ?required=${args.required}
   rows="${args.rows}"
   value="${args.value}"
-  data-tooltip-id="foo"
-  title="bar"
   >
   ${args.action || ''}
 </pds-textarea>`;
@@ -138,7 +133,6 @@ Autocomplete.args = {
 
 export const withActionLink = (args) => html`<pds-textarea
   autocomplete="${args.autocomplete}"
-  ?clear-on-edit=${args.clearOnEdit}
   component-id="pds-textarea-action-link"
   ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
@@ -148,14 +142,12 @@ export const withActionLink = (args) => html`<pds-textarea
   ?invalid=${args.invalid}
   label="Notes"
   name="${args.name}"
-  onChange="${args.onChange}"
   placeholder="${args.placeholder}"
   ?readonly=${args.readonly}
   ?required=${args.required}
   rows="3"
   value="${args.value}"
-  data-tooltip-id="foo"
-  title="bar">
+  >
   <pds-link href="#" slot="action">
     View examples
   </pds-link>
@@ -163,7 +155,6 @@ export const withActionLink = (args) => html`<pds-textarea
 
 export const withActionButton = (args) => html`<pds-textarea
   autocomplete="${args.autocomplete}"
-  ?clear-on-edit=${args.clearOnEdit}
   component-id="pds-textarea-action-button"
   ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
@@ -173,14 +164,12 @@ export const withActionButton = (args) => html`<pds-textarea
   ?invalid=${args.invalid}
   label="Description"
   name="${args.name}"
-  onChange="${args.onChange}"
   placeholder="${args.placeholder}"
   ?readonly=${args.readonly}
   ?required=${args.required}
   rows="4"
   value="${args.value}"
-  data-tooltip-id="foo"
-  title="bar">
+  >
   <pds-button slot="action" variant="unstyled" aria-label="Help with description">
     <pds-icon name="question-circle" aria-hidden="true"></pds-icon>
   </pds-button>

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

@@ -18,13 +18,14 @@
   background-color: var(--pine-color-primary);
   border-radius: var(--pine-dimension-xs);
   box-shadow: var(--pine-box-shadow);
+  box-sizing: border-box;
   color: var(--pine-color-text-primary);
   display: flex;
   height: var(--sizing-height-default);
   justify-content: flex-start;
   margin-block-end: var(--pine-dimension-2xs);
-  max-width: 90vw;
-  min-width: var(--sizing-min-width);
+  max-width: calc(90vw + var(--padding-inline) * 2);
+  min-width: calc(var(--sizing-min-width) + var(--padding-inline) * 2);
   padding: 0 var(--padding-inline);
   position: relative;
   width: fit-content;
@@ -32,7 +33,7 @@
 @media screen and (max-width: 767px) {
   .pds-toast {
     height: 36px;
-    max-width: calc(100vw - var(--pine-dimension-2xs) * 2);
+    max-width: 100vw;
     min-width: auto;
     padding-inline: var(--pine-dimension-2xs);
   }

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

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 /** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
 const TOAST_DISMISS_ANIMATION_MS = 300;
 /**
- * @part dismiss
+ * @part dismiss - Exposes the dismiss button for styling. Appears unless `dismissible` is `false`.
  */
 export class PdsToast {
     constructor() {
@@ -58,6 +58,10 @@ export class PdsToast {
             this.startDismissTimer();
         }
     }
+    /**
+     * Dismisses the toast, as the dismiss button and `duration` do: plays the exit animation and emits `pdsToastDismissed`, and the toast
+     * gets `hidden` on the next render, after the event. Works even when `dismissible` is `false`. The toast stays in the DOM.
+     */
     async dismiss() {
         // Start the animation out
         this.isAnimatingOut = true;
@@ -127,13 +131,13 @@ export class PdsToast {
     }
     render() {
         const severity = this.severityText();
-        return (h(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, h("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
+        return (h(Host, { key: '89a7a4a9105730769c83cbb39af3cec31d1a39da', hidden: !this.isVisible }, h("div", { key: '6543b52aea9ba5e956f894148e965619c8836432', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && h("span", { key: 'f75fb422797082e99acb85432c1b50cf702d7afc', class: "visually-hidden" }, severity), h("span", { key: '3d9f03d96dbda41c72d2c2cc492b1422928d573f', class: "pds-toast__message" }, h("slot", { key: 'affc7e4cb592735ec396fa90a9405f25b389e4bd' })), this.dismissible && (h("button", { key: '0c4ef459dda09b8a196eed7ee28383995d959b11', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && h("span", { key: 'c2ec7185878dd0d00f0cf12c29080b716997f2c2', class: "visually-hidden" }, severity), h("span", { key: '0274afc2c23f43d7cd50a42fc999d82f91ad026d', class: "pds-toast__message" }, h("slot", { key: 'daba1b8fb461ffeb9c662d6c30f5cc93ca7c08f9' })), this.dismissible && (h("button", { key: '56cd7eb04c759acdaa850d230a5204eb2cae87f0', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '95b08c3cbe0fb015515884484cf5ea28f7f0025c', name: "remove", "aria-hidden": "true" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -342,7 +346,7 @@ export class PdsToast {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Dismisses the toast, as the dismiss button and `duration` do: plays the exit animation and emits `pdsToastDismissed`, and the toast\ngets `hidden` on the next render, after the event. Works even when `dismissible` is `false`. The toast stays in the DOM.",
                     "tags": []
                 }
             }

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

@@ -11,7 +11,7 @@ export default {
 
 const BaseTemplate = (args) => html`
 <pds-toast
-  ?dismissible=${args.dismissible}
+  dismissible="${args.dismissible}"
   component-id="${args.componentId}"
   duration="${args.duration}"
   icon="${args.icon || ''}"
@@ -23,7 +23,7 @@ const BaseTemplate = (args) => html`
 
 const WithLinkTemplate = (args) => html`
 <pds-toast
-  ?dismissible=${args.dismissible}
+  dismissible="${args.dismissible}"
   component-id="${args.componentId}"
   duration="${args.duration}"
   icon="${args.icon || ''}"

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

@@ -5,7 +5,7 @@
   --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);
   --tooltip-sizing-arrow: 6px;
   --tooltip-sizing-arrow-offset: 14px;
-  --tooltip-dimension-max-width: 320px;
+  --tooltip-dimension-max-width: 344px;
 }
 
 :is(dialog, [popover]) > .pds-tooltip {
@@ -23,6 +23,7 @@
   background-color: var(--pine-color-primary);
   border-radius: calc(var(--pine-dimension-xs) * 1.25);
   box-shadow: var(--pine-box-shadow);
+  box-sizing: border-box;
   color: var(--pine-color-text-primary);
   max-width: var(--tooltip-dimension-max-width);
   opacity: 0;

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

@@ -9,10 +9,10 @@ export default {
 }
 
 const BaseTemplate = (args) => html`
-  <pds-tooltip content=${args.content} max-width=${args.maxWidth} ?has-arrow=${args.hasArrow} placement=${args.placement} ?opened=${args.opened}>${args.slot}</pds-tooltip>`;
+  <pds-tooltip content=${args.content} max-width=${args.maxWidth} has-arrow="${args.hasArrow}" placement=${args.placement} ?opened=${args.opened}>${args.slot}</pds-tooltip>`;
 
 const HTMLContentTemplate = (args) => html`
-  <pds-tooltip ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} ?html-content=${args.htmlContent} ?opened=${args.opened}>
+  <pds-tooltip has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement=${args.placement} ?html-content=${args.htmlContent} ?opened=${args.opened}>
     <div slot="content">
       <p><strong>This is a tooltip</strong></p>
       <p>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.</p>
@@ -25,7 +25,7 @@ const InModalTemplate = (args) => html`
   <pds-modal id="tooltip-modal" component-id="tooltip-modal" size="sm">
     <pds-modal-header>
       <pds-box padding="md">
-        <pds-text tag="h2" size="h3">Publish changes</pds-text>
+        <pds-text tag="h2" size="h3" id="tooltip-modal-heading">Publish changes</pds-text>
       </pds-box>
     </pds-modal-header>
     <pds-modal-content>
@@ -36,7 +36,7 @@ const InModalTemplate = (args) => html`
     <pds-modal-footer>
       <pds-box fit gap="sm" justify-content="end" padding="md">
         <pds-button variant="secondary" onclick="document.querySelector('#tooltip-modal').open = false">Cancel</pds-button>
-        <pds-tooltip content=${args.content} ?has-arrow=${args.hasArrow} placement=${args.placement}>
+        <pds-tooltip content=${args.content} has-arrow="${args.hasArrow}" placement=${args.placement}>
           <pds-button variant="primary">Publish</pds-button>
         </pds-tooltip>
       </pds-box>
@@ -47,46 +47,46 @@ const PositionTemplate = (args) => html`
   <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
     <div class="position-demo-grid">
       <div class="position-demo-grid-item">
-        <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" ?opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="top-start" ?opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" ?opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="top" ?opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" ?opened=${args.opened}>
+        <pds-tooltip content="content 3" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="top-end" ?opened=${args.opened}>
           <pds-button variant="accent">te</pds-button>
         </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" ?opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="left-start" ?opened=${args.opened}>
             <pds-button variant="accent">ls</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" ?opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="left" ?opened=${args.opened}>
             <pds-button variant="accent">l</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" ?opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="left-end" ?opened=${args.opened}>
             <pds-button variant="accent">le</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" ?opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="bottom-start" ?opened=${args.opened}>
             <pds-button variant="accent">bs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" ?opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="bottom" ?opened=${args.opened}>
             <pds-button variant="accent">b</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" ?opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="bottom-end" ?opened=${args.opened}>
             <pds-button variant="accent">be</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" ?opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="right-start" ?opened=${args.opened}>
             <pds-button variant="accent">rs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" ?opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="right" ?opened=${args.opened}>
             <pds-button variant="accent">r</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" ?opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow="${args.hasArrow}" max-width=${args.maxWidth} placement="right-end" ?opened=${args.opened}>
             <pds-button variant="accent">re</pds-button>
           </pds-tooltip>
       </div>
@@ -125,7 +125,7 @@ NoArrow.args = {
 
 export const InModal = InModalTemplate.bind({});
 InModal.args = {
-  content: "Fix the errors on the page to publish",
+  content: "Makes your changes visible to everyone",
   hasArrow: true,
   placement: "top",
 };

package/dist/collection/utils/aria-references.js

@@ -25,6 +25,14 @@ export const findInAncestorRoots = (host, id) => {
     }
     return root instanceof Document ? root.getElementById(id) : null;
 };
+/**
+ * The elements an ID-reference attribute on the host names, skipping IDs that match nothing.
+ */
+export const referencedElements = (host, attribute) => {
+    var _a, _b;
+    const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
+    return ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
+};
 /**
  * Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
  * name, or clears them. Run it again whenever the attributes or the referenced elements may have
@@ -32,11 +40,9 @@ export const findInAncestorRoots = (host, id) => {
  */
 export const forwardAriaReferences = (host, target) => {
     Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
-        var _a, _b;
         if (!(property in target))
             return;
-        const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
-        const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
+        const referenced = referencedElements(host, attribute);
         target[property] = referenced.length > 0 ? referenced : null;
     });
 };

package/dist/collection/utils/truncation-tooltip.js

@@ -3,6 +3,40 @@ import { findPortalTarget, isTopLayerInDocument, onTopLayerClose } from "./porta
 // Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
 // Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
 export const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"], [role="treeitem"]';
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+/**
+ * The text `el` actually shows, with every `<slot>` it holds replaced by the
+ * nodes assigned to it.
+ *
+ * `textContent` counts a slot as empty, so a component that renders a clipped
+ * text around a slot of its own — `pds-alert` renders `<pds-text truncate><slot/></pds-text>` —
+ * would leave the tooltip with nothing to show and so no tooltip at all, even
+ * though the text is clipped and holds a tab stop.
+ *
+ * Text nodes only, as `textContent` counts too: Stencil leaves comment nodes
+ * among slotted content to mark where it was relocated from, and their data is
+ * not text anyone reads.
+ */
+export function flattenedText(el) {
+    let text = '';
+    const add = (node) => {
+        var _a;
+        const slot = node;
+        // `flatten` returns the slot's own children when nothing is assigned, which is what renders then.
+        if (node.nodeName === 'SLOT' && typeof slot.assignedNodes === 'function') {
+            slot.assignedNodes({ flatten: true }).forEach(add);
+        }
+        else if (node.nodeType === ELEMENT_NODE) {
+            text += flattenedText(node);
+        }
+        else if (node.nodeType === TEXT_NODE) {
+            text += (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+        }
+    };
+    el.childNodes.forEach(add);
+    return text;
+}
 /** CSS class prefix used for truncation tooltip portal elements */
 const TOOLTIP_CLASS = 'pds-truncation-tooltip';
 /**
@@ -353,3 +387,36 @@ export function setupTruncationTooltip(options) {
         removePortal();
     };
 }
+/**
+ * Keeps tooltips bound to the elements a component's render clips, for a component
+ * that re-renders while those elements stay in place.
+ *
+ * Each tooltip holds listeners and an observer on its element, so it is rebound
+ * only when a different set of elements renders: rebinding on every render would
+ * tear down a tooltip the pointer is still inside, and a component can render
+ * again on every keystroke or when it opens its popover.
+ *
+ * Call `sync` from `componentDidRender`, and from `connectedCallback` too, since
+ * moving an element reconnects it without rendering it again. Call `destroy` from
+ * `disconnectedCallback`.
+ *
+ * @param getOptions - The options for one element, read when it is bound.
+ */
+export function bindTruncationTooltips(getOptions) {
+    let bound = [];
+    let cleanups = [];
+    const destroy = () => {
+        cleanups.forEach((cleanup) => cleanup());
+        cleanups = [];
+        bound = [];
+    };
+    const sync = (els) => {
+        const next = Array.from(els).filter((el) => el != null);
+        if (next.length === bound.length && next.every((el, index) => el === bound[index]))
+            return;
+        destroy();
+        bound = next;
+        cleanups = next.map((el) => setupTruncationTooltip(getOptions(el)));
+    };
+    return { sync, destroy };
+}