Add missing info on formatting

Author: mstijak

homedocs/src/pages/docs/intro/formatting.mdx

@@ -19,6 +19,30 @@ Widgets like `NumberField` and `DateField` accept a `format` property that contr
   <FormattingExample client:load />
 </CodeExample>
 
+Use the `tpl` function to format multiple values into a single text property:
+
+```tsx
+import { createAccessorModelProxy } from "cx/data";
+import { tpl } from "cx/ui";
+
+interface Person {
+  firstName: string;
+  lastName: string;
+  age: number;
+}
+
+const m = createAccessorModelProxy<Person>();
+
+// Positional placeholders {0}, {1}, etc.
+<div text={tpl(m.firstName, m.lastName, "{0} {1}")} />
+
+// With formatting
+<div text={tpl(m.firstName, m.age, "{0} is {1:n;0} years old")} />
+
+// With null text fallback
+<div text={tpl(m.firstName, "Hello, {0|Guest}!")} />
+```
+
 ## Culture-Sensitive Formatting
 
 Date, currency, and number formats depend on culture settings. Enable culture-sensitive formatting before use:

homedocs/src/pages/docs/intro/migration-guide.mdx

@@ -258,6 +258,69 @@ const model = createAccessorModelProxy<AppModel>();
 | `greaterThanOrEqual(accessor, value)` | Numeric greater than or equal       |
 | `lessThanOrEqual(accessor, value)`    | Numeric less than or equal          |
 
+### Format Helper
+
+The `format` helper creates a selector that formats values using CxJS format strings.
+This is useful for displaying formatted numbers, dates, or percentages in text props:
+
+```typescript
+import { createAccessorModelProxy } from "cx/data";
+import { format } from "cx/ui";
+
+interface Product {
+   name: string;
+   price: number;
+   discount: number;
+}
+
+const m = createAccessorModelProxy<Product>();
+
+// Format as number with 2 decimal places
+<div text={format(m.price, "n;2")} />
+
+// Format as percentage
+<div text={format(m.discount, "p;0")} />
+
+// With custom null text
+<div text={format(m.price, "n;2", "N/A")} />
+```
+
+The format string uses CxJS format syntax (e.g., `"n;2"` for numbers, `"p;0"` for percentages,
+`"d"` for dates). The optional third parameter specifies text to display for null/undefined values.
+
+### Template Helper with Accessor Chains
+
+The `tpl` function now supports accessor chains in addition to its original string-only form.
+This allows you to create formatted strings from multiple values with full type safety:
+
+```typescript
+import { createAccessorModelProxy } from "cx/data";
+import { tpl } from "cx/ui";
+
+interface Person {
+   firstName: string;
+   lastName: string;
+   age: number;
+}
+
+const m = createAccessorModelProxy<Person>();
+
+// Original string-only form still works
+<div text={tpl("{firstName} {lastName}")} />
+
+// New accessor chain form with positional placeholders
+<div text={tpl(m.firstName, m.lastName, "{0} {1}")} />
+
+// Supports formatting in placeholders
+<div text={tpl(m.firstName, m.age, "{0} is {1:n;0} years old")} />
+
+// Supports null text
+<div text={tpl(m.firstName, "Hello, {0|Guest}!")} />
+```
+
+The accessor chain form uses positional placeholders (`{0}`, `{1}`, etc.) and supports
+all StringTemplate features including formatting (`:format`) and null text (`|nullText`).
+
 ### Typed Config Properties
 
 Several widget config properties now have improved type definitions that provide better