@watermarkinsights/ripple 5.31.1 → 5.32.0-alpha.10

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

@@ -42,6 +42,20 @@ import { debounce, hideTooltip, intl, showTooltip, truncateText } from "../../gl
  *
  * @example {react} File in error state
  * <WmFile id="file-3" name="report" type="pdf" errorMessage="Upload failed. Please try again." />
+ *
+ * @requiredSetup
+ * - Render it inside wm-file-list or wm-uploader; it is not a standalone control.
+ * - Give every wm-file a unique `id`. Its events carry no detail, so `event.target` is the only way
+ *   to tell which file was acted on.
+ * - Handle the events for whichever buttons `file-actions` renders -- `wmFileDelete`,
+ *   `wmFileDownload`, `wmFilePreview` -- bearing in mind it defaults to download and delete.
+ *   Deleting is not automatic: wm-uploader listens for `wmFileDelete` only to move focus, so the row
+ *   stays on screen until you drop the file from your own state.
+ * - Handle `wmFileErrorCleared` by clearing the `error-message` you set; the parent only restores
+ *   focus to the upload button.
+ * - Update `progress` as an upload proceeds; it drives the progress bar and the aria-live
+ *   announcement.
+ *
  */
 export class File {
     constructor() {
@@ -230,7 +244,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: '3d6dc80e1864ae1e61f767dbf9e46ffa13267d19', 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: '5e5b063af0d4845668a274a97571f52bfb8482aa', role: "list", class: "list-wrapper" }, h("slot", { key: '5e53878852fd55bdd22c922a4c7cecac79ccbb32' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,8 +25,8 @@ import { globalMessages } from "../../global/intl";
  *   visibility. Control visibility with the `open` prop instead.
  * - The flyout does not close on outside clicks; the host application must handle close events
  *   and set `open` to false.
- * - In React, set `open` imperatively via a ref (`ref.current.open = true/false`). Use a native
- *   `onClick` on the trigger element rather than `onWmButtonClicked` to open the flyout.
+ * - In React, set `open` imperatively via a ref (`ref.current.open = true/false`), and open the
+ *   flyout from a click handler on the trigger element.
  * - Use `element-to-focus` to shift initial focus away from the default close button, e.g. to
  *   the `primary` footer button or a specific element id for form workflows.
  * - In a multi-step workflow, drive `heading`, `breadcrumb`, `primaryText`, and `secondaryText`
@@ -55,7 +55,7 @@ import { globalMessages } from "../../global/intl";
  * </wm-flyout>
  *
  * @example {react} Basic flyout
- * // Set open imperatively via ref -- use onClick on the trigger, not onWmButtonClicked.
+ * // Set open imperatively via ref.
  * const flyoutRef = useRef(null);
  *
  * const openFlyout = () => { flyoutRef.current.open = true; };
@@ -132,6 +132,16 @@ import { globalMessages } from "../../global/intl";
  *   {step === 1 && <div className="flyout-content"><WmInput label="Start date" /></div>}
  * </WmFlyout>
  *
+ * @requiredSetup
+ * - Drive `open` from your own state: true to show the flyout, false to hide it.
+ * - Handle `wmFlyoutCloseTriggered` by setting `open = false`. It covers the close button and
+ *   Escape, which are the only close paths -- there is no outside-click dismissal.
+ * - Handle `wmFlyoutPrimaryTriggered` and `wmFlyoutSecondaryTriggered` for whichever footer buttons
+ *   `primary-text` and `secondary-text` render, setting `open = false` to dismiss.
+ * - For multi-step flows, drive `heading`, `breadcrumb`, and the button text from state, call
+ *   `focusHeading()` after each step change, and handle `wmFlyoutBreadcrumbClicked` (`event.detail`
+ *   is `{ breadcrumb, index }`) to step backwards.
+ *
  */
 export class Flyout {
     constructor() {
@@ -284,7 +294,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: 'de4b5f597cc2e9fa94f0385df1d3b3b8d886f50d' }, h("dialog", { key: 'e89892a086afa301a9939bf1c5c8abda987f910f', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'c0714dbbf4c6365be710b6705f30ca81d009fd53', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'ca6b64011bd3993a80db682e8a913c8a0392f3a9', class: "flyout-content" }, h("slot", { key: 'ec4f277c68885adfbe6b5379117ba8b6bfee0891' })), this.renderFooter(), h("div", { key: '27c997321b543179b24bfe6759c29a877685932f', 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: 'c95455fb6668414ec09dbf301323f11fc7270e47', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'de0ada2ec3c43c411924417df348ebe34a477e8e', class: "label-wrapper" }, h("label", { key: '04884ea505a88026aa311a38e30cbdf049b390c3', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '1eedd2faffbfcc670ad3b87298465ab16328a1d3', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '51224587e46ef0132891dee01536d5cf07ea54f6', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ed40b31ab7ab588f6165cc0af2ec52bb8d86509b', class: "inner-wrapper" }, h("div", { key: '67a06543806995e8b95db4186a4ea053d4d33b45', class: "text-after-wrapper" }, h("div", { key: '78ad09bd7849f5f7c422d36a6f01e156c9c6db5e', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '19a85ba9d2d9d17d634ac78179dbd90b378b2b7b', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'f8a4b6d837abf040d9ca1237297836d066cd3f71', 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: '105dec7aa348f910b25db38b86eec650c943ef40', 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: '2ea643f3a9bc736bb33200d5cf87600e14aa2f18', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '07e341cfc2b91a6bcf4880158aa735fd06ea51ea', id: "info", class: "info" }, this.info)), h("div", { key: '41f5fe8184dd6d15e868a9212c61f2a70dcdb9a9', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '860193d77a6576a5aec0c133f43bffe72a853e57', 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

@@ -16,27 +16,39 @@ import { getIconCodeFromName } from "../../global/interfaces";
  *
  * @example {html} Basic menu items
  * <wm-action-menu tooltip="Actions">
- *   <wm-menuitem>Edit</wm-menuitem>
- *   <wm-menuitem>Delete</wm-menuitem>
+ *   <wm-menuitem onclick="editRecord()">Edit</wm-menuitem>
+ *   <wm-menuitem onclick="deleteRecord()">Delete</wm-menuitem>
  * </wm-action-menu>
  *
  * @example {react} Basic menu items
  * <WmActionMenu tooltip="Actions">
- *   <WmMenuitem>Edit</WmMenuitem>
- *   <WmMenuitem>Delete</WmMenuitem>
+ *   <WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
  * </WmActionMenu>
  *
  * @example {html} Menu item with icon
- * <wm-menuitem icon="#edit">Edit</wm-menuitem>
+ * <wm-menuitem icon="#edit" onclick="editRecord()">Edit</wm-menuitem>
+ *
+ * @example {react} Menu item with icon
+ * <WmMenuitem icon="#edit" onClick={editRecord}>Edit</WmMenuitem>
  *
  * @example {html} Menu item with description
- * <wm-menuitem description="Permanently removes the record">Delete</wm-menuitem>
+ * <wm-menuitem description="Permanently removes the record" onclick="deleteRecord()">Delete</wm-menuitem>
+ *
+ * @example {react} Menu item with description
+ * <WmMenuitem description="Permanently removes the record" onClick={deleteRecord}>Delete</WmMenuitem>
  *
- * @example {html} Disabled menu item
- * <wm-menuitem disabled>Export</wm-menuitem>
+ * @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}>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. The parent closes the dropdown when
+ *   an item is activated, so a menu that closes has not necessarily run anything.
+ *
  */
 export class Menuitem {
     constructor() {
@@ -134,7 +146,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: '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"; }
@@ -227,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/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: '01d9675f5ae7e80960cb1c3d966a7f662f24bd7d', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '066e6efe2c39d9873db4a9796e0666985583e99e', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '37ca1d537a4871193488abcbd625172db21da0b1', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '1f8fa5963369b94c7e3dee94339772e155667913', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '2eb0f06c4f1849b6e08eed2fa2a85952ae9cdc5f', "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: '9aa6f7ffd57907e412fb42f3ecc5fcb65ea37a48' }, h("div", { key: 'a404673f2172d71e1de498265d59abc37ecca16c', class: "wm-wrapper" }, h("div", { key: 'fdfd2a2d4b31effdd4742f520f2d00f6eb028b6b' }, h("h2", { key: 'b748ccfe42ccd233a918578251527fe78b112e41', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'a09334a14fc61bc8756122e62741ed0d5e445820', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'a89ca51890891a0534e97174fd841e13eb9dec68', "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

@@ -51,7 +51,7 @@ import { generateId } from "../../global/functions";
  * const openModal = () => { modalRef.current.open = true; };
  * const closeModal = () => { modalRef.current.open = false; };
  *
- * <WmButton onWmButtonClicked={openModal}>Open modal</WmButton>
+ * <WmButton onClick={openModal}>Open modal</WmButton>
  *
  * <WmModal
  *   ref={modalRef}
@@ -78,7 +78,7 @@ import { generateId } from "../../global/functions";
  * const openDialog = () => { dialogRef.current.open = true; };
  * const closeDialog = () => { dialogRef.current.open = false; };
  *
- * <WmButton onWmButtonClicked={openDialog}>Open dialog</WmButton>
+ * <WmButton onClick={openDialog}>Open dialog</WmButton>
  *
  * <WmModal
  *   ref={dialogRef}
@@ -92,6 +92,16 @@ import { generateId } from "../../global/functions";
  *   <WmModalFooter primaryText="Got it" />
  * </WmModal>
  *
+ * @requiredSetup
+ * - Drive `open` from your own state: true to show the modal, false to hide it. In React set it
+ *   through a ref (`ref.current.open = true`) rather than as a prop, which breaks the native dialog
+ *   focus-return.
+ * - Handle `wmModalCloseTriggered` -- the close button and Escape -- by setting `open = false`. It
+ *   does not bubble, so attach the listener to the element itself.
+ * - Handle `wmModalPrimaryTriggered` and `wmModalSecondaryTriggered` for whichever wm-modal-footer
+ *   buttons you render, setting `open = false` to dismiss.
+ * - Reset the content wrapper's `scrollTop` to 0 when reopening, if the body content scrolls.
+ *
  */
 export class Modal {
     constructor() {
@@ -222,11 +232,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: '995c3ed868be28431fd16f59f42842676fb866dc', 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: 'b70bd7e83d7b89c7878dc8eccb2f6c3744c354b6', 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: '8153ea292a5d2e92c94bc4851a9558d0e4c15dbe', class: "wm-tooltip" }), h("slot", { key: '1056abeca733388eb293562a213221a8d0434b1a' }), h("div", { key: '961af64369b5a2f4645c472dcde9b4b590593972', 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: '1fb457cc2cff44efb8abaa10575737b01ce70b20', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '62f807be71bdbac9c20569adf0a014de28d9df12', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '93437b4c93b2dc035f8d7d9b5533bed6093c6a5f', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '1887d3cba0c762475837694f18c5804cb855d178', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: 'fe845d00a730f19f5f522b14a36dd397328d57d0', "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: 'a3498139a3ec2cff1e40daeffaca7634cf5a484b' }, h("div", { key: '2380923b35880883b85ffce8ee58c887d23fe886', class: "wm-wrapper" }, h("div", { key: '7978d304ec86bd8df64c9d1e639216e5ff1edba4' }, h("h2", { key: 'e462040e5af094836cc38ec064faef408402fabf', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '1d5baad88628e7830c20983f40cf8de50b5b5f06', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'e55d981a3e1dc49d3079b8b15661bdde227ff5e8', "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: '5670d26d529d69cacf36c8755b5d328fb40c8938', 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: 'ca8956c8d821b6d12c501d8867a08d683a4bbb6a', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'fc2c63dc1264a0a29b3b049f76d363c1b2e6c8dc', class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

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: '966bcd988f8ee460899519969a759ffb16459baa', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'b1e5c3cd46106943102bf5509a9251953b164c56', "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: 'a50f398cbdde9271cab48e6bc4eb9013fe8b4ba4', 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: '5c37c39e27b4602bcc53f2a1e118fb427b7a9a1a', role: "listitem" }, h("a", { key: 'ba3e7216ba1a5e7cb8d61dff61b353eeaaddee34', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '9a35a2bd7f3474a182e187f8fe4b35904cb00862', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'fb6858dafb750fcee200e57757dd86bbfc05cd23' })), h("div", { key: '6b2c933f73fd07746c3f3bcb656f9fc9563e88cd', 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: '38f20313b339a81259115b164fee7a43f1c4efe5', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '8630d032614a02068dbcf650d304f6569e00df50', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '1657807eea4bb2687b5d18c4cb96448110cfa740', class: "tray" }, h("div", { key: '92ff3381acb3f959c3f63ca4d20b3e2e51cb81f7', class: "toggle-wrapper" }, h("wm-button", { key: 'e20e007c8d77d69ad529cd6d3cc4fafbdb1fc2f1', 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: 'e5ec6a2303ff3def1ddd4f3d5199c93a01895793', class: "navlist" }, h("slot", { key: 'b29379969f84e1cea3a3918ba97168420b1c4cbe' }))), this.isCollapsible && (h("div", { key: '176f724b791b7792caa5b5b519e79f48ccee2f6b', 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: 'dc162bf12e5dec1ceb7cf071b55d4d9da4deabe7', "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: '90260a3dbfafec72c507d40e29a5f1d5e02149be', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'c91b33f6c5fc8e563b69c1661b1c6f41d5c53225' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,6 +53,13 @@ import { globalMessages } from "../../global/intl";
  * <WmPagination label="Search results" currentPage={page2} totalItems={80} itemsPerPage={10}
  *   onWmPaginationPageClicked={(e) => setPage2(Number(e.target.value))} />
  *
+ * @requiredSetup
+ * - Handle `wmPaginationPageClicked` by reading `event.target.value` -- a string, so convert it to
+ *   a number -- and writing it to `current-page`.
+ * - Set `total-items` and `items-per-page` from the data you are paging; together they determine the
+ *   page count.
+ * - Share one page state between paginations rendered above and below the same table.
+ *
  */
 export class Pagination {
     constructor() {
@@ -257,7 +264,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: '7a66d44b8bdc19561fb133b04f1a00d2b4da93de', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: 'c7aebaa1cf26089feefa2f90df4b523da3e041d3', 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

@@ -107,6 +107,14 @@ import { globalMessages } from "../../global/intl";
  *   </li>
  * ))}
  *
+ * @requiredSetup
+ * - Filter your own data as the value changes and set `num-results`, which drives the
+ *   screen-reader result count.
+ * - Handle `wmSearchValueChanged` (`event.detail` is `{ value }`) for the committed value; it fires
+ *   on blur. For filter-as-you-type, listen for the native `input` event as well.
+ * - With `search-type="find"`, handle `wmSearchBrowseResults` (`event.detail` is `{ position }`,
+ *   one-based) and set `highlighted-id` and `highlighted-name` to the matching result.
+ *
  */
 export class Search {
     constructor() {
@@ -275,10 +283,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: '17f77ed996d830b331078d35172485ddd1b3815a' }, h("div", { key: 'eaa5da92ed2154b3660fb0c888e43f0853f5bd0d', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '8c25d6adae20a36ce5ae73ae79d114555f608d8a', 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: 'bc41a6fe9a84996ebca49f2a6fc87d45703ef89c', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '0c7f0fb0d7b887b3e9abd6a0eb06076e626aea28', 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

@@ -74,6 +74,14 @@ import { globalMessages } from "../../global/intl";
  *   onWmSnackbarActionTriggered={handleActionTriggered}
  * />
  *
+ * @requiredSetup
+ * - Show a snack by adding an entry to `notifications`, and pass the stringified array rather than
+ *   the array itself.
+ * - Handle `wmSnackbarSnackFinished` (`event.detail` is `{ id }`) by removing that entry from the
+ *   array you pass to `notifications`; the component does not remove it for you.
+ * - Handle `wmSnackbarActionTriggered` for entries carrying `link` or `action`, and remove the entry
+ *   yourself once handled -- the 6-second auto-dismiss does not apply to those.
+ *
  */
 export class Snackbar {
     constructor() {
@@ -223,11 +231,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: '0e70d242a282e93aa784082ad24b2d46a7360b8e' }, h("div", { key: 'c18bb81ad201151cd17bf0cbd6a4ed905ed05704', 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: '015af84cc94a71126be63ed28f015db03f7bad05', 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

@@ -15,6 +15,14 @@ import { h, Host } from "@stencil/core";
  *
  * @example {react} Tab item
  * <WmTabItem tabId="overview">Overview</WmTabItem>
+ *
+ * @requiredSetup
+ * - Render it as a direct child of wm-tab-list, and slot the tab label into it.
+ * - Give it a `tab-id` matching the `tab-id` of its wm-tab-panel. A mismatch fails silently: the tab
+ *   highlights and no panel appears.
+ * - Handle `wmTabSelected` (`event.detail` is `{ tabId }`), which bubbles to wm-tab-list, and write
+ *   the id to the list's `selected-tab`.
+ *
  */
 export class TabItem {
     constructor() {
@@ -44,9 +52,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: 'b3fb78482fbf093366dc42fae941874135f8ac7b', role: "presentation" }, h("li", { key: 'e6e7365fc150d251034c7f95b4f677e0f4bcedef', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: 'ec419b64efa55f06b38233d18c565eb593ce56ac', 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: '921a500882c676545921101197052257e4db3455' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -75,8 +83,11 @@ export class TabItem {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
                             "name": "description",
-                            "text": "Whether this tab is currently active. Managed by the parent wm-tab-list \u2014\ndo not set manually."
+                            "text": "Whether this tab is currently active. Set on every item by the parent\nwm-tab-list whenever `selected-tab` changes; not intended for external use."
                         }, {
                             "name": "default",
                             "text": "false"

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

@@ -90,6 +90,13 @@ import { debounce, intl } from "../../../global/functions";
  *   {selectedTab === "activity" && <p>Activity content</p>}
  * </WmTabPanel>
  *
+ * @requiredSetup
+ * - Handle `wmTabSelected` on the list -- it is declared on wm-tab-item and bubbles -- and write
+ *   `event.detail.tabId` to `selected-tab`.
+ * - Slot a wm-tab-item per tab, and render a wm-tab-panel for each one as its content container.
+ * - Give each wm-tab-item `tab-id` the same value as its wm-tab-panel `tab-id`. A mismatch fails
+ *   silently: the tab highlights and no panel appears.
+ *
  */
 export class TabList {
     constructor() {
@@ -348,15 +355,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: 'e5e70580b7b292940ae6f78b1a7e11b10c094816' }, h("div", { key: 'd4522bc80583555f1a30c75e75ed83746aaebf52', class: "component-wrapper" }, h("wm-button", { key: '302eefe25f531312166fc63be510e48153620bc7', 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: '0a8a050783bb051d40fa837a4715662b2d1d7455', 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: '02a0d8d6d5674b4512287987944d21a432357ac7' })), h("wm-button", { key: 'c96ff969e596c0ba93f90ab4dacb9bcd95587e36', 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: '4925ff672c42cbe5c69a5ad33ee4812c93cf2f00', "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

@@ -17,6 +17,12 @@ import { generateId } from "../../../global/functions";
  *
  * @example {react} Tab panel
  * <WmTabPanel tabId="overview">Overview content here.</WmTabPanel>
+ *
+ * @requiredSetup
+ * - Render one panel per wm-tab-item alongside the wm-tab-list, and slot the panel content into it.
+ * - Give it a `tab-id` matching its wm-tab-item's `tab-id`. A mismatch fails silently: the tab
+ *   highlights and no panel appears.
+ *
  */
 export class TabPanel {
     constructor() {
@@ -30,7 +36,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: '65dbbac2bcf9bec58421c54c67d0fd0510d209b5', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {
@@ -57,8 +63,11 @@ export class TabPanel {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
                             "name": "description",
-                            "text": "Whether this panel is currently visible. Managed by the parent wm-tab-list \u2014\ndo not set manually."
+                            "text": "Whether this panel is currently visible. Set on every panel by the parent\nwm-tab-list whenever `selected-tab` changes; not intended for external use."
                         }, {
                             "name": "default",
                             "text": "false"