@watermarkinsights/ripple 5.31.0-alpha.7 → 5.31.0

package/dist/cjs/{app-globals-f7da32e6.js → app-globals-768940fa.js}

@@ -2,7 +2,7 @@
 
 require('./index-bb947bd5.js');
 
-const version = "5.31.0-alpha.7";
+const version = "5.31.0";
 
 // 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-f7da32e6.js');
+const appGlobals = require('./app-globals-768940fa.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-f7da32e6.js');
+const appGlobals = require('./app-globals-768940fa.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

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

@@ -177,8 +177,8 @@ const Toggletip = class {
     handleClick(ev) {
         if (this.isOpen) {
             const isElOrChild = ev.composedPath().includes(this.el);
-            const isButtonClick = ev.composedPath().includes(this.buttonEl);
-            if (isElOrChild && !isButtonClick) {
+            if (isElOrChild) {
+                // Re-announce if clicking any part of the component while open
                 this.announceToggletip();
             }
         }
@@ -238,11 +238,11 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '321d03ab95c9e77b4e2b23fd833231e6fa03c64e', class: `size-${this.targetSize}` }, index.h("button", { key: '4d529ff8aa85c7802dbeca145ee0b82d6880d6db', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
+        return (index.h(index.Host, { key: '4ec52955615c08a69684e5dc83eed0decc9fe73e', class: `size-${this.targetSize}` }, index.h("button", { key: '19e52e37cb2d712e47049f029d19ce7aaf03f111', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: 'ccc4a3a9dfa81a1b0dd8fb4ecbca7976f2aff6dc', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: '4cfdda63877a73b8f0ae74dc0f04f685f64a2c0a', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '9dbfd9cf354be99641757f5a3495725b0e9c5485', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: 'a563859bd11374774b51890693ff4da6a3b9f8e9', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -16,7 +16,8 @@ import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft
  * @accessibility
  * - `label` sets the `aria-label` on the trigger button — required even though the button
  *   has a visual icon.
- * - The panel content is announced via `role="status"` / `aria-live="polite"` when opened.
+ * - The panel content is announced via `role="status"` / `aria-live="polite"` when opened,
+ *   and re-announced if the button is activated while the panel is already open.
  * - A hover/focus tooltip shows `"More information"` (info type) or `"Powered by AI"` (ai
  *   type) while the panel is closed.
  *
@@ -217,8 +218,8 @@ export class Toggletip {
     handleClick(ev) {
         if (this.isOpen) {
             const isElOrChild = ev.composedPath().includes(this.el);
-            const isButtonClick = ev.composedPath().includes(this.buttonEl);
-            if (isElOrChild && !isButtonClick) {
+            if (isElOrChild) {
+                // Re-announce if clicking any part of the component while open
                 this.announceToggletip();
             }
         }
@@ -278,11 +279,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '321d03ab95c9e77b4e2b23fd833231e6fa03c64e', class: `size-${this.targetSize}` }, h("button", { key: '4d529ff8aa85c7802dbeca145ee0b82d6880d6db', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
+        return (h(Host, { key: '4ec52955615c08a69684e5dc83eed0decc9fe73e', class: `size-${this.targetSize}` }, h("button", { key: '19e52e37cb2d712e47049f029d19ce7aaf03f111', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'ccc4a3a9dfa81a1b0dd8fb4ecbca7976f2aff6dc', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '4cfdda63877a73b8f0ae74dc0f04f685f64a2c0a', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '9dbfd9cf354be99641757f5a3495725b0e9c5485', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: 'a563859bd11374774b51890693ff4da6a3b9f8e9', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-01T21:46:53",
+  "timestamp": "2026-07-02T17:37:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",
@@ -13187,7 +13187,7 @@
         },
         {
           "name": "accessibility",
-          "text": "- `label` sets the `aria-label` on the trigger button — required even though the button\n  has a visual icon.\n- The panel content is announced via `role=\"status\"` / `aria-live=\"polite\"` when opened.\n- A hover/focus tooltip shows `\"More information\"` (info type) or `\"Powered by AI\"` (ai\n  type) while the panel is closed."
+          "text": "- `label` sets the `aria-label` on the trigger button — required even though the button\n  has a visual icon.\n- The panel content is announced via `role=\"status\"` / `aria-live=\"polite\"` when opened,\n  and re-announced if the button is activated while the panel is already open.\n- A hover/focus tooltip shows `\"More information\"` (info type) or `\"Powered by AI\"` (ai\n  type) while the panel is closed."
         },
         {
           "name": "usageNotes",

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

@@ -1,6 +1,5 @@
 ### Action Menu
 - **Element:** `<wm-action-menu>`
-- **Status:** stable
 
 **Purpose:** Dropdown interface that displays a list of action items. When closed it shows a text
 button, icon button, or selector box depending on action-menu-type. Selecting an item

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

@@ -1,6 +1,5 @@
 ### Button
 - **Element:** `<wm-button>`
-- **Status:** stable
 
 **Purpose:** Interactive button element that triggers actions and workflows. Has seven visual
 types plus AI variants.

package/dist/docs/skill/wm-chart-bar.md

@@ -1,6 +1,5 @@
 ### Chart Bar
 - **Element:** `<wm-chart-bar>`
-- **Status:** stable
 
 **Purpose:** Renders a horizontal bar chart for comparing values across nominal categories. Data and
 configuration are set via JavaScript properties (`chart.config` and `chart.data`) -- not

package/dist/docs/skill/wm-chart-column.md

@@ -1,6 +1,5 @@
 ### Chart Column
 - **Element:** `<wm-chart-column>`
-- **Status:** stable
 
 **Purpose:** Renders a vertical column chart for comparing values across nominal categories or showing
 distribution across interval/ratio ranges. Data and configuration are set via JavaScript

package/dist/docs/skill/wm-chart-legend.md

@@ -1,6 +1,5 @@
 ### Chart Legend
 - **Element:** `<wm-chart-legend>`
-- **Status:** stable
 
 **Purpose:** External legend component for wm-chart-bar and wm-chart-column. Retrieves color and label
 data from one or more charts via element IDs, allowing a single legend to serve multiple

package/dist/docs/skill/wm-chart-slice.md

@@ -1,6 +1,5 @@
 ### Chart Slice
 - **Element:** `<wm-chart-slice>`
-- **Status:** stable
 
 **Purpose:** Data slice for a wm-chart composition chart. Each slice represents one segment of the whole.
 Always used as a direct child of wm-chart.

package/dist/docs/skill/wm-chart-stack.md

@@ -1,6 +1,5 @@
 ### Chart Stack
 - **Element:** `<wm-chart-stack>`
-- **Status:** stable
 
 **Purpose:** Renders a horizontal stacked bar chart: each stack's segments are sized as a percentage of
 that stack's total. Supports any number of stacks and segments, each occupying their own row.

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

@@ -1,6 +1,5 @@
 ### Chart
 - **Element:** `<wm-chart>`
-- **Status:** stable
 
 **Purpose:** Composition chart component rendering doughnut or stacked bar charts. Composed of a parent
 wm-chart element and wm-chart-slice children. Has 3 doughnut subtypes and 5 bar subtypes,

package/dist/docs/skill/wm-date-range.md

@@ -1,6 +1,5 @@
 ### Date Range
 - **Element:** `<wm-date-range>`
-- **Status:** stable
 
 **Purpose:** Two linked date inputs (start and end) with a shared calendar popup for selecting a date
 range. Users can type or click to set each date. Provides separate error states for start
@@ -61,8 +60,18 @@ they were clicked.`
 - `wmStartInputBlur` -- Fires when the start date input loses focus.
 
 **Methods:**
-- `isValidISO(input?: string) => Promise<boolean>`
-- `reformatDate(inputFormat: string, outputFormat: string, date?: string) => Promise<string>`
+- `isValidISO(input?: string) => Promise<boolean>` -- Validates whether a string is a well-formed, calendar-correct ISO date
+(YYYY-MM-DD). Accounts for invalid day-of-month values and leap years.
+  - `input` -- - The string to validate.
+  - **Returns:** `true` if the string is a valid ISO date, `false` otherwise.
+- `reformatDate(inputFormat: string, outputFormat: string, date?: string) => Promise<string>` -- Converts a date string between `"US"` (mm/dd/yyyy), `"INT"` (dd/mm/yyyy),
+and `"ISO"` (YYYY-MM-DD). Direct US ↔ INT conversion is not supported -- route through
+ISO as an intermediate step.
+  - `inputFormat` -- - Format of the input date string (`"US"`, `"INT"`, or `"ISO"`).
+  - `outputFormat` -- - Desired output format (`"US"`, `"INT"`, or `"ISO"`).
+  - `date` -- - The date string to reformat.
+  - **Returns:** The reformatted date string, an empty string if `date` is omitted, or the original
+string unchanged if it cannot be parsed.
 
 **Accessibility:**
 

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

@@ -1,6 +1,5 @@
 ### Datepicker
 - **Element:** `<wm-datepicker>`
-- **Status:** stable
 
 **Purpose:** Date input that lets users type a date or pick one from a calendar popup. Supports
 configurable date formats, pre-selection, validation, and full keyboard navigation of the calendar.
@@ -41,8 +40,23 @@ _None documented_
 - `wmDatepickerInputBlurred` -- Fires when the text input loses focus.
 
 **Methods:**
-- `isValidIso(input?: string) => Promise<boolean>`
-- `reformatDate(inputFormat: "US" | "INT" | "ISO", outputFormat: "US" | "INT" | "ISO", date?: string) => Promise<string>`
+- `isValidIso(input?: string) => Promise<boolean>` -- Validates whether a string is a well-formed, calendar-correct ISO date
+(YYYY-MM-DD). Accounts for invalid day-of-month values and leap years.
+  - `input` -- - The string to validate.
+  - **Returns:** `true` if the string is a valid ISO date, `false` otherwise.
+  - **Example:** `isValidIso("1969-06-20") // -> true`
+  - **Example:** `isValidIso("1969-06-33") // -> false (day 33 does not exist)`
+  - **Example:** `isValidIso("2023-02-29") // -> false (2023 is not a leap year)`
+- `reformatDate(inputFormat: "US" | "INT" | "ISO", outputFormat: "US" | "INT" | "ISO", date?: string) => Promise<string>` -- Converts a date string between the supported format tokens: `"US"` (mm/dd/yyyy),
+`"INT"` (dd/mm/yyyy), and `"ISO"` (YYYY-MM-DD). Direct US ↔ INT conversion is not supported --
+route through ISO as an intermediate step.
+  - `inputFormat` -- - Format of the input date string.
+  - `outputFormat` -- - Desired output format.
+  - `date` -- - The date string to reformat.
+  - **Returns:** The reformatted date string, an empty string if `date` is omitted or falsy, or the
+original string unchanged if it cannot be parsed.
+  - **Example:** `reformatDate("US", "ISO", "06/20/1969") // -> "1969-06-20"`
+  - **Example:** `reformatDate("ISO", "US", "1969-06-20") // -> "06/20/1969"`
 
 **Accessibility:**
 

package/dist/docs/skill/wm-file-list.md

@@ -1,6 +1,5 @@
 ### File List
 - **Element:** `<wm-file-list>`
-- **Status:** stable
 
 **Purpose:** Read-only list of files with optional preview and download actions. Visually similar to the
 Uploader but with no upload capability. Use when displaying existing files users can view or

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

@@ -1,6 +1,5 @@
 ### File
 - **Element:** `<wm-file>`
-- **Status:** stable
 
 **Purpose:** Displays a single file row with its name, optional metadata, and configurable action buttons
 (preview, download, delete). Adapts responsively -- at narrow widths action buttons collapse

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

@@ -1,6 +1,5 @@
 ### Flyout
 - **Element:** `<wm-flyout>`
-- **Status:** stable
 
 **Purpose:** Slide-in panel that renders over the main content as a modal dialog. Used for detail views,
 multi-step workflows, and forms that require focus without navigating away from the page.
@@ -72,7 +71,9 @@ dialog close event fires. The host application must set `open` to false in respo
 - `wmFlyoutSecondaryTriggered` -- Fires when the secondary footer button is clicked.
 
 **Methods:**
-- `focusHeading() => Promise<void>`
+- `focusHeading() => Promise<void>` -- Moves focus to the flyout's heading element. Call this after updating flyout
+content in a multi-step workflow so screen readers announce the new heading to the user.
+  - **Returns:** A promise that resolves once focus has been applied.
 
 **Accessibility:**
 

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

@@ -1,6 +1,5 @@
 ### Input
 - **Element:** `<wm-input>`
-- **Status:** stable
 
 **Purpose:** Accessible single-line text input. Supports text and number types, character limits,
 symbol prefixes/suffixes, and inline info/error messaging. Use instead of a native

package/dist/docs/skill/wm-line-chart.md

@@ -1,6 +1,5 @@
 ### Line Chart
 - **Element:** `<wm-line-chart>`
-- **Status:** stable
 
 **Purpose:** Visualizes how data changes over time. Ideal for trend analysis -- tracking one or more
 metrics across chronological intervals such as semesters, academic years, or months.

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

@@ -1,6 +1,5 @@
 ### Menuitem
 - **Element:** `<wm-menuitem>`
-- **Status:** stable
 
 **Purpose:** A single item within a wm-action-menu dropdown. Always used as a direct child of
 wm-action-menu -- never rendered in isolation.

package/dist/docs/skill/wm-modal-footer.md

@@ -1,6 +1,5 @@
 ### Modal Footer
 - **Element:** `<wm-modal-footer>`
-- **Status:** stable
 
 **Purpose:** Footer section for a wm-modal. Renders a primary action button, an optional secondary
 button, and optional informational text. Button clicks delegate to the parent modal's

package/dist/docs/skill/wm-modal-header.md

@@ -1,6 +1,5 @@
 ### Modal Header
 - **Element:** `<wm-modal-header>`
-- **Status:** stable
 
 **Purpose:** Header section for a wm-modal. Renders the modal title, an optional subheading, and the
 close button. Always used as a direct child of wm-modal -- never rendered in isolation.

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

@@ -1,6 +1,5 @@
 ### Modal
 - **Element:** `<wm-modal>`
-- **Status:** stable
 
 **Purpose:** Modal dialog that overlays the page. Renders as a full-bleed `modal` (default) or a
 smaller centered `dialog`. Content is provided through wm-modal-header, wm-modal-footer,
@@ -61,9 +60,15 @@ to false in response.
 - `wmModalSecondaryTriggered` -- Fires when the wm-modal-footer secondary button is clicked.
 
 **Methods:**
-- `emitCloseEvent() => Promise<void>`
-- `emitPrimaryEvent() => Promise<void>`
-- `emitSecondaryEvent() => Promise<void>`
+- `emitCloseEvent() => Promise<void>` -- Programmatically fires `wmModalCloseTriggered`. Use when you need to trigger
+a close from outside the modal without simulating a button click.
+  - **Returns:** A promise that resolves once the event has been emitted.
+- `emitPrimaryEvent() => Promise<void>` -- Programmatically fires `wmModalPrimaryTriggered`. Use when you need to trigger
+the primary action from outside the modal.
+  - **Returns:** A promise that resolves once the event has been emitted.
+- `emitSecondaryEvent() => Promise<void>` -- Programmatically fires `wmModalSecondaryTriggered`. Use when you need to trigger
+the secondary action from outside the modal.
+  - **Returns:** A promise that resolves once the event has been emitted.
 
 **Accessibility:**
 

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

@@ -1,6 +1,5 @@
 ### Navigation Hamburger
 - **Element:** `<wm-navigation-hamburger>`
-- **Status:** stable
 
 **Purpose:** Toggle button for the collapsible wm-navigation sidebar. Renders a hamburger/menu icon
 button that communicates with wm-navigation via window events. Place immediately before

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

@@ -1,6 +1,5 @@
 ### Navigation Item
 - **Element:** `<wm-navigation-item>`
-- **Status:** stable
 
 **Purpose:** A single navigation link inside a wm-navigation. Renders as an anchor element with an
 optional icon slot. Always used as a direct child of wm-navigation.

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

@@ -1,6 +1,5 @@
 ### Navigation
 - **Element:** `<wm-navigation>`
-- **Status:** stable
 
 **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

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

@@ -1,6 +1,5 @@
 ### Navigator
 - **Element:** `<wm-navigator>`
-- **Status:** stable
 
 **Purpose:** User account menu that displays the logged-in user's name, email, and a product switcher
 for navigating between Watermark applications. Renders as a button that opens a dropdown

package/dist/docs/skill/wm-nested-select.md

@@ -1,6 +1,5 @@
 ### Nested Select
 - **Element:** `<wm-nested-select>`
-- **Status:** stable
 
 **Purpose:** Dropdown list of grouped options that allows single or multi-select. Like wm-select but
 options are organized into labeled categories via a two-level hierarchy. Composed of a

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

@@ -1,6 +1,5 @@
 ### Optgroup
 - **Element:** `<wm-optgroup>`
-- **Status:** stable
 
 **Purpose:** Named group of wm-option elements used inside wm-nested-select. Renders as a slide-in
 panel that appears when the user selects the group from the top-level menu.
@@ -24,7 +23,9 @@ dropdown menu. _(required)_
 - `wmOptgroupAllSelected` -- Fires when the "Select All" button inside this group is activated.
 
 **Methods:**
-- `emitDeselection() => Promise<void>`
+- `emitDeselection() => Promise<void>` -- Programmatically deselects all options in this group by emitting
+`wmOptgroupAllDeselected`.
+  - **Returns:** `Promise<void>`
 
 **Code example:**
 

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

@@ -1,6 +1,5 @@
 ### Option
 - **Element:** `<wm-option>`
-- **Status:** stable
 
 **Purpose:** Individual selectable item used inside wm-select, wm-nested-select (via wm-optgroup), and
 wm-optgroup. Renders as a listbox option with optional secondary text.

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

@@ -1,6 +1,5 @@
 ### Pagination
 - **Element:** `<wm-pagination>`
-- **Status:** stable
 
 **Purpose:** Pagination controls for navigating large data sets. Renders a full page-number strip on
 wider viewports and a minimal prev/next/first/last layout on narrow viewports. Does not

package/dist/docs/skill/wm-progress-indicator.md

@@ -1,6 +1,5 @@
 ### Progress Indicator
 - **Element:** `<wm-progress-indicator>`
-- **Status:** stable
 
 **Purpose:** Single progress indicator used inside a wm-progress-monitor. Renders the binary completion
 data for one category as either a doughnut chart (wide layout) or a horizontal bar (narrow

package/dist/docs/skill/wm-progress-monitor.md

@@ -1,6 +1,5 @@
 ### Progress Monitor
 - **Element:** `<wm-progress-monitor>`
-- **Status:** stable
 
 **Purpose:** Container for one or more wm-progress-indicator elements, each showing binary completion
 progress (e.g. "Completed" vs "Not Completed"). Above the layout breakpoint, indicators

package/dist/docs/skill/wm-progress-slice.md

@@ -1,6 +1,5 @@
 ### Progress Slice
 - **Element:** `<wm-progress-slice>`
-- **Status:** stable
 
 **Purpose:** Data slice for a wm-progress-indicator. Represents one state (complete or incomplete) in
 a binary progress chart. Always used as a direct child of wm-progress-indicator.

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

@@ -1,6 +1,5 @@
 ### Search
 - **Element:** `<wm-search>`
-- **Status:** stable
 
 **Purpose:** Search input for filtering data by query. Two variants: `'basic'` for simple text
 filtering, and `'find'` which adds prev/next result navigation buttons, a result count

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

@@ -1,6 +1,5 @@
 ### Select
 - **Element:** `<wm-select>`
-- **Status:** stable
 
 **Purpose:** Dropdown list of options that allows single or multi-select. Functionally similar to the
 native HTML `<select>` element but with Ripple styling and richer features including

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

@@ -1,6 +1,5 @@
 ### Snackbar
 - **Element:** `<wm-snackbar>`
-- **Status:** stable
 
 **Purpose:** Toast notification stack that renders transient messages at the bottom of the page.
 Notifications auto-dismiss after 6 seconds unless they include a `link` or `action`, in

package/dist/docs/skill/wm-tab-item.md

@@ -1,6 +1,5 @@
 ### Tab Item
 - **Element:** `<wm-tab-item>`
-- **Status:** stable
 
 **Purpose:** Individual tab button inside a wm-tab-list. Renders as a link with `role="tab"` and
 manages selection state. Always used as a direct child of wm-tab-list.

package/dist/docs/skill/wm-tab-list.md

@@ -1,6 +1,5 @@
 ### Tab List
 - **Element:** `<wm-tab-list>`
-- **Status:** stable
 
 **Purpose:** Tab list container that manages a group of wm-tab-item children and their associated
 wm-tab-panel elements. Handles keyboard navigation, ARIA wiring between tabs and panels,

package/dist/docs/skill/wm-tab-panel.md

@@ -1,6 +1,5 @@
 ### Tab Panel
 - **Element:** `<wm-tab-panel>`
-- **Status:** stable
 
 **Purpose:** Content panel associated with a wm-tab-item. Shows or hides based on whether its
 `tab-id` matches the selected tab in the parent wm-tab-list. Rendered with

package/dist/docs/skill/wm-tag-input.md

@@ -1,6 +1,5 @@
 ### Tag Input
 - **Element:** `<wm-tag-input>`
-- **Status:** stable
 
 **Purpose:** Input for selecting or creating a list of tags. Two variants: `'dropdown'` (options in a
 filterable list, supports creating new tags) and `'table'` (options in a filterable

package/dist/docs/skill/wm-tag-option.md

@@ -1,6 +1,5 @@
 ### Tag Option
 - **Element:** `<wm-tag-option>`
-- **Status:** stable
 
 **Purpose:** Option element for wm-tag-input. Represents a selectable tag in the dropdown list or
 table. Always used as a direct child of wm-tag-input. For the dropdown variant, slotted
@@ -29,8 +28,10 @@ on load pre-selects the option. _(default: `false`)_
 - `wmTagOptionSelected` -- Fires when this option is selected as a tag.
 
 **Methods:**
-- `emitDeselectedEvent() => Promise<void>`
-- `emitSelectedEvent() => Promise<void>`
+- `emitDeselectedEvent() => Promise<void>` -- Programmatically deselects this option, removing it as a tag.
+  - **Returns:** A promise that resolves once the event has been emitted.
+- `emitSelectedEvent() => Promise<void>` -- Programmatically selects this option, adding it as a tag.
+  - **Returns:** A promise that resolves once the event has been emitted.
 
 **Code example:**
 

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

@@ -1,6 +1,5 @@
 ### Textarea
 - **Element:** `<wm-textarea>`
-- **Status:** stable
 
 **Purpose:** Multi-line plain-text editing control with a drag handle for vertical resizing. Shares
 most functionality with wm-input. Use instead of native `<textarea>` in all Watermark UI.

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

@@ -1,6 +1,5 @@
 ### Timepicker
 - **Element:** `<wm-timepicker>`
-- **Status:** stable
 
 **Purpose:** Time input that lets users type a time or pick one from a dropdown list of 15-minute
 intervals. Supports 12-hour and 24-hour display and provides `reformatTime` and
@@ -52,8 +51,14 @@ be set programmatically by the application. _(default: `""`)_
 - `wmTimepickerTimeSelected` -- Fires when the user selects a time from the dropdown list. Detail: `{{ time: string }} time -- the selected time in 24-hour `hh:mm` format.`
 
 **Methods:**
-- `isValidTime(input: string) => Promise<boolean>`
-- `reformatTime(format: "12" | "24", time: TimeFormat12 | TimeFormat24) => Promise<string>`
+- `isValidTime(input: string) => Promise<boolean>` -- Validates a time string against both 12-hour and 24-hour formats.
+  - `input` -- The time string to validate.
+  - **Returns:** `true` if the string is a valid time, `false` otherwise.
+- `reformatTime(format: "12" | "24", time: TimeFormat12 | TimeFormat24) => Promise<string>` -- Converts a time string between 12-hour and 24-hour formats.
+  - `format` -- The target format: `"12"` for 12-hour (e.g. `"02:30 PM"`), `"24"` for
+24-hour (e.g. `"14:30"`).
+  - `time` -- The time string to convert. Accepts both 12-hour and 24-hour input.
+  - **Returns:** The reformatted time string.
 
 **Accessibility:**
 

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

@@ -1,6 +1,5 @@
 ### Toggletip
 - **Element:** `<wm-toggletip>`
-- **Status:** stable
 
 **Purpose:** Toggletip button that shows a small informational panel when clicked. Two visual types:
 `'info'` renders an info icon button; `'ai'` renders an animated AI sparkle icon. The
@@ -50,7 +49,8 @@ overflow the viewport. _(type: `"bottom" | "bottom-left" | "bottom-right" | "lef
 
 - `label` sets the `aria-label` on the trigger button -- required even though the button
   has a visual icon.
-- The panel content is announced via `role="status"` / `aria-live="polite"` when opened.
+- The panel content is announced via `role="status"` / `aria-live="polite"` when opened,
+  and re-announced if the button is activated while the panel is already open.
 - A hover/focus tooltip shows `"More information"` (info type) or `"Powered by AI"` (ai
   type) while the panel is closed.
 - **Keyboard:**

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

@@ -1,6 +1,5 @@
 ### Uploader
 - **Element:** `<wm-uploader>`
-- **Status:** stable
 
 **Purpose:** File upload component for attaching files. Composed of a trigger button and a list of
 wm-file children. Two variants: `'select'` opens the browser file picker; `'drop'` adds a

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

@@ -1,6 +1,5 @@
 ### Wrapper
 - **Element:** `<wm-wrapper>`
-- **Status:** stable
 
 **Events:**
 - `wmWrapperLoaded`

package/dist/esm/{app-globals-d77e6bdb.js → app-globals-7156a0c2.js}

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