@watermarkinsights/ripple 5.31.1 → 5.32.0-alpha.2

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -59,7 +59,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { key: '2bb380d47bd0f49fb2611b10893903bb2945123d', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '41011c62a4ec97eb84bc6d630f5104973cf04ecb', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: 'df730048a83cc47366e24c7739f074b9f04ce245', class: "svg-icon svg-menu" }))));
+        return (h(Host, { key: '5d1beb47f712da876a5e6f166379c5ecbc190af1', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '4ea1b9448e8ef8182c4d9ad361bad8fc443ba8af', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: '1dc4ccebf80908aaf8dec0a7f0368b5bc035971c', class: "svg-icon svg-menu" }))));
     }
     static get is() { return "wm-navigation-hamburger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -33,7 +33,7 @@ export class NavigationItem {
         this.active = undefined;
     }
     render() {
-        return (h(Host, { key: '896eba521c8245df3e4e80188fa5d1cabe86d7f4', role: "listitem" }, h("a", { key: '8d180bbc189fde8666f0fabf2ad141b6c3be6714', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'd190bffa8959e804dbd6da3a86addb48efa69187', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'a0a06a351f6c2d39fb326b49cc20de6486554e2a' })), h("div", { key: 'ab842b2f46167a0a84807cc1b09e45cce0306c5a', class: "text" }, this.text))));
+        return (h(Host, { key: '665a361e913c5d5de049e448cb765dd66c5623e5', role: "listitem" }, h("a", { key: '17a4be1e44536ebb7aac8b58210013707cf8bad4', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '0e85384f0c29f72734a359302813c58a2dc202b3', class: "icon", "aria-hidden": "true" }, h("slot", { key: '67182d94f0d811d944075a0f26a490ea2e050715' })), h("div", { key: 'af5417bf3424da1df90cf208d332e58c60208394', class: "text" }, this.text))));
     }
     static get is() { return "wm-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -143,9 +143,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { key: '5b40d806975f417dee23aa78167627fc9a3f9d72', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'bddd615e02d9874de3558210690ca8ac7b6ccf2d', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'ee1408c8b9c3f5862bdab3dcaeb180fd167b7757', class: "tray" }, h("div", { key: '3a73a566af0da9d1b4f0224dd6952d3bef8fd352', class: "toggle-wrapper" }, h("wm-button", { key: '52b7bc99a664068bb619eb1054c992a2aa0107d3', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '8cb63fea2d7ac7e289acc8cb5794c8d05accc04c', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'ac43c2473770b7432879ecb2f41a230e33e47b66', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '21e340e569e54067f6f635cd727ba574146eecdf', class: "tray" }, h("div", { key: '8d34ce5075c8f20d3de1d744df3dc939dcd3ce0c', class: "toggle-wrapper" }, h("wm-button", { key: 'de889f09b05c7241f640f325baefece78effc65a', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { key: '8804fdcf84efd7fcf6036527ab205533ce5f9ebc', class: "navlist" }, h("slot", { key: '276c2f3133776d91e2a05b5f7ec21a491b18363e' }))), this.isCollapsible && (h("div", { key: '492fbb7e7867529027176b8fb1418cf7f8d23cae', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: 'da2c93f95f2b7bcabf16b754eb4a58b04b0e31d5', class: "navlist" }, h("slot", { key: '371cf565bae21d8e6918dc7cf62ba14b262d0283' }))), this.isCollapsible && (h("div", { key: '85237dab461ca52da501fccf7e34fff75d3e6c92', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get is() { return "wm-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { key: '9434af6f99ad1f5dc15cd11957545cd633a21a35', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: '399d205cb7229b4cc43e6d31bfc54bf837eb1b13', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { key: 'd4faae43c4ae53287bbde45f5221b92744a17b0e', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'f5512064ccfcf3e37638729f2f6e92224ecdc022' })));
+        return (h("div", { key: 'e386ff9f538756eca49ea719ce22080831160e41', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'd56193023c05741935a5ad0a4770d76799dd3a18' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -257,7 +257,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: '8197306b3977ca7f6544aa790088cca8f6709bba', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '9a62b67f0c0f6e2ae1b0d1d08d8c03cd383786d5', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: 'e301a9a346d7a6885027326af173a5a6cfbdca1f', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '25fa0b35838d2dbd51d6e0716aeee38e8301294b', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -275,10 +275,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: '488f87868b91065f77fe107626494ec67b996c91' }, h("div", { key: '6347f94af6cb45632d68c5161f3308414077f1c0', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '7bdf47b77124ac8d4f3f7b26bc91adf4fb515d6c', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: 'c0febdd688ee45668d2b3ba7967b0638691a79af' }, h("div", { key: '19ffc4058c251ce78d73e9d2c7fb5822287e557d', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: 'c20b0676387be90dee092f49ceabf2b710e032f6', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '759003335e1ebf23125dfd8ebcde4130b0b64389', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: 'c776f2ea0291221d1dea69a339e6dd6340f70c3e', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '3670d562d836b1541aac89679535e5b4b4f4d7ef', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: 'a18efbe6ebbff2c54c9bb6c02bcc35fd40d75e18', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -223,11 +223,11 @@ export class Snackbar {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" }))), (!notification.link && notification.action) && (h("button", { id: `action-${notification.id}`, class: "link", onClick: () => this.snackLinkClicked(notification), onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, notification.action))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link || notification.action ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link || notification.action ? 0 : -1, onFocus: () => (notification.link || notification.action) && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '01e620368efc9d0fc854a5b539dcfa695b6c5e5d' }, h("div", { key: '156973ac3ea2f3e3034e4517b4852357c81b9af3', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: 'f78ea7809df466e6a34f1b1fafaa6729fb9a8dcf' }, h("div", { key: '27ecea571e660d3de9280d56594e2bef26b451a7', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: '3f674c9094ef2a400452ec03c571da42287374d3', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: 'ba10259a8a04a8006a22bdec6317871c6f8fa569', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -44,9 +44,9 @@ export class TabItem {
     }
     render() {
         const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
-        return (h(Host, { key: '6f20f986a33ca8c78166874c6e6150931b293c33', role: "presentation" }, h("li", { key: '39e5f0e8b30e9b6e43757685a973b83260e95d23', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: 'bffa53dc07bbdabf6e553c1bd045da3193c8e049', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
+        return (h(Host, { key: '3618b1f157b1ba203f0a7c6d833bc1cffc1cdb29', role: "presentation" }, h("li", { key: 'e39008c432e624d081f809e194972ef1b22faf8e', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: 'aaa29b9cb2d05b63c01d70fbd4d46270619068f1', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
                 this.wmIntTabFocused.emit({ tabItem: this.el });
-            } }, h("slot", { key: 'cf5d8ed8e74286563f5ecccd04bd8c1f5a3f7ea2' })))));
+            } }, h("slot", { key: '9aa2edb5576a2a552e447cc0f006669875c85114' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -348,15 +348,15 @@ export class TabList {
         this.announcement = message;
     }
     render() {
-        return (h(Host, { key: '6b04fe63825c1f6296240039531cb4825a4073d0' }, h("div", { key: 'd03390499fe7b2da2788dad9f9d2504eb373ab73', class: "component-wrapper" }, h("wm-button", { key: '52b02bf3142d7f2807409f75094a3e49ef85d31b', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+        return (h(Host, { key: '993fd37ad7196da597d0dc6c434b8c21300d8514' }, h("div", { key: 'bd81750389b2df6a8b9aa53908937460cbb50ab1', class: "component-wrapper" }, h("wm-button", { key: 'd1ce3d5c58d9ff54c139456e5aa5eb92bacb3f1d', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
                 id: "tabs.showPreviousTabs",
                 defaultMessage: "Show previous tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: 'c93f0456d5ccb062fbdfabaef4b057caddfc032d', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '0c0f64bb1866f4764c9a9e2e6f504a2a1e10d2bf' })), h("wm-button", { key: '6562a34d69b9cf7a90da7759b12d92940c9c081b', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: 'c46aa8946e82fdc7e3a28c45f9eec8c468ba7439', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '5a7fc1409af3fb2aa19428bbfca0d5a4e52316ba' })), h("wm-button", { key: '6c689fd91c790e9d0cab08082b185385cfbce67b', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
                 id: "tabs.showNextTabs",
                 defaultMessage: "Show next tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: '4839d0fbdd5c5aeb7ba8f918d973af5c54cc01fd', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: 'dfc8bc859e7928f0b65f44419d9f649d14c763f4', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -30,7 +30,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: 'aa6da7f526aefe3a900afb883c3d2dd2af421a0d', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: '64fa712a43e184155bb8b43a644bc5c13c7669ce', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -1050,10 +1050,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: 'bbca01cbc44e1da702756083252564862966c255', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9d43d1747cbfbc997166162f28a5d4a4ec2f47ec', class: "label-wrapper" }, h("label", { key: '43da61c5e02264bbd3c0d8a11a3b8bc722ce6deb', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '89ad60b2987a505a4c09d5e02d3845007319c272', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '5eefb03180e2becd90c7161e5b56888f3a3e303d', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '1126555b4620df53fd03713f926bd9778ce97e52', class: "upper-row" }, h("div", { key: '6f9959e5b959455381f9339e8ba9747f6df0aa5e', class: "svg-icon svg-search" }), h("div", { key: 'd52aabc7cc61db1c467004530885fe57fec192d4', class: `tags-and-input-wrapper` }, h("ul", { key: '0ecbbc94e609d200a917704ac71d742da8310d93', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '640a70ccebab0056bc389299d01d84e3cd8f10ae', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'ac971e515ca1e9db1d240909f902b34e9e984c7e', class: "label-wrapper" }, h("label", { key: '46fe662e59425fbd3b85be57d211c5990a715e60', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '638047c3443ff5991bdb4eac506ed8e9e5f3eb8e', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '0e2d1f9a7b4c4427caf8d1a095a758b868316135', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '092ee2d218336d52c4126d6c986950da99aab8e5', class: "upper-row" }, h("div", { key: 'da6c1eadfd1125716a2fdf2a4b9dbabb201d30c2', class: "svg-icon svg-search" }), h("div", { key: '953c175c6ddccb4f1a745edbf4fb67a78bdf4b73', class: `tags-and-input-wrapper` }, h("ul", { key: '47750731e93832464c2cf2715307a962ca06a8b9', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '2f23e0833ea6d08321062a9a09a7230de5d24eca', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'e292ac2e0790ba252e27968b8e108af86f9010a5', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'fde186687d41ba64eb463ab33ddcc8a8da86ed8f', id: "info", class: "info-text" }, this.info)), h("div", { key: '380930f929407090f129b2a88c5f3821c53a29ac', id: "error" }, this.errorMessage), h("div", { key: 'ab3402d6883008861ac0c524b8c27c2d688f2df1', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: 'c570397e9cbdc1233d3727d23a8838444baa3259', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'c7d60ecb6dbef20d1f001e8838a4b44fe87e99e6', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '73f39cc351095ce6f135406d772129d2bb7fc876', id: "info", class: "info-text" }, this.info)), h("div", { key: '83717816d5d9885550ada0b2711460f472b2db72', id: "error" }, this.errorMessage), h("div", { key: 'b357dd0b58cfd2c62af27717d32f1b9eba1ed092', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -112,7 +112,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: 'cec7802d05a18e1d8f2d50e1d668a9a1b76451fe', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e5ff3f72c1db7521369bf3ae25b2cdc4d3a4634b', class: "label-wrapper" }, h("label", { key: 'dd8260b287f8f7737e274b811afbce56126e8762', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '92426b4052d1e3788211048e5713c0906d35d6de', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'fc6a6f91ccd8548d1ccbd18467165f5538c99e1b', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'fd95965c0861809b15196651c4e315d28eeb3a91', class: "inner-wrapper" }, h("div", { key: 'e3887e5013ed9ae38605e8031378b8b1d560cff2', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'ad6da06248c0200c372f4ccb6a12d10829141e61', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: 'd58ba69caa849d2046178fe4ef6f52f2dad9cadd', id: "info", class: "info" }, this.info)), h("div", { key: 'd072da4faddf105cf8a0692e9e3b24ffb2c6dfb4', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '5ab6146e581e1c4ff2f65bd258862f9fb420a4c4', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'eb4d219f171a22824422c743631b0543fcb3e88d', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1f3c97d11cdebc8e027557a45b7e24e3aa5a8786', class: "label-wrapper" }, h("label", { key: '4779c1ccdca666484405938d66ed4211ba8276da', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '4b99f85729a23f39589e9b4910daaa09d6e229af', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: '824e6c762505edae20fcce0fa3c790633d929f0d', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '92814c32245d9ae69d3b8631236c3c7ddcc8552f', class: "inner-wrapper" }, h("div", { key: 'b838697433aa0fbfa7814d87f00cf06a41d1f489', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'b2998ed48399e44f8eec90a47a7fbd2c3523884c', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '9328ab50ac29585c0337fa3070685d57ff587754', id: "info", class: "info" }, this.info)), h("div", { key: '340b8b46519c2c1a50ed2eb85d9f1f198f5d8be9', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '26bf56597d4ac27be5127861021dace5ff1ca548', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -390,13 +390,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: 'b40d08bcc3ed45ce20097cb93b686980d5fc8bf8', onBlur: () => this.close(false) }, h("div", { key: 'ffdfde0f4bdc7f1919cc53b7de00d37b05008d09', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9b578bbf269e763fb9c442d7ae5919918cba33e2', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '2ffea32a87695ec10bc65732dcc48670a4f67c2d', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'b18abce3643946bb4351211f810b6a4b3d6ff7ec', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '24ef6cb1056aec34e083cfdc31856eb3aba9d7a8' }, h("div", { key: '3e7a215fc35fe9a7cd90761a9299fcf107e931d5', class: "inner-wrapper" }, h("input", { key: 'a44f2dd6bd136e898f240bd7a5e21bdeaac535b0', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '167735fc61727d9b6f068881732fcf7e2ff0c167', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: '016a1f00b245ba172f3f169dd2a5fe5506efefd3', onBlur: () => this.close(false) }, h("div", { key: 'e831d564c3f40c550c64232315c70abe9f18d2b5', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'afcbacb671fe9e6cf92c16ab8152c2ff42114fba', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '607dc37f7571ea67e5cf7163cc3d58d7e4fdd2b2', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'fd5a00ab8125419c3a046cc7d1dacc3ea84595d5', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'cd371331471f604571197a0f5b560f84533dbdc5' }, h("div", { key: 'e99fb3f0ad4432f42292c4263c5953d54bd43b20', class: "inner-wrapper" }, h("input", { key: '4d98f9bdd05127f9f62849f06c18ebbe363f4d09', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '0f239c4fbaa9882c1e7195fbf21e28b304f08d85', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { key: 'c1f5954ccd548070d23e87eb612f60530193d7b1', class: "svg-icon svg-time" })), h("ul", { key: '766906f94f132aaa6448558fa07d19c08881f188', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: 'fc20e9078d5f1a309e0e16c49704c73415cf291c', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'ad8120274f5f3a671c92d4b1a7663f51338db2cf', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '526bb1be8422122744f54b89eac5b165ba21093d', class: "svg-icon svg-time" })), h("ul", { key: '463c60e7e63ebb96b6235b6e70c684f8e16bf286', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '953f663fc062c4ed512d34b86b462c879de715c9', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'f213fc5946d1dff54582211ec45b9ab970f95c40', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -278,11 +278,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '321d03ab95c9e77b4e2b23fd833231e6fa03c64e', class: `size-${this.targetSize}` }, h("button", { key: '4d529ff8aa85c7802dbeca145ee0b82d6880d6db', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
+        return (h(Host, { key: 'f345461d843619f11ea783e6918968e4e5867720', class: `size-${this.targetSize}` }, h("button", { key: '8439741b61569e3ca58016982679f8157f28e0c2', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'ccc4a3a9dfa81a1b0dd8fb4ecbca7976f2aff6dc', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '38c98942ca1bd5101e3155a3c48a2571a7523388', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '9dbfd9cf354be99641757f5a3495725b0e9c5485', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '2869c2962e8f77e62b923dd05995f9cf7133ad75', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -141,7 +141,7 @@
   font-size: 0.75rem;
   font-weight: 700;
   min-height: 2.75rem;
-  padding: 12px 1.3333333333em;
+  padding: 8px 1.3333333333em;
   cursor: pointer;
   position: relative;
   display: flex;
@@ -390,7 +390,9 @@
   border-color: var(--wmcolor-button-background-positive-hover);
 }
 :host .wm-button.-selector, :host .wm-button.-selector-primary {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
   font-family: inherit;
   font-weight: 700;
   font-size: 0.75rem;

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

@@ -388,9 +388,9 @@ export class Uploader {
         return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: 'b22dffcd6b12fe591d54a6c5116d785268ce3d6e', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '8cd7697484f8a74e485f27b7a230c65414b227c9', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: '05add4c4caf9470fbc0ba58055850489aaa19561', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '9890e737b7adf96339895bd033d9c733442385a6', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '4e5094bc9085b2174391c99747d4a56a66186aa3', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: 'e5f6c761d81c2349e0889cde728f716cbd30bd55', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-05T18:50:56",
+  "timestamp": "2026-08-18T14:15:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",
@@ -30,7 +30,7 @@
         },
         {
           "name": "usageNotes",
-          "text": "- The default type is `icon` (three-dot \"more options\" button). Use `text` for a labelled trigger, `selector` or `selector-primary` for a select-box appearance.\n- `button-text` is required when `action-menu-type` is `text`, `selector`, or `selector-primary`.\n- `tooltip` is required when `action-menu-type` is `icon`."
+          "text": "- The default type is `icon` (three-dot \"more options\" button). Use `text` for a labelled trigger, `selector` or `selector-primary` for a select-box appearance.\n- `button-text` is required when `action-menu-type` is `text`, `selector`, or `selector-primary`.\n- `tooltip` is required when `action-menu-type` is `icon`.\n- `icon` is optional for `text`, `selector`, and `selector-primary` types, rendered alongside `button-text`. For `icon` type, `icon` overrides the default \"more options\" icon."
         },
         {
           "name": "example",
@@ -40,6 +40,22 @@
           "name": "example",
           "text": "{react} Icon action menu\n<WmActionMenu tooltip=\"More options\">\n<WmMenuitem>Edit</WmMenuitem>\n<WmMenuitem>Delete</WmMenuitem>\n</WmActionMenu>"
         },
+        {
+          "name": "example",
+          "text": "{html} Icon action menu with a custom icon\n<wm-action-menu icon=\"#filter\" tooltip=\"Filter options\">\n<wm-menuitem>All</wm-menuitem>\n<wm-menuitem>Unread</wm-menuitem>\n</wm-action-menu>"
+        },
+        {
+          "name": "example",
+          "text": "{react} Icon action menu with a custom icon\n<WmActionMenu icon=\"#filter\" tooltip=\"Filter options\">\n<WmMenuitem>All</WmMenuitem>\n<WmMenuitem>Unread</WmMenuitem>\n</WmActionMenu>"
+        },
+        {
+          "name": "example",
+          "text": "{html} Icon action menu with a rotated icon — reuse directional icons with icon-rotate.\n<wm-action-menu icon=\"#back\" icon-rotate=\"180\" tooltip=\"Forward options\">\n<wm-menuitem>Skip</wm-menuitem>\n<wm-menuitem>Skip all</wm-menuitem>\n</wm-action-menu>"
+        },
+        {
+          "name": "example",
+          "text": "{react} Icon action menu with a rotated icon\n<WmActionMenu icon=\"#back\" iconRotate={180} tooltip=\"Forward options\">\n<WmMenuitem>Skip</WmMenuitem>\n<WmMenuitem>Skip all</WmMenuitem>\n</WmActionMenu>"
+        },
         {
           "name": "example",
           "text": "{html} Text action menu\n<wm-action-menu action-menu-type=\"text\" button-text=\"Actions\">\n<wm-menuitem>Edit</wm-menuitem>\n<wm-menuitem>Delete</wm-menuitem>\n</wm-action-menu>"
@@ -48,6 +64,14 @@
           "name": "example",
           "text": "{react} Text action menu\n<WmActionMenu actionMenuType=\"text\" buttonText=\"Actions\">\n<WmMenuitem>Edit</WmMenuitem>\n<WmMenuitem>Delete</WmMenuitem>\n</WmActionMenu>"
         },
+        {
+          "name": "example",
+          "text": "{html} Text action menu with an icon\n<wm-action-menu action-menu-type=\"text\" button-text=\"Actions\" icon=\"#edit\">\n<wm-menuitem>Edit</wm-menuitem>\n<wm-menuitem>Delete</wm-menuitem>\n</wm-action-menu>"
+        },
+        {
+          "name": "example",
+          "text": "{react} Text action menu with an icon\n<WmActionMenu actionMenuType=\"text\" buttonText=\"Actions\" icon=\"#edit\">\n<WmMenuitem>Edit</WmMenuitem>\n<WmMenuitem>Delete</WmMenuitem>\n</WmActionMenu>"
+        },
         {
           "name": "example",
           "text": "{html} Selector action menu\n<wm-action-menu action-menu-type=\"selector\" button-text=\"Sort by\">\n<wm-menuitem>Name</wm-menuitem>\n<wm-menuitem>Date</wm-menuitem>\n</wm-action-menu>"
@@ -216,6 +240,131 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "icon",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "description",
+              "text": "Icon to display alongside `button-text` for `text`, `selector`, and `selector-primary`\ntypes, or in place of the default \"more options\" icon for the `icon` type. Formats: `'#icon-name'`\nfor a Ripple icon (e.g. `'#edit'`), or `'/path/to/file.svg#symbol-id'` for a local SVG sprite symbol."
+            },
+            {
+              "name": "default",
+              "text": "\"#more-options\" when action-menu-type is 'icon'; unset otherwise"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "iconFlip",
+          "type": "\"horizontal\" | \"vertical\" | undefined",
+          "complexType": {
+            "original": "\"horizontal\" | \"vertical\"",
+            "resolved": "\"horizontal\" | \"vertical\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon-flip",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "description",
+              "text": "Flips the icon along the specified axis. For use with the icon property."
+            }
+          ],
+          "values": [
+            {
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "iconRotate",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon-rotate",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "description",
+              "text": "Rotates the icon by the given number of degrees. For use with the icon property."
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "iconSize",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon-size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "description",
+              "text": "Change size of the icon to fine tune the visual rendering if it appears too large or small. Not\nintended for general sizing. Accepts any valid CSS size value, e.g. '22px' or '1.3rem'."
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "labelForIdenticalButtons",
           "type": "string | undefined",
@@ -245,6 +394,37 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "max-width",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "description",
+              "text": "Maximum width of the dropdown. Accepts any valid CSS width value (e.g. \"300px\", \"20rem\", \"50%\"). The dropdown may still render narrower to fit its content or the space available."
+            },
+            {
+              "name": "default",
+              "text": "\"25.875rem\""
+            }
+          ],
+          "default": "\"25.875rem\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "tooltip",
           "type": "string | undefined",
@@ -935,7 +1115,7 @@
           "docsTags": [
             {
               "name": "description",
-              "text": "Overrides the default icon size. Accepts any valid CSS size value, e.g. '22px' or '1.3rem'."
+              "text": "Change size of the icon to fine tune the visual rendering if it appears too large or small. Not\nintended for general sizing. Accepts any valid CSS size value, e.g. '22px' or '1.3rem'."
             }
           ],
           "values": [

package/dist/docs/props-reference.json

@@ -30,12 +30,43 @@
         "default": "false",
         "required": false
       },
+      {
+        "name": "icon",
+        "attribute": "icon",
+        "type": "string | undefined",
+        "required": false
+      },
+      {
+        "name": "iconFlip",
+        "attribute": "icon-flip",
+        "type": "\"horizontal\" | \"vertical\" | undefined",
+        "required": false
+      },
+      {
+        "name": "iconRotate",
+        "attribute": "icon-rotate",
+        "type": "number | undefined",
+        "required": false
+      },
+      {
+        "name": "iconSize",
+        "attribute": "icon-size",
+        "type": "string | undefined",
+        "required": false
+      },
       {
         "name": "labelForIdenticalButtons",
         "attribute": "label-for-identical-buttons",
         "type": "string | undefined",
         "required": false
       },
+      {
+        "name": "maxWidth",
+        "attribute": "max-width",
+        "type": "string",
+        "default": "\"25.875rem\"",
+        "required": false
+      },
       {
         "name": "tooltip",
         "attribute": "tooltip",