@watermarkinsights/ripple 5.31.1 → 5.32.0-alpha.2

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

@@ -379,27 +379,29 @@ export class NestedSelect {
         }
     }
     render() {
+        const showRequired = this.labelPosition !== "none" && this.requiredField;
         const buttonProps = {
             id: "selectbtn",
             ["disabled"]: this.isDisabled,
             ["aria-controls"]: "menu",
-            ["aria-labelledby"]: "label selectbtn",
+            ["aria-labelledby"]: showRequired ? "label required selectbtn" : "label selectbtn",
             ["aria-describedby"]: "error",
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: '28721d29f87913f39180ad0e72d68297e167aabd', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '66bab6ee6ce7680e8795d7e51c942acf80e645fe', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '69a4693fc5b72bf30b2c4a36586f4e7f4481cc94', class: "label-wrapper" }, h("label", { key: '94e6e622fdb67ea8d1837d02717f96ce34dad927', 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.labelPosition !== "none" && this.requiredField && (h("span", { key: '720f3d0e616acc6714f15b34648ade9fb8748bfe', class: "required" }, h("span", { key: 'a9f2ceb1e4b3a526f3b8568bd64ec3f07f072412', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'b6845e93bddce7f1c4c17af38696812d59610040', "aria-hidden": "true" }, "*")))), h("div", { key: '3e52b56e33d917800929bc8bf5fd9e3afd2ae914', class: "button-wrapper" }, h("button", Object.assign({ key: '218ee825e9bce6b7105948c7ba6b84578389e4b8' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'b9cb961706c6aa1234554ec3e4cd004b541bb50a', class: "overflowcontrol" }, h("span", { key: '4493aaa530ba9eb98eca6637f08c1194898ccaa3', class: "button-text" }, this.renderButtonText())), h("div", { key: '44877d1b10769a4129f512882c9aab5d250d42a0', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '8e43fa450da8d49640b8b2939a33375b4111d07f', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'ebd32788eed91b24e3cfa5170f38451f6f5dcf07', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: 'a26fd5c0ca91f13eefb112e16eab701ee72cd2e7', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
+        return (h(Host, { key: 'a68883c4b91d5657bf4205e5e4eea583f7b27da7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '208fe8e9504e1f5ac3c02b889b55690c16fd5579', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'ae05c832f67ae6fb126cc0a1d0e8c8b4e3e50fda', class: "label-wrapper" }, h("label", { key: '7251caee0c1dd0575b64746e3ca9bc8702796be2', 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;
+        // instead the sr-only text is included in the button's aria-labelledby above
+        showRequired && (h("span", { key: 'e2a5d5a08880f83d0280df8527b46c60fc8f9db6', class: "required" }, h("span", { key: 'eccbd981c72ac77b46b0810f9652b5156eb6340c', class: "sr-only", id: "required" }, globalMessages.requiredField), h("span", { key: '5ed448d3ef22f085bcff6cd70d2e9091ef2ffdb5', "aria-hidden": "true" }, "*")))), h("div", { key: '68c8510b8f441c3b2d3fb607332230d2ae8d6b81', class: "button-wrapper" }, h("button", Object.assign({ key: '996ee1b67e4e6b08ffffc97b47e0fafae2442298' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3efb4b2135bdf475cc1c802264e2d1ce58c54700', class: "overflowcontrol" }, h("span", { key: 'ae40108a455f58eccc927c5e6dd7c81fca2ca588', class: "button-text" }, this.renderButtonText())), h("div", { key: 'e9db75cdde3506248394b20b49e70355e44318fa', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '2467344271355d03712b5a1d182cc78590e9e9b3', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4d90abd5757a5c76de2d7d0e3cecf16977806ba7', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: '549d7d18a18d175e23e50d4978f0f53a1eb16d27', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "option-text" }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")), h("div", { class: "svg-icon svg-next" })));
-        })), h("div", { key: '9eaf77661f0a01d3baf83e5561758d7e72ad8ae0', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'fb8d468ebe73213c6bd9718a94bbb1c16867594c' }))), h("div", { key: '0f8c4ec2f26078d8c7acd94ec1dd1722eb26c073', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'c06e2cef4a352f362363afb1129d439e62466672', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: '016cecd76a346cada56d6c78e67f69e9a9e3c3f4', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'dacc4ad67dee6da1495c927bf6640017b53be05f' }))), h("div", { key: '4fe7d19ef2b4ff86b6a8efbb7314af8ed3d7ddca', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '8eef1af6ecb84d46a52ead6573ccf119e00314b5', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -420,14 +420,16 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: '4ea10bc4736006950d863a513f50a2a73366aa1e', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '99363aab312b88e0847350e96b46d38049f5f489', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '60e13625d9336385f2179381f95af487bd050a02', class: "label-wrapper" }, h("label", { key: '197b112ab9956dbc672107a5c3e4d141d5e5cedf', 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.labelPosition !== "none" && this.requiredField && (h("span", { key: 'fa40e8edbd624c23ef97237a44e9685b37d07bb6', class: "required" }, h("span", { key: 'fa1243a9724976c902a9779b989fc418da2de95c', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '33ba6df202208fe8436b9b6d8d9f91a160227626', "aria-hidden": "true" }, "*")))), h("div", { key: '053feab1a3b1d86c1de08ee3e75a80a6d32cee85', class: "button-wrapper" }, h("button", { key: 'd4d7f7e8546fa4af9e3a312f33d5a11b1f7b5000', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '8b52d96e728bb9b00c937f60850604e53b4a5dc7', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '09b96adf9c0c4d448e0986a533851d1ada9ffb65', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '2ed26a53748db89f8cb9b275f9ff6a5f4595f890', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '121c570df9bd3c76c49b67b1a21d013119919204', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '2eaadace0dc571cc37274ff0c64f8c2c2eaf6769', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4d832c2c7e867fef03f487f77c69f785e5c139d8',
+        const showRequired = this.labelPosition !== "none" && this.requiredField;
+        return (h(Host, { key: 'ced255b4952cb355e64a37c53d744f66dbb607fe', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '7c29004c77f5982d459b476099108b9b152db617', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'fd4d15e1018687905a1849b2cce19f7b761467ec', class: "label-wrapper" }, h("label", { key: 'bfb1e40ea7b2c8045bf2d150ce19760ce02b34c6', 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;
+        // instead the sr-only text is included in the button's aria-labelledby below
+        showRequired && (h("span", { key: '6738406a9664e94ff9c14ada164510515b7883c1', class: "required" }, h("span", { key: '9f80585f26399f3671ce0ec9d31d18865deb383c', class: "sr-only", id: "required" }, globalMessages.requiredField), h("span", { key: '7265acc26874688ee8fd9cd39d9ba5dd6a13bbf1', "aria-hidden": "true" }, "*")))), h("div", { key: 'b4a0e36333f41f5b95da51423a5283e1a1311ad0', class: "button-wrapper" }, h("button", { key: 'ae8b2f9b05dba3bfc4c22887f779b3f764b8ac80', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": showRequired ? "label required selectbtn" : "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'cc6aa528875619ffa66466c898c1615606f7e77a', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c0d399e401e2addd03956f97c17c025b30b59cb7', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '2f59d1b2831538f79f20a7dbde8d5e51d1de481f', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '807823299998d2a579081796b616be0e1914303b', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '8e02c61601f988efb3bb4946805465e29b52fd0d', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '30e094628dd40cf00a7f596daa78ab08441cd474',
             // is-open is for the CSS transition in modern browsers
             // hidden is to wait for position calculations in Firefox
             class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: 'f0dec6d41d9b7a57de96f1ee82f2456844dae69b', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: 'f677d7abe768197d9a8b4062c58b3ff4771116a9', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -435,7 +437,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '06319b2201dc2e96e9f574380c6acebf0cd5b4bc' }))), this.info && (h("div", { key: 'e61705c1dcbbb5353a19b015753aaf91f8f25624', class: "info" }, this.info)), h("div", { key: 'd9baaf31ca16482e3fd973224bad33f11d93724a', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '6652f9df5408430cc6c88000aa407c45816698ca', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '4fba591bed450efbf8d242d9520399bb23613d61' }))), this.info && (h("div", { key: 'fe092e92f1f7bd54c205a314070bac19b47d7303', class: "info" }, this.info)), h("div", { key: 'efa10dc248cb71f8efe4570c7e872e939ca3e95d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'ebd8421a2140d1f15e7c12a026cc3587a0b6f222', 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"; }

package/dist/collection/components/wm-action-menu/wm-action-menu.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;
@@ -1634,6 +1636,7 @@ wm-action-menu:focus {
   -ms-border-radius: 3px;
   border-radius: 3px;
   min-width: 11.4375rem;
+  max-width: var(--dropdown-max-width);
   visibility: hidden;
   box-shadow: 0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   background: var(--wmcolor-option-border);
@@ -1675,7 +1678,7 @@ wm-action-menu:focus {
     inset-inline-start: var(--dropdown-left, 0) !important;
     transform: translate(0, var(--dropdown-translate-y, 0)) !important;
     max-height: var(--dropdown-max-height, none) !important;
-    max-width: var(--dropdown-max-width, none) !important;
+    max-width: min(var(--dropdown-polyfill-max-width, 9999px), var(--dropdown-max-width)) !important;
   }
   .dropdown.hidden {
     visibility: hidden;

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -23,6 +23,7 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  * - 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.
  * - `button-text` is required when `action-menu-type` is `text`, `selector`, or `selector-primary`.
  * - `tooltip` is required when `action-menu-type` is `icon`.
+ * - `icon` is optional for `text`, `selector`, and `selector-primary` types, rendered alongside `button-text`. For `icon` type, `icon` overrides the default "more options" icon.
  *
  * @example {html} Icon action menu (default)
  * <wm-action-menu tooltip="More options">
@@ -36,6 +37,30 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  *   <WmMenuitem>Delete</WmMenuitem>
  * </WmActionMenu>
  *
+ * @example {html} Icon action menu with a custom icon
+ * <wm-action-menu icon="#filter" tooltip="Filter options">
+ *   <wm-menuitem>All</wm-menuitem>
+ *   <wm-menuitem>Unread</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Icon action menu with a custom icon
+ * <WmActionMenu icon="#filter" tooltip="Filter options">
+ *   <WmMenuitem>All</WmMenuitem>
+ *   <WmMenuitem>Unread</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Icon action menu with a rotated icon — reuse directional icons with icon-rotate.
+ * <wm-action-menu icon="#back" icon-rotate="180" tooltip="Forward options">
+ *   <wm-menuitem>Skip</wm-menuitem>
+ *   <wm-menuitem>Skip all</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Icon action menu with a rotated icon
+ * <WmActionMenu icon="#back" iconRotate={180} tooltip="Forward options">
+ *   <WmMenuitem>Skip</WmMenuitem>
+ *   <WmMenuitem>Skip all</WmMenuitem>
+ * </WmActionMenu>
+ *
  * @example {html} Text action menu
  * <wm-action-menu action-menu-type="text" button-text="Actions">
  *   <wm-menuitem>Edit</wm-menuitem>
@@ -48,6 +73,18 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  *   <WmMenuitem>Delete</WmMenuitem>
  * </WmActionMenu>
  *
+ * @example {html} Text action menu with an icon
+ * <wm-action-menu action-menu-type="text" button-text="Actions" icon="#edit">
+ *   <wm-menuitem>Edit</wm-menuitem>
+ *   <wm-menuitem>Delete</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Text action menu with an icon
+ * <WmActionMenu actionMenuType="text" buttonText="Actions" icon="#edit">
+ *   <WmMenuitem>Edit</WmMenuitem>
+ *   <WmMenuitem>Delete</WmMenuitem>
+ * </WmActionMenu>
+ *
  * @example {html} Selector action menu
  * <wm-action-menu action-menu-type="selector" button-text="Sort by">
  *   <wm-menuitem>Name</wm-menuitem>
@@ -105,10 +142,15 @@ export class ActionMenu {
         this.tooltipPosition = undefined;
         this.actionMenuType = "icon";
         this.buttonText = undefined;
+        this.icon = undefined;
+        this.iconSize = undefined;
+        this.iconRotate = undefined;
+        this.iconFlip = undefined;
         this.disabled = false;
         this.tooltip = undefined;
         this.labelForIdenticalButtons = undefined;
         this.darkMode = undefined;
+        this.maxWidth = "25.875rem";
     }
     get horizontalPosition() {
         var _a, _b, _c;
@@ -126,6 +168,9 @@ export class ActionMenu {
             ? this.actionMenuType + "only"
             : this.actionMenuType;
     }
+    get resolvedIcon() {
+        return this.icon || (this.actionMenuType === "icon" ? "#more-options" : undefined);
+    }
     handleTabbingOn() {
         this.isTabbing = true;
     }
@@ -297,7 +342,7 @@ export class ActionMenu {
         // Clear any previously set positioning properties
         this.el.style.removeProperty("--dropdown-translate-y");
         this.el.style.removeProperty("--dropdown-max-height");
-        this.el.style.removeProperty("--dropdown-max-width");
+        this.el.style.removeProperty("--dropdown-polyfill-max-width");
         this.el.style.removeProperty("--dropdown-left");
         // HORIZONTAL POSITION
         // action menu usually is on the right side of the screen,
@@ -312,11 +357,11 @@ export class ActionMenu {
         if (dropdownWidth > spaceLeft && dropdownWidth > spaceRight) {
             if (spaceLeft >= spaceRight) {
                 this.el.style.setProperty("--dropdown-left", 0 + "px");
-                this.el.style.setProperty("--dropdown-max-width", (spaceLeft + dropdownWidth) + "px");
+                this.el.style.setProperty("--dropdown-polyfill-max-width", spaceLeft + dropdownWidth + "px");
             }
             else {
                 this.el.style.setProperty("--dropdown-left", spaceLeft + "px");
-                this.el.style.setProperty("--dropdown-max-width", spaceRight + "px");
+                this.el.style.setProperty("--dropdown-polyfill-max-width", spaceRight + "px");
             }
         }
         // VERTICAL POSITION
@@ -423,8 +468,36 @@ export class ActionMenu {
         }
         return null;
     }
+    renderIcon() {
+        const icon = this.resolvedIcon;
+        let defaultIconSize = "";
+        switch (this.actionMenuType) {
+            case "icon":
+                defaultIconSize = "24px";
+                break;
+            case "selector":
+            case "selector-primary":
+                defaultIconSize = "18px";
+                break;
+        }
+        const iconSize = this.iconSize || defaultIconSize;
+        let transform = "";
+        transform += this.iconRotate ? `rotate(${this.iconRotate}deg)` : "";
+        transform += this.iconFlip === "horizontal" ? "scaleX(-1)" : "";
+        transform += this.iconFlip === "vertical" ? "scaleY(-1)" : "";
+        const iconStyle = Object.assign(Object.assign({}, (iconSize && { "--icon-size": iconSize })), (transform && { transform }));
+        if (icon.match(/^\/\S*[#]\S*/)) {
+            // starts with /, any number of non-whitespace characters, followed by #, followed by any non-whitespace characters
+            // Relative Path & Symbol
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-icon", style: Object.assign(Object.assign({}, iconStyle), { "--icon-fill": "currentColor" }), fill: "currentColor" }, h("use", { href: icon })));
+        }
+        else {
+            // Icon ID (strip the leading '#')
+            return h("span", { class: `svg-icon svg-${icon.replace(/^#/, "")}`, style: iconStyle });
+        }
+    }
     render() {
-        return (h(Host, { key: 'bcb407050fc69d71a79b449e63dafe6b0159bec5', onBlur: () => this.close(false) }, h("div", { key: '12541c789fc0d6bbf5dbf2823e7ade482c59ec8e', class: getTextDir() }, h("button", { key: 'd603c8ae233136f040dd316dc96a0e08892015e0', ref: (el) => (this.menubtnEl = el), id: "menubtn", class: `wm-button -${this.internalButtonType}${this.darkMode ? " dark" : ""}${this.isTabbing ? " user-is-tabbing" : ""}`, disabled: this.disabled, "aria-label": this.internalButtonType === "icononly"
+        return (h(Host, { key: '6ca277097a12dc23fac1bea780e681120248cd09', onBlur: () => this.close(false) }, h("div", { key: '0de3b92a6f695e00316d7da6976c9f7dfd8f01b3', class: getTextDir() }, h("button", { key: 'b05a67adf34b65b38806bc633be8a620ebc55126', ref: (el) => (this.menubtnEl = el), id: "menubtn", class: `wm-button -${this.internalButtonType}${this.darkMode ? " dark" : ""}${this.isTabbing ? " user-is-tabbing" : ""}`, disabled: this.disabled, "aria-label": this.internalButtonType === "icononly"
                 ? this.labelForIdenticalButtons || this.tooltip
                 : this.labelForIdenticalButtons || undefined, "aria-expanded": this.isExpanded ? "true" : "false", "aria-haspopup": "menu", popoverTarget: "menu", popoverTargetAction: "toggle", onMouseEnter: () => this.actionMenuType === "icon" &&
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing &&
@@ -432,9 +505,9 @@ export class ActionMenu {
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onBlur: (ev) => {
                 hideTooltip();
                 this.handleButtonBlur(ev);
-            } }, this.actionMenuType === "icon" && (h("span", { key: 'a9621272475b639f9a864334da3f0b4fe0ac3394', class: "svg-icon svg-more-options", style: { "--icon-size": "24px" } })), this.actionMenuType !== "icon" && h("span", { key: 'c56b6dcf36f64aef22fd4785ad1eef6ce2fc8346', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: '68fe624b9ed345b6c3d352907e329f28f9c9ab99', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: '1af323f300766a8e2e50d496467f3fe5872a9c0a', class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.horizontalPosition}`, id: "menu", popover: "auto", tabindex: -1, role: "menu", ref: (el) => (this.dropdownEl = el),
+            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: '78d4ada117aef42539cc2281944ffd638c018211', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: 'a6d15691ee26adc51ba5c7c9216093f71b7e91e9', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: '9d9c96e707b8b3bcc69c5721f7c660f07ff6987e', class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.horizontalPosition}`, id: "menu", popover: "auto", tabindex: -1, role: "menu", style: { "--dropdown-max-width": this.maxWidth }, ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: '0470b113d6a4adeea8c4273bebcebd7ccbc1c8b5' })))));
+            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: 'c6090a226147baec7cf75e9e44b915213dd7372f' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -521,6 +594,89 @@ export class ActionMenu {
                 "attribute": "button-text",
                 "reflect": false
             },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "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"
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "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'."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-size",
+                "reflect": false
+            },
+            "iconRotate": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Rotates the icon by the given number of degrees. For use with the icon property."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-rotate",
+                "reflect": false
+            },
+            "iconFlip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"horizontal\" | \"vertical\"",
+                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Flips the icon along the specified axis. For use with the icon property."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-flip",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -610,6 +766,30 @@ export class ActionMenu {
                 },
                 "attribute": "dark-mode",
                 "reflect": false
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "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\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "max-width",
+                "reflect": false,
+                "defaultValue": "\"25.875rem\""
             }
         };
     }

package/dist/collection/components/wm-button/wm-button.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-button/wm-button.js

@@ -379,7 +379,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'ce9be3f2505db9ba07877590dd95d4b0ea451b06', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '5aade36acf2308a3c3d42cf4e787c4a990a53675', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-expanded": this.isAriaExpanded !== undefined ? this.isAriaExpanded.toString() : undefined, "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), !this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly") && (h("span", { key: '2defd43349eb45ac208aa2947f7891096dc17290', class: "button-text" }, h("slot", { key: 'f5e77661e77fea0f14a000a239b959d60e7ed6a1' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'b66859dc4b664e69c5902c4722d8293d4fa37a04', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: '2d96447b9cf2f78362c6b0e1466c7533c2d1abfa', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'acb109eb78ab924c4bdc064ab8ef33f4f6226b6a', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-expanded": this.isAriaExpanded !== undefined ? this.isAriaExpanded.toString() : undefined, "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), !this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly") && (h("span", { key: '5779c82ef2674b11ad3b0fb6689e9dc7407ef930', class: "button-text" }, h("slot", { key: '0e5f09c558c1dbe365570ec25e47706557421295' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'a864033fdfe5d406bd315878565bad55b9e696ae', class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }
@@ -486,7 +486,7 @@ export class Button {
                 "docs": {
                     "tags": [{
                             "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'."
                         }],
                     "text": ""
                 },

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

@@ -230,7 +230,7 @@ export class File {
         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: 'bfeb57d849f26080b17cce27daa1e917958ae787', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '4235708fe3cacf57e43fd0f64e886ed00b5fc94c', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { key: '34e7d152296addfbecd5b011b5878f8432d15c8a', role: "list", class: "list-wrapper" }, h("slot", { key: '4ecf4cae644c132effd2b68e45c26ac8a1367378' })));
+        return (h("div", { key: 'c8830f63658b3e7ca29c4137bf68ece3f7c32bd1', role: "list", class: "list-wrapper" }, h("slot", { key: '73017b161ffc1ec2a96f3ce91a7fc0f497bd3b49' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -284,7 +284,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: '3f7de7dd23923c27f00c2f9141383e8c72eb0f98' }, h("dialog", { key: '9cc04d0317ca8955baf8998a75b2e38075ff052c', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '4ff2bb9661c927afc4708b1dcf874a9ce37369ce', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '5315207d80c67e0c4b66035998b15b71f50bf391', class: "flyout-content" }, h("slot", { key: 'd861d8ff96ce0b769f1e2737d3a6ee0b43ed561c' })), this.renderFooter(), h("div", { key: 'ecc54df1e99de428c795c6494fbf115d9ee92798', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: '3480e2236f2efe3dc8b3a1978cc0cae70898bfb2' }, h("dialog", { key: '621b9809547a8508f9bc7e0664cafd434894695c', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '382614b0b65bd5020ec25f326853573b4029d555', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '3a880f538fc5b88df8bc67379a6135f9b6717943', class: "flyout-content" }, h("slot", { key: '3dfb1293760a9e1b155f96fc0381d3088eea8916' })), this.renderFooter(), h("div", { key: '5f16dd2f1a172c45db7a1d95abc9e2495821af50', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     static get is() { return "wm-flyout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,7 +199,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { key: 'c931367a155c4eae1bd0d2439db88121b0e3a0cd', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '3490e7036c092caa470ca5e351977ada8e671a84', class: "label-wrapper" }, h("label", { key: 'e9dbae2b803356bb1e478848fbe4b9ccb375ad40', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '3fecb988224ef8fb83152c0b7064bbb597dab56f', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'a9189aede977f6e11dd073f5a1c60d18af2a1ac5', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '33094bd5cef0c9a20951fc3967886b92d0ebab3a', class: "inner-wrapper" }, h("div", { key: '3984b4b8f0d940271c51809c25cfdf01aeb66629', class: "text-after-wrapper" }, h("div", { key: '11f8193e69a9e360bca130ace6cfe96b271378ea', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '35914e1eb9ac4bc78f70fcea0fe1f33ccca46575', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'c0ba715d0ea2107da78cbce2cb04a493fd02faeb', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '88550206453f0549d023c03478d9afbc70e81f5c', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '30e206e3705468e79fd3e0492ed27ad631565d58', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '2c723e71a6ae0d74c82292d49989f91920fea1ab', id: "info", class: "info" }, this.info)), h("div", { key: '8e099e1bf7bb4be52dedd07c14bd8359e088e3bb', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'ae05153805380b57f130e3265646c1f838228f91', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'f029cb482e12e2106647ce317bdaea70ccbc5deb', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '0730cb26065750f4e1e84dab1b799399855f4558', class: "label-wrapper" }, h("label", { key: '9b872282962f7686ce34858d6402409636a4533d', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '9455bc28a96b71082c3b0fadc58127407df8eeb2', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'd4894b2ed26c65893ae093ad96aae7affd6dd31e', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '19a2693dec4ad1ac01cfb00460a5c5f0609607b7', class: "inner-wrapper" }, h("div", { key: '11acb3166e172b531db731f1f68dedb73c7af24c', class: "text-after-wrapper" }, h("div", { key: '232c94414b26198402c83d1e9d9cc76ddf668aeb', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '0d04dff7f1e7a57b447cee21ad8162b52eb9402f', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '268f601a76ae701036bc1749c19b401e1206ee6b', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '9bea655ebf141ff85838d4bbf57011670f466ea8', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '95be3668a4d55c3c27ac2f8cfc422d8ec794012e', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'dfee1b0ae9b42403e58dfc67dd2f4aaf535c7f0f', id: "info", class: "info" }, this.info)), h("div", { key: '2918e12db2c5c0371bb0145fe2d7a30b321767fc', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '7e317a16d0fc0e475e52541085f7a86c2f29280d', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -134,7 +134,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '403704be13ca1f9c938e18a76f8442cbbaa4aab9', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'c5818b2f8bd133a846abcd493f70c581b9d7113b', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '05f047e1ffad3376e1aaeffd060ed52a6a3e80bf', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: 'df065a5c3a79129c2b9cefde231628216664b1b2', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '5c60b57b2bb589b21f557c22a169274afa7230e0', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '487d728c09e1a5d06f49e12f7fc05c25bf5a5ae5', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -64,7 +64,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { key: '87d7243df7bc7f378745e244ec0aa7aff9b39e6e', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '2c61acfbb073add2f98429b8b10bf7b3c282fa5a', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'dea38f80193dc130ee3fefc097fd8a3da8a6542a', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'ece0847d5a267b49daf8ffe39c9ce30f17b2d83c', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a113b1e908ecd8d8b79efa6023fe480073cdfeca', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+        return (h("div", { key: '9a16f00bdebb569aeed87a3b2b73d35af8c0a4bf', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '0a2ba72826a1dc91e46ee4074c2cc112683c1254', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '345faea938db4b562c62fc522cae7841c1fb4e7e', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '46b1506ffca5d53e2658b605c34c3a2cb276666d', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '65ce625134906a1b346fe5ae429530468a3cb681', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -44,7 +44,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: 'd9d72742f8783ffbd7203e31c5f9f108cb6cf2e1' }, h("div", { key: 'd40949a6e0292e8c5d28a2281a1f4714e2ca71c6', class: "wm-wrapper" }, h("div", { key: '7068a4d59289893a61eab7a4edfedf00d3a492e1' }, h("h2", { key: 'f5a411c46d678c1f2451aaa447a013db7345fc2d', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'f19829eeb07d5a06b9d167303e8bfbf3d695d447', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'adb8c479ad9bfcd32f69f3db3de60bbeb91a1722', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: '7c9fd190efac76681c9a6ed9f6d10a3804d8af1c' }, h("div", { key: 'e42f9acad1959adad33bde5a2704e011a28e9b64', class: "wm-wrapper" }, h("div", { key: 'bd28712f251564d5ef3e054589015ca78b901ccd' }, h("h2", { key: '4d96710920f024b5329d739c46828e1179639d05', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'b9708984ef35708bb21114c19e9aae81c078729a', class: "subtitle" }, this.subheading))), h("wm-button", { key: '7d068016adb5873599da0f5e992dae0e0d370099', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {

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

@@ -222,11 +222,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: 'b12938af955f8e449f1016a0e37e40f74256d146', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '09ffe7cf312d3fdd0e1a1201a6a70ebfd811e7ca', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: 'dd607f6c4ee356688f4f9ea164a2659d6cc6d2c1', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'b9aabc158532745be3d646a234826c554e0e9c13', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: '6ba58b80667b11e9444d81f54d7d6cc7218cd6fc', class: "wm-tooltip" }), h("slot", { key: '127d606ae9ec8867e1cb8b8a2e213dd551ba5acf' }), h("div", { key: 'a523ca42ecfac9e4776b0e694efe0c5843169d6f', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '9b0b3f500a85ee46e9dda69faad6707312a40ae5', class: "wm-tooltip" }), h("slot", { key: '7ae0b5fdc1c03e0e7c078dcdecafc01976da1afa' }), h("div", { key: '842538086c834f6f339625d4a90bf142f9812b84', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.js

@@ -31,7 +31,7 @@ export class ModalPssFooter {
         parentModal.emitSecondaryEvent();
     }
     render() {
-        return (h("div", { key: '6428149a4963fd04f4deb0380988b443d871d75c', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'daea7ee16641e4b981fe34941f0d91aff85c6dde', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '4bc033fba7210f02fc8cfaf170db5ce196d4393a', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '8df6a38a5693fc86594764dd865532776dea4f08', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '40a2e21e749ef5190512413a6fbd29f2b2b0c429', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+        return (h("div", { key: 'f592a059ae4aaad7571752f92087f7b9719a951f', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'f543fc5dac24255f0708d18e8470979af6574e17', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6a14d3340b463dd09830d51c1a60a1fd94bcc92e', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '67df9f0e567f5a92f164ef646921b2dd9bd87fec', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '18f10246fec291061df3c6d22e11593dbf3faaf5', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
     }
     static get is() { return "wm-modal-pss-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.js

@@ -29,7 +29,7 @@ export class ModalPssHeader {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, { key: 'b45894c5864c446f35335eb0d31d1c9973982183' }, h("div", { key: '381f7a6174df2cc06bb75e8169eb230b5b608632', class: "wm-wrapper" }, h("div", { key: '2b36c6ca3beafe5caccc07d1b8af4fce10b984a9' }, h("h2", { key: '544df129fe4eac346d6f3a54d2ff0aabcbca89fe', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'da4038aa35d9690f921da30b8e3f6a141685dddb', class: "subtitle" }, this.subheading))), h("wm-button", { key: '7edc9dcc9158cf8369da12ed00a89a457c904b5c', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: 'a037746103bf701d915b0c5d5b9c39cbc747a3d0' }, h("div", { key: '74d6b2b03eb350dca3aeb12a39ba40fa133e4b86', class: "wm-wrapper" }, h("div", { key: '7ed4dd3ddbd37280a260b5bd187d53b16c4595dd' }, h("h2", { key: '7c2cf37829985cc2f1308c6541a9d51d16d96321', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '3ea6d08a5bc628cf81fee42d99194f0a8baaf75e', class: "subtitle" }, this.subheading))), h("wm-button", { key: '9ff2985d762a9be75b65f5d8a91d54321fd95cf2', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-pss-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal-pss/wm-modal-pss.js

@@ -119,9 +119,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { key: '58b1d2295b177cde87614bd9dba46d816fac2e22', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+        return (h(Host, { key: 'b3635bc8cde0f9a320a51a1aa96537a7c9f47529', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
                 this.focusLastElement.emit();
-            } }, h("div", { key: '56198ea82f7be20c80853a93c6d4fed3396c2baf', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '3b31f7ec36f12909b8d2e3462589998ff3119cd1', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: 'ddeaa0e69de0bb03a944551463d89d16ac2e1f37', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'b7a246888e73b7e04cd4c378ea9582d159d99d1e', class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }