@pine-ds/core 4.2.0 → 4.4.0

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { assignDescription, isRequired, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
-import { debounceEvent } from "../../utils/utils";
+import { cancelDebouncedEvent, debounceEvent, flushDebouncedEvent } from "../../utils/utils";
 import { inheritAttributes, inheritAriaAttributes } from "../../utils/attributes";
 import { danger } from "@pine-ds/icons/icons";
 import { formatMessage } from "../../i18n";
@@ -100,6 +100,8 @@ export class PdsTextarea {
     debounceChanged() {
         const { pdsInput, debounce, originalPdsInput } = this;
         this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsInput);
     }
     /**
      * Update the native input element when the value changes
@@ -161,6 +163,9 @@ export class PdsTextarea {
         return classNames.join('  ');
     }
     connectedCallback() {
+        var _a;
+        // Keep the raw emitter before the first wrap, so clearing debounce can restore it.
+        (_a = this.originalPdsInput) !== null && _a !== void 0 ? _a : (this.originalPdsInput = this.pdsInput);
         this.debounceChanged();
         // Initialize ElementInternals for form association (only once per element instance)
         if (this.el.attachInternals && !this.internals) {
@@ -168,6 +173,7 @@ export class PdsTextarea {
         }
     }
     disconnectedCallback() {
+        cancelDebouncedEvent(this.pdsInput);
         // Clean up ResizeObserver
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
@@ -178,7 +184,6 @@ export class PdsTextarea {
         this.hasAction = this.el.querySelector('[slot="action"]') !== null;
     }
     componentDidLoad() {
-        this.originalPdsInput = this.pdsInput;
         // Set initial form value
         this.updateFormValue();
         // Setup ResizeObserver for character counter positioning
@@ -301,10 +306,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, h("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, h("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '4493797e03322993a8cbe5530a18a9ef984b9796', 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: '9c8794ec733a3ece5eaeac74ef6a1ebb223558c3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'c4b9be66c3f3c39ddf495708f0f03cfda03e7fc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'c117b8d62c055382f5d43caa7f2cb880796c495b', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '2544624ceb5a51981954b76eb7a96f8bf0a258b5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'e85e356a15dd11bbea276b122e67da23342e6ceb', class: "pds-textarea" }, this.label &&
+            h("div", { key: '452e96073c2045c2cb2dfa0c9ef7f7102096ab51', class: "pds-textarea__label-wrapper" }, h("label", { key: '84f88bb8211120801cab8b0d7a4915a128fadbfb', htmlFor: this.componentId }, h("span", { key: '43038785de0cb8c833ccd546a00bfc8879c94ecb', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '868a11635731026168c1ff75d81121ddb96ab7a6', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '80cb7da264045aba177d20f18df31b274afbf485', 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: '493b4378b668a96c7c66cbf2435f9c9d06bd0a72', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'ae6826d389a2a92fbff8de62a0fd55811764eb15', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'e3dd638311ee2617c8b8ae5743b4e87e5a773ebd', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,13 +121,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, h("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
+        return (h(Host, { key: '250f871e3dfe412a11e8fe4c0e43c5ef7d886e9b', hidden: !this.isVisible }, h("div", { key: '8c9d995cd597544a3c6ded08d18e09ff4619b364', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, h("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (h("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '83c4cad9b619ca0ad77721b7472e240719459290', class: "pds-toast__message" }, h("slot", { key: 'c2420b955c89eb8e32dd4a1aa8d89bbbbf1b9ca9' })), this.dismissible && (h("button", { key: '940bb9f1d235d7c31a334bec9aefdfdbd1c5ccfd', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'f6b68f4cf9df23b367ade351dd4f00fc6f6e6442', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -342,9 +342,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: 'a4f25d10de27757ab2551af0e5b8a53336bf8cb4', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '5e9f9afbecbb335ad68b02edf999d2ec62f31a8e', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: 'd63b6632a084fbaebd2004a569fb96e0fff91f41', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '79b8b9c2bb9fc2afaf8cbb06dbc102d18c060362', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'e142f4f09406b7bd3d1ce9005f624b91cf7ec176' })), h("div", { key: 'ebe0faae0af623477486dbba56c24bc3e0a6bc66', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '833d31509ba48f10cd0b5eb2f5e8dc509854c25e', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '9e12d130ac5f392d966f442d91673c3864962b01' })), h("div", { key: '5b83f093b2cbb2b22af0c440278ee318c456087a', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'c0243ad0a833326e8daf799d41b1bf8048c6dee9', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/utils/closest.js

@@ -5,3 +5,11 @@ export const closest = (selector, el) => {
         (('closest' in el && el.closest(selector)) ||
             closest(selector, el.getRootNode().host)));
 };
+/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
+export const containsComposed = (ancestor, node) => {
+    for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
+        if (current === ancestor)
+            return true;
+    }
+    return false;
+};

package/dist/collection/utils/utils.js

@@ -3,21 +3,57 @@ export const hasShadowDom = (el) => {
 };
 export const debounceEvent = (event, wait) => {
     const original = event._original || event;
+    const emit = debounce(original.emit.bind(original), wait);
     return {
-        _original: event,
-        emit: debounce(original.emit.bind(original), wait),
+        _original: original,
+        emit,
+        cancel: emit.cancel,
+        flush: emit.flush,
     };
 };
+/** Drops an emit still waiting on a `debounceEvent` delay. A no-op on an undebounced emitter. */
+export const cancelDebouncedEvent = (event) => {
+    var _a;
+    (_a = event === null || event === void 0 ? void 0 : event.cancel) === null || _a === void 0 ? void 0 : _a.call(event);
+};
+/** Sends an emit still waiting on a `debounceEvent` delay right away. A no-op on an undebounced emitter. */
+export const flushDebouncedEvent = (event) => {
+    var _a;
+    (_a = event === null || event === void 0 ? void 0 : event.flush) === null || _a === void 0 ? void 0 : _a.call(event);
+};
 export const debounce = (func, wait = 0) => {
     let timer;
-    return (...args) => {
+    let pending;
+    const debounced = (...args) => {
+        clearTimeout(timer);
+        pending = args;
+        timer = setTimeout(() => {
+            pending = undefined;
+            func(...args);
+        }, wait);
+    };
+    debounced.cancel = () => {
         clearTimeout(timer);
-        timer = setTimeout(func, wait, ...args);
+        pending = undefined;
     };
+    debounced.flush = () => {
+        const args = pending;
+        debounced.cancel();
+        if (args)
+            func(...args);
+    };
+    return debounced;
 };
-// Add shared color normalization utility to unify token handling across components
 /**
- * Normalizes color values to ensure consistent CSS variable usage
+ * Normalizes color values to ensure consistent CSS variable usage.
+ *
+ * This is the single low-level primitive for color-prop normalization in
+ * Pine. A component with its own semantic-keyword set (e.g. pds-chip's
+ * sentiment-to-dot-color map) should call this directly with its own
+ * `semanticMap` rather than inventing a new normalization helper. Reach for
+ * `setColor` below only when its specific text-role semantic set and
+ * `--color` output key already match what the component needs.
+ *
  * @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
  * @param options.semanticMap - Optional mapping of semantic names to CSS variables
  * @returns Normalized color value or undefined for invalid inputs
@@ -42,6 +78,13 @@ export const normalizeColorValue = (value, options) => {
     // Otherwise treat as literal CSS color value
     return trimmed;
 };
+/**
+ * Convenience wrapper around `normalizeColorValue` for the common text-role
+ * semantic set (primary/secondary/accent/etc.), returned as a `--color`
+ * custom property. If a component needs a different semantic map or a
+ * different custom-property name (e.g. pds-chip's dot/icon-specific tokens),
+ * call `normalizeColorValue` directly instead of extending this function.
+ */
 export const setColor = (color, customColors) => {
     // Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
     if (!color)