@watermarkinsights/ripple 5.29.0-alpha.9 → 5.29.0

package/dist/cjs/wm-datepicker.cjs.entry.js

@@ -24,16 +24,6 @@ const DatePicker = class {
             this.canOpen = this.measureFit() !== null;
         }, 100);
         this.pf_repositionRAF = null;
-        this.pf_reposition = () => {
-            // rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
-            // without thrashing layout when scroll fires many times per frame.
-            if (this.pf_repositionRAF !== null)
-                return;
-            this.pf_repositionRAF = requestAnimationFrame(() => {
-                this.pf_repositionRAF = null;
-                this.pf_positionDropdown();
-            });
-        };
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
@@ -45,6 +35,18 @@ const DatePicker = class {
         this.isExpanded = false;
         this.canOpen = true;
     }
+    pf_reposition() {
+        if (this.hasAnchor || !this.isExpanded)
+            return;
+        // rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
+        // without thrashing layout when scroll fires many times per frame.
+        if (this.pf_repositionRAF !== null)
+            return;
+        this.pf_repositionRAF = requestAnimationFrame(() => {
+            this.pf_repositionRAF = null;
+            this.pf_positionDropdown();
+        });
+    }
     // Returns the closest scrollable ancestor that can yield at least `neededScroll` of additional scroll.
     findScrollable(neededScroll) {
         // Scrolling an ancestor above the positioning boundary (e.g. a scrollable container behind
@@ -85,14 +87,18 @@ const DatePicker = class {
             return null;
         const fitsLeftAligned = rect.left + this.calWidth <= vw; // (a) left edge aligns to input's left edge
         const fitsRightAligned = rect.right - this.calWidth >= 0; // (b) right edge aligns to input's right edge
-        // (a) left-align; (b) right-align; (c) snap to the viewport edge with the most room
+        // (a) left-align; (b) right-align; (c) snap to the viewport edge with the most room; (d) no placement works → caller hides the toggle
         const horizontal = fitsLeftAligned
             ? "left"
             : fitsRightAligned
                 ? "right"
-                : rect.left > vw - rect.right
-                    ? "clip-left"
-                    : "clip-right";
+                : vw >= this.calWidth
+                    ? rect.left > vw - rect.right
+                        ? "clip-left"
+                        : "clip-right"
+                    : null;
+        if (!horizontal)
+            return null;
         return { vertical, horizontal };
     }
     checkCanOpen() {
@@ -175,9 +181,6 @@ const DatePicker = class {
             }
             if (!this.hasAnchor) {
                 this.pf_positionDropdown();
-                // capture: true catches scroll from any ancestor (scroll events don't bubble).
-                window.addEventListener("scroll", this.pf_reposition, { passive: true, capture: true });
-                window.addEventListener("resize", this.pf_reposition, { passive: true });
             }
             requestAnimationFrame(() => {
                 var _a, _b;
@@ -193,13 +196,9 @@ const DatePicker = class {
             });
         }
         else {
-            if (!this.hasAnchor) {
-                window.removeEventListener("scroll", this.pf_reposition, { capture: true });
-                window.removeEventListener("resize", this.pf_reposition);
-                if (this.pf_repositionRAF !== null) {
-                    cancelAnimationFrame(this.pf_repositionRAF);
-                    this.pf_repositionRAF = null;
-                }
+            if (this.pf_repositionRAF !== null) {
+                cancelAnimationFrame(this.pf_repositionRAF);
+                this.pf_repositionRAF = null;
             }
             this.fit = null;
             this.isExpanded = false;
@@ -326,6 +325,12 @@ const DatePicker = class {
     componentDidLoad() {
         this.checkCanOpen();
     }
+    disconnectedCallback() {
+        if (this.pf_repositionRAF !== null) {
+            cancelAnimationFrame(this.pf_repositionRAF);
+            this.pf_repositionRAF = null;
+        }
+    }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
@@ -335,25 +340,25 @@ const DatePicker = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '7ffa8d1d3c09bfaebf46a1ab8b130db3e6ebd5d1', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '036c05d1ae4ee77b517b8d43fe383f7be6825bf6', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '614c58233013db6f63a556a0b7a33566da3b333e', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '371f28fdcf49c3e44624a07321506ff53d884b95', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'd2c7877c8fab8db02004f5ba13232cc724f6e010', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '8ba1157d7c2978f853cc764b3aa848db38eb218d' }, index.h("div", { key: 'af846f4900d77f77d4029dcc9488847ca6768630', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, index.h("input", { key: 'a4595b61a3c91d55124c7a1f93b238f78ca515a5', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: 'd796e37f9c7946227b7b9c0cbc7d22515fb3c93a', class: "container", id: "wm-container" }, this.canOpen && (index.h("button", { key: 'e8b8704d0138af2768a83fdbd1915562408cd55e', disabled: this.disabled, "aria-label": functions.intl.formatMessage({
+        return (index.h(index.Host, { key: '75edb60af8b727174c9e906ea4fd5655610ddd00', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '30cf18c6bdd8d2904bac07075eb7f1278a1dfadc', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'f52d76ff9670902582cff2c266804b138246137a', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '8eaad53d13c5300efcc5f2a8f0c06fb997ba2f80', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'bd29520e03f51baec0adc4be0a16c2c04651ea4a', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '997f09274b7f85aa1d2d258e09802fe38c95a062' }, index.h("div", { key: '127816619a523254ccf63c9e3e26b7d3a8929516', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, index.h("input", { key: 'b714f2bcb4e4fd8072ed1a61d5c3b9df5cd1de40', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: 'cecb3d7adf4bf0401fce82b131de4767837d52a2', class: "container", id: "wm-container" }, this.canOpen && (index.h("button", { key: '9da230049feebb37f2f087e760c2671669716e92', disabled: this.disabled, "aria-label": functions.intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '79b8dda7f1d9aa19d62f50274302d9b4ce169ea5', class: "svg-icon svg-date" }), index.h("span", { key: 'df52b9ca12607162ee448ac19f015627b90afbf6', class: "calendar", title: functions.intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: 'b1c40c5c3e63e1096b9e8bcbac78cc5a2beebfd0', class: "svg-icon svg-date" }), index.h("span", { key: '01675fedff80453c8a8a02360dddf3658fb842c6', class: "calendar", title: functions.intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) }))), index.h("div", { key: 'aba1bef22da9727a29de77aaf8ba4a039a82d793', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            }) }))), index.h("div", { key: 'f0fc896b98dbdfb8ec5a9d3783c52ee324847d5e', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
             // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
-            onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: 'a748ed6c4ed43f1bd8475217fee7dba224a661b2', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), index.h("priv-calendar", { key: 'ad1e6c0d9ef1de2a2104de952256e18f7abce6fc', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), index.h("div", { key: '3d27bef5891d01c0c36c8a05510724c78e0340c0', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), index.h("div", { key: '262ea6a8a13ee42d2efb49b642720762dd5bcf08', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: '23b56fdf73f13e0f5ee06c854d7d2541d84a3220', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
+            onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: '34543b5a222d7875938fc545751d33cd25ecf2c3', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), index.h("priv-calendar", { key: '7e548bdcc7bccc30dbbc20b32bd594cc0d27128f', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), index.h("div", { key: '07ba79155102bcc5af7a7d3ff8e3252412ea816f', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), index.h("div", { key: '4ff2e5951eabde88a2d2efe46c671e5f87764359', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: '8fd50c0d7b5d7f21aa215e71c41a4d071f76e971', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), index.h("div", { key: '878bfc3e64c6d49ae178f5e57e5bb802fefd6fb9', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
+        })), index.h("div", { key: 'f82d186d8f2053f13389c9de24a317bd3673a0fc', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), index.h("div", { key: '809561d58dd226d0bf05a3678a793a4aaa6813a5', id: "error", class: "error" }, this.errorMessage), index.h("div", { key: '252bf955bc3885fece7219dad0b1819a33a29bf7', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), index.h("div", { key: 'bcf3f6665c8fa0bb4e21b8ba92f756aa8570b5c4', id: "error", class: "error" }, this.errorMessage), index.h("div", { key: '2b249282c6a469e6d91ecae8ac681f4ebc5816b6', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/collection/components/datepickers/wm-date-range.js

@@ -13,16 +13,6 @@ export class DateRange {
             this.canOpen = this.measureFit() !== null;
         }, 100);
         this.pf_repositionRAF = null;
-        this.pf_reposition = () => {
-            // rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
-            // without thrashing layout when scroll fires many times per frame.
-            if (this.pf_repositionRAF !== null)
-                return;
-            this.pf_repositionRAF = requestAnimationFrame(() => {
-                this.pf_repositionRAF = null;
-                this.pf_positionDropdown();
-            });
-        };
         this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
         this.dateFormat = "mm/dd/yyyy";
         this.disabled = false;
@@ -38,6 +28,18 @@ export class DateRange {
         this.isExpanded = false;
         this.canOpen = true;
     }
+    pf_reposition() {
+        if (this.hasAnchor || !this.isExpanded)
+            return;
+        // rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
+        // without thrashing layout when scroll fires many times per frame.
+        if (this.pf_repositionRAF !== null)
+            return;
+        this.pf_repositionRAF = requestAnimationFrame(() => {
+            this.pf_repositionRAF = null;
+            this.pf_positionDropdown();
+        });
+    }
     // Returns the closest scrollable ancestor that can yield at least `neededScroll` of additional scroll.
     findScrollable(neededScroll) {
         // Scrolling an ancestor above the positioning boundary (e.g. a scrollable container behind
@@ -78,14 +80,18 @@ export class DateRange {
             return null;
         const fitsLeftAligned = rect.left + this.calWidth <= vw; // (a) left edge aligns to input's left edge
         const fitsRightAligned = rect.right - this.calWidth >= 0; // (b) right edge aligns to input's right edge
-        // (a) left-align; (b) right-align; (c) snap to the viewport edge with the most room
+        // (a) left-align; (b) right-align; (c) snap to the viewport edge with the most room; (d) no placement works → caller hides the toggle
         const horizontal = fitsLeftAligned
             ? "left"
             : fitsRightAligned
                 ? "right"
-                : rect.left > vw - rect.right
-                    ? "clip-left"
-                    : "clip-right";
+                : vw >= this.calWidth
+                    ? rect.left > vw - rect.right
+                        ? "clip-left"
+                        : "clip-right"
+                    : null;
+        if (!horizontal)
+            return null;
         return { vertical, horizontal };
     }
     checkCanOpen() {
@@ -222,9 +228,6 @@ export class DateRange {
             }
             if (!this.hasAnchor) {
                 this.pf_positionDropdown();
-                // capture: true catches scroll from any ancestor (scroll events don't bubble).
-                window.addEventListener("scroll", this.pf_reposition, { passive: true, capture: true });
-                window.addEventListener("resize", this.pf_reposition, { passive: true });
             }
             requestAnimationFrame(() => {
                 var _a, _b;
@@ -258,13 +261,9 @@ export class DateRange {
             });
         }
         else {
-            if (!this.hasAnchor) {
-                window.removeEventListener("scroll", this.pf_reposition, { capture: true });
-                window.removeEventListener("resize", this.pf_reposition);
-                if (this.pf_repositionRAF !== null) {
-                    cancelAnimationFrame(this.pf_repositionRAF);
-                    this.pf_repositionRAF = null;
-                }
+            if (this.pf_repositionRAF !== null) {
+                cancelAnimationFrame(this.pf_repositionRAF);
+                this.pf_repositionRAF = null;
             }
             this.fit = null;
             // reset
@@ -515,6 +514,12 @@ export class DateRange {
     componentDidLoad() {
         this.checkCanOpen();
     }
+    disconnectedCallback() {
+        if (this.pf_repositionRAF !== null) {
+            cancelAnimationFrame(this.pf_repositionRAF);
+            this.pf_repositionRAF = null;
+        }
+    }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
@@ -524,25 +529,25 @@ export class DateRange {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'f082b7224cab15202ebc1222288eb1c1b054ee26', "aria-busy": "false" }, h("div", { key: '65e1bc3240fa4e9116a7ebfb89d0edbd59966ab2', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '5736b31108d7cb360035e4a5f03c7a770a45bf14', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: '1ebfc8b64211589b9726bf015c5a6d919c5049d5', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '1ba9b573bc1a53132dd75483c9efaa224ca64414', id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: 'c849c11b482192a916815c55df7a7668f0d643e0', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'd41334efe0f909cb6c304e21ecf219a1425e49b8', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: 'aa44f11eb5e06244f529c0ca1340e6af4177da82', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '72f856d870e55929e4651d104b48a2a713e94411', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '2579fee89010ce00cf2bfc37711939b53b53d027', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '223b38400c6dfdd3b0d41ce2f90714c499abacc4', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: 'f6ee7e06e6783720a3bb6b9cbc4eda6697ead014', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '433ae77f3fc4ee804da2c6e29a07ed1a405611f0', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: '7708429eb69ab2653e392ad047583553e223a7f4', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { key: '9840d0cb5b3aff858d939fbe2d67dc1d51535c05', "aria-busy": "false" }, h("div", { key: '71e3eb8f71812140abc538cbfec3111c2e2b9cba', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '094295f1471f1ba0eaea5c65617447efc5dca770', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: '00bcfac555be41fe8b2f885e2a0335c8d41efd28', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'fa7a7f25eb9156ad8de4d3c243f41e974084e35b', id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '146abd4001789c1020eeb27c154004376a39e4e3', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'a112e25addb7a17cf497728a4d4d72018228a706', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '29834ad29b391967f6313e7a72775f1647f61084', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: 'b3c0b90c040a0552db1e01b8f8aa38725a98357a', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '1a6b2881f11d9700fd5895ca49b72672d2c903aa', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '4ab993f81a4af844b51b66acefef64ecbf3c6be3', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '5ef90c128cc642ad23102f752838b2a2c5d30688', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '43a4820ce51afc316b96e09aa8581c4791d06aaf', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: '7a39be01375c1406021c8c2015f746710db313b6', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
                 id: "date.selectRange",
                 defaultMessage: "Select range",
                 description: "Button text for screen readers.",
-            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '0fc1f2ac2c495dcf3beb188c23e1128cbe276c2d', class: "svg-icon svg-date" }), h("span", { key: '443a03b03efdcde3bdbfc20da4f7d43f74fce060', class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'd58a8a11fc19a77da89af41ac82c877acb4a0012', class: "svg-icon svg-date" }), h("span", { key: 'c0c3d305723275782e0e97db7a5feb3777de2c1b', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), h("div", { key: 'de856abe8acfef402870bc0bee557ad735f70c5c', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            }) })))), h("div", { key: 'de44f23903d4656c215b10a070dc262057a70a5f', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
             // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
-            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: 'f09c0cfb16e1d22061ca3b071f3c4c4028c2134c', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: 'e597ab635744082d8e1cc995f17388aaa8c32567', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: '7cc2f6d1e2fd875337d27b14047eecb4c548b10c', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: 'fb48a129bb023cc4ee1e7b9ec0118a75c73e9a3b', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: 'cbb77ea4a3536636ee81a1c8ef54b258bf7be7fa' }, h("div", { key: '069d6dfb9f05e3098fd877a6497b6c419c39a76d', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'e9f3ed922577cfb6fe3ae001589074fcab8edf7a', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '0f9e61c2aead0ad0587c99061e43b601b456de51', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: 'de148d250b5a9d58eeb186196b8db7ac09e3e111', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: 'f9522d0f4d4f5a9d6790604aebeba53fc18753e5', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: 'ef7e0bd324e44a0fdab74c5ac90c50533c3c6f65', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: '02a384909982487064ee8618783ad89f632effae' }, h("div", { key: '4cbd7f056e57b6cc52d70ec998aa9534f0d8e091', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '27d4adf2fb5da73fc1b0bf1da84a941400dfe75a', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: 'c62e4d195394da08b91d6358521c2f21b5d3898b', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '15de6f6698170ed70687516e4a15abbca041fde5', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '07743caf440aa658df6d22cdca611c1c73f62351', id: "error", class: "error" }, this.errorMessage), h("div", { key: '85248a82b66f6db0005e27a03a4a7c4d8572a404', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: '47f6c2dd3072e95927d32910d1bf30cce0bde3f7', id: "error", class: "error" }, this.errorMessage), h("div", { key: '0cbdb396f7422cd1e47b299c7037f495b28ad317', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
     }
     static get is() { return "wm-date-range"; }
     static get encapsulation() { return "shadow"; }
@@ -883,6 +888,18 @@ export class DateRange {
     }
     static get listeners() {
         return [{
+                "name": "scroll",
+                "method": "pf_reposition",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "pf_reposition",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
                 "name": "resize",
                 "method": "checkCanOpen",
                 "target": "window",

package/dist/collection/components/datepickers/wm-datepicker.js

@@ -13,16 +13,6 @@ export class DatePicker {
             this.canOpen = this.measureFit() !== null;
         }, 100);
         this.pf_repositionRAF = null;
-        this.pf_reposition = () => {
-            // rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
-            // without thrashing layout when scroll fires many times per frame.
-            if (this.pf_repositionRAF !== null)
-                return;
-            this.pf_repositionRAF = requestAnimationFrame(() => {
-                this.pf_repositionRAF = null;
-                this.pf_positionDropdown();
-            });
-        };
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
@@ -34,6 +24,18 @@ export class DatePicker {
         this.isExpanded = false;
         this.canOpen = true;
     }
+    pf_reposition() {
+        if (this.hasAnchor || !this.isExpanded)
+            return;
+        // rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
+        // without thrashing layout when scroll fires many times per frame.
+        if (this.pf_repositionRAF !== null)
+            return;
+        this.pf_repositionRAF = requestAnimationFrame(() => {
+            this.pf_repositionRAF = null;
+            this.pf_positionDropdown();
+        });
+    }
     // Returns the closest scrollable ancestor that can yield at least `neededScroll` of additional scroll.
     findScrollable(neededScroll) {
         // Scrolling an ancestor above the positioning boundary (e.g. a scrollable container behind
@@ -74,14 +76,18 @@ export class DatePicker {
             return null;
         const fitsLeftAligned = rect.left + this.calWidth <= vw; // (a) left edge aligns to input's left edge
         const fitsRightAligned = rect.right - this.calWidth >= 0; // (b) right edge aligns to input's right edge
-        // (a) left-align; (b) right-align; (c) snap to the viewport edge with the most room
+        // (a) left-align; (b) right-align; (c) snap to the viewport edge with the most room; (d) no placement works → caller hides the toggle
         const horizontal = fitsLeftAligned
             ? "left"
             : fitsRightAligned
                 ? "right"
-                : rect.left > vw - rect.right
-                    ? "clip-left"
-                    : "clip-right";
+                : vw >= this.calWidth
+                    ? rect.left > vw - rect.right
+                        ? "clip-left"
+                        : "clip-right"
+                    : null;
+        if (!horizontal)
+            return null;
         return { vertical, horizontal };
     }
     checkCanOpen() {
@@ -164,9 +170,6 @@ export class DatePicker {
             }
             if (!this.hasAnchor) {
                 this.pf_positionDropdown();
-                // capture: true catches scroll from any ancestor (scroll events don't bubble).
-                window.addEventListener("scroll", this.pf_reposition, { passive: true, capture: true });
-                window.addEventListener("resize", this.pf_reposition, { passive: true });
             }
             requestAnimationFrame(() => {
                 var _a, _b;
@@ -182,13 +185,9 @@ export class DatePicker {
             });
         }
         else {
-            if (!this.hasAnchor) {
-                window.removeEventListener("scroll", this.pf_reposition, { capture: true });
-                window.removeEventListener("resize", this.pf_reposition);
-                if (this.pf_repositionRAF !== null) {
-                    cancelAnimationFrame(this.pf_repositionRAF);
-                    this.pf_repositionRAF = null;
-                }
+            if (this.pf_repositionRAF !== null) {
+                cancelAnimationFrame(this.pf_repositionRAF);
+                this.pf_repositionRAF = null;
             }
             this.fit = null;
             this.isExpanded = false;
@@ -315,6 +314,12 @@ export class DatePicker {
     componentDidLoad() {
         this.checkCanOpen();
     }
+    disconnectedCallback() {
+        if (this.pf_repositionRAF !== null) {
+            cancelAnimationFrame(this.pf_repositionRAF);
+            this.pf_repositionRAF = null;
+        }
+    }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
@@ -324,25 +329,25 @@ export class DatePicker {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '7ffa8d1d3c09bfaebf46a1ab8b130db3e6ebd5d1', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '036c05d1ae4ee77b517b8d43fe383f7be6825bf6', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '614c58233013db6f63a556a0b7a33566da3b333e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '371f28fdcf49c3e44624a07321506ff53d884b95', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'd2c7877c8fab8db02004f5ba13232cc724f6e010', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '8ba1157d7c2978f853cc764b3aa848db38eb218d' }, h("div", { key: 'af846f4900d77f77d4029dcc9488847ca6768630', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: 'a4595b61a3c91d55124c7a1f93b238f78ca515a5', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'd796e37f9c7946227b7b9c0cbc7d22515fb3c93a', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: 'e8b8704d0138af2768a83fdbd1915562408cd55e', disabled: this.disabled, "aria-label": intl.formatMessage({
+        return (h(Host, { key: '75edb60af8b727174c9e906ea4fd5655610ddd00', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '30cf18c6bdd8d2904bac07075eb7f1278a1dfadc', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f52d76ff9670902582cff2c266804b138246137a', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '8eaad53d13c5300efcc5f2a8f0c06fb997ba2f80', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'bd29520e03f51baec0adc4be0a16c2c04651ea4a', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '997f09274b7f85aa1d2d258e09802fe38c95a062' }, h("div", { key: '127816619a523254ccf63c9e3e26b7d3a8929516', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: 'b714f2bcb4e4fd8072ed1a61d5c3b9df5cd1de40', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'cecb3d7adf4bf0401fce82b131de4767837d52a2', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '9da230049feebb37f2f087e760c2671669716e92', disabled: this.disabled, "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '79b8dda7f1d9aa19d62f50274302d9b4ce169ea5', class: "svg-icon svg-date" }), h("span", { key: 'df52b9ca12607162ee448ac19f015627b90afbf6', class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'b1c40c5c3e63e1096b9e8bcbac78cc5a2beebfd0', class: "svg-icon svg-date" }), h("span", { key: '01675fedff80453c8a8a02360dddf3658fb842c6', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) }))), h("div", { key: 'aba1bef22da9727a29de77aaf8ba4a039a82d793', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            }) }))), h("div", { key: 'f0fc896b98dbdfb8ec5a9d3783c52ee324847d5e', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
             // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
-            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: 'a748ed6c4ed43f1bd8475217fee7dba224a661b2', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: 'ad1e6c0d9ef1de2a2104de952256e18f7abce6fc', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '3d27bef5891d01c0c36c8a05510724c78e0340c0', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '262ea6a8a13ee42d2efb49b642720762dd5bcf08', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '23b56fdf73f13e0f5ee06c854d7d2541d84a3220', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '34543b5a222d7875938fc545751d33cd25ecf2c3', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '7e548bdcc7bccc30dbbc20b32bd594cc0d27128f', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '07ba79155102bcc5af7a7d3ff8e3252412ea816f', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '4ff2e5951eabde88a2d2efe46c671e5f87764359', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '8fd50c0d7b5d7f21aa215e71c41a4d071f76e971', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '878bfc3e64c6d49ae178f5e57e5bb802fefd6fb9', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'f82d186d8f2053f13389c9de24a317bd3673a0fc', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { key: '809561d58dd226d0bf05a3678a793a4aaa6813a5', id: "error", class: "error" }, this.errorMessage), h("div", { key: '252bf955bc3885fece7219dad0b1819a33a29bf7', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: 'bcf3f6665c8fa0bb4e21b8ba92f756aa8570b5c4', id: "error", class: "error" }, this.errorMessage), h("div", { key: '2b249282c6a469e6d91ecae8ac681f4ebc5816b6', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -611,6 +616,18 @@ export class DatePicker {
     }
     static get listeners() {
         return [{
+                "name": "scroll",
+                "method": "pf_reposition",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "pf_reposition",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
                 "name": "resize",
                 "method": "checkCanOpen",
                 "target": "window",

package/dist/esm/{app-globals-d586ffcf.js → app-globals-930d901f.js}

@@ -1,6 +1,6 @@
 import './index-3425d80d.js';
 
-const version = "5.29.0-alpha.9";
+const version = "5.29.0";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length