wavemaker-dev-mcp 0.1.1 → 1.0.0

package/skills/components/wm-linear-layout.md

@@ -0,0 +1,92 @@
+---
+component: WmLinearLayout
+category: container
+import: components/container/linear-layout
+tags: [layout, flex, row, column, horizontal, vertical, container, autolayout, spacing]
+summary: Flex-based directional layout. Primary container for arranging children in a row or column with consistent spacing.
+related: [WmLinearLayoutItem, WmContainer, WmLayoutGrid]
+---
+
+# WmLinearLayout
+
+Primary layout container for arranging children horizontally or vertically using flexbox. Always pair with `WmLinearLayoutItem` children — direct content without a wrapper item may not space correctly.
+
+## Usage
+
+```jsx
+<WmLinearLayout name="headerRow" direction="row" spacing={12} horizontalalign="left" verticalalign="center">
+  <WmLinearLayoutItem name="headerRow_item1">
+    <WmLabel name="title" caption="Dashboard" />
+  </WmLinearLayoutItem>
+  <WmLinearLayoutItem name="headerRow_item2">
+    <WmButton name="addBtn" caption="Add" />
+  </WmLinearLayoutItem>
+</WmLinearLayout>
+```
+
+## Key Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| direction | `"row" \| "row-reverse" \| "column" \| "column-reverse"` | `"column"` | Flex direction for children |
+| spacing | `string \| number` | — | Gap between items (use token values: 3=xs, 6=sm, 12=md, 18=lg, 24=xl) |
+| horizontalalign | `"left" \| "right" \| "center"` | `"left"` | Horizontal alignment of children |
+| verticalalign | `"top" \| "bottom" \| "center"` | `"top"` | Vertical alignment of children |
+| name | `string` | — | Required. Widget identifier |
+| show | `boolean` | `true` | Visibility toggle |
+| width | `string` | — | CSS width (e.g. `"100%"`, `"200px"`) |
+| height | `string` | — | CSS height |
+| padding | `string` | — | CSS padding shorthand |
+| className | `string` | — | Additional CSS class names |
+
+## Spacing Token Map
+
+| Token | spacing value | Gap (px) |
+|-------|--------------|----------|
+| xs | 3 | 4px |
+| sm | 6 | 8px |
+| md | 12 | 16px |
+| lg | 18 | 24px |
+| xl | 24 | 32px |
+
+## Patterns
+
+**Row of buttons:**
+```jsx
+<WmLinearLayout name="actions" direction="row" spacing={12} verticalalign="center">
+  <WmLinearLayoutItem name="actions_item1">
+    <WmButton name="saveBtn" caption="Save" />
+  </WmLinearLayoutItem>
+  <WmLinearLayoutItem name="actions_item2">
+    <WmButton name="cancelBtn" caption="Cancel" />
+  </WmLinearLayoutItem>
+</WmLinearLayout>
+```
+
+**Full-width vertical stack:**
+```jsx
+<WmLinearLayout name="pageBody" direction="column" spacing={18} width="100%">
+  <WmLinearLayoutItem name="pageBody_item1">
+    <WmContainer name="section1" />
+  </WmLinearLayoutItem>
+  <WmLinearLayoutItem name="pageBody_item2">
+    <WmContainer name="section2" />
+  </WmLinearLayoutItem>
+</WmLinearLayout>
+```
+
+**Centered content:**
+```jsx
+<WmLinearLayout name="center" direction="row" horizontalalign="center" verticalalign="center" width="100%" height="100%">
+  <WmLinearLayoutItem name="center_item1">
+    <WmLabel name="msg" caption="No data found" />
+  </WmLinearLayoutItem>
+</WmLinearLayout>
+```
+
+## Notes
+
+- `WmLinearLayoutItem` has no visual props of its own — it is purely a structural wrapper.
+- Use `direction="row"` with `verticalalign="center"` for icon+label combos.
+- Prefer `spacing` over manual padding/margin on items for consistent token-aligned gaps.
+- For complex grid layouts (multi-column), use `WmLayoutGrid` instead.

package/skills/components/wm-list.md

@@ -0,0 +1,92 @@
+---
+component: WmList
+category: data
+import: components/data/list
+tags: [data, list, data-binding, pagination, icon, collapsible, dropdown]
+summary: List — dropdown data widget bound to a dataset.
+generated: true
+---
+
+# WmList
+
+List — dropdown data widget bound to a dataset.
+
+## Usage
+
+```jsx
+<WmList
+  name="list"
+  dataset={items}
+  displayfield="label"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| boundarylinks | `boolean` | No | — | Whether to show boundary links in pagination. |
+| collapsible | `boolean` | No | — | Whether the list items are collapsible. |
+| dateformat | `string` | No | — | Date format for list items. |
+| dataset | `T[]` | No | — | The collection of data items to display. |
+| datasource | `LiveVariableConfig` | No | — | The data source for the list. |
+| direction | `IDirection` | No | `"vertical"` | The layout direction of the list. |
+| disableitem | `boolean` | No | — | Whether to disable list items. |
+| enablereorder | `boolean` | No | — | Whether to enable reordering of list items. |
+| groupby | `string` | No | — | Property name to group the list items by. |
+| iconclass | `string` | No | — | CSS class for the list icon. |
+| itemclass | `string \| ((item: T) => string \| null \| undefined)` | No | — | CSS class or function returning a class for each list item. |
+| itemsperrow | `string` | No | — | Number of items to show per row in grid layout. |
+| listclass | `string` | No | — | CSS class for the list container. |
+| horizontalalign | `IAlignment` | No | — | Horizontal alignment of the list. |
+| columnalign | `IColumnAlignment` | No | — | Column alignment of the list items. |
+| multiselect | `boolean` | No | — | Whether to allow multiple items to be selected. |
+| loadingdatamsg | `string` | No | — | Message to display while loading data. |
+| loadingicon | `string` | No | — | CSS class for the loading icon. |
+| maxsize | `number` | No | — | Maximum size of the collection. |
+| statehandler | `StorageType` | No | — | State persistence handler type. |
+| navigation | `INavigation` | No | — | The type of navigation/pagination to use. |
+| navigationalign | `IAlignment` | No | — | Alignment of the navigation controls. |
+| nodatamessage | `string` | No | — | Message to display when no data is found. |
+| ondemandmessage | `string` | No | — | Message to display for On-Demand loading. |
+| orderby | `string` | No | — | Property name to order the list items by. |
+| paginationclass | `string` | No | — | CSS class for the pagination controls. |
+| pagesize | `number` | No | — | Number of items per page. |
+| selectfirstitem | `boolean` | No | — | Whether to automatically select the first item on load. |
+| selectionlimit | `number` | No | — | Maximum number of items that can be selected. |
+| showcount | `boolean` | No | — | Whether to show the item count. |
+| showrecordcount | `boolean` | No | — | Whether to show the record count. |
+| allowpagesizechange | `boolean` | No | — | Whether to allow the user to change the page size. |
+| pagesizeoptions | `string` | No | — | Available page size options. |
+| subheading | `string` | No | — | Subheading of the list. |
+| title | `string` | No | — | Title of the list. |
+| hidehorizontalscrollbar | `boolean` | No | — | Whether to hide the horizontal scrollbar. |
+| selectedItemWidgets | `Array<any> \| any` | No | — | Widgets for the currently selected item. |
+| onSelect | `ListSelectHandler<T>` | No | — | Callback for selection event. |
+| onClick | `ListItemEventHandler` | No | — | Callback for click event on a list item. |
+| onDblclick | `ListItemEventHandler` | No | — | Callback for double click event on a list item. |
+| onMouseEnter | `ListItemEventHandler` | No | — | Callback for mouse enter event on a list item. |
+| onMouseLeave | `ListItemEventHandler` | No | — | Callback for mouse leave event on a list item. |
+| onReorder | `ListReorderEventHandler<T>` | No | — | Callback for reorder event. |
+| onSelectionlimitexceed | `ListSelectionLimitExceededHandler` | No | — | Callback for when selection limit is exceeded. |
+| onBeforedatarender | `ListBeforeDataRenderHandler<T>` | No | — | Callback before data is rendered. |
+| onRender | `ListBeforeDataRenderHandler<T>` | No | — | Callback after data is rendered. |
+| onPaginationchange | `ListPaginationChangeHandler` | No | — | Callback for pagination change event. |
+| onSetrecord | `ListSetRecordHandler<T>` | No | — | Callback for setting a record. |
+| onPageChange | `ListPageEventHandler` | No | — | Callback for page change event. |
+| renderItem | `ListRenderItemHandler<T>` | No | — | Custom render function for list items. |
+| tabIndex | `number` | No | — | Tab index of the list. |
+| pulltorefresh | `boolean` | No | — | Whether to enable pull-to-refresh functionality. |
+| datafield | `string` | No | — | Property name to use for the data field. |
+| displayfield | `string` | No | — | Property name to use for the display field. |
+| getDisplayExpression | `(data: T, index?: number) => string` | No | — | Function to get the display expression for an item. |
+| displaylabel | `string` | No | — | Label for the display field. |
+| showNavigation | `boolean` | No | — | Whether to show navigation controls. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-list-*`
+
+See foundation-css: `src/tokens/web/components/list/list.json`

package/skills/components/wm-live-filter.md

@@ -0,0 +1,50 @@
+---
+component: WmLiveFilter
+category: data
+import: components/data/live-filter
+tags: [data, live, filter, pagination, icon, collapsible]
+summary: Live Filter data widget.
+generated: true
+---
+
+# WmLiveFilter
+
+Live Filter data widget.
+
+## Usage
+
+```jsx
+<WmLiveFilter
+  name="liveFilter"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| errormessage | `string` | No | — | Error message to display. |
+| captionposition | `string` | No | — | Position of the captions. |
+| title | `string` | No | — | Title of the live filter. |
+| enctype | `string` | No | — | Encoding type. |
+| method | `string` | No | — | HTTP method. |
+| captionalign | `string` | No | — | Alignment of captions. |
+| subheading | `string` | No | — | Subheading of the live filter. |
+| iconclass | `string` | No | `wi wi-filter-list` | CSS class for the icon. |
+| autocomplete | `boolean` | No | — | Whether to enable autocomplete. |
+| collapsible | `boolean` | No | — | Whether the filter is collapsible. |
+| expanded | `boolean` | No | — | Whether the filter is expanded by default. |
+| formdatasource | `string` | No | — | Data source for the form. |
+| numberoffields | `number` | No | — | Number of fields. |
+| pagesize | `number` | No | `20` | Page size for results. |
+| autoupdate | `boolean` | No | `true` | Whether to automatically update results. |
+| enableemptyfilter | `string` | No | ` ` | Whether to enable empty filter. |
+| dataSource | `string` | No | — | The data source for the filter. |
+| orderBy | `string` | No | — | Order results by field. |
+| onSuccess | `(data: any) => void` | No | — | Success callback. |
+| onBeforeservicecall | `(filterFields: any) => any` | No | — | Before service call callback. |
+| toggleMessage | `(state: boolean, msg: any, type: string, header: string) => void` | No | — | Toggle message function. |
+| onResultCb | `(err: any, success: boolean) => void` | No | — | Result callback. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-live-form.md

@@ -0,0 +1,35 @@
+---
+component: WmLiveForm
+category: data
+import: components/data/live-form
+tags: [data, live, form]
+summary: Live Form data widget.
+generated: true
+---
+
+# WmLiveForm
+
+Live Form data widget.
+
+## Usage
+
+```jsx
+<WmLiveForm
+  name="liveForm"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| validationtype | `string` | No | `"default"` | Type of validation to use for the form. |
+| formlayout | `string` | No | `"inline"` | Layout type for the form. |
+| insertmessage | `string` | No | `"Record added successfully"` | Message to show when a record is successfully inserted. |
+| updatemessage | `string` | No | `"Record updated successfully"` | Message to show when a record is successfully updated. |
+| deletemessage | `string` | No | `"Record deleted successfully"` | Message to show when a record is successfully deleted. |
+| datasource | `any` | No | — | Data source for the live form. |
+| formSubmit | `any` | No | — | Function to handle form submission. |
+| onBeforeservicecall | `(event: Event, operationType: string, formData: any, options: any) => void` | No | — | Before service call callback. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-login-dialog.md

@@ -0,0 +1,50 @@
+---
+component: WmLoginDialog
+category: dialogs
+import: components/dialogs/login-dialog
+tags: [dialogs, login, dialog, icon]
+summary: Login Dialog — modal dialog.
+generated: true
+---
+
+# WmLoginDialog
+
+Login Dialog — modal dialog.
+
+## Usage
+
+```jsx
+<WmLoginDialog
+  name="loginDialog"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| name | `string` | Yes | — | Unique name of the widget. |
+| title | `string` | No | — | Title text for the login dialog. |
+| iconclass | `string` | No | — | CSS class for the header icon. |
+| errormessage | `string` | No | — | Custom error message to display. |
+| eventsource | `IEventSource` | No | — | Action source for the login process. |
+| onSubmit | `(event: Event \| SyntheticEvent, widget: any) => void` | No | — | Callback fired when the form is submitted. |
+| onOpened | `(event: Event \| SyntheticEvent, widget: any) => void` | No | — | Callback fired when the dialog is opened (transition finished). |
+| onClose | `(event: Event \| SyntheticEvent, widget: any) => void` | No | — | Callback fired when the dialog requests to be closed. |
+| onSuccess | `(event: Event \| SyntheticEvent, widget: any) => void` | No | — | Callback fired when login succeeds. |
+| onError | `(event: Event \| SyntheticEvent, widget: any) => void` | No | — | Callback fired when login fails. |
+| logintext | `string` | No | — | Text for the login button. |
+| canceltext | `string` | No | — | Text for the cancel button. |
+| closable | `boolean` | No | — | Whether the dialog can be dismissed by the user. |
+| sheet | `boolean` | No | — | Whether the dialog is a sheet. |
+| invokeEventCallback | `(eventName: string, data?: any) => void` | No | — | Internal WaveMaker event callback. |
+| appLocale | `any` | No | — | Application locale object injected at runtime. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-login-dialog-*`
+
+See foundation-css: `src/tokens/web/components/modal-dialog/modal-dialog.json`

package/skills/components/wm-login.md

@@ -0,0 +1,39 @@
+---
+component: WmLogin
+category: advanced
+import: components/advanced/login
+tags: [advanced, login]
+summary: Login advanced widget.
+generated: true
+---
+
+# WmLogin
+
+Login advanced widget.
+
+## Usage
+
+```jsx
+<WmLogin
+  name="login"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| name | `string` | Yes | — | — |
+| show | `boolean` | No | — | — |
+| errormessage | `string` | No | — | — |
+| eventsource | `IEventSource` | No | — | — |
+| messagelistener | `(message: any) => void` | No | — | — |
+| onSubmit | `(event: Event, widget: any) => void` | No | — | — |
+| onBeforerender | `(event: Event, widget: any) => void` | No | — | — |
+| onSuccess | `(event: Event, widget: any) => void` | No | — | — |
+| onError | `(event: Event, widget: any) => void` | No | — | — |
+| invokeEventCallback | `(eventName: string, data?: any) => void` | No | — | — |
+| appLocale | `any` | No | — | — |
+| eventSource | `any` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-marquee.md

@@ -0,0 +1,31 @@
+---
+component: WmMarquee
+category: advanced
+import: components/advanced/marquee
+tags: [advanced, marquee]
+summary: Marquee advanced widget.
+generated: true
+---
+
+# WmMarquee
+
+Marquee advanced widget.
+
+## Usage
+
+```jsx
+<WmMarquee
+  name="marquee"
+  direction="row"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| direction | `"up" \| "down" \| "left" \| "right"` | No | — | — |
+| scrollamount | `number` | No | — | — |
+| scrolldelay | `number` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-menu.md

@@ -0,0 +1,71 @@
+---
+component: WmMenu
+category: navigation
+import: components/navigation/menu
+tags: [navigation, menu, data-binding, icon]
+summary: Menu navigation widget.
+generated: true
+---
+
+# WmMenu
+
+Menu navigation widget.
+
+## Usage
+
+```jsx
+<WmMenu
+  name="menu"
+  caption="My Menu"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| type | `"button" \| "anchor"` | No | — | — |
+| panelPosition | `string` | No | — | — |
+| menualign | `string` | No | — | — |
+| menuposition | `string` | No | — | — |
+| menulayout | `string` | No | — | — |
+| menuclass | `string` | No | — | — |
+| linktarget | `string` | No | — | — |
+| iconclass | `string` | No | — | — |
+| animateitems | `string` | No | — | — |
+| disableMenuContext | `boolean` | No | — | — |
+| showonhover | `boolean` | No | — | — |
+| autoclose | `string` | No | — | — |
+| autoopen | `string` | No | — | — |
+| hint | `string` | No | — | — |
+| arialabel | `string` | No | — | — |
+| width | `string \| number` | No | — | — |
+| height | `string \| number` | No | — | — |
+| iconposition | `string` | No | — | — |
+| caption | `string` | No | — | — |
+| shortcutkey | `string` | No | — | — |
+| onClick | `( event?: MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: str...` | No | — | — |
+| onSelect | `($event: MouseEvent<HTMLElement>, widget: any, $item: any) => void` | No | — | — |
+| navNodes | `Array<any>` | No | — | — |
+| resetNavNodes | `() => void` | No | — | — |
+| orderby | `string` | No | — | — |
+| dataset | `any` | No | — | — |
+| itemlabel | `string \| any` | No | — | — |
+| itemlink | `string` | No | — | — |
+| itemicon | `string` | No | — | — |
+| itemaction | `string` | No | — | — |
+| userrole | `string` | No | — | — |
+| isactive | `string` | No | — | — |
+| itemchildren | `string \| any` | No | — | — |
+| isFromNav | `boolean` | No | — | — |
+| onNavItemActivate | `() => void` | No | — | — |
+| isNavItemActive | `boolean` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-menu-*`
+
+See foundation-css: `src/tokens/web/components/dropdown-menu/dropdown-menu.json`

package/skills/components/wm-message.md

@@ -0,0 +1,41 @@
+---
+component: WmMessage
+category: basic
+import: components/basic/message
+tags: [basic, message, caption]
+summary: Message display widget.
+generated: true
+---
+
+# WmMessage
+
+Message display widget.
+
+## Usage
+
+```jsx
+<WmMessage
+  name="message"
+  caption="My Message"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| caption | `string` | No | `"Message"` | The message content to be displayed. |
+| variant | `VariantType` | No | `"filled:success"` | The variant of the message. |
+| type | `string` | No | `"info"` | The type of message: 'success', 'error', 'info', 'warning', 'loading'. |
+| hideclose | `boolean` | No | `false` | If true, the close button will be hidden. |
+| onClose | `(event: MouseEvent<HTMLButtonElement>) => void` | No | — | Callback function to be called when the message is closed. |
+| open | `boolean` | No | — | If true, the message is open. |
+| close | `(event: MouseEvent<HTMLButtonElement>) => void` | No | — | Callback function to close the message. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-message-*`
+
+See foundation-css: `src/tokens/web/components/message/message.json`

package/skills/components/wm-nav-item.md

@@ -0,0 +1,28 @@
+---
+component: WmNavItem
+category: navbar
+import: components/navbar/nav-item
+tags: [navbar, nav, item]
+summary: Nav Item navigation bar component.
+generated: true
+---
+
+# WmNavItem
+
+Nav Item navigation bar component.
+
+## Usage
+
+```jsx
+<WmNavItem
+  name="navItem"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| children | `ReactNode` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-nav.md

@@ -0,0 +1,61 @@
+---
+component: WmNav
+category: navbar
+import: components/navbar/nav
+tags: [navbar, nav, data-binding]
+summary: Nav navigation bar component.
+generated: true
+---
+
+# WmNav
+
+Nav navigation bar component.
+
+## Usage
+
+```jsx
+<WmNav
+  name="nav"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| layout | `string` | Yes | — | — |
+| type | `string` | Yes | — | — |
+| autoclose | `string` | Yes | — | — |
+| autoopen | `string` | Yes | — | — |
+| class | `string` | Yes | — | — |
+| dataset | `any` | Yes | — | — |
+| iconposition | `string` | Yes | — | — |
+| isactive | `string` | Yes | — | — |
+| itemlabel | `string \| ((item: any, fragment?: any) => string)` | No | — | — |
+| itemhint | `string` | Yes | — | — |
+| itemlink | `string` | Yes | — | — |
+| itemicon | `string` | Yes | — | — |
+| itemclass | `string` | Yes | — | — |
+| itemchildren | `string` | Yes | — | — |
+| itemaction | `string` | Yes | — | — |
+| itembadge | `string` | Yes | — | — |
+| itemtarget | `string` | Yes | — | — |
+| name | `string` | Yes | — | — |
+| orderby | `string` | Yes | — | — |
+| show | `boolean` | Yes | — | — |
+| showonhover | `boolean` | Yes | — | — |
+| userrole | `string` | Yes | — | — |
+| onSelect | `(event: any, widget: any, item: any) => void` | No | — | — |
+| iconheight | `string` | No | — | — |
+| iconwidth | `string` | No | — | — |
+| iconmargin | `string` | No | — | — |
+| action | `string` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-nav-*`
+
+See foundation-css: `src/tokens/web/components/nav/nav.json`

package/skills/components/wm-number.md

@@ -0,0 +1,62 @@
+---
+component: WmNumber
+category: input
+import: components/input/number
+tags: [input, number, form-field]
+summary: Number input field.
+generated: true
+---
+
+# WmNumber
+
+Number input field.
+
+## Usage
+
+```jsx
+<WmNumber
+  name="number"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| required | `boolean` | No | — | Whether the input is required. |
+| regexp | `string` | No | — | Regular expression pattern for input validation. |
+| disabled | `boolean` | No | — | Whether the input is disabled. |
+| inputmode | `"natural" \| "financial"` | No | `"natural"` | Input mode for the number widget.
+- `"natural"`: Standard number input.
+- `"financial"`: Financial format with trailing zeros. |
+| trailingzero | `boolean` | No | — | Whether to display trailing zeros. |
+| step | `number` | No | — | Step increment for the number input. |
+| minvalue | `number` | No | — | Minimum value allowed. |
+| maxvalue | `number` | No | — | Maximum value allowed. |
+| placeholder | `string` | No | — | Placeholder text shown when the input is empty. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the input. |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| datavalue | `number \| null` | No | — | The bound data value of the number input. |
+| maxDataValue | `number \| null` | No | — | Maximum data value for range number inputs. |
+| isMaxWidget | `boolean` | No | — | Whether this is a max-value widget in a range input. |
+| updatedelay | `string` | No | `"0"` | Delay in milliseconds before updating the data value. |
+| updateon | `"blur" \| "keypress"` | No | `"blur"` | When the data value should be updated. |
+| readonly | `boolean` | No | — | Whether the input is read-only. |
+| decimalplaces | `number` | No | — | Number of decimal places to display. |
+| onChange | `( event: ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newV...` | No | — | Callback invoked when the number value changes. |
+| onClick | `(event: MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the number input is clicked. |
+| onMouseEnter | `(event: MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the mouse enters the number input. |
+| onMouseLeave | `(event: MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the mouse leaves the number input. |
+| error | `boolean` | No | — | Whether the input has a validation error (typically injected by form controller). |
+| id | `string` | No | — | The unique ID for the widget. |
+| fieldName | `string` | No | — | Field name used by the form controller. |
+| maxdisplayValue | `string \| null` | No | — | Display value for the max widget. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-number-*`
+
+See foundation-css: `src/tokens/web/components/form-controls/form-controls.json`