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

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/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;
 }

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-navigator/priv-navigator-item/priv-navigator-item.css

@@ -876,7 +876,16 @@
 :host .navoption.selected {
   background: var(--wmcolor-navigator-item-background-selected);
 }
-:host .navoption.focused, :host .navoption:hover {
-  background: var(--wmcolor-navigator-item-background-focus);
+:host .navoption:hover {
+  background: var(--wmcolor-navigator-item-background-hover);
   opacity: 1;
+}
+
+:host(:focus-visible) .navoption {
+  background: var(--wmcolor-navigator-item-background-focus);
+  color: var(--wmcolor-interactive-text);
+}
+:host(:focus-visible) .navoption:hover {
+  background: var(--wmcolor-navigator-item-background-hover);
+  color: var(--wmcolor-navigator-item-text);
 }

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

@@ -864,9 +864,9 @@
   --wmcolor-navigator-background: var(--wmcolor-background);
   --wmcolor-navigator-header-background: var(--wmcolor-brand-dark);
   --wmcolor-navigator-header-text: var(--wmcolor-text-ondark);
-  --wmcolor-navigator-item-background-selected: var(--wmcolor-interactive-background-selected);
+  --wmcolor-navigator-item-background-selected: var(--wmcolor-option-background-selected);
   --wmcolor-navigator-item-background-focus: var(--wmcolor-interactive-background-focus);
-  --wmcolor-navigator-item-background-hover: var(--wmcolor-interactive-background-hover);
+  --wmcolor-navigator-item-background-hover: var(--wmcolor-option-background-hover);
   --wmcolor-navigator-item-background: var(--wmcolor-background);
   --wmcolor-navigator-item-border: var(--wmcolor-border);
   --wmcolor-navigator-item-text: var(--wmcolor-text);
@@ -949,6 +949,12 @@
   text-align: center;
   text-transform: capitalize;
 }
+:host priv-navigator-item:focus-visible img {
+  filter: brightness(20);
+}
+:host priv-navigator-item:focus-visible:hover img {
+  filter: brightness(1);
+}
 
 priv-navigator-item:focus {
   outline: none;

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

@@ -158,7 +158,8 @@ export class Navigator {
             this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;
         }
         this.isOpen = true;
-        this.focusItem();
+        // delay focus to allow 250ms animation to complete
+        this.focusItem(250);
     }
     closeMenu(returnFocus = true) {
         this.isOpen = false;
@@ -170,12 +171,18 @@ export class Navigator {
             }
         });
     }
-    focusItem() {
+    focusItem(delayMs = 0) {
         const newSelection = this.navigatorItems[this.itemIndexToFocus];
         newSelection.tabIndex = 0;
         newSelection.focused = true;
-        // wait for animation to complete before sending focus to option
-        window.setTimeout(() => newSelection.focus(), 250);
+        if (delayMs > 0) {
+            // wait for animation to complete before sending focus to option
+            setTimeout(() => newSelection.focus(), delayMs);
+        }
+        else {
+            // immediate focus for keyboard navigation
+            window.requestAnimationFrame(() => newSelection.focus());
+        }
     }
     unfocusItem(index) {
         const oldSelection = this.navigatorItems[index];

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;
 }

package/dist/collection/components/wm-snackbar/wm-snackbar.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;
   margin: unset;