@watermarkinsights/ripple 5.19.0-alpha.9 → 5.19.1-alpha.0

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -1,14 +1,34 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../../global/functions";
+import { getTextDir, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, findAllScrollableParents, } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
-        this.openUp = false;
+        this.scrollableParents = [];
+        this.returnFocus = false;
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
         //////////////////////////////////////
         // for multiselect button text
         this.overflowCount = 0;
         this.displayedOptions = [];
+        this.previousDisplayedOptions = [];
+        this.debouncedScroll = debounce(() => {
+            if (this.hasAnchor) {
+                const popoverRect = this.dropdownEl.getBoundingClientRect();
+                const anchorRect = this.buttonEl.getBoundingClientRect();
+                // Heuristic: Popover is ABOVE the anchor (it opened upwards)
+                this.isUp = popoverRect.bottom < anchorRect.top;
+                this.isExpanded = true;
+                this.optionListEl.handleInitialFocus(this.elToFocus);
+                this.elToFocus = undefined;
+            }
+            else {
+                this.dropdownPosition();
+            }
+        }, 100);
+        this.debouncedResize = debounce(() => {
+            this.dropdownPosition();
+        }, 100);
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -22,6 +42,8 @@ export class Select {
         this.searchPlaceholder = selectMessages.searchPlaceholder;
         this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
+        this.isUp = false;
+        this.isHidden = false;
         this.announcement = "";
     }
     get childOptions() {
@@ -40,58 +62,149 @@ export class Select {
     //////////////////////////////////////
     handleOptionSelection() {
         if (!this.multiple) {
-            this.close();
+            this.returnFocus = true;
+            this.dropdownEl.hidePopover();
         }
     }
     handleChildEnter() {
         // only occurs for multiselects. handle the click, then close
-        this.close();
-    }
-    closePopupOnEscape() {
-        this.close();
-    }
-    handleOptionBlur(ev) {
-        // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
-        // keeps our component's blur events accurate, and closes when focusing browser address bar
-        if (!isElOrChild(this.el, ev.detail.relatedTarget)) {
-            const event = new CustomEvent("blur");
-            // @ts-ignore
-            event.relatedTarget = ev.detail.relatedTarget;
-            this.el.dispatchEvent(event);
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
+    }
+    closeDropdownOnEscape() {
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
+    }
+    handleBeforeToggle() {
+        if (!this.hasAnchor) {
+            // Start hidden to prevent flash during positioning calculation
+            this.isHidden = true;
+        }
+    }
+    handleToggle(ev) {
+        ev.newState === "open" ? this.open() : this.close();
+    }
+    dropdownPosition() {
+        // polyfill for opening up or down + positioning according to screen
+        // (must recalculate on scroll, resize)
+        // Using transform for better performance - only affects composite layer, no layout recalculation
+        const buttonElRect = this.buttonEl.getBoundingClientRect();
+        const spaceAbove = buttonElRect.top;
+        const spaceBelow = document.documentElement.clientHeight - buttonElRect.bottom;
+        const dropdownHeight = this.dropdownEl.clientHeight;
+        // Clear any previously set positioning properties
+        this.el.style.removeProperty("--dropdown-translate-y");
+        this.el.style.removeProperty("--dropdown-max-height");
+        this.el.style.removeProperty("--dropdown-left");
+        // Set horizontal position and width to match button
+        this.el.style.setProperty("--dropdown-left", buttonElRect.left + "px");
+        this.el.style.setProperty("--button-width", buttonElRect.width + "px");
+        if (dropdownHeight <= spaceBelow) {
+            // Case 1: Enough space below - position dropdown below the button
+            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
+        }
+        else if (dropdownHeight <= spaceAbove) {
+            // Case 2: Not enough space below, but enough above - position dropdown above the button
+            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.top - dropdownHeight + "px");
+        }
+        else {
+            // Case 3: Not enough space in either direction - use the larger available space and constrain height
+            if (spaceBelow >= spaceAbove) {
+                // Use space below and constrain dropdown height
+                this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
+                this.el.style.setProperty("--dropdown-max-height", spaceBelow + "px");
+            }
+            else {
+                // Use space above and constrain dropdown height
+                this.el.style.setProperty("--dropdown-translate-y", "0px");
+                this.el.style.setProperty("--dropdown-max-height", spaceAbove + "px");
+            }
         }
+        this.isHidden = false;
     }
-    handleClick(ev) {
-        if (!isElOrChild(this.el, ev.target)) {
-            this.close();
+    open() {
+        if (!this.isExpanded && !this.isDisabled) {
+            // polyfill for browsers without anchor() support (FF)
+            if (!this.hasAnchor) {
+                this.dropdownPosition();
+            }
+            requestAnimationFrame(() => {
+                const popoverRect = this.dropdownEl.getBoundingClientRect();
+                const anchorRect = this.buttonEl.getBoundingClientRect();
+                // Heuristic: Popover is ABOVE the anchor (it opened upwards)
+                this.isUp = popoverRect.top < anchorRect.top;
+                this.isExpanded = true;
+                this.optionListEl.handleInitialFocus(this.elToFocus);
+                this.elToFocus = undefined;
+            });
         }
     }
-    handleButtonBlur(ev) {
-        if (isElOrChild(this.el, ev.relatedTarget)) {
-            // do not emit a blur event when opening the dropdown and focusing the Options
-            ev.stopPropagation();
+    close() {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.optionListEl.unfocusAll();
+            window.setTimeout(() => {
+                if (!this.hasAnchor) {
+                    this.isHidden = true;
+                }
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
+                }
+                // clear search field, reset filtered / bolded state of wm-options
+                if (this.search) {
+                    this.optionListEl.clearSearch();
+                }
+            }, 150);
+            if (this.returnFocus) {
+                requestAnimationFrame(() => {
+                    this.buttonEl.focus();
+                    this.returnFocus = false;
+                });
+            }
         }
     }
     handleKey(ev) {
         switch (ev.key) {
             case "Tab":
                 // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
-                this.close(ev.shiftKey ? true : false);
+                if (this.isExpanded && ev.shiftKey) {
+                    this.returnFocus = true;
+                }
+                this.dropdownEl.hidePopover();
                 break;
             case "ArrowDown":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.open("next");
+                    this.elToFocus = "next";
+                    this.dropdownEl.showPopover();
                 }
                 break;
             case "ArrowUp":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.open("previous");
+                    this.elToFocus = "previous";
+                    this.dropdownEl.showPopover();
                 }
                 break;
         }
     }
+    handleResize() {
+        if (!this.hasAnchor && this.isExpanded) {
+            this.isHidden = true;
+            this.debouncedResize();
+        }
+    }
+    handleScroll() {
+        if (this.isExpanded) {
+            this.isHidden = true;
+            this.debouncedScroll();
+        }
+    }
     componentWillLoad() {
+        if (!this.hasAnchor) {
+            // Start hidden to prevent flash on first load
+            this.isHidden = true;
+        }
         if (!this.label) {
             console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
         }
@@ -108,8 +221,6 @@ export class Select {
         });
     }
     handleChildChange() {
-        // on update of children or children selected state, reset button text and rerender
-        this.setButtonText();
         forceUpdate(this.el);
         if (this.multiple) {
             // update state of clone options
@@ -118,43 +229,19 @@ export class Select {
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
-        this.dropdownEl.classList.add("hidden");
-        forceUpdate(this.el);
-        this.setButtonText();
-    }
-    open(optionToSelect) {
-        if (!this.isDisabled) {
-            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.labelEl.clientHeight);
-            this.isExpanded = true;
-            this.dropdownEl.classList.add("open");
-            this.dropdownEl.classList.remove("hidden");
-            window.requestAnimationFrame(() => {
-                this.optionListEl.handleInitialFocus(optionToSelect);
-            });
-        }
-    }
-    close(returnFocus = true) {
-        if (this.isExpanded) {
-            this.isExpanded = false;
-            this.optionListEl.unfocusAll();
-            this.dropdownEl.classList.remove("open");
-            window.setTimeout(() => {
-                this.dropdownEl.classList.add("hidden");
-                if (this.optionListEl.multiple) {
-                    this.optionListEl.updateOptionVisibility();
+        if (!this.hasAnchor) {
+            this.scrollableParents = findAllScrollableParents(this.el);
+            // Add scroll listeners to all scrollable parents
+            this.scrollableParents.forEach((parent) => {
+                if (parent === document.documentElement) {
+                    // For document element, listen to window scroll event
+                    window.addEventListener("scroll", () => this.handleScroll());
                 }
-                // clear search field, reset filtered / bolded state of wm-options
-                if (this.search) {
-                    this.optionListEl.clearSearch();
-                }
-                // Returns focus to button after popup closes (no need if user is tabbing)
-                // Delay is necessary for screenreader to get new expanded state before focus
-                // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
-                // also UX wise, it makes sense for the button to only be focused after the animation is complete
-                if (returnFocus) {
-                    this.buttonEl.focus();
+                else {
+                    // For regular elements, listen to their scroll event
+                    parent.addEventListener("scroll", () => this.handleScroll());
                 }
-            }, 150);
+            });
         }
     }
     announceError() {
@@ -168,7 +255,6 @@ export class Select {
     handleComponentBlur(ev) {
         // Do not close or emit custom blur event when blurring to an element inside (wm-option)
         if (!this.el.contains(ev.relatedTarget)) {
-            this.close(false);
             this.wmSelectBlurred.emit();
         }
     }
@@ -178,28 +264,6 @@ export class Select {
             showTooltip("right", ev.target, this.label);
         }
     }
-    setButtonText() {
-        this.displayedOptions = this.childOptions.filter((x) => x.selected);
-        // handle overflow + counter for multiselect
-        if (this.multiple) {
-            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-            const overflowCounterWidth = 38;
-            const computedStyle = window.getComputedStyle(this.buttonEl);
-            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-            this.overflowCount = 0;
-            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-                this.overflowCount++;
-                this.displayedOptions.pop();
-                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                optionsTotalWidth = this.measurementAreaEl.clientWidth;
-            }
-        }
-    }
     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) {
@@ -208,6 +272,7 @@ export class Select {
         this.announcement = message;
     }
     renderButtonText() {
+        this.displayedOptions = this.childOptions.filter((x) => x.selected);
         if (this.multiple && this.displayedOptions.length < 1) {
             return h("span", null, this.placeholder);
         }
@@ -215,6 +280,28 @@ export class Select {
             return this.allSelectedMessage;
         }
         else {
+            // handle overflow + counter for multiselect
+            // only bother if things have changed
+            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
+            if (this.multiple && hasChanged) {
+                // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+                const overflowCounterWidth = 38;
+                const computedStyle = window.getComputedStyle(this.buttonEl);
+                // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+                const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+                const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+                const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+                this.overflowCount = 0;
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+                while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                    this.overflowCount++;
+                    this.displayedOptions.pop();
+                    this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                    optionsTotalWidth = this.measurementAreaEl.clientWidth;
+                }
+                this.previousDisplayedOptions = this.displayedOptions;
+            }
             return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
         }
     }
@@ -225,18 +312,22 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        const buttonProps = {
-            id: "selectbtn",
-            ["disabled"]: this.isDisabled,
-            ["aria-controls"]: "list",
-            ["aria-labelledby"]: "label selectbtn",
-            ["aria-describedby"]: "error",
-            ["aria-expanded"]: this.isExpanded ? "true" : "false",
-            onClick: () => (this.isExpanded ? this.close() : this.open()),
-        };
-        return (h(Host, { key: '27f57d30b836eac8dc27ae98a425015d86a0948b', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8f48d8e8d616244350e61d6e81f350640131bbf0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '39d3bcec9b67d671a6bdbb6a3ee738832189ea51', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: 'b0bb90a215ac20de94afa8dba56e839bdc590dc1', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'f73046e3e0d19f90e1de9f6c104b186159e08551', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '78f69feb04ef0436bb3b7f0bdeb08c67c69aa025', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a3a54f3c4b01271bb472a2dcaeff653ae37191b8', class: "label-wrapper" }, h("label", { key: 'fac48d7e7a6ee92a6c28bcc6d76aa9b0358cb2fa', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (h("span", { key: '4a5648503a023ff1eba34db936d49709e14da9f1', class: "required" }, h("span", { key: '3fe783c7174d3d827b20589cad412d32fa4cd978', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '85ac4ca35f1077ade1bdda403b8888cc206ff28e', "aria-hidden": "true" }, "*")))), h("div", { key: 'c2e70d87db2d533713ac9c5a877ddba98a9a9a2f', class: "button-wrapper" }, h("button", Object.assign({ key: '460c6ac5cde8637b0098201966ca4268301ac2b7' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3af3357f45ceacc5689e90e2bdc6459cab591c2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'bd9869db1146e54cc47c2965ebe2776873e2a18e', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b22d952625e93fab98ebb1b688101fd8891a4af7', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '1f6448ee167d1847eff8fb5bc7a30e0a964e6efe', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '0d550b97a3e08e9b708f2f4c3d91f9cac76ba5d8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '59cc7fcfa25d9d3eab8e4d70cdcd365e36e160ad', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '9fb7d0396527bc18bb8f5d00d64c858470d0698d', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '4c307bca5104ec962ca050b46adf882fb78bb74a' }))), h("div", { key: '06f11b61b475cc6cd78c2a8278b8455a79405e17', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '86cf865fbb7fd0e2c88290fe92e6062ada7d9ab6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField && (h("span", { key: 'a78da94fc8742122542de24709dae541058aeab1', class: "required" }, h("span", { key: '055fb76d88b0680ede31d3c700a640b5c1cb498f', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'e1db2d800c6b5789d8a50ce73b02899b4c8cf105', "aria-hidden": "true" }, "*")))), h("div", { key: '9a1b34ee65e711a6bfd55149af12ed03899294cc', class: "button-wrapper" }, h("button", { key: 'b7c86d83006cb532787d3f1df0c9c9f3b54470e7', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'ed2cc72a353f2bae29fdd5d8ea3f5b5dedc85c6b', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'cd68f6e2d0200649a57bb8f8c9c7ad423c551848', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '2501335ceaa6612cd720c71b0ea3c6efb68fa698', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'dacf8d5e2223a9700854ef4fac3ecabf1c8702a2', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '161a40394450b4bac8ac91435a2b03ef9a0f8277', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'ed6cdbdfe2d290440b1bd33938b4cee31a70047e',
+            // is-open is for the CSS transition in modern browsers
+            // hidden is to wait for position calculations in Firefox
+            class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.isUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
+            // @ts-ignore -- don't tell typescript but we're in the future
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '14ab958ca5cb5a3ac3fa970ed138ec5b47089779', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+                this.dropdownEl.hidePopover();
+            }, onOptionListAllSelected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllSelected.emit();
+            }, onOptionListAllDeselected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllDeselected.emit();
+            } }, h("slot", { key: '98699fb0f36674cbae13f226fa923d6228fdad97' }))), h("div", { key: '69a49e6a2fe618bf9ce1a7e08527630a2d48cb8b', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '374538b9eb797924abfe74049fec191a41ae7501', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }
@@ -472,6 +563,8 @@ export class Select {
     static get states() {
         return {
             "isExpanded": {},
+            "isUp": {},
+            "isHidden": {},
             "announcement": {}
         };
     }
@@ -563,28 +656,22 @@ export class Select {
                 "passive": false
             }, {
                 "name": "wmEscKeyPressed",
-                "method": "closePopupOnEscape",
+                "method": "closeDropdownOnEscape",
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmOptionBlurred",
-                "method": "handleOptionBlur",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKey",
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/wm-file/wm-file.css

@@ -915,7 +915,7 @@
   min-inline-size: 0;
   flex-grow: 1;
 }
-.file-wrapper .file .left-group:has(.-truncated) {
+.file-wrapper .file .left-group:has(#file-details:not([open]) .-truncated) {
   min-inline-size: fit-content;
 }
 .file-wrapper .file .right-group {
@@ -957,6 +957,7 @@
   display: block;
   font-weight: 600;
   color: var(--wmcolor-interactive);
+  list-style-type: none;
 }
 .file-wrapper .file #file-details summary::before {
   position: absolute;
@@ -969,7 +970,7 @@
 .file-wrapper .file #file-details #summary-filename-trunc,
 .file-wrapper .file #file-details #summary-filename-wrap,
 .file-wrapper .file #file-details .file-info {
-  margin-inline-start: 2rem;
+  margin-inline-start: 1.5rem;
 }
 .file-wrapper .file #file-details[open] #summary-filename-trunc {
   display: none;

package/dist/collection/components/wm-menuitem/wm-menuitem.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host(:focus-visible) {
   outline: none;
 }

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-pagination/wm-pagination.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host,
 wm-pagination {
   --wmcolor-pagination-arrow-disabled: var(--wmcolor-interactive-disabled);

package/dist/collection/components/wm-search/wm-search.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }