@bridge-ui/vue 0.6.0 → 0.8.0

package/docs/components/BridgeUIProvider.md

@@ -81,7 +81,7 @@ app.use(
 
 Set `global.formDefaults` to apply shared `size` / `rounded` to form controls (TextField, Select, Checkbox, Slider, OtpField, …). Does not affect Button, Progress, Modal, etc.
 
-Merge order: instance props → `components.{Name}.defaultProps` → `formDefaults` → library defaults.
+Merge order: instance props → `components.{Name}.defaultProps` → chrome (`FormField` / `FormControl` / `BaseField` / `TimePanel`) → `formDefaults` → library defaults.
 
 Radio and Switch receive `size` only — their `rounded` stays shape-driven (`full`) unless overridden per component.
 
@@ -97,19 +97,26 @@ app.use(
 );
 ```
 
-### Nested chrome tokens
+### Shared chrome
 
-Building blocks (`FormField`, `FormControl`, `BaseField`) are not registry keys. Theme chrome under the public parent. Dropdown tokens live on `components.Listbox`:
+`FormField`, `FormControl`, `BaseField`, and `TimePanel` are registry keys. Set them once to theme a family; a public entry still overrides `defaultProps`. Chrome tokens live on the shared key (`components.FormField.tokens`, `components.BaseField.tokens`). Dropdown tokens live on `components.Listbox`.
 
 ```ts
 app.use(
   createBridgeUI({
     components: {
-      Slider: {
+      FormField: {
+        defaultProps: {
+          variant: "filled",
+          color: "secondary",
+        },
+      },
+      TextField: {
+        defaultProps: { variant: "outline" },
+      },
+      BaseField: {
         tokens: {
-          baseField: {
-            size: { md: { text: "text-base", group: "gap-3" } },
-          },
+          size: { md: { text: "text-base", group: "gap-3" } },
         },
       },
       Checkbox: {

package/docs/components/DataTable.md

@@ -26,7 +26,7 @@ import { DataTable } from "@bridge-ui/vue/Components/DataTable";
 
 ### Variants
 
-DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows the matching variant unless the `pagination` slot overrides it:
+DataTable chrome (`plain` / `ghost` / `bordered`). The built-in footer pager is first / previous / next / last and does not follow table variant:
 
 ```vue
 <DataTable :rows="users" variant="plain" :columns="columns" />
@@ -34,12 +34,6 @@ DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows
 <DataTable :rows="users" variant="bordered" :columns="columns" />
 ```
 
-| DataTable `variant` | Pagination `variant` |
-| ------------------- | -------------------- |
-| `plain`             | `text`               |
-| `ghost`             | `ghost`              |
-| `bordered`          | `outlined`           |
-
 `striped` is independent of variant:
 
 ```vue
@@ -66,7 +60,7 @@ DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows
 
 ### Selection + pagination
 
-Built-in Pagination when `page` is set with `page-count` or `total-count` (server fetch stays in the app). `page` + `per-page` without those totals slices `rows` locally. `per-page` also renders a Select (`per-page-options`, default 10 / 25 / 50 / 100). `#pagination` and `#perPage` replace each control:
+The chrome footer shows a selection summary when `selection` is bound, a per-page Select when `per-page` is set (`per-page-options`, default 10 / 25 / 50 / 100), and a first / previous / next / last pager when `page` is set with `page-count` or `total-count` (server fetch stays in the app). `page` + `per-page` without those totals slices `rows` locally. `#selected`, `#pagination`, and `#perPage` replace each control:
 
 ```vue
 <DataTable
@@ -98,7 +92,7 @@ Client paging slices `rows`. Server paging with a total uses `total-count` inste
 />
 ```
 
-Slot replaces the built-in Pagination and/or per-page Select (`#pagination` / `#perPage`; slot props match the built-ins):
+Slot replaces the built-in footer controls (`#selected` / `#pagination` / `#perPage`; slot props match the built-ins):
 
 ```vue
 <DataTable :rows="users" :columns="columns" :get-row-id="(row) => row.id">
@@ -141,7 +135,7 @@ When `page` and `page-count` (or `total-count`) are set, DataTable does not sort
 
 ### Empty, loading, and footer
 
-Empty rows render `EmptyState` at the table `size`, with the semantic `inbox` icon and the i18n title `"No data"`. `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above pagination:
+Empty rows render `EmptyState` at the table `size`, with the semantic `inbox` icon and the i18n title `"No data"`. `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above the chrome footer:
 
 ```vue
 <DataTable :rows="[]" :columns="columns" :loading="isLoading">
@@ -180,7 +174,7 @@ const columns = [
 ];
 ```
 
-Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` / `loading` / `pagination` / `perPage` / `search` / `toolbar` / `toolbarActions`. `#item` is a catch-all when `#item.{id}` is not set.
+Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` / `loading` / `pagination` / `perPage` / `search` / `selected` / `toolbar` / `toolbarActions`. `#item` is a catch-all when `#item.{id}` is not set.
 
 ### Selection
 

package/docs/components/FormControl.md

@@ -1,6 +1,6 @@
 # FormControl
 
-> Building block for toggle-row chrome. Prefer `Checkbox`, `Radio`, and `Switch` in apps; FormControl remains exported for advanced composition. Not a registry key — theme chrome via `tokens.formControl` on the public parent (e.g. `components.Checkbox.tokens.formControl`).
+> Building block for toggle-row chrome. Prefer `Checkbox`, `Radio`, and `Switch` in apps; FormControl remains exported for advanced composition. Theme shared chrome via `components.FormControl`; override per public control (`components.Checkbox`, …).
 
 Low-level form control chrome (labels, description, error) for Checkbox, Radio, and Switch.
 

package/docs/components/FormField.md

@@ -1,6 +1,6 @@
 # FormField
 
-> Building block for field chrome. Prefer public fields (`TextField`, `Select`, …) in apps; FormField remains exported for advanced composition. Not a `BridgeUIComponentsConfig` key — theme via the public parent (`components.TextField`, `components.Select`, …).
+> Building block for field chrome. Prefer public fields (`TextField`, `Select`, …) in apps; FormField remains exported for advanced composition. Theme all fields via `components.FormField`; override per public field (`components.TextField`, …).
 
 Form field chrome (label, adornments, error) used by TextField, Select, and other inputs.
 
@@ -39,32 +39,33 @@ import { FormField } from "@bridge-ui/vue";
 
 ## Props
 
-| Prop               | Type                   | Default     | Description                                                                                                                                             |
-| ------------------ | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `classes`          | `FormFieldClasses`     | —           | Classes for the field chrome and the control (includes label, container, adornments).                                                                   |
-| `color`            | `FormFieldColor`       | "primary"   | The color to apply to the field control.                                                                                                                |
-| `controlId`        | `string`               | —           | Associates labels and helper text with a form control. When omitted, an id is generated automatically.                                                  |
-| `corner`           | `string`               | —           | Secondary label text at the inline end of the header row.                                                                                               |
-| `customProps`      | `FormFieldCustomProps` | —           | Extra props for internal parts (`header`, `label`, `input`, `container`, …).                                                                            |
-| `description`      | `string`               | —           | Helper text below the control (hidden when the field is invalid).                                                                                       |
-| `disabled`         | `boolean`              | `false`     | Whether the control is disabled.                                                                                                                        |
-| `end`              | `string`               | —           | Inline-end text inside the field (suffix), e.g. `@mail.com`.                                                                                            |
-| `endIcon`          | `LucideIcon`           | —           | Icon at the **inline end** (physical right in `ltr`, physical left in `rtl`).                                                                           |
-| `error`            | `boolean`              | `false`     | When `true`, applies invalid styling on the label and hides description.                                                                                |
-| `errorIcon`        | `LucideIcon`           | CircleAlert | Icon used when `showErrorIcon` is enabled and the field is invalid.                                                                                     |
-| `errorMessage`     | `string`               | —           | Error message below the control. Shown only when set (or via `#errorMessage` slot).                                                                     |
-| `field`            | `UseFormFieldReturn`   | —           | Pre-composed field API from a parent composable (e.g. `useTextField`). Used by `<FormField :field="…" />`; not set on field wrappers such as TextField. |
-| `hideErrorMessage` | `boolean`              | `false`     | When `true`, does not reserve space below the control for error messages.                                                                               |
-| `label`            | `string`               | —           | The primary label text above the control.                                                                                                               |
-| `readonly`         | `boolean`              | `false`     | Whether the control is read-only.                                                                                                                       |
-| `required`         | `boolean`              | `false`     | Shows a red asterisk on the label.                                                                                                                      |
-| `rounded`          | `FormFieldRounded`     | "md"        | The roundedness of the field control.                                                                                                                   |
-| `showErrorIcon`    | `boolean`              | `true`      | When `true` and the field is invalid, shows an error icon at the inline end when no `endIcon` or `end` slot is present.                                 |
-| `size`             | `FormFieldSize`        | "md"        | Typography scale for label, corner, description, and error message, and control sizing (input, container, icons).                                       |
-| `slots`            | `FormFieldSlots`       | —           | Chrome slots (`label`, `description`, `errorMessage`, …) via `#slot` or prop; inline adornments use `#start` / `#end`.                                  |
-| `start`            | `string`               | —           | Inline-start text inside the field (prefix), e.g. `https://`.                                                                                           |
-| `startIcon`        | `LucideIcon`           | —           | Icon at the **inline start** (physical left in `ltr`, physical right in `rtl`).                                                                         |
-| `variant`          | `FormFieldVariant`     | "outline"   | The visual variant of the field shell and control.                                                                                                      |
+| Prop                     | Type                   | Default     | Description                                                                                                                                             |
+| ------------------------ | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `classes`                | `FormFieldClasses`     | —           | Classes for the field chrome and the control (includes label, container, adornments).                                                                   |
+| `color`                  | `FormFieldColor`       | "primary"   | The color to apply to the field control.                                                                                                                |
+| `controlId`              | `string`               | —           | Associates labels and helper text with a form control. When omitted, an id is generated automatically.                                                  |
+| `corner`                 | `string`               | —           | Secondary label text at the inline end of the header row.                                                                                               |
+| `customProps`            | `FormFieldCustomProps` | —           | Extra props for internal parts (`header`, `label`, `input`, `container`, …).                                                                            |
+| `description`            | `string`               | —           | Helper text below the control. Hidden when `error` and an error message are set, unless `showDescriptionOnError`.                                       |
+| `disabled`               | `boolean`              | `false`     | Whether the control is disabled.                                                                                                                        |
+| `end`                    | `string`               | —           | Inline-end text inside the field (suffix), e.g. `@mail.com`.                                                                                            |
+| `endIcon`                | `LucideIcon`           | —           | Icon at the **inline end** (physical right in `ltr`, physical left in `rtl`).                                                                           |
+| `error`                  | `boolean`              | `false`     | When `true`, applies invalid styling on the label. Hides description when an error message is shown, unless `showDescriptionOnError`.                   |
+| `errorIcon`              | `LucideIcon`           | CircleAlert | Icon used when `showErrorIcon` is enabled and the field is invalid.                                                                                     |
+| `errorMessage`           | `string`               | —           | Error message below the control. Shown only when set (or via `#errorMessage` slot).                                                                     |
+| `field`                  | `UseFormFieldReturn`   | —           | Pre-composed field API from a parent composable (e.g. `useTextField`). Used by `<FormField :field="…" />`; not set on field wrappers such as TextField. |
+| `hideErrorMessage`       | `boolean`              | `false`     | When `true`, does not reserve the error row. That row is also omitted while a description is shown.                                                     |
+| `label`                  | `string`               | —           | The primary label text above the control.                                                                                                               |
+| `readonly`               | `boolean`              | `false`     | Whether the control is read-only.                                                                                                                       |
+| `required`               | `boolean`              | `false`     | Shows a red asterisk on the label.                                                                                                                      |
+| `rounded`                | `FormFieldRounded`     | "md"        | The roundedness of the field control.                                                                                                                   |
+| `showDescriptionOnError` | `boolean`              | `false`     | When `true`, keeps the description visible while the field is invalid.                                                                                  |
+| `showErrorIcon`          | `boolean`              | `true`      | When `true` and the field is invalid, shows an error icon at the inline end when no `endIcon` or `end` slot is present.                                 |
+| `size`                   | `FormFieldSize`        | "md"        | Typography scale for label, corner, description, and error message, and control sizing (input, container, icons).                                       |
+| `slots`                  | `FormFieldSlots`       | —           | Chrome slots (`label`, `description`, `errorMessage`, …) via `#slot` or prop; inline adornments use `#start` / `#end`.                                  |
+| `start`                  | `string`               | —           | Inline-start text inside the field (prefix), e.g. `https://`.                                                                                           |
+| `startIcon`              | `LucideIcon`           | —           | Icon at the **inline start** (physical left in `ltr`, physical right in `rtl`).                                                                         |
+| `variant`                | `FormFieldVariant`     | "outline"   | The visual variant of the field shell and control.                                                                                                      |
 
 ## Related components
 

package/docs/components/I18n.md

@@ -1,6 +1,6 @@
 # i18n
 
-Bridge chrome strings (aria-labels, empty/loading copy) resolve through an optional i18n adapter on `BridgeUIProvider` / `createBridgeUI` (`global.i18n`). Without an adapter, the English source string is returned as-is.
+Bridge chrome strings (aria-labels, empty/loading copy) resolve through an optional i18n adapter on `BridgeUIProvider` / `createBridgeUI` (`global.i18n`). Without an adapter, the English source string is returned, with `{{name}}` replaced from `params`, and `|` plural forms when `count` is set.
 
 Lookup is **gettext-style**: the source English text is the key. Multi-locale
 adapters can keep the active locale internally via optional `setLocale`.
@@ -11,10 +11,14 @@ const resolveMessage = useResolveMessage();
 resolveMessage("Hide password");
 ```
 
-`useResolveMessage` reads the active adapter from context. **Interpolation and
-pluralization are the adapter’s job** (vue-i18n, i18next, or a custom `t`).
-Bridge `setLocale` updates `global.locale` and calls optional `adapter.setLocale`
-— persistence (localStorage, backend) stays in the app.
+`useResolveMessage` reads the active adapter from context. **Pluralization
+uses the `count` argument** on `t(message, count, params)`: vue-i18n / i18next
+handle it in `t`; dictionary adapters call `selectPluralMessage` on `|` forms
+(`one | other`). Without an adapter, `resolveMessage` still replaces `{{name}}`
+and picks `|` forms when `count` is set. Adapters that used `t(message, params)`
+should move interpolation vars to the third argument. Bridge `setLocale`
+updates `global.locale` and calls optional `adapter.setLocale` — persistence
+(localStorage, backend) stays in the app.
 
 Implement `I18nAdapter` as a plain object — Bridge only defines the interface.
 
@@ -44,8 +48,9 @@ const resolveMessage = useResolveMessage();
 
 ### Dictionary adapter
 
-Locale-keyed source→string map (no replace/plural). Optional `setLocale`
-updates the active locale used by `t`.
+Locale-keyed source→string map with `{{name}}` replace. Plural values use
+`one | other` (or `zero | one | other`). Optional `setLocale` updates the
+active locale used by `t`.
 
 ```ts
 import { createBridgeUI } from "@bridge-ui/vue";
@@ -61,14 +66,20 @@ const bridge = createBridgeUI({
 ### Custom adapter
 
 ```ts
-import { get } from "es-toolkit/compat";
-import type { I18nAdapter } from "@bridge-ui/vue";
+import { get, isNil } from "es-toolkit/compat";
+import {
+  interpolateMessage,
+  selectPluralMessage,
+  type I18nAdapter,
+} from "@bridge-ui/vue";
 
 const messages: Record<string, Record<string, string>> = {
   "pt-BR": {
     Close: "Fechar",
     "Hide password": "Ocultar senha",
     "Clear selection": "Limpar seleção",
+    "{{selected}} of {{total}} row(s) selected.":
+      "{{selected}} de {{total}} linha selecionada. | {{selected}} de {{total}} linhas selecionadas.",
   },
 };
 
@@ -78,8 +89,13 @@ const i18n: I18nAdapter = {
   setLocale(next) {
     locale = next;
   },
-  t(message) {
-    return get(messages, [locale, message], message);
+  t(message, count, params) {
+    const translated = get(messages, [locale, message], message);
+    const template = isNil(count)
+      ? translated
+      : selectPluralMessage(translated, count);
+
+    return interpolateMessage(template, params);
   },
 };
 ```
@@ -94,7 +110,7 @@ const vueI18n = createI18n({ legacy: false, locale: "en-US", messages: {} });
 const i18n = createVueI18nAdapter(vueI18n.global);
 
 const resolveMessage = useResolveMessage();
-resolveMessage("{count} item", { count: 3 });
+resolveMessage("{count} item", 3);
 // → vue-i18n handles interpolation / plural rules
 
 setLocale("pt-BR"); // Bridge locale + i18n.locale via adapter.setLocale
@@ -104,22 +120,47 @@ Other ready examples:
 
 | File                 | Library              | Replace / plural |
 | -------------------- | -------------------- | ---------------- |
-| `i18n-dictionary.ts` | In-memory dictionary | No (static map)  |
+| `i18n-dictionary.ts` | In-memory dictionary | Yes (`\|` forms) |
 | `i18n-vue-i18n.ts`   | vue-i18n             | Yes (via lib)    |
 
 ## Chrome strings
 
-| Source (key)      |
-| ----------------- |
-| `Close`           |
-| `Loading...`      |
-| `No options`      |
-| `Show password`   |
-| `Hide password`   |
-| `Clear selection` |
-| `Increment value` |
-| `Decrement value` |
+| Source (key)                                 |
+| -------------------------------------------- |
+| `OK`                                         |
+| `Next`                                       |
+| `Close`                                      |
+| `Reset`                                      |
+| `Search`                                     |
+| `Columns`                                    |
+| `Loading`                                    |
+| `No data`                                    |
+| `Previous`                                   |
+| `Last page`                                  |
+| `Expand row`                                 |
+| `First page`                                 |
+| `Loading...`                                 |
+| `No options`                                 |
+| `Pagination`                                 |
+| `Select row`                                 |
+| `Filter column`                              |
+| `Hide password`                              |
+| `Rows per page`                              |
+| `Show password`                              |
+| `Cancel sorting`                             |
+| `Sort ascending`                             |
+| `Clear selection`                            |
+| `Decrement value`                            |
+| `Increment value`                            |
+| `Select all rows`                            |
+| `Sort descending`                            |
+| `Select all items`                           |
+| `Page {{page}} of {{count}}`                 |
+| `{{selected}} of {{total}} row(s) selected.` |
+
+The selection summary calls `t` with `count` (selected rows). Dictionary
+values for that key use `one | other`.
 
 ## Related components
 
-BridgeUIProvider, PasswordField, NumberField, Select, Listbox, Snackbar
+BridgeUIProvider, DataTable, Pagination, PasswordField, NumberField, Select, Listbox, Snackbar

package/docs/components/Pagination.md

@@ -1,6 +1,6 @@
 # Pagination
 
-Page controls for lists and tables: previous/next, page numbers, and a simple cursor-friendly prev/next mode.
+Page controls for lists and tables: previous/next with labels, page numbers, and a simple cursor-friendly prev/next mode. `Previous` and `Next` resolve through the i18n adapter.
 
 ## Import
 
@@ -27,15 +27,17 @@ const page = ref(1);
 
 ### Variants
 
+`ghost` (default), `text`, `outlined`.
+
 ```vue
-<Pagination :count="12" v-model="page" variant="text" />
 <Pagination :count="12" v-model="page" variant="ghost" />
+<Pagination :count="12" v-model="page" variant="text" />
 <Pagination :count="12" v-model="page" variant="outlined" />
 ```
 
 ### Rounded
 
-Applies to `ghost` item corners and the `outlined` group / edge controls.
+Applies to `ghost` and `text` item corners and the `outlined` group / edge controls.
 
 ```vue
 <Pagination :count="12" rounded="lg" v-model="page" variant="ghost" />

package/docs/components/Table.md

@@ -46,7 +46,7 @@ Same three chrome treatments as `DataTable`. Pair with `Pagination` under the ta
 
 ```vue
 <Table variant="plain" />
-<Pagination :count="12" v-model="page" variant="text" />
+<Pagination :count="12" v-model="page" variant="ghost" />
 
 <Table variant="ghost" />
 <Pagination :count="12" v-model="page" variant="ghost" />
@@ -57,7 +57,7 @@ Same three chrome treatments as `DataTable`. Pair with `Pagination` under the ta
 
 | Table `variant` | Pagination `variant` |
 | --------------- | -------------------- |
-| `plain`         | `text`               |
+| `plain`         | `ghost`              |
 | `ghost`         | `ghost`              |
 | `bordered`      | `outlined`           |
 

package/docs/components/Tabs.md

@@ -1,6 +1,6 @@
 # Tabs
 
-Organize related content into tabbed views. Use with `TabList`, `Tab`, and `TabPanel`. Selected accent uses the semantic `color` palette; inactive tabs use `dark-*`.
+Organize related content into tabbed views. Use with `TabList`, `Tab`, and `TabPanel`. The selected tab uses a quiet surface from `variant`; `color` optionally tints selected text and the `line` / `solid` / `enclosed` indicator.
 
 ## Import
 
@@ -90,10 +90,28 @@ import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
 
 ### Variants
 
-`line` (default), `plain`, `pill`, `solid`, `enclosed`.
+`pill` (default), `line`, `plain`, `solid`, `enclosed`.
 
 ```vue
-<Tabs v-model="tab" variant="line" color="primary">
+<Tabs v-model="tab">
+  <TabList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+
+<Tabs v-model="tab" variant="line">
+  <TabList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+
+<Tabs v-model="tab" variant="plain">
   <TabList>
     <Tab value="one">One</Tab>
     <Tab value="two">Two</Tab>
@@ -102,7 +120,7 @@ import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
   <TabPanel value="two">Second</TabPanel>
 </Tabs>
 
-<Tabs color="dark" v-model="tab" variant="pill">
+<Tabs v-model="tab" variant="solid">
   <TabList>
     <Tab value="one">One</Tab>
     <Tab value="two">Two</Tab>
@@ -152,11 +170,11 @@ import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
 | Prop          | Type              | Default        |
 | ------------- | ----------------- | -------------- |
 | `activation`  | `TabsActivation`  | `"automatic"`  |
-| `color`       | `TabsColor`       | `"primary"`    |
+| `color`       | `TabsColor`       | `"dark"`       |
 | `keepMounted` | `boolean`         | `true`         |
 | `orientation` | `TabsOrientation` | `"horizontal"` |
 | `size`        | `TabsSize`        | `"md"`         |
-| `variant`     | `TabsVariant`     | `"line"`       |
+| `variant`     | `TabsVariant`     | `"pill"`       |
 
 ### v-model
 

package/docs/examples/i18n-dictionary.ts

@@ -5,15 +5,19 @@
  *
  * Source English strings are the lookup keys (same strings Bridge passes to
  * `resolveMessage`). Messages are keyed by locale; optional `setLocale` updates
- * the active locale used by `t`. For replace / pluralization, wrap vue-i18n (or
- * similar) instead.
+ * the active locale used by `t`. `t` replaces `{{name}}` from `params` and
+ * picks `|` plural forms when `count` is set (`one | other`).
  */
 
 // ** External Imports
-import { get } from "es-toolkit/compat";
+import { get, isNil } from "es-toolkit/compat";
 
 // ** Core Imports
-import type { I18nAdapter } from "@bridge-ui/core/Adapters";
+import {
+  interpolateMessage,
+  selectPluralMessage,
+  type I18nAdapter,
+} from "@bridge-ui/core/Adapters";
 
 // prettier-ignore
 const MESSAGES: Record<string, Record<string, string>> = {
@@ -21,25 +25,34 @@ const MESSAGES: Record<string, Record<string, string>> = {
   "pt-BR": {
     "OK": "OK",
     "Close": "Fechar",
-    "Reset": "Redefinir",
+    "Next": "Próxima",
     "Columns": "Colunas",
+    "Reset": "Redefinir",
     "Search": "Pesquisar",
     "No data": "Sem dados",
-    "Per page:": "Por página:",
+    "Previous": "Anterior",
+    "Loading": "Carregando",
+    "Pagination": "Paginação",
+    "Last page": "Última página",
     "Loading...": "Carregando...",
     "No options": "Nenhuma opção",
-    "Select row": "Selecionar linha",
+    "Expand row": "Expandir linha",
+    "First page": "Primeira página",
     "Hide password": "Ocultar senha",
+    "Select row": "Selecionar linha",
     "Show password": "Mostrar senha",
     "Filter column": "Filtrar coluna",
     "Clear selection": "Limpar seleção",
     "Decrement value": "Diminuir valor",
     "Increment value": "Aumentar valor",
+    "Rows per page": "Linhas por página",
     "Sort ascending": "Ordenar crescente",
     "Cancel sorting": "Cancelar ordenação",
     "Sort descending": "Ordenar decrescente",
-    "Select all rows": "Selecionar todas as linhas",
     "Select all items": "Selecionar todos os itens",
+    "Select all rows": "Selecionar todas as linhas",
+    "Page {{page}} of {{count}}": "Página {{page}} de {{count}}",
+    "{{selected}} of {{total}} row(s) selected.": "{{selected}} de {{total}} linha selecionada. | {{selected}} de {{total}} linhas selecionadas.",
   },
 };
 
@@ -54,8 +67,13 @@ export function createDictionaryI18nAdapter(): I18nAdapter {
     setLocale(next) {
       locale = next;
     },
-    t(message) {
-      return get(MESSAGES, [locale, message], message);
+    t(message, count, params) {
+      const translated = get(MESSAGES, [locale, message], message);
+      const template = isNil(count)
+        ? translated
+        : selectPluralMessage(translated, count);
+
+      return interpolateMessage(template, params);
     },
   };
 }

package/docs/examples/i18n-vue-i18n.ts

@@ -3,12 +3,13 @@
  * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.i18n`.
  * Not published as an npm package.
  *
- * Passes Bridge source strings and `params` straight to `i18n.t`
- * (interpolation, pluralization, etc. stay in vue-i18n).
+ * Passes Bridge source strings, `count`, and `params` to `i18n.t`
+ * (interpolation and `|` pluralization stay in vue-i18n).
  * `setLocale` on the adapter is invoked by Bridge `setLocale`.
  */
 
 // ** External Imports
+import { isNil } from "es-toolkit/compat";
 import type { Composer } from "vue-i18n";
 
 // ** Core Imports
@@ -23,12 +24,12 @@ export function createVueI18nAdapter(i18n: Composer): I18nAdapter {
     setLocale(locale) {
       i18n.locale.value = locale;
     },
-    t(message, params) {
-      if (params) {
-        return i18n.t(message, params);
+    t(message, count, params) {
+      if (isNil(count)) {
+        return params ? i18n.t(message, params) : i18n.t(message);
       }
 
-      return i18n.t(message);
+      return params ? i18n.t(message, count, params) : i18n.t(message, count);
     },
   };
 }

package/docs/examples/icon-fontawesome.ts

@@ -10,6 +10,8 @@
 // ** External Imports
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import {
+  faAnglesLeft,
+  faAnglesRight,
   faBell,
   faCalendarDays,
   faCheck,
@@ -117,7 +119,9 @@ const icons = {
   alert: faCircleExclamation,
   chevronDown: faChevronDown,
   chevronLeft: faChevronLeft,
+  chevronsLeft: faAnglesLeft,
   chevronRight: faChevronRight,
+  chevronsRight: faAnglesRight,
   warning: faTriangleExclamation,
 } satisfies Record<SemanticIconName, unknown>;
 

package/docs/examples/icon-heroicons.ts

@@ -13,6 +13,8 @@ import {
   CalendarDaysIcon,
   CheckCircleIcon,
   CheckIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -67,8 +69,10 @@ const icons = {
   chevronDown: ChevronDownIcon,
   chevronLeft: ChevronLeftIcon,
   chevronRight: ChevronRightIcon,
-  warning: ExclamationTriangleIcon,
   chevronUpDown: ChevronUpDownIcon,
+  warning: ExclamationTriangleIcon,
+  chevronsLeft: ChevronDoubleLeftIcon,
+  chevronsRight: ChevronDoubleRightIcon,
 } satisfies Record<SemanticIconName, unknown>;
 
 /**

package/docs/examples/icon-lucide.ts

@@ -12,6 +12,8 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
   ChevronsUpDown,
   ChevronUp,
   CircleAlert,
@@ -68,6 +70,8 @@ const icons = {
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,
   chevronRight: ChevronRight,
+  chevronsLeft: ChevronsLeft,
+  chevronsRight: ChevronsRight,
   chevronUpDown: ChevronsUpDown,
 } satisfies Record<SemanticIconName, unknown>;
 

package/docs/examples/icon-phosphor.ts

@@ -8,6 +8,8 @@
 import {
   PhBell,
   PhCalendarDots,
+  PhCaretDoubleLeft,
+  PhCaretDoubleRight,
   PhCaretDown,
   PhCaretLeft,
   PhCaretRight,
@@ -69,6 +71,8 @@ const icons = {
   download: PhDownloadSimple,
   chevronRight: PhCaretRight,
   chevronUpDown: PhCaretUpDown,
+  chevronsLeft: PhCaretDoubleLeft,
+  chevronsRight: PhCaretDoubleRight,
 } satisfies Record<SemanticIconName, unknown>;
 
 /**