@watermarkinsights/ripple 5.19.0-alpha.1 → 5.19.0-alpha.11

package/dist/collection/components/datepickers/datepicker.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/selects/priv-option-list/priv-option-list.css

@@ -926,7 +926,7 @@
 .select-all:focus {
   outline: none;
   background: var(--wmcolor-select-option-background-focus);
-  color: #fff;
+  color: var(--wmcolor-interactive-text);
 }
 
 .return-btn,

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css

@@ -1181,7 +1181,7 @@
 .menu .menuitem:focus-visible {
   outline: none;
   background: var(--wmcolor-interactive-background-focus);
-  color: #fff;
+  color: var(--wmcolor-interactive-text);
 }
 .menu .menuitem:hover {
   background: var(--wmcolor-select-option-background-hover);

package/dist/collection/components/selects/wm-option/wm-option.css

@@ -879,7 +879,7 @@
 :host:focus, :host.focus {
   outline: none;
   background: var(--wmcolor-select-option-background-focus);
-  color: #fff;
+  color: var(--wmcolor-interactive-text);
 }
 :host.icon {
   color: var(--wmcolor-interactive);
@@ -996,15 +996,20 @@
 :host(:focus-visible) {
   outline: none;
   background: var(--wmcolor-select-option-background-focus);
-  color: #fff;
+  color: var(--wmcolor-interactive-text);
 }
 :host(:focus-visible) .checkbox.svg-checkbox-blank,
 :host(:focus-visible) .checkbox.svg-checkbox-selected {
-  --icon-fill: #fff;
+  --icon-fill: var(--wmcolor-interactive-text);
 }
 
 :host(:hover) {
   background: var(--wmcolor-select-option-background-hover);
   color: var(--wmcolor-select-option-text);
   outline: none;
+}
+
+:host(:focus-visible:hover) .checkbox.svg-checkbox-blank,
+:host(:focus-visible:hover) .checkbox.svg-checkbox-selected {
+  --icon-fill: var(--wmcolor-interactive);
 }

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

@@ -878,6 +878,8 @@
   --wmcolor-select-selectall-border: var(--wmcolor-select-option-border);
   --wmcolor-select-selectall-text: var(--wmcolor-interactive);
   --wmcolor-select-text: var(--wmcolor-interactive);
+  --offset-x: 0px;
+  --offset-y: 0px;
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -1083,36 +1085,37 @@
   -webkit-transform-origin: center top;
   -moz-transform-origin: center top;
   transform-origin: center top;
+  border: none;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
-  position: absolute;
-  top: 40px;
-  right: 0;
   background: var(--wmcolor-select-option-background);
-  z-index: 100;
-  width: 100%;
   font-size: 0.875rem;
   max-height: var(--max-height);
   overflow-y: auto;
 }
-.wrapper .button-wrapper > .dropdown.upwards {
-  top: unset;
-  bottom: 100%;
-  -ms-transform-origin: center bottom;
-  -webkit-transform-origin: center bottom;
-  -moz-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
 .wrapper .button-wrapper > .dropdown.hidden {
   visibility: hidden;
 }
-.wrapper .button-wrapper > .dropdown.open {
+.wrapper .button-wrapper > .dropdown:popover-open {
   -ms-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   transform: scale(1, 1);
+  margin: 0;
+  width: unset;
+  top: anchor(bottom);
+  left: anchor(left);
+  right: anchor(right);
+}
+.wrapper .button-wrapper > .dropdown:popover-open.upwards {
+  top: unset;
+  bottom: anchor(top);
+  -ms-transform-origin: center bottom;
+  -webkit-transform-origin: center bottom;
+  -moz-transform-origin: center bottom;
+  transform-origin: center bottom;
 }
 .wrapper.invalid .button-wrapper .displayedoption {
   -webkit-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
@@ -1159,4 +1162,18 @@
 .rtl > .displayedoption:before {
   right: auto;
   left: 0.5625rem;
+}
+
+@supports not (top: anchor(bottom)) {
+  :host {
+    position: relative;
+  }
+  :host .button-wrapper {
+    position: unset;
+  }
+  :host .button-wrapper .dropdown {
+    z-index: 30;
+    inset: auto;
+    translate: var(--offset-x) var(--offset-y);
+  }
 }

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

@@ -1,14 +1,24 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../../global/functions";
+import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, findAllScrollableParents, getCumulativeScrollOffset, } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
+        this.scrollableParents = [];
         this.openUp = false;
         //////////////////////////////////////
         // for multiselect button text
         this.overflowCount = 0;
         this.displayedOptions = [];
+        this.debouncedReveal = debounce(() => {
+            const { x, y } = getCumulativeScrollOffset(this.el);
+            this.el.style.setProperty("--offset-x", "-" + x + "px");
+            this.el.style.setProperty("--offset-y", "-" + y + "px");
+            this.isHidden = false;
+        }, 100);
+        this.debouncedResize = debounce(() => {
+            this.scrollableParents = findAllScrollableParents(this.el);
+        }, 200);
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -21,12 +31,15 @@ export class Select {
         this.placeholder = selectMessages.multiPlaceholder;
         this.searchPlaceholder = selectMessages.searchPlaceholder;
         this.allSelectedMessage = selectMessages.allSelected;
-        this.isExpanded = false;
+        this.isHidden = true;
         this.announcement = "";
     }
     get childOptions() {
         return Array.from(this.el.querySelectorAll("wm-option"));
     }
+    get isExpanded() {
+        return this.dropdownEl && this.dropdownEl.matches(":popover-open");
+    }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
@@ -91,6 +104,11 @@ export class Select {
                 break;
         }
     }
+    handleResize() {
+        if (!CSS.supports("top", "anchor(bottom)")) {
+            this.debouncedResize();
+        }
+    }
     componentWillLoad() {
         if (!this.label) {
             console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
@@ -118,16 +136,32 @@ export class Select {
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
-        this.dropdownEl.classList.add("hidden");
-        forceUpdate(this.el);
         this.setButtonText();
+        if (!CSS.supports("top", "anchor(bottom)")) {
+            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());
+                }
+                else {
+                    // For regular elements, listen to their scroll event
+                    parent.addEventListener("scroll", () => this.handleScroll());
+                }
+            });
+        }
     }
     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");
+            // handling scroll offset for older browsers (currently FF and Safari)
+            if (!CSS.supports("top", "anchor(bottom)")) {
+                const { x, y } = getCumulativeScrollOffset(this.buttonEl);
+                this.el.style.setProperty("--offset-x", "-" + x + "px");
+                this.el.style.setProperty("--offset-y", "-" + y + "px");
+            }
+            this.isHidden = false;
             window.requestAnimationFrame(() => {
                 this.optionListEl.handleInitialFocus(optionToSelect);
             });
@@ -135,11 +169,9 @@ export class Select {
     }
     close(returnFocus = true) {
         if (this.isExpanded) {
-            this.isExpanded = false;
             this.optionListEl.unfocusAll();
-            this.dropdownEl.classList.remove("open");
             window.setTimeout(() => {
-                this.dropdownEl.classList.add("hidden");
+                this.isHidden = true;
                 if (this.optionListEl.multiple) {
                     this.optionListEl.updateOptionVisibility();
                 }
@@ -178,6 +210,13 @@ export class Select {
             showTooltip("right", ev.target, this.label);
         }
     }
+    handleScroll() {
+        if (this.isExpanded) {
+            if (!this.isHidden)
+                this.isHidden = true;
+            this.debouncedReveal();
+        }
+    }
     setButtonText() {
         this.displayedOptions = this.childOptions.filter((x) => x.selected);
         // handle overflow + counter for multiselect
@@ -232,11 +271,13 @@ export class Select {
             ["aria-labelledby"]: "label selectbtn",
             ["aria-describedby"]: "error",
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
+            ["popovertarget"]: "dropdown",
+            ["popovertargetaction"]: "toggle",
             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: '330408045b96bb9d56e5998d50706e74b2b094a7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '82b457ba9b22107a26359d5f7f63c56333f33e46', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9cfa0597409bd864b747b89ac2b843de0b085ca7', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '7d0c9f4a985b6ab59a239d0cafa69d932125b91b', 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: '4a527a732bb04851b3d3fefc29bb4c317d3864b8', class: "required" }, h("span", { key: '8ac2a86df3f5b59d5275f55cca6c85d64c96559e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '023605d744293eaff5d924f23d5a604fd4fe8796', "aria-hidden": "true" }, "*")))), h("div", { key: '8d1a8b4e1499c3bc41af8231149c5be2da261fb5', class: "button-wrapper" }, h("button", Object.assign({ key: '2068a2077fb7e39c3c41b7e4bb2aa953bc60b9d8' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '71fadfcbc3f77637af1ab24878fcce0507d59012', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c770393cfe04bb2c107c3052f8b23c83ff581b00', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'e1087535c9c44974385e303ae928d76c071d555f', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'a3e291c520dd26a2512a59e3e3be95f6db72f17a', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'fd328a33e9c92561c1cd9ca0785349b12daa5cb7', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4d7308d974bd20a1fea40e946abdcd89247095a3', class: `dropdown ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upwards" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '1797c238d91272e4983b4e98f80bfd1519b4fc5f', 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: 'de94c77063873993f52d46ab762b461cc3573f30' }))), h("div", { key: '717ee774cf69f04ad73825d717cec9c9e30adc6b', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '053db243c037e395a41f0cb2eade700c600a903d', 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"; }
@@ -471,7 +512,7 @@ export class Select {
     }
     static get states() {
         return {
-            "isExpanded": {},
+            "isHidden": {},
             "announcement": {}
         };
     }
@@ -585,6 +626,12 @@ export class Select {
                 "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

@@ -894,47 +894,123 @@
 .file-wrapper .file.condensed {
   column-gap: 2.5rem;
 }
+.file-wrapper .file.extra-condensed {
+  column-gap: 0.75rem;
+}
 .file-wrapper .file .filename {
-  display: inline-block;
+  font-weight: 600;
+  display: inline;
+  overflow-wrap: break-word;
+}
+.file-wrapper .file .filename.hidden {
+  display: none;
+}
+.file-wrapper .file .filename-measure {
   white-space: nowrap;
+  visibility: hidden;
+  position: absolute;
+  pointer-events: none;
 }
 .file-wrapper .file .left-group {
-  overflow: hidden;
-  min-inline-size: 5.3125rem;
+  min-inline-size: 0;
   flex-grow: 1;
 }
+.file-wrapper .file .left-group:has(.-truncated) {
+  min-inline-size: fit-content;
+}
 .file-wrapper .file .right-group {
-  display: flex;
-  justify-content: end;
+  display: grid;
+  grid-template-columns: auto min-content;
   align-items: center;
   gap: 1rem;
-  min-inline-size: 0;
-  max-inline-size: 50%;
 }
 .file-wrapper .file .right-group .file-controls {
   display: flex;
   gap: 1rem;
 }
+.file-wrapper .file .right-group .file-controls wm-button {
+  --icon-size: 1.125rem;
+}
 .file-wrapper .file .right-group .file-info {
+  min-inline-size: 4.375rem;
+  text-align: right;
+  align-items: end;
+}
+.file-wrapper .file .file-info {
   display: flex;
   flex-direction: column;
-  align-items: end;
   gap: 0.25rem;
-  text-align: right;
   max-inline-size: 28.125rem;
 }
-.file-wrapper .file .right-group .file-info .uploader-name {
-  max-inline-size: 100%;
+.file-wrapper .file .file-info * {
   overflow-wrap: break-word;
+}
+.file-wrapper .file .file-info .uploader-name {
+  max-inline-size: 100%;
   text-wrap: balance;
 }
-.file-wrapper .file .right-group .file-info:empty {
+.file-wrapper .file .file-info:empty {
   display: none;
 }
+.file-wrapper .file #file-details summary {
+  --icon-size: 24px;
+  display: block;
+  font-weight: 600;
+  color: var(--wmcolor-interactive);
+}
+.file-wrapper .file #file-details summary::before {
+  position: absolute;
+  transform: translate(0, -12%);
+}
+.file-wrapper .file #file-details summary:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: 2px;
+}
+.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: 1.5rem;
+}
+.file-wrapper .file #file-details[open] #summary-filename-trunc {
+  display: none;
+}
+.file-wrapper .file #file-details[open] summary:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.file-wrapper .file #file-details[open] summary:before {
+  -webkit-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='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A");
+  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='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A");
+}
+.file-wrapper .file #file-details:not([open]) #summary-filename-wrap {
+  display: none;
+}
+.file-wrapper .file #file-details:not([open]) summary:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.file-wrapper .file #file-details:not([open]) summary:before {
+  -webkit-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='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A");
+  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='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A");
+}
+.file-wrapper .file #summary-filename-wrap {
+  display: inline-block;
+  overflow-wrap: anywhere;
+}
 .file-wrapper .file.--error {
   border: 1px solid var(--wmcolor-file-border-error);
   background-color: var(--wmcolor-file-background-error);
-  block-size: 3.75rem;
+  min-block-size: 3.75rem;
 }
 .file-wrapper .file.--error .right-group {
   flex-shrink: 0;

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

@@ -17,8 +17,21 @@ export class File {
         this.showInfo = "last-updated";
     }
     get isCondensed() {
+        // Breakpoint at which file actions are moved into an action menu
         return this.el.clientWidth < 500;
     }
+    get isExtraCondensed() {
+        // Breakpoint at which file info is moved into a details element
+        return this.el.clientWidth < 414;
+    }
+    get needsTruncation() {
+        const boundsEl = this.el.shadowRoot.querySelector(".left-group");
+        const measureEl = this.el.shadowRoot.querySelector(".filename-measure");
+        if (boundsEl && measureEl && boundsEl.clientWidth < measureEl.clientWidth) {
+            return true;
+        }
+        return false;
+    }
     get isUploading() {
         return this.progress !== undefined && this.progress < 100;
     }
@@ -107,22 +120,20 @@ export class File {
         const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
         resizeObserver.observe(this.el);
     }
-    setFilename() {
-        // calc is not accurate and last letter may be cropped if we don't wait
-        requestAnimationFrame(() => {
-            const fileNameEl = this.el.shadowRoot.querySelector(".filename");
-            const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
-            const rightGroup = this.el.shadowRoot.querySelector(".right-group");
-            const file = this.el.shadowRoot.querySelector(".file");
-            const colGap = file ? getComputedStyle(file).getPropertyValue("column-gap") : "0";
-            const rightBoundary = rightGroup
-                ? rightGroup.getBoundingClientRect().left - parseFloat(colGap)
-                : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
-            fileNameEl.textContent = truncateText(fileNameEl, this.fullFilename, rightBoundary - leftBoundary, 7);
-        });
+    truncateFilename() {
+        let summaryFilenameEl = this.el.shadowRoot.querySelector("#summary-filename-trunc");
+        if (summaryFilenameEl) {
+            summaryFilenameEl.textContent = truncateText(summaryFilenameEl, this.fullFilename, summaryFilenameEl.parentElement.clientWidth - 32, 7);
+            if (summaryFilenameEl.textContent === this.fullFilename) {
+                summaryFilenameEl.classList.remove("-truncated");
+            }
+            else {
+                summaryFilenameEl.classList.add("-truncated");
+            }
+        }
     }
     componentDidRender() {
-        this.setFilename();
+        this.truncateFilename();
     }
     previewFile() {
         this.wmFilePreview.emit();
@@ -140,10 +151,11 @@ export class File {
         }
     }
     renderFileName() {
-        return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, this.fullFilename), h("span", { "aria-hidden": "true", class: "filename", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => hideTooltip() }), this.isUploading && h("span", { class: "sr-only" }, "uploading"))));
+        const showDetailsToggle = this.isExtraCondensed && (this.needsTruncation || (this.showInfo !== "none" && !this.errorMessage));
+        return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, this.fullFilename), h("span", { "aria-hidden": "true", class: `filename ${showDetailsToggle ? "hidden" : ""}` }, this.fullFilename), this.isUploading && h("span", { class: "sr-only" }, "uploading")), showDetailsToggle && this.renderDetailsToggle()));
     }
     renderFileInfo() {
-        return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "details uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", { class: "details" }, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", { class: "details" }, this.size)));
+        return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", null, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", null, this.size)));
     }
     renderActionMenu() {
         const previewItem = (h("wm-menuitem", { icon: "#show", onClick: () => this.previewFile() }, this.previewActionMessage));
@@ -167,11 +179,15 @@ export class File {
         const showActionMenu = this.isCondensed && !hasSingleFileAction;
         return showActionMenu ? this.renderActionMenu() : this.renderFileActionButtons();
     }
+    renderDetailsToggle() {
+        return (h("details", { id: "file-details" }, h("summary", null, h("div", { class: "filename-measure", "aria-hidden": "true" }, this.fullFilename), h("span", { id: "summary-filename-trunc", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.fullFilename), h("span", { id: "summary-filename-wrap" }, this.fullFilename)), !this.errorMessage && this.renderFileInfo()));
+    }
     renderFile() {
-        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
+        const showRightGroup = !this.errorMessage && (this.fileActions !== "" || this.showInfo !== "none");
+        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""} ${this.isExtraCondensed ? "extra-condensed" : ""}` }, this.renderFileName(), showRightGroup && (h("div", { class: "right-group" }, !this.isExtraCondensed && this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '88c61b45d6f48a00abeaaddb9a03e870f597df0c', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '64184891986497ee7159216e7f9ffef22b046c1c', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

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

@@ -860,37 +860,18 @@
   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;
+}
+:host(:focus-visible) .wrapper {
+  outline: none;
+  background: var(--wmcolor-actionmenu-item-background-focus);
+  color: var(--wmcolor-interactive-text);
+}
+:host(:focus-visible) .wrapper .description {
+  color: var(--wmcolor-interactive-text);
+}
+
 :host {
   --wmcolor-actionmenu-item-background-hover: var(--wmcolor-option-background-hover);
   --wmcolor-actionmenu-item-background-focus: var(--wmcolor-option-background-focus);
@@ -920,6 +901,10 @@
 :host .wrapper:hover {
   background: var(--wmcolor-actionmenu-item-background-hover);
   outline: none;
+  color: var(--wmcolor-actionmenu-item-text);
+}
+:host .wrapper:hover .description {
+  color: var(--wmcolor-actionmenu-item-text-description);
 }
 :host .wrapper .description {
   color: var(--wmcolor-actionmenu-item-text-description);
@@ -954,18 +939,6 @@
   font-size: 1.12rem;
 }
 
-:host(:focus-visible) {
-  outline: none;
-}
-:host(:focus-visible) .wrapper {
-  outline: none;
-  background: var(--wmcolor-actionmenu-item-background-focus);
-  color: #fff;
-}
-:host(:focus-visible) .wrapper .description {
-  color: #fff;
-}
-
 :host([aria-disabled=true]) {
   pointer-events: none;
 }