@watermarkinsights/ripple 5.32.0 → 5.32.1-alpha.1

package/dist/cjs/{app-globals-5a9e2484.js → app-globals-6f8f7d34.js}

@@ -2,7 +2,7 @@
 
 require('./index-bb947bd5.js');
 
-const version = "5.32.0";
+const version = "5.32.1-alpha.1";
 
 // 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-5a9e2484.js');
+const appGlobals = require('./app-globals-6f8f7d34.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-5a9e2484.js');
+const appGlobals = require('./app-globals-6f8f7d34.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/cjs/wm-navigation_3.cjs.entry.js

@@ -106,9 +106,9 @@ const Navigation = class {
             } }));
     }
     render() {
-        return (index.h(index.Host, { key: '38f20313b339a81259115b164fee7a43f1c4efe5', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: '8630d032614a02068dbcf650d304f6569e00df50', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: '1657807eea4bb2687b5d18c4cb96448110cfa740', class: "tray" }, index.h("div", { key: '92ff3381acb3f959c3f63ca4d20b3e2e51cb81f7', class: "toggle-wrapper" }, index.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 ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (index.h(index.Host, { key: '96933040f7f88edf4e52c5e0480712e1f15e8db6', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: '4658a3e22aa96a55dfb5b0211912805b683e26d2', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: 'cb3ae13600538706292ed27eeff3f70e33015975', class: "tray" }, index.h("div", { key: 'df934dfeb30d54294656dde2cfc78c95c6140e65', class: "toggle-wrapper" }, index.h("wm-button", { key: '478b6428b08703302a21f64d7adc58e6788e1803', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), index.h("ul", { key: 'e5ec6a2303ff3def1ddd4f3d5199c93a01895793', class: "navlist" }, index.h("slot", { key: 'b29379969f84e1cea3a3918ba97168420b1c4cbe' }))), this.isCollapsible && (index.h("div", { key: '176f724b791b7792caa5b5b519e79f48ccee2f6b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), index.h("ul", { key: '32035dea4487af347ec5e56c3010bdf8b84d2c12', class: "navlist" }, index.h("slot", { key: 'a3512e42e16da5ad5591fa1f1f5211dc5b1576ee' }))), this.isCollapsible && (index.h("div", { key: '8e77d6376ccc683560ec214d2ec7d694aa417789', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-tag-input.cjs.entry.js

@@ -144,9 +144,7 @@ const TagInput = class {
     }
     // get the internal representation of a wm-tag-option
     elFromTagOption(el) {
-        return el.id
-            ? this.el.shadowRoot.querySelector("#" + el.id)
-            : undefined;
+        return el.id ? this.el.shadowRoot.querySelector("#" + el.id) : undefined;
     }
     // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
     get _focusedOption() {
@@ -329,7 +327,11 @@ const TagInput = class {
         const addedNodes = Array.from(record.addedNodes);
         if (addedNodes.length > 0) {
             this.assignOptionIds();
-            addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
+            // reassign rather than push: Stencil only re-renders on a state reference change
+            const newNodes = addedNodes.filter((n) => !this.tagsList.includes(n));
+            if (newNodes.length > 0) {
+                this.tagsList = [...this.tagsList, ...newNodes];
+            }
         }
         const removedNodes = Array.from(record.removedNodes);
         if (removedNodes.length > 0) {
@@ -968,10 +970,10 @@ const TagInput = class {
         }
     }
     render() {
-        return (index.h("div", { key: '3320626934db9d58503b2964530e0bac1126775e', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '9342d3b7db294e8c6c791bb0b4debfa537ab4029', class: "label-wrapper" }, index.h("label", { key: '48f8454c94c26ee09d69221d5985d9bc6d14ad90', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '533458abd912ff8608419c53560baf6ff3e8ecb2', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '8581fb8e727570200a2a024db5b3c767d79fb433', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: 'dc8aa608d413c1ccf2ce686d78ac14944f200421', class: "upper-row" }, index.h("div", { key: '8c076d96f42b6ce47d6ca49068fae2e51bbba705', class: "svg-icon svg-search" }), index.h("div", { key: '7dba4a97ab9435c4cd2f930e91922247349f0269', class: `tags-and-input-wrapper` }, index.h("ul", { key: '96f539b009fdc8cf9b267b8b7d9f9d110c00a24b', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (index.h("div", { key: '0506ec7b7255034f0fa8132d813727a72895b86a', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '8f8726c6d9e1a524b6c9b9aa90dee9748fc93635', class: "label-wrapper" }, index.h("label", { key: '1f9b00a496fcd9923800471cc77e8c9c65111a8b', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '3109f9ca0c4dbdfdde971b9c30c65e90a3d2c573', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'a3bfc9d17aa1df1ff84e807cd21bfb52dd3690de', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: 'be11a9727d97017988960d9458bf018e27f25c3b', class: "upper-row" }, index.h("div", { key: '9ae64eac0452889a0dbc49630a731f297c92c8c5', class: "svg-icon svg-search" }), index.h("div", { key: '07372a530d3bd24b8ae783d0bed5a3e095dbeeeb', class: `tags-and-input-wrapper` }, index.h("ul", { key: '2b16ed13429d52b1ad44b1aea45087f34e05997f', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: '85c5677a7c97baf49906f90d0a2e20af3853b3d7', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: 'a60ae5ab37b6a973127ef0dbc73fdd25defa2b00', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: 'f66a9b7ab8687707e271dc606c54486e799a2dcc', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '0e644fd0b06345ff5bb459e2dc46f7f6601bc92d', id: "error" }, this.errorMessage), index.h("div", { key: '94bea1eb5b48bd5a669d0f8a4ae98cc1ddde7692', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: '3888229daf857f5c86ee4112d0762b9be5b3b099', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: 'fce52fa11fb5403c1dd7ac9c2dca11bbe9402665', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '1befdf76851f651878ade4110d8aec2e0238cdbe', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '4bcd00c2fa6d4f00c79fc8a752a3dd57594ce9a1', id: "error" }, this.errorMessage), index.h("div", { key: '9d6da4e7accb62f9ad05dbdf0c5827ea18ade783', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -4,7 +4,9 @@ import { globalMessages } from "../../global/intl";
 /**
  * Sidebar navigation that collapses into a hamburger menu on viewports narrower than 1024px.
  * Contains wm-navigation-item children and works alongside an external wm-navigation-hamburger
- * toggle. Must be placed in the DOM after `<header>` and before `<main>`.
+ * toggle. Render it as the first child of `<main>`, with the page's actual content in a sibling
+ * element — a flex or grid `<main>` lets the navigation sit alongside that content as a
+ * sidebar on viewports 1024px and wider, with no extra positioning needed.
  *
  * @category Navigation
  *
@@ -23,8 +25,11 @@ import { globalMessages } from "../../global/intl";
  *   address bar via a `focus` listener on `document.body`.
  *
  * @usageNotes
- * - Use `wm-navigation-hamburger` (a separate component) as the external toggle; it communicates
- *   with wm-navigation via the `wmNavigationHamburgerClicked` window event.
+ * - Use `wm-navigation-hamburger` (a separate component) as the external toggle. It communicates
+ *   with wm-navigation via the `wmNavigationHamburgerClicked` window event and a document-wide
+ *   lookup, so it does not need to be a DOM sibling of wm-navigation — place it in the page
+ *   header instead, at the leading edge before the logo, with room around it so it isn't flush
+ *   against neighboring header content.
  * - `open` can be set initially to `true` to start the navigation expanded.
  * - Navigation and main content scroll independently — no additional overflow handling is needed.
  *
@@ -32,20 +37,48 @@ import { globalMessages } from "../../global/intl";
  * - Never set `display: none` or `visibility: hidden` on the host element or its wrapper
  *   container. The component manages its own visibility internally, and hiding the container
  *   from the outside blocks the overlay from appearing when the hamburger is triggered.
+ * - Give the element that wraps wm-navigation and the page content (commonly `<main>`) a flex
+ *   or grid layout. Without one, the navigation and content stack instead of sitting side by
+ *   side as a sidebar on viewports 1024px and wider.
  *
  * @example {html} Basic navigation
- * <wm-navigation-hamburger nav-id="main-nav"></wm-navigation-hamburger>
- * <wm-navigation id="main-nav">
- *   <wm-navigation-item href="/dashboard" text="Dashboard" active></wm-navigation-item>
- *   <wm-navigation-item href="/reports" text="Reports"></wm-navigation-item>
- * </wm-navigation>
+ * <header class="app-header">
+ *   <div class="app-header__hamburger">
+ *     <wm-navigation-hamburger nav-id="main-nav"></wm-navigation-hamburger>
+ *   </div>
+ *   <a class="app-header__logo" href="/">App Name</a>
+ * </header>
+ * <main class="app-main">
+ *   <wm-navigation id="main-nav">
+ *     <wm-navigation-item href="/dashboard" text="Dashboard" active></wm-navigation-item>
+ *     <wm-navigation-item href="/reports" text="Reports"></wm-navigation-item>
+ *   </wm-navigation>
+ *   <div class="app-main__content">Page content</div>
+ * </main>
  *
  * @example {react} Basic navigation
- * <WmNavigationHamburger navId="main-nav" />
- * <WmNavigation id="main-nav">
- *   <WmNavigationItem href="/dashboard" text="Dashboard" active={true} />
- *   <WmNavigationItem href="/reports" text="Reports" />
- * </WmNavigation>
+ * <header className="app-header">
+ *   <div className="app-header__hamburger">
+ *     <WmNavigationHamburger navId="main-nav" />
+ *   </div>
+ *   <a className="app-header__logo" href="/">App Name</a>
+ * </header>
+ * <main className="app-main">
+ *   <WmNavigation id="main-nav">
+ *     <WmNavigationItem href="/dashboard" text="Dashboard" active={true} />
+ *     <WmNavigationItem href="/reports" text="Reports" />
+ *   </WmNavigation>
+ *   <div className="app-main__content">Page content</div>
+ * </main>
+ *
+ * @requiredSetup
+ * - `wm-navigation-item` — slot at least one as a child; each supplies a link the collapsible
+ *   menu and the persistent sidebar both render.
+ * - `wm-navigation-hamburger` — required for collapsible viewports; set its `nav-id` to match
+ *   this component's `id`. No handler is needed for the pairing itself — wm-navigation listens
+ *   for `wmNavigationHamburgerClicked` on `window` and toggles `open` itself — but without a
+ *   matching `nav-id`/`id` pair, the hamburger's `aria-controls` and the toggle both silently
+ *   fail to connect.
  *
  */
 export class Navigation {
@@ -143,9 +176,9 @@ export class Navigation {
             } }));
     }
     render() {
-        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: () => {
+        return (h(Host, { key: '96933040f7f88edf4e52c5e0480712e1f15e8db6', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '4658a3e22aa96a55dfb5b0211912805b683e26d2', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'cb3ae13600538706292ed27eeff3f70e33015975', class: "tray" }, h("div", { key: 'df934dfeb30d54294656dde2cfc78c95c6140e65', class: "toggle-wrapper" }, h("wm-button", { key: '478b6428b08703302a21f64d7adc58e6788e1803', 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: 'e5ec6a2303ff3def1ddd4f3d5199c93a01895793', class: "navlist" }, h("slot", { key: 'b29379969f84e1cea3a3918ba97168420b1c4cbe' }))), this.isCollapsible && (h("div", { key: '176f724b791b7792caa5b5b519e79f48ccee2f6b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: '32035dea4487af347ec5e56c3010bdf8b84d2c12', class: "navlist" }, h("slot", { key: 'a3512e42e16da5ad5591fa1f1f5211dc5b1576ee' }))), this.isCollapsible && (h("div", { key: '8e77d6376ccc683560ec214d2ec7d694aa417789', 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-tag-input/wm-tag-input.js

@@ -251,9 +251,7 @@ export class TagInput {
     }
     // get the internal representation of a wm-tag-option
     elFromTagOption(el) {
-        return el.id
-            ? this.el.shadowRoot.querySelector("#" + el.id)
-            : undefined;
+        return el.id ? this.el.shadowRoot.querySelector("#" + el.id) : undefined;
     }
     // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
     get _focusedOption() {
@@ -436,7 +434,11 @@ export class TagInput {
         const addedNodes = Array.from(record.addedNodes);
         if (addedNodes.length > 0) {
             this.assignOptionIds();
-            addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
+            // reassign rather than push: Stencil only re-renders on a state reference change
+            const newNodes = addedNodes.filter((n) => !this.tagsList.includes(n));
+            if (newNodes.length > 0) {
+                this.tagsList = [...this.tagsList, ...newNodes];
+            }
         }
         const removedNodes = Array.from(record.removedNodes);
         if (removedNodes.length > 0) {
@@ -1075,10 +1077,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '3320626934db9d58503b2964530e0bac1126775e', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9342d3b7db294e8c6c791bb0b4debfa537ab4029', class: "label-wrapper" }, h("label", { key: '48f8454c94c26ee09d69221d5985d9bc6d14ad90', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '533458abd912ff8608419c53560baf6ff3e8ecb2', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8581fb8e727570200a2a024db5b3c767d79fb433', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'dc8aa608d413c1ccf2ce686d78ac14944f200421', class: "upper-row" }, h("div", { key: '8c076d96f42b6ce47d6ca49068fae2e51bbba705', class: "svg-icon svg-search" }), h("div", { key: '7dba4a97ab9435c4cd2f930e91922247349f0269', class: `tags-and-input-wrapper` }, h("ul", { key: '96f539b009fdc8cf9b267b8b7d9f9d110c00a24b', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '0506ec7b7255034f0fa8132d813727a72895b86a', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '8f8726c6d9e1a524b6c9b9aa90dee9748fc93635', class: "label-wrapper" }, h("label", { key: '1f9b00a496fcd9923800471cc77e8c9c65111a8b', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '3109f9ca0c4dbdfdde971b9c30c65e90a3d2c573', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'a3bfc9d17aa1df1ff84e807cd21bfb52dd3690de', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'be11a9727d97017988960d9458bf018e27f25c3b', class: "upper-row" }, h("div", { key: '9ae64eac0452889a0dbc49630a731f297c92c8c5', class: "svg-icon svg-search" }), h("div", { key: '07372a530d3bd24b8ae783d0bed5a3e095dbeeeb', class: `tags-and-input-wrapper` }, h("ul", { key: '2b16ed13429d52b1ad44b1aea45087f34e05997f', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '85c5677a7c97baf49906f90d0a2e20af3853b3d7', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'a60ae5ab37b6a973127ef0dbc73fdd25defa2b00', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'f66a9b7ab8687707e271dc606c54486e799a2dcc', id: "info", class: "info-text" }, this.info)), h("div", { key: '0e644fd0b06345ff5bb459e2dc46f7f6601bc92d', id: "error" }, this.errorMessage), h("div", { key: '94bea1eb5b48bd5a669d0f8a4ae98cc1ddde7692', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '3888229daf857f5c86ee4112d0762b9be5b3b099', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'fce52fa11fb5403c1dd7ac9c2dca11bbe9402665', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '1befdf76851f651878ade4110d8aec2e0238cdbe', id: "info", class: "info-text" }, this.info)), h("div", { key: '4bcd00c2fa6d4f00c79fc8a752a3dd57594ce9a1', id: "error" }, this.errorMessage), h("div", { key: '9d6da4e7accb62f9ad05dbdf0c5827ea18ade783', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-26T22:16:16",
+  "timestamp": "2026-09-08T13:22:53",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",
@@ -7663,7 +7663,7 @@
       "filePath": "src/components/wm-navigation/wm-navigation.tsx",
       "encapsulation": "shadow",
       "tag": "wm-navigation",
-      "docs": "Sidebar navigation that collapses into a hamburger menu on viewports narrower than 1024px.\nContains wm-navigation-item children and works alongside an external wm-navigation-hamburger\ntoggle. Must be placed in the DOM after `<header>` and before `<main>`.",
+      "docs": "Sidebar navigation that collapses into a hamburger menu on viewports narrower than 1024px.\nContains wm-navigation-item children and works alongside an external wm-navigation-hamburger\ntoggle. Render it as the first child of `<main>`, with the page's actual content in a sibling\nelement — a flex or grid `<main>` lets the navigation sit alongside that content as a\nsidebar on viewports 1024px and wider, with no extra positioning needed.",
       "docsTags": [
         {
           "name": "category",
@@ -7683,15 +7683,19 @@
         },
         {
           "name": "usageNotes",
-          "text": "- Use `wm-navigation-hamburger` (a separate component) as the external toggle; it communicates\n  with wm-navigation via the `wmNavigationHamburgerClicked` window event.\n- `open` can be set initially to `true` to start the navigation expanded.\n- Navigation and main content scroll independently — no additional overflow handling is needed.\n\nRequired host setup:\n- Never set `display: none` or `visibility: hidden` on the host element or its wrapper\n  container. The component manages its own visibility internally, and hiding the container\n  from the outside blocks the overlay from appearing when the hamburger is triggered."
+          "text": "- Use `wm-navigation-hamburger` (a separate component) as the external toggle. It communicates\n  with wm-navigation via the `wmNavigationHamburgerClicked` window event and a document-wide\n  lookup, so it does not need to be a DOM sibling of wm-navigation — place it in the page\n  header instead, at the leading edge before the logo, with room around it so it isn't flush\n  against neighboring header content.\n- `open` can be set initially to `true` to start the navigation expanded.\n- Navigation and main content scroll independently — no additional overflow handling is needed.\n\nRequired host setup:\n- Never set `display: none` or `visibility: hidden` on the host element or its wrapper\n  container. The component manages its own visibility internally, and hiding the container\n  from the outside blocks the overlay from appearing when the hamburger is triggered.\n- Give the element that wraps wm-navigation and the page content (commonly `<main>`) a flex\n  or grid layout. Without one, the navigation and content stack instead of sitting side by\n  side as a sidebar on viewports 1024px and wider."
         },
         {
           "name": "example",
-          "text": "{html} Basic navigation\n<wm-navigation-hamburger nav-id=\"main-nav\"></wm-navigation-hamburger>\n<wm-navigation id=\"main-nav\">\n<wm-navigation-item href=\"/dashboard\" text=\"Dashboard\" active></wm-navigation-item>\n<wm-navigation-item href=\"/reports\" text=\"Reports\"></wm-navigation-item>\n</wm-navigation>"
+          "text": "{html} Basic navigation\n<header class=\"app-header\">\n<div class=\"app-header__hamburger\">\n<wm-navigation-hamburger nav-id=\"main-nav\"></wm-navigation-hamburger>\n</div>\n<a class=\"app-header__logo\" href=\"/\">App Name</a>\n</header>\n<main class=\"app-main\">\n<wm-navigation id=\"main-nav\">\n<wm-navigation-item href=\"/dashboard\" text=\"Dashboard\" active></wm-navigation-item>\n<wm-navigation-item href=\"/reports\" text=\"Reports\"></wm-navigation-item>\n</wm-navigation>\n<div class=\"app-main__content\">Page content</div>\n</main>"
         },
         {
           "name": "example",
-          "text": "{react} Basic navigation\n<WmNavigationHamburger navId=\"main-nav\" />\n<WmNavigation id=\"main-nav\">\n<WmNavigationItem href=\"/dashboard\" text=\"Dashboard\" active={true} />\n<WmNavigationItem href=\"/reports\" text=\"Reports\" />\n</WmNavigation>"
+          "text": "{react} Basic navigation\n<header className=\"app-header\">\n<div className=\"app-header__hamburger\">\n<WmNavigationHamburger navId=\"main-nav\" />\n</div>\n<a className=\"app-header__logo\" href=\"/\">App Name</a>\n</header>\n<main className=\"app-main\">\n<WmNavigation id=\"main-nav\">\n<WmNavigationItem href=\"/dashboard\" text=\"Dashboard\" active={true} />\n<WmNavigationItem href=\"/reports\" text=\"Reports\" />\n</WmNavigation>\n<div className=\"app-main__content\">Page content</div>\n</main>"
+        },
+        {
+          "name": "requiredSetup",
+          "text": "- `wm-navigation-item` — slot at least one as a child; each supplies a link the collapsible\n  menu and the persistent sidebar both render.\n- `wm-navigation-hamburger` — required for collapsible viewports; set its `nav-id` to match\n  this component's `id`. No handler is needed for the pairing itself — wm-navigation listens\n  for `wmNavigationHamburgerClicked` on `window` and toggles `open` itself — but without a\n  matching `nav-id`/`id` pair, the hamburger's `aria-controls` and the toggle both silently\n  fail to connect."
         }
       ],
       "usage": {},

package/dist/docs/props-reference.json

@@ -1085,7 +1085,7 @@
   },
   {
     "tag": "wm-navigation",
-    "description": "Sidebar navigation that collapses into a hamburger menu on viewports narrower than 1024px.\nContains wm-navigation-item children and works alongside an external wm-navigation-hamburger\ntoggle. Must be placed in the DOM after `<header>` and before `<main>`.",
+    "description": "Sidebar navigation that collapses into a hamburger menu on viewports narrower than 1024px.\nContains wm-navigation-item children and works alongside an external wm-navigation-hamburger\ntoggle. Render it as the first child of `<main>`, with the page's actual content in a sibling\nelement — a flex or grid `<main>` lets the navigation sit alongside that content as a\nsidebar on viewports 1024px and wider, with no extra positioning needed.",
     "props": [
       {
         "name": "open",

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

@@ -3,7 +3,9 @@
 
 **Purpose:** Sidebar navigation that collapses into a hamburger menu on viewports narrower than 1024px.
 Contains wm-navigation-item children and works alongside an external wm-navigation-hamburger
-toggle. Must be placed in the DOM after `<header>` and before `<main>`.
+toggle. Render it as the first child of `<main>`, with the page's actual content in a sibling
+element -- a flex or grid `<main>` lets the navigation sit alongside that content as a
+sidebar on viewports 1024px and wider, with no extra positioning needed.
 
 **When to use:**
 
@@ -20,8 +22,11 @@ _None documented_
 
 **Usage notes:**
 
-- Use `wm-navigation-hamburger` (a separate component) as the external toggle; it communicates
-  with wm-navigation via the `wmNavigationHamburgerClicked` window event.
+- Use `wm-navigation-hamburger` (a separate component) as the external toggle. It communicates
+  with wm-navigation via the `wmNavigationHamburgerClicked` window event and a document-wide
+  lookup, so it does not need to be a DOM sibling of wm-navigation -- place it in the page
+  header instead, at the leading edge before the logo, with room around it so it isn't flush
+  against neighboring header content.
 - `open` can be set initially to `true` to start the navigation expanded.
 - Navigation and main content scroll independently -- no additional overflow handling is needed.
 
@@ -29,6 +34,9 @@ Required host setup:
 - Never set `display: none` or `visibility: hidden` on the host element or its wrapper
   container. The component manages its own visibility internally, and hiding the container
   from the outside blocks the overlay from appearing when the hamburger is triggered.
+- Give the element that wraps wm-navigation and the page content (commonly `<main>`) a flex
+  or grid layout. Without one, the navigation and content stack instead of sitting side by
+  side as a sidebar on viewports 1024px and wider.
 
 **Props:**
 - `open` -- Controls the open/closed state of the collapsible navigation. Has no effect
@@ -41,6 +49,16 @@ on viewports wider than 1024px where the navigation is always visible. _(default
 - `wmNavigationStateChanged` -- Fires when the collapsible navigation opens or closes. Consumed by
 wm-navigation-hamburger to keep its `aria-expanded` state in sync.
 
+**Required setup:**
+
+- `wm-navigation-item` -- slot at least one as a child; each supplies a link the collapsible
+  menu and the persistent sidebar both render.
+- `wm-navigation-hamburger` -- required for collapsible viewports; set its `nav-id` to match
+  this component's `id`. No handler is needed for the pairing itself -- wm-navigation listens
+  for `wmNavigationHamburgerClicked` on `window` and toggles `open` itself -- but without a
+  matching `nav-id`/`id` pair, the hamburger's `aria-controls` and the toggle both silently
+  fail to connect.
+
 **Accessibility:**
 
 - Rendered with `role="navigation"` and an `aria-label` of "Main".
@@ -64,19 +82,35 @@ wm-navigation-hamburger to keep its `aria-expanded` state in sync.
 _Basic navigation_
 
 ```html
+<header class="app-header">
+<div class="app-header__hamburger">
 <wm-navigation-hamburger nav-id="main-nav"></wm-navigation-hamburger>
+</div>
+<a class="app-header__logo" href="/">App Name</a>
+</header>
+<main class="app-main">
 <wm-navigation id="main-nav">
 <wm-navigation-item href="/dashboard" text="Dashboard" active></wm-navigation-item>
 <wm-navigation-item href="/reports" text="Reports"></wm-navigation-item>
 </wm-navigation>
+<div class="app-main__content">Page content</div>
+</main>
 ```
 
 _Basic navigation_
 
 ```react
+<header className="app-header">
+<div className="app-header__hamburger">
 <WmNavigationHamburger navId="main-nav" />
+</div>
+<a className="app-header__logo" href="/">App Name</a>
+</header>
+<main className="app-main">
 <WmNavigation id="main-nav">
 <WmNavigationItem href="/dashboard" text="Dashboard" active={true} />
 <WmNavigationItem href="/reports" text="Reports" />
 </WmNavigation>
+<div className="app-main__content">Page content</div>
+</main>
 ```

package/dist/esm/{app-globals-e9a97ede.js → app-globals-668b9d5c.js}

@@ -1,6 +1,6 @@
 import './index-3425d80d.js';
 
-const version = "5.32.0";
+const version = "5.32.1-alpha.1";
 
 // 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-e9a97ede.js';
+import { g as globalScripts } from './app-globals-668b9d5c.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-e9a97ede.js';
+import { g as globalScripts } from './app-globals-668b9d5c.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/esm/wm-navigation_3.entry.js

@@ -102,9 +102,9 @@ const Navigation = class {
             } }));
     }
     render() {
-        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: () => {
+        return (h(Host, { key: '96933040f7f88edf4e52c5e0480712e1f15e8db6', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '4658a3e22aa96a55dfb5b0211912805b683e26d2', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'cb3ae13600538706292ed27eeff3f70e33015975', class: "tray" }, h("div", { key: 'df934dfeb30d54294656dde2cfc78c95c6140e65', class: "toggle-wrapper" }, h("wm-button", { key: '478b6428b08703302a21f64d7adc58e6788e1803', 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: 'e5ec6a2303ff3def1ddd4f3d5199c93a01895793', class: "navlist" }, h("slot", { key: 'b29379969f84e1cea3a3918ba97168420b1c4cbe' }))), this.isCollapsible && (h("div", { key: '176f724b791b7792caa5b5b519e79f48ccee2f6b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: '32035dea4487af347ec5e56c3010bdf8b84d2c12', class: "navlist" }, h("slot", { key: 'a3512e42e16da5ad5591fa1f1f5211dc5b1576ee' }))), this.isCollapsible && (h("div", { key: '8e77d6376ccc683560ec214d2ec7d694aa417789', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/wm-tag-input.entry.js

@@ -140,9 +140,7 @@ const TagInput = class {
     }
     // get the internal representation of a wm-tag-option
     elFromTagOption(el) {
-        return el.id
-            ? this.el.shadowRoot.querySelector("#" + el.id)
-            : undefined;
+        return el.id ? this.el.shadowRoot.querySelector("#" + el.id) : undefined;
     }
     // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
     get _focusedOption() {
@@ -325,7 +323,11 @@ const TagInput = class {
         const addedNodes = Array.from(record.addedNodes);
         if (addedNodes.length > 0) {
             this.assignOptionIds();
-            addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
+            // reassign rather than push: Stencil only re-renders on a state reference change
+            const newNodes = addedNodes.filter((n) => !this.tagsList.includes(n));
+            if (newNodes.length > 0) {
+                this.tagsList = [...this.tagsList, ...newNodes];
+            }
         }
         const removedNodes = Array.from(record.removedNodes);
         if (removedNodes.length > 0) {
@@ -964,10 +966,10 @@ const TagInput = class {
         }
     }
     render() {
-        return (h("div", { key: '3320626934db9d58503b2964530e0bac1126775e', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9342d3b7db294e8c6c791bb0b4debfa537ab4029', class: "label-wrapper" }, h("label", { key: '48f8454c94c26ee09d69221d5985d9bc6d14ad90', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '533458abd912ff8608419c53560baf6ff3e8ecb2', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8581fb8e727570200a2a024db5b3c767d79fb433', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'dc8aa608d413c1ccf2ce686d78ac14944f200421', class: "upper-row" }, h("div", { key: '8c076d96f42b6ce47d6ca49068fae2e51bbba705', class: "svg-icon svg-search" }), h("div", { key: '7dba4a97ab9435c4cd2f930e91922247349f0269', class: `tags-and-input-wrapper` }, h("ul", { key: '96f539b009fdc8cf9b267b8b7d9f9d110c00a24b', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '0506ec7b7255034f0fa8132d813727a72895b86a', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '8f8726c6d9e1a524b6c9b9aa90dee9748fc93635', class: "label-wrapper" }, h("label", { key: '1f9b00a496fcd9923800471cc77e8c9c65111a8b', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '3109f9ca0c4dbdfdde971b9c30c65e90a3d2c573', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'a3bfc9d17aa1df1ff84e807cd21bfb52dd3690de', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'be11a9727d97017988960d9458bf018e27f25c3b', class: "upper-row" }, h("div", { key: '9ae64eac0452889a0dbc49630a731f297c92c8c5', class: "svg-icon svg-search" }), h("div", { key: '07372a530d3bd24b8ae783d0bed5a3e095dbeeeb', class: `tags-and-input-wrapper` }, h("ul", { key: '2b16ed13429d52b1ad44b1aea45087f34e05997f', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '85c5677a7c97baf49906f90d0a2e20af3853b3d7', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'a60ae5ab37b6a973127ef0dbc73fdd25defa2b00', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'f66a9b7ab8687707e271dc606c54486e799a2dcc', id: "info", class: "info-text" }, this.info)), h("div", { key: '0e644fd0b06345ff5bb459e2dc46f7f6601bc92d', id: "error" }, this.errorMessage), h("div", { key: '94bea1eb5b48bd5a669d0f8a4ae98cc1ddde7692', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '3888229daf857f5c86ee4112d0762b9be5b3b099', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'fce52fa11fb5403c1dd7ac9c2dca11bbe9402665', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '1befdf76851f651878ade4110d8aec2e0238cdbe', id: "info", class: "info-text" }, this.info)), h("div", { key: '4bcd00c2fa6d4f00c79fc8a752a3dd57594ce9a1', id: "error" }, this.errorMessage), h("div", { key: '9d6da4e7accb62f9ad05dbdf0c5827ea18ade783', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/ripple/p-44c372a6.js

@@ -0,0 +1 @@
+import"./p-83c3db60.js";window.navigator.plugins.length>0&&console.log("%cRipple component library %c%s","color: #575195; font-weight: bold","font-weight: bold","5.32.1-alpha.1"),window.addEventListener("keydown",(function(n){if("Tab"==n.key){var o=new Event("wmUserIsTabbing");window.dispatchEvent(o),document.querySelector("body").classList.add("wmcl-user-is-tabbing")}"ArrowLeft"!=n.key&&"ArrowUp"!=n.key&&"ArrowRight"!=n.key&&"ArrowDown"!=n.key||(o=new Event("wmUserIsKeying"),window.dispatchEvent(o),document.querySelector("body").classList.add("wmcl-user-is-keying"))})),window.addEventListener("mousedown",(function(){var n=new Event("wmUserIsNotTabbing");window.dispatchEvent(n),document.querySelector("body").classList.remove("wmcl-user-is-tabbing"),document.querySelector("body").classList.remove("wmcl-user-is-keying")}));const n=document.createElement("div");n.id="wm-tooltip-container";const o=document.createElement("div");o.id="wm-tooltip",o.classList.add("wm-tooltip"),o.setAttribute("popover","manual"),o.setAttribute("aria-hidden","true");const t=document.createElement("style");t.textContent="\n.wm-tooltip {\n  position: fixed;\n  overflow: hidden;\n  pointer-events: none;\n  line-height: normal;\n  font-family: inherit;\n  font-size: 0.875rem;\n  text-transform: none;\n  font-weight: normal;\n  background: var(--wmcolor-tooltip-background);\n  color: var(--wmcolor-tooltip-text);\n  z-index: 999999;\n  max-width: var(--wmTooltipMaxWidth, 13.75rem);\n  margin-right: 1.5rem;\n  padding: 0.375rem;\n  transition-property: opacity;\n  transition-delay: 0s;\n  opacity: 0;\n  inset: unset;\n  top: 0;\n  left: 0;\n  transform: translateZ(0);\n  will-change: transform;\n  transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));\n  border: none;\n}\n\n.wm-tooltip:popover-open {\n  opacity: 0;\n}\n\n.wm-tooltip.show {\n  transition-delay: 500ms;\n  opacity: 1;\n}\n";const e=document.querySelector("body");e?(document.head.appendChild(t),n.appendChild(o),e.appendChild(n)):document.addEventListener("DOMContentLoaded",(()=>{const e=document.querySelector("body");document.head.appendChild(t),n.appendChild(o),e.appendChild(n)}));const i=()=>{};export{i as g}