@watermarkinsights/ripple 5.32.0-alpha.6 → 5.32.0-alpha.7

package/dist/cjs/{app-globals-804b4e6f.js → app-globals-57e6f2fa.js}

@@ -2,7 +2,7 @@
 
 require('./index-bb947bd5.js');
 
-const version = "5.32.0-alpha.6";
+const version = "5.32.0-alpha.7";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bb947bd5.js');
-const appGlobals = require('./app-globals-804b4e6f.js');
+const appGlobals = require('./app-globals-57e6f2fa.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/ripple.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bb947bd5.js');
-const appGlobals = require('./app-globals-804b4e6f.js');
+const appGlobals = require('./app-globals-57e6f2fa.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/cjs/wm-action-menu_2.cjs.entry.js

@@ -383,7 +383,7 @@ const ActionMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3d0a019d085382d974a333a147d9fa4c1695cb49', onBlur: () => this.close(false) }, index.h("div", { key: '7a62326756be39376945a4935f81514b190424a8', class: functions.getTextDir() }, index.h("button", { key: '0d8eafd60f79d7e0dfa94a839a0b5ef21939f292', 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 (index.h(index.Host, { key: '6c7311b0cadc7c88beff1e2584259568bef218c0', onBlur: () => this.close(false) }, index.h("div", { key: '16b4e94741a92bff557dcf71e0e228d4caad433a', class: functions.getTextDir() }, index.h("button", { key: 'aabfa7ea99c7ec00d478b0e81f1183c2e1d1101c', 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" &&
                 functions.showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing &&
@@ -391,9 +391,9 @@ const ActionMenu = class {
                 functions.showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onBlur: (ev) => {
                 functions.hideTooltip();
                 this.handleButtonBlur(ev);
-            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && index.h("span", { key: '3903548564ad4bae3c6d4eea0172fe5ad68bd892', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (index.h("div", { key: 'aad5b8cab7bb89e9273bde034c9f8928f51f97ff', class: "selector-icon svg-icon svg-expand-more" }))), index.h("div", { key: '2298561f54226051629fff570265e6a9e878d7dc', 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),
+            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && index.h("span", { key: '7134c8e7516c67d9c5b1441a0802bcca7bd86536', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (index.h("div", { key: '5c0525745f50cbf21b5108d521b370927d63de3e', class: "selector-icon svg-icon svg-expand-more" }))), index.h("div", { key: 'dacf7c949d0c14ae3d8eb4abfcbf75e288fab480', 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) }, index.h("slot", { key: '345949ab384b90abe4f7983cc22d5197bf8d0b7a' })))));
+            onToggle: (ev) => this.handleToggle(ev) }, index.h("slot", { key: '30a7fe43c511ab640cc63a03acae4a574201acbb' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -511,7 +511,7 @@ const Menuitem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ed1a446ae7791153dfb44ba6ae629ccae722b49c', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: '4b00c4bb75f3ea0f1ed8f46086e206da29999882', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: '9abacf612b24d2f54d62d9c80e5dc63379722349', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? index.h("div", { class: "description" }, this.description) : "")));
+        return (index.h(index.Host, { key: '17634e9132f3ed4e37b52ea200d46ba15b734d91', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: 'a5a21c6a0feb8bf58a8a4de9a0cefe620522abe3', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: 'd4302f14e6211ef9cad2486834523d43012ec428', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? index.h("div", { class: "description" }, this.description) : "")));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -33,8 +33,8 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  *
  * @example {react} Icon action menu
  * <WmActionMenu tooltip="More options">
- *   <WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>
- *   <WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>
+ *   <WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
  * </WmActionMenu>
  *
  * @example {html} Icon action menu with a custom icon
@@ -69,8 +69,8 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  *
  * @example {react} Text action menu
  * <WmActionMenu actionMenuType="text" buttonText="Actions">
- *   <WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>
- *   <WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>
+ *   <WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
  * </WmActionMenu>
  *
  * @example {html} Text action menu with an icon
@@ -93,8 +93,8 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  *
  * @example {react} Selector action menu
  * <WmActionMenu actionMenuType="selector" buttonText="Sort by">
- *   <WmMenuitem onWmMenuitemClicked={() => sortBy("name")}>Name</WmMenuitem>
- *   <WmMenuitem onWmMenuitemClicked={() => sortBy("date")}>Date</WmMenuitem>
+ *   <WmMenuitem onClick={() => sortBy("name")}>Name</WmMenuitem>
+ *   <WmMenuitem onClick={() => sortBy("date")}>Date</WmMenuitem>
  * </WmActionMenu>
  *
  * @example {html} Menu items with icons
@@ -105,8 +105,8 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  *
  * @example {react} Menu items with icons
  * <WmActionMenu tooltip="File actions">
- *   <WmMenuitem icon="#edit" onWmMenuitemClicked={editFile}>Edit</WmMenuitem>
- *   <WmMenuitem icon="#delete" onWmMenuitemClicked={deleteFile}>Delete</WmMenuitem>
+ *   <WmMenuitem icon="#edit" onClick={editFile}>Edit</WmMenuitem>
+ *   <WmMenuitem icon="#delete" onClick={deleteFile}>Delete</WmMenuitem>
  * </WmActionMenu>
  *
  * @example {html} Identical menus — disambiguate for screen readers with label-for-identical-buttons
@@ -119,15 +119,14 @@ import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParent
  *
  * @example {react} Identical menus
  * <WmActionMenu tooltip="Actions" labelForIdenticalButtons="Actions for Introduction to Biology">
- *   <WmMenuitem onWmMenuitemClicked={() => editCourse("bio-101")}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={() => editCourse("bio-101")}>Edit</WmMenuitem>
  * </WmActionMenu>
  * <WmActionMenu tooltip="Actions" labelForIdenticalButtons="Actions for Advanced Chemistry">
- *   <WmMenuitem onWmMenuitemClicked={() => editCourse("chem-301")}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={() => editCourse("chem-301")}>Edit</WmMenuitem>
  * </WmActionMenu>
  *
  * @requiredSetup
- * - Wire each item's action: attach an `onclick` handler to each wm-menuitem, or handle
- *   `wmMenuitemClicked` (`event.detail` is the activated element).
+ * - Wire each item's action: attach an `onclick` handler to each wm-menuitem.
  * - Slot one wm-menuitem per action as a child.
  *
  */
@@ -502,7 +501,7 @@ export class ActionMenu {
         }
     }
     render() {
-        return (h(Host, { key: '3d0a019d085382d974a333a147d9fa4c1695cb49', onBlur: () => this.close(false) }, h("div", { key: '7a62326756be39376945a4935f81514b190424a8', class: getTextDir() }, h("button", { key: '0d8eafd60f79d7e0dfa94a839a0b5ef21939f292', 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: '6c7311b0cadc7c88beff1e2584259568bef218c0', onBlur: () => this.close(false) }, h("div", { key: '16b4e94741a92bff557dcf71e0e228d4caad433a', class: getTextDir() }, h("button", { key: 'aabfa7ea99c7ec00d478b0e81f1183c2e1d1101c', 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 &&
@@ -510,9 +509,9 @@ export class ActionMenu {
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onBlur: (ev) => {
                 hideTooltip();
                 this.handleButtonBlur(ev);
-            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: '3903548564ad4bae3c6d4eea0172fe5ad68bd892', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: 'aad5b8cab7bb89e9273bde034c9f8928f51f97ff', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: '2298561f54226051629fff570265e6a9e878d7dc', 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),
+            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: '7134c8e7516c67d9c5b1441a0802bcca7bd86536', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: '5c0525745f50cbf21b5108d521b370927d63de3e', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: 'dacf7c949d0c14ae3d8eb4abfcbf75e288fab480', 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: '345949ab384b90abe4f7983cc22d5197bf8d0b7a' })))));
+            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: '30a7fe43c511ab640cc63a03acae4a574201acbb' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,33 +22,32 @@ import { getIconCodeFromName } from "../../global/interfaces";
  *
  * @example {react} Basic menu items
  * <WmActionMenu tooltip="Actions">
- *   <WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>
- *   <WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>
+ *   <WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
  * </WmActionMenu>
  *
  * @example {html} Menu item with icon
  * <wm-menuitem icon="#edit" onclick="editRecord()">Edit</wm-menuitem>
  *
  * @example {react} Menu item with icon
- * <WmMenuitem icon="#edit" onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>
+ * <WmMenuitem icon="#edit" onClick={editRecord}>Edit</WmMenuitem>
  *
  * @example {html} Menu item with description
  * <wm-menuitem description="Permanently removes the record" onclick="deleteRecord()">Delete</wm-menuitem>
  *
  * @example {react} Menu item with description
- * <WmMenuitem description="Permanently removes the record" onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>
+ * <WmMenuitem description="Permanently removes the record" onClick={deleteRecord}>Delete</WmMenuitem>
  *
  * @example {html} Disabled menu item -- the handler is retained and restored when re-enabled
  * <wm-menuitem disabled onclick="exportRecord()">Export</wm-menuitem>
  *
  * @example {react} Disabled menu item
- * <WmMenuitem disabled={true} onWmMenuitemClicked={exportRecord}>Export</WmMenuitem>
+ * <WmMenuitem disabled={true} onClick={exportRecord}>Export</WmMenuitem>
  *
  * @requiredSetup
  * - Render it as a direct child of wm-action-menu.
- * - Wire the action: attach an `onclick` handler to the item, or handle `wmMenuitemClicked`
- *   (`event.detail` is the activated wm-menuitem). The parent closes the dropdown on that event
- *   either way, so a menu that closes has not necessarily run anything.
+ * - Wire the action: attach an `onclick` handler to the item. The parent closes the dropdown when
+ *   an item is activated, so a menu that closes has not necessarily run anything.
  *
  */
 export class Menuitem {
@@ -147,7 +146,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: 'ed1a446ae7791153dfb44ba6ae629ccae722b49c', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '4b00c4bb75f3ea0f1ed8f46086e206da29999882', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '9abacf612b24d2f54d62d9c80e5dc63379722349', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '17634e9132f3ed4e37b52ea200d46ba15b734d91', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'a5a21c6a0feb8bf58a8a4de9a0cefe620522abe3', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'd4302f14e6211ef9cad2486834523d43012ec428', 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"; }
@@ -240,8 +239,11 @@ export class Menuitem {
                 "composed": true,
                 "docs": {
                     "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
                             "name": "description",
-                            "text": "Fires when the menu item is clicked or Enter is pressed while focused.\nConsumed by the parent wm-action-menu to close the dropdown."
+                            "text": "Signals the parent wm-action-menu to close the dropdown when the item is clicked\nor activated by keyboard. Not for application use \u2014 attach an `onclick` handler to run the\nitem's action."
                         }],
                     "text": ""
                 },

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-21T16:49:00",
+  "timestamp": "2026-08-21T20:37:18",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",
@@ -38,7 +38,7 @@
         },
         {
           "name": "example",
-          "text": "{react} Icon action menu\n<WmActionMenu tooltip=\"More options\">\n<WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>\n<WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>\n</WmActionMenu>"
+          "text": "{react} Icon action menu\n<WmActionMenu tooltip=\"More options\">\n<WmMenuitem onClick={editRecord}>Edit</WmMenuitem>\n<WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>\n</WmActionMenu>"
         },
         {
           "name": "example",
@@ -62,7 +62,7 @@
         },
         {
           "name": "example",
-          "text": "{react} Text action menu\n<WmActionMenu actionMenuType=\"text\" buttonText=\"Actions\">\n<WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>\n<WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>\n</WmActionMenu>"
+          "text": "{react} Text action menu\n<WmActionMenu actionMenuType=\"text\" buttonText=\"Actions\">\n<WmMenuitem onClick={editRecord}>Edit</WmMenuitem>\n<WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>\n</WmActionMenu>"
         },
         {
           "name": "example",
@@ -78,7 +78,7 @@
         },
         {
           "name": "example",
-          "text": "{react} Selector action menu\n<WmActionMenu actionMenuType=\"selector\" buttonText=\"Sort by\">\n<WmMenuitem onWmMenuitemClicked={() => sortBy(\"name\")}>Name</WmMenuitem>\n<WmMenuitem onWmMenuitemClicked={() => sortBy(\"date\")}>Date</WmMenuitem>\n</WmActionMenu>"
+          "text": "{react} Selector action menu\n<WmActionMenu actionMenuType=\"selector\" buttonText=\"Sort by\">\n<WmMenuitem onClick={() => sortBy(\"name\")}>Name</WmMenuitem>\n<WmMenuitem onClick={() => sortBy(\"date\")}>Date</WmMenuitem>\n</WmActionMenu>"
         },
         {
           "name": "example",
@@ -86,7 +86,7 @@
         },
         {
           "name": "example",
-          "text": "{react} Menu items with icons\n<WmActionMenu tooltip=\"File actions\">\n<WmMenuitem icon=\"#edit\" onWmMenuitemClicked={editFile}>Edit</WmMenuitem>\n<WmMenuitem icon=\"#delete\" onWmMenuitemClicked={deleteFile}>Delete</WmMenuitem>\n</WmActionMenu>"
+          "text": "{react} Menu items with icons\n<WmActionMenu tooltip=\"File actions\">\n<WmMenuitem icon=\"#edit\" onClick={editFile}>Edit</WmMenuitem>\n<WmMenuitem icon=\"#delete\" onClick={deleteFile}>Delete</WmMenuitem>\n</WmActionMenu>"
         },
         {
           "name": "example",
@@ -94,11 +94,11 @@
         },
         {
           "name": "example",
-          "text": "{react} Identical menus\n<WmActionMenu tooltip=\"Actions\" labelForIdenticalButtons=\"Actions for Introduction to Biology\">\n<WmMenuitem onWmMenuitemClicked={() => editCourse(\"bio-101\")}>Edit</WmMenuitem>\n</WmActionMenu>\n<WmActionMenu tooltip=\"Actions\" labelForIdenticalButtons=\"Actions for Advanced Chemistry\">\n<WmMenuitem onWmMenuitemClicked={() => editCourse(\"chem-301\")}>Edit</WmMenuitem>\n</WmActionMenu>"
+          "text": "{react} Identical menus\n<WmActionMenu tooltip=\"Actions\" labelForIdenticalButtons=\"Actions for Introduction to Biology\">\n<WmMenuitem onClick={() => editCourse(\"bio-101\")}>Edit</WmMenuitem>\n</WmActionMenu>\n<WmActionMenu tooltip=\"Actions\" labelForIdenticalButtons=\"Actions for Advanced Chemistry\">\n<WmMenuitem onClick={() => editCourse(\"chem-301\")}>Edit</WmMenuitem>\n</WmActionMenu>"
         },
         {
           "name": "requiredSetup",
-          "text": "- Wire each item's action: attach an `onclick` handler to each wm-menuitem, or handle\n  `wmMenuitemClicked` (`event.detail` is the activated element).\n- Slot one wm-menuitem per action as a child."
+          "text": "- Wire each item's action: attach an `onclick` handler to each wm-menuitem.\n- Slot one wm-menuitem per action as a child."
         }
       ],
       "usage": {},
@@ -6834,7 +6834,7 @@
         },
         {
           "name": "example",
-          "text": "{react} Basic menu items\n<WmActionMenu tooltip=\"Actions\">\n<WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>\n<WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>\n</WmActionMenu>"
+          "text": "{react} Basic menu items\n<WmActionMenu tooltip=\"Actions\">\n<WmMenuitem onClick={editRecord}>Edit</WmMenuitem>\n<WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>\n</WmActionMenu>"
         },
         {
           "name": "example",
@@ -6842,7 +6842,7 @@
         },
         {
           "name": "example",
-          "text": "{react} Menu item with icon\n<WmMenuitem icon=\"#edit\" onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>"
+          "text": "{react} Menu item with icon\n<WmMenuitem icon=\"#edit\" onClick={editRecord}>Edit</WmMenuitem>"
         },
         {
           "name": "example",
@@ -6850,7 +6850,7 @@
         },
         {
           "name": "example",
-          "text": "{react} Menu item with description\n<WmMenuitem description=\"Permanently removes the record\" onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>"
+          "text": "{react} Menu item with description\n<WmMenuitem description=\"Permanently removes the record\" onClick={deleteRecord}>Delete</WmMenuitem>"
         },
         {
           "name": "example",
@@ -6858,11 +6858,11 @@
         },
         {
           "name": "example",
-          "text": "{react} Disabled menu item\n<WmMenuitem disabled={true} onWmMenuitemClicked={exportRecord}>Export</WmMenuitem>"
+          "text": "{react} Disabled menu item\n<WmMenuitem disabled={true} onClick={exportRecord}>Export</WmMenuitem>"
         },
         {
           "name": "requiredSetup",
-          "text": "- Render it as a direct child of wm-action-menu.\n- Wire the action: attach an `onclick` handler to the item, or handle `wmMenuitemClicked`\n  (`event.detail` is the activated wm-menuitem). The parent closes the dropdown on that event\n  either way, so a menu that closes has not necessarily run anything."
+          "text": "- Render it as a direct child of wm-action-menu.\n- Wire the action: attach an `onclick` handler to the item. The parent closes the dropdown when\n  an item is activated, so a menu that closes has not necessarily run anything."
         }
       ],
       "usage": {},
@@ -6960,32 +6960,7 @@
         }
       ],
       "methods": [],
-      "events": [
-        {
-          "event": "wmMenuitemClicked",
-          "detail": "HTMLWmMenuitemElement",
-          "bubbles": true,
-          "complexType": {
-            "original": "HTMLWmMenuitemElement",
-            "resolved": "HTMLWmMenuitemElement",
-            "references": {
-              "HTMLWmMenuitemElement": {
-                "location": "global",
-                "id": "global::HTMLWmMenuitemElement"
-              }
-            }
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "",
-          "docsTags": [
-            {
-              "name": "description",
-              "text": "Fires when the menu item is clicked or Enter is pressed while focused.\nConsumed by the parent wm-action-menu to close the dropdown."
-            }
-          ]
-        }
-      ],
+      "events": [],
       "listeners": [
         {
           "event": "keydown",

package/dist/docs/skill/wm-action-menu.md

@@ -59,8 +59,7 @@ intended for general sizing. Accepts any valid CSS size value, e.g. '22px' or '1
 
 **Required setup:**
 
-- Wire each item's action: attach an `onclick` handler to each wm-menuitem, or handle
-  `wmMenuitemClicked` (`event.detail` is the activated element).
+- Wire each item's action: attach an `onclick` handler to each wm-menuitem.
 - Slot one wm-menuitem per action as a child.
 
 **Accessibility:**
@@ -93,8 +92,8 @@ _Icon action menu_
 
 ```react
 <WmActionMenu tooltip="More options">
-<WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>
-<WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>
+<WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+<WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
 </WmActionMenu>
 ```
 

package/dist/docs/skill/wm-menuitem.md

@@ -21,16 +21,11 @@ or an MDI character code (deprecated). Incompatible with `description`.
 **Slots:**
 - _(default)_ -- The visible label text for the menu item.
 
-**Events:**
-- `wmMenuitemClicked` -- Fires when the menu item is clicked or Enter is pressed while focused.
-Consumed by the parent wm-action-menu to close the dropdown.
-
 **Required setup:**
 
 - Render it as a direct child of wm-action-menu.
-- Wire the action: attach an `onclick` handler to the item, or handle `wmMenuitemClicked`
-  (`event.detail` is the activated wm-menuitem). The parent closes the dropdown on that event
-  either way, so a menu that closes has not necessarily run anything.
+- Wire the action: attach an `onclick` handler to the item. The parent closes the dropdown when
+  an item is activated, so a menu that closes has not necessarily run anything.
 
 **Accessibility:**
 
@@ -51,8 +46,8 @@ _Basic menu items_
 
 ```react
 <WmActionMenu tooltip="Actions">
-<WmMenuitem onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>
-<WmMenuitem onWmMenuitemClicked={deleteRecord}>Delete</WmMenuitem>
+<WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+<WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
 </WmActionMenu>
 ```
 
@@ -65,5 +60,5 @@ _Menu item with icon_
 _Menu item with icon_
 
 ```react
-<WmMenuitem icon="#edit" onWmMenuitemClicked={editRecord}>Edit</WmMenuitem>
+<WmMenuitem icon="#edit" onClick={editRecord}>Edit</WmMenuitem>
 ```

package/dist/esm/{app-globals-1495796e.js → app-globals-d1b77a8f.js}

@@ -1,6 +1,6 @@
 import './index-3425d80d.js';
 
-const version = "5.32.0-alpha.6";
+const version = "5.32.0-alpha.7";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-3425d80d.js';
 export { s as setNonce } from './index-3425d80d.js';
-import { g as globalScripts } from './app-globals-1495796e.js';
+import { g as globalScripts } from './app-globals-d1b77a8f.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-3425d80d.js';
 export { s as setNonce } from './index-3425d80d.js';
-import { g as globalScripts } from './app-globals-1495796e.js';
+import { g as globalScripts } from './app-globals-d1b77a8f.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/esm/wm-action-menu_2.entry.js

@@ -379,7 +379,7 @@ const ActionMenu = class {
         }
     }
     render() {
-        return (h(Host, { key: '3d0a019d085382d974a333a147d9fa4c1695cb49', onBlur: () => this.close(false) }, h("div", { key: '7a62326756be39376945a4935f81514b190424a8', class: getTextDir() }, h("button", { key: '0d8eafd60f79d7e0dfa94a839a0b5ef21939f292', 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: '6c7311b0cadc7c88beff1e2584259568bef218c0', onBlur: () => this.close(false) }, h("div", { key: '16b4e94741a92bff557dcf71e0e228d4caad433a', class: getTextDir() }, h("button", { key: 'aabfa7ea99c7ec00d478b0e81f1183c2e1d1101c', 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 &&
@@ -387,9 +387,9 @@ const ActionMenu = class {
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onBlur: (ev) => {
                 hideTooltip();
                 this.handleButtonBlur(ev);
-            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: '3903548564ad4bae3c6d4eea0172fe5ad68bd892', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: 'aad5b8cab7bb89e9273bde034c9f8928f51f97ff', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: '2298561f54226051629fff570265e6a9e878d7dc', 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),
+            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: '7134c8e7516c67d9c5b1441a0802bcca7bd86536', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: '5c0525745f50cbf21b5108d521b370927d63de3e', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: 'dacf7c949d0c14ae3d8eb4abfcbf75e288fab480', 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: '345949ab384b90abe4f7983cc22d5197bf8d0b7a' })))));
+            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: '30a7fe43c511ab640cc63a03acae4a574201acbb' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -507,7 +507,7 @@ const Menuitem = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ed1a446ae7791153dfb44ba6ae629ccae722b49c', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '4b00c4bb75f3ea0f1ed8f46086e206da29999882', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '9abacf612b24d2f54d62d9c80e5dc63379722349', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '17634e9132f3ed4e37b52ea200d46ba15b734d91', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'a5a21c6a0feb8bf58a8a4de9a0cefe620522abe3', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'd4302f14e6211ef9cad2486834523d43012ec428', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     get el() { return getElement(this); }
     static get watchers() { return {