@xleddyl/443-components-vue 0.8.2 → 0.8.4

package/README.md

@@ -110,20 +110,22 @@ Input tokens, declared only on the outermost root so nested roots inherit them:
 
 A few component tokens are unset by default and only exist to be overridden on a root (or any ancestor). Unset, every one keeps the library look. The full list with defaults is in [CONVENTIONS.md](./CONVENTIONS.md#tokens):
 
-| Area     | Tokens                                                                                                                                                                                       |
-| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Type     | `--k-font-weight` (400), `--k-font-weight-medium` (500), `--k-font-weight-strong` (600), `--k-font-weight-display` (650)                                                                     |
-| Buttons  | `--k-btn-highlight`, `--k-btn-shadow` (`0 0 #0000` for a flat button), `--k-btn-border`, `--k-btn-padding-x`, `--k-btn-font-size`, `--k-btn-icon-size`, `--k-press-scale` (0.97)             |
-| Fields   | `--k-field-padding-x`                                                                                                                                                                        |
-| Overlays | `--k-modal-radius`, `--k-modal-shadow`, `--k-drawer-radius`, `--k-drawer-shadow`, `--k-popover-radius`, `--k-popover-shadow`, `--k-toast-radius`, `--k-toast-shadow`, `--k-scrim-blur` (3px) |
-| Tooltip  | `--k-tooltip-background`, `--k-tooltip-text`, `--k-tooltip-border`, `--k-tooltip-radius`, `--k-tooltip-shadow`, `--k-tooltip-padding`                                                        |
-| Shell    | `--k-sidebar-width` (15rem), `--k-sidebar-rail-width`, `--k-topbar-height` (3rem), `--k-shell-inset`, `--k-shell-padding`, `--k-shell-content`                                               |
-| Switch   | `--k-switch-track-width`, `--k-switch-track-height`, `--k-switch-thumb-size` (md size)                                                                                                       |
-| Badge    | `--k-badge-radius`, `--k-badge-font`, `--k-badge-font-size`, `--k-badge-font-weight`, `--k-badge-text-transform`, `--k-badge-letter-spacing`                                                 |
-| DataGrid | `--k-grid-header-background`, `--k-grid-header-text`, `--k-grid-header-font`, `--k-grid-header-font-weight`, `--k-grid-font-size` (13px), `--k-grid-radius`, `--k-grid-selected-background`  |
-| Charts   | `--k-chart-1` to `--k-chart-8` (series palette)                                                                                                                                              |
-
-Some tokens are meant for one element: set `--k-btn-tone`, `--k-btn-on-tone` and `--k-btn-tone-text` on a button for a brand tone outside `Tone` (a lime fill with green text), and `--k-badge-background`, `--k-badge-color` and `--k-badge-border-color` on a badge for a custom pill color. `variant="subtle"` is a borderless tinted fill (`--k-fill` for the neutral tone).
+| Area      | Tokens                                                                                                                                                                                                                                    |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Type      | `--k-font-weight` (400), `--k-font-weight-medium` (500), `--k-font-weight-strong` (600), `--k-font-weight-display` (650)                                                                                                                  |
+| Buttons   | `--k-btn-highlight`, `--k-btn-shadow` (`0 0 #0000` for a flat button), `--k-btn-border`, `--k-btn-hover-background`, `--k-btn-active-background`, `--k-btn-padding-x`, `--k-btn-font-size`, `--k-btn-icon-size`, `--k-press-scale` (0.97) |
+| Fields    | `--k-field-padding-x`                                                                                                                                                                                                                     |
+| Overlays  | `--k-modal-radius`, `--k-modal-shadow`, `--k-drawer-radius`, `--k-drawer-shadow`, `--k-popover-radius`, `--k-popover-shadow`, `--k-toast-radius`, `--k-toast-shadow`, `--k-scrim-blur` (3px)                                              |
+| Tooltip   | `--k-tooltip-background`, `--k-tooltip-text`, `--k-tooltip-border`, `--k-tooltip-radius`, `--k-tooltip-shadow`, `--k-tooltip-padding`                                                                                                     |
+| Shell     | `--k-sidebar-width` (15rem), `--k-sidebar-rail-width`, `--k-topbar-height` (3rem), `--k-shell-inset`, `--k-shell-padding`, `--k-shell-content`                                                                                            |
+| Switch    | `--k-switch-track-width`, `--k-switch-track-height`, `--k-switch-thumb-size` (md size)                                                                                                                                                    |
+| Separator | `--k-separator-heading-font-size` (0.9375rem)                                                                                                                                                                                             |
+| Calendar  | `--k-calendar-day-radius`, `--k-calendar-unavailable-color`, `--k-calendar-unavailable-decoration` (line-through), `--k-calendar-unavailable-opacity` (0.6)                                                                               |
+| Badge     | `--k-badge-radius`, `--k-badge-font`, `--k-badge-font-size`, `--k-badge-font-weight`, `--k-badge-text-transform`, `--k-badge-letter-spacing`                                                                                              |
+| DataGrid  | `--k-grid-header-background`, `--k-grid-header-text`, `--k-grid-header-font`, `--k-grid-header-font-weight`, `--k-grid-header-font-size` (12px), `--k-grid-font-size` (13px), `--k-grid-radius`, `--k-grid-selected-background`           |
+| Charts    | `--k-chart-1` to `--k-chart-8` (series palette)                                                                                                                                                                                           |
+
+Some tokens are meant for one element: set `--k-btn-tone`, `--k-btn-on-tone` and `--k-btn-tone-text` on a button for a brand tone outside `Tone` (a lime fill with green text), and `--k-badge-background`, `--k-badge-color` and `--k-badge-border-color` on a badge for a custom pill color. `variant="subtle"` is a borderless tinted fill (`--k-fill` for the neutral tone). For solid buttons without hover darkening, declare the fill tokens on the button so `var(--k-btn-tone)` resolves per tone: `.k-btn-solid { --k-btn-hover-background: var(--k-btn-tone); --k-btn-active-background: var(--k-btn-tone) }` (the neutral solid button rests on `--k-text`).
 
 Contrast is part of the tokens: `--k-text-muted` is the lightest text color (4.5:1), `--k-text-dimmed` is for icons and decoration (3:1), `--k-ring` is an opaque focus color (3:1 on every surface), and `--k-danger-text`, `--k-success-text`, `--k-warning-text`, `--k-info-text` color status text (4.5:1, also on soft tints). Every preset sets them for light and dark; keep the same ratios when you override them.
 
@@ -233,7 +235,7 @@ k: { locale: 'it', messages: { it: { common: { cancel: 'Indietro' } } } }
 
 ## Forms
 
-`useForm({ schema })` takes field definitions (`initial`, `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate`). Any [Standard Schema](https://standardschema.dev) library (Zod 4, Valibot, ArkType) also works, per field (`schema` in the definition) or for the whole form (`validator`, issues are matched to fields by their first path segment):
+`useForm({ schema })` takes field definitions (`initial`, `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate`, `isEmpty`). Any [Standard Schema](https://standardschema.dev) library (Zod 4, Valibot, ArkType) also works, per field (`schema` in the definition) or for the whole form (`validator`, issues are matched to fields by their first path segment):
 
 ```ts
 const form = useForm({
@@ -247,7 +249,13 @@ Issues are keyed by their first path segment and by their full dotted path (`blo
 
 Built-in messages follow the active language. `messages` overrides them for one form.
 
-Rules that return message keys instead of text (an existing validator library, server side codes) go through `translateMessage(message, { name, label, kind })`: it receives every string returned by a `validate` function, a field `schema`, the form `validator` and `warnings` (`kind` is `'error'` or `'warning'`), and returns the text to show. Built-in messages are not passed to it. Set `translateMessage` and `messages` once for the whole app with `app.use(createFormConfig({ translateMessage: (key) => i18n.t(key), messages: { required: () => i18n.t('form.required') } }))`, or `provideFormConfig()` in a component; the options of one `useForm` still win.
+`schema` also accepts a ref or getter (`MaybeRefOrGetter<FormSchema>`), for one form component reused with different fields, labels or rules per open, mode or language: `schema: () => (mode.value === 'edit' ? editSchema : createSchema)`. Field definitions, labels, `required` and rules follow the source (after the first submit the form validates again when they change). A field that appears starts from its `initial` and is clean; a field that disappears loses its value, error and touched state. With `values` the host owns the values, so only rules and labels change. `form.schema` always returns the current definitions.
+
+`required` treats `null`, `undefined`, blank strings, empty arrays, `NaN` and plain objects whose values are all empty (a per-language map like `{ it: '', en: '' }`) as empty. A field with another idea of empty passes `isEmpty: (value) => boolean`, which replaces the check for that field. `isEmptyValue(value)` is the default check, exported for reuse.
+
+A `validate` function returns a message, `false` (the built-in invalid message), nothing (valid), or `{ message, params }` when the message needs values: `validate: (value) => value.length > 80 ? { message: 'errors.maxLength', params: { max: 80 } } : undefined`. The params reach `translateMessage` as `context.params`; without a translator they fill the `{name}` placeholders of the message.
+
+Rules that return message keys instead of text (an existing validator library, server side codes) go through `translateMessage(message, { name, label, kind, params })`: it receives every string returned by a `validate` function, a field `schema`, the form `validator` and `warnings` (`kind` is `'error'` or `'warning'`), and returns the text to show. Built-in messages are not passed to it. Set `translateMessage` and `messages` once for the whole app with `app.use(createFormConfig({ translateMessage: (key) => i18n.t(key), messages: { required: () => i18n.t('form.required') } }))`, or `provideFormConfig()` in a component; the options of one `useForm` still win.
 
 Forms can also drive values they do not own. Pass `values` (a reactive object, ref or getter) and the form reads, validates, tracks dirty state and submits it. The schema becomes optional and only adds rules, labels and `required`; its `initial` values are not used. `reset()` restores the clean snapshot, `reset(next)` replaces the values and makes them the new clean state (`form.reset(record.value)` after a save). `validator` accepts a ref or getter, so it can change with the record type:
 
@@ -304,7 +312,7 @@ Several controls in one `FormField`. Only the primary control takes the field id
 | layout    | Accordion, AppShell, Breadcrumbs, Card, CopyButton, Grid, NavLink, PageHeader, Separator, Sidebar, SidebarNav, SidebarSection, Stack, Tabs, ThemeSwitch, Toolbar                                                                |
 | templates | DashboardLayout, AuthLayout, DashboardPage, ListPage, DetailPage, FormPage, SettingsPage, SettingsSection, SettingsModal, SettingsGroup, AppearanceSettings, SaveBar, ErrorPage, NotFoundPage, EmptyPage, Brand, AccountMenu    |
 | feedback  | Alert, EmptyState, LoadingOverlay, Meter, Progress, ProgressRing, Skeleton                                                                                                                                                      |
-| grid      | DataGrid, GridToolbar, cell renderers (BadgeCell, BooleanCell, DateCell, ImageCell, LinkCell)                                                                                                                                   |
+| grid      | DataGrid, GridToolbar, cell renderers (BadgeCell, BooleanCell, DateCell, EmptyCell, ImageCell, LinkCell)                                                                                                                        |
 | editor    | RichTextEditor                                                                                                                                                                                                                  |
 | chart     | ChartPanel, ChartLegend, LineChart, BarChart, DoughnutChart                                                                                                                                                                     |
 
@@ -313,16 +321,22 @@ Composables: `useTheme`, `usePreset`, `useForm`, `useField`, `useFieldControl`,
 ### Lists, trees and uploads
 
 - `Tree` takes `size="sm"` for dense rows, `checkmark`, `descriptionVariant` (`mono`, the default for paths and slugs, or `text`; a node can override it with its own `descriptionVariant`), `emptyText` (or `#empty`) and works inside a `FormField` (labelled and described by the field). With `reorderable` rows get a drag handle and Alt with the up and down arrows moves them; `nestable` also lets rows change level (drop in the middle of a row, Alt with left and right). The `move` event carries `{ node, target, position, from: { parent, index }, to: { parent, index } }`, `to.index` being the final index, and `applyTreeMove(nodes, move)` returns the updated tree. `canDrop(move)` vetoes a move. Moves are announced to screen readers.
-- `Select` takes string, number or boolean option values (`{ value: true, label: 'Yes' }`); the model gets the option value back with its type.
-- `Pagination` takes `showEdges` (first and last page buttons, `firstLabel`, `lastLabel`) and `showJump` (a typed page number, `jumpLabel`). Both are off by default.
+- `Select` takes string, number or boolean option values (`{ value: true, label: 'Yes' }`); the model gets the option value back with its type and is typed `T | null | undefined`, so `v-model` works on a narrow ref (`Ref<'a' | 'b' | null>`). An option whose value is `''` is a real option: it is selected and shown with its own label, distinct from the placeholder, which still maps to `null`.
+- `Input` and `Textarea` take `counter`: with a `maxlength` attribute they show `length / maxlength` inside the field, describe the control with "12 of 40 characters" (`form.characterCount`) and announce "Character limit reached" when it is hit.
+- `Input` takes `transform: (value: string) => string`, applied to the typed text before it reaches the model (the caret keeps its place; IME composition is transformed when it ends). `:transform="(value) => value.toUpperCase()"` enforces uppercase codes. Values set from outside are not transformed.
+- `FormField` takes `optional`, a muted localized "Optional" marker in the label row (`form.optional`, `optionalText` overrides it), the counterpart of the required asterisk. It is hidden when the field is required.
+- `CheckboxGroup` takes `columns` (a number): the options are laid out in a grid with that many equal columns. Unset keeps the `orientation` layout.
+- `Combobox` with `multiple` takes `hideTags`: the selected values are not rendered as tags inside the control (the host shows them elsewhere), the placeholder stays visible and Backspace no longer removes the last value. Selection is still announced through the options.
+- `Pagination` takes `showEdges` (first and last page buttons, `firstLabel`, `lastLabel`) and `showJump` (a typed page number, `jumpLabel`). Both are off by default. `page` is clamped to the page count only when `total` is known: while `total` is `0` or `loading` is set (it also sets `aria-busy`), the page is kept, so a server reload does not reset it.
 - `FilterPills` can list active filters: options with `removable: true` render as active pills with a remove button (`removeLabel`, a `'Remove {label}'` template). Clicking the pill emits `select(value)`, the button emits `remove(value)` (and drops the value from the model when it is selected); focus moves to the next pill when the removed one disappears.
 - `Calendar` takes `dayText: (iso) => string | undefined`, a short line under each day number that is also added to the day's accessible name (availability, prices). The `#day` slot (`{ date, number, text, selected, unavailable, inMonth }`) replaces the cell content; it is decorative, so announced text still comes from `dayText`.
-- `Separator` takes `description` (or `#description`) under its label, and an `#actions` slot rendered next to them (a small add or edit button).
+- `Separator` takes `description` (or `#description`) under its label, and an `#actions` slot rendered next to them (a small add or edit button). `variant="heading"` (`SeparatorVariant`, `'label' | 'heading'`, default `'label'`) shows the label as a section title on its own (an `h3`, `level` changes it) with the description below and the actions at the end, under one line above instead of the small muted label between two lines. `:lines="false"` (default `true`) hides the lines of either variant; `--k-separator-heading-font-size` (0.9375rem) sizes the heading.
 - `Modal` takes `width` (any CSS length, overrides `size`) and `minHeight` (keeps the height steady while tabs or steps change). The size widths are tokens: `--k-modal-width-sm` (26rem), `--k-modal-width-md` (32rem), `--k-modal-width-lg` (50rem), `--k-modal-width-xl` (64rem).
 - `Tabs` items take `dot: true` for a small indicator without a number (`dotTone`, default `danger`; `dotLabel` is the hidden text, default "Needs attention").
 - `DropdownMenu` takes `matchTriggerWidth` (the menu is at least as wide as its trigger) and `minWidth` (a CSS length).
 - `PageHeader` takes `align` (`'end'` by default, `'start'` or `'center'`) for the title block and the actions, and `truncate` to keep the title on one line with an ellipsis (the full title is in its `title` attribute).
 - `RichTextEditor` accepts `'underline'` in `toolbar` (not in the default toolbar).
+- `RichTextEditor` takes `linkTypes` (`EditorLinkType[]`, `'url' | 'email' | 'phone'`, default `['url']`). With more than one type the link form shows a type select; email links get `mailto:` and phone links `tel:` (spaces and separators removed). When no text is selected the form asks for the link text too (`editor.linkText`) and inserts it as a link, falling back to the address.
 - `BarChart` takes `colorByPoint` (every bar of a series takes the next palette color, or one from `colors: string[]`; the legend lists and toggles the categories). The palette comes from `--k-chart-1` to `--k-chart-8`.
 - `SelectionBar` shows a plural aware selected count (announced in a live region), select all (`total` plus `@select-all`) and clear (`@clear`) actions, an `#actions` slot and `placement` `inline`, `sticky` or `floating`. With `count` 0 it renders no box (only its live region), so it can sit in a flex toolbar without adding a gap; the first count after mount is announced too. `ListPage` renders it for `#bulk`.
 - `FilterPills` is generic: the value type comes from the options, `multiple` makes the model an array and `required` drops `null` from it (like `SegmentedControl`). Options take `menu` items (a dropdown trigger showing `valueLabel`) or `panel: true`, which opens a popover with the `#panel-<value>` slot (`{ option, active, toggle, close }`, `panelLabel` names it). The `#pill` slot renders any trigger and its scope has `defaultPill`, a component that renders the built-in pill for that option, so one custom pill does not mean rewriting the others: `<component :is="defaultPill" v-else />`. `FilterPill` is exported so custom triggers match the other pills.
@@ -625,8 +639,13 @@ Accessibility related props and defaults:
 - `DataGrid` sort is a model: `v-model:sort` (`{ column, direction } | null`) sets the sorted column from outside (server side sort, a sort restored from the URL) and follows header clicks. Leave it unset for an uncontrolled grid. `sortChange` still fires with `serverSort`.
 - `DataGrid` takes `rowHeight` and `headerHeight` (pixels) for an exact row size on top of `density`, and `headerText: (field, column) => string | undefined` to name every column that has a `field` and no `headerName` (from your i18n).
 - `DataGrid` `filterable` registers the AG Grid text, number and date filters (`registerGridFilterModules()` does it without the prop) and turns `filter` on for every column. `filterChange(model, event)` fires with `api.getFilterModel()` whenever a column filter changes, also when the filters come from `gridOptions` or your own registered modules.
-- `DateCell` takes `relative: true` (or `Intl.RelativeTimeFormatOptions`) in `cellRendererParams` for "3 days ago"; the absolute date stays in the `title`.
-- `DataGrid` takes `gridOptions` for any AG Grid option it does not wrap (`rowHeight`, `onCellEditingStopped`, `onFilterChanged`, ...). They are applied before the props of `DataGrid`, so its own props win, and handlers from both run.
+- `DateCell` takes `relative: true` (or `Intl.RelativeTimeFormatOptions`) in `cellRendererParams` for "3 days ago"; the absolute date stays in the `title`. `relativeWithin` (milliseconds, default unset: always relative) shows the absolute date instead once the value is further than that from now, in the past or the future (`relativeWithin: 7 * 86_400_000` keeps "3 days ago" and prints older dates in full).
+- `DataGrid` takes `gridOptions` for any AG Grid option it does not wrap (`rowHeight`, `onCellEditingStopped`, `onFilterChanged`, ...). A prop of `DataGrid` wins only when it is set: `getRowId`, `rowSelection` (when `selectable` is off), `autoSizeStrategy` (also `undefined` to turn it off), `tooltipShowDelay`, `overlayNoRowsTemplate` and `overlayLoadingTemplate` from `gridOptions` are used otherwise; `defaultColDef` and `localeText` are merged over the component defaults, and `context` is merged under the cell context. Handlers from both run.
+- `DataGrid` row ids: `getRowId: (params) => string` (wins), `rowIdKey` (a field of the row), or `gridOptions.getRowId`.
+- `DataGrid` `fill` makes the grid, with its toolbar and footer, fill its parent (a flex or grid item with `flex: 1; min-height: 0`, or `height: 100%` in a block with a height) instead of the fixed `height`. Ignored with `autoHeight`.
+- `DataGrid` `showEdges` and `showJump` reach the footer pager (first and last page buttons, page number input). `loading` also keeps the pager from resetting the page while a server total is unknown.
+- `DataGrid` registers the AG Grid cell editors (text, large text, number, date, checkbox, select, custom and undo/redo) when `editable` is set or when a column or `gridOptions.defaultColDef` has `editable` at mount. `registerGridEditorModules()` from `/grid` does it by hand, before the first grid mounts, for columns that become editable later.
+- `ImageCell` takes `fit` (`'cover'` default, or `'contain'` for logos) and `size` (any CSS length, default `1.75rem`) in `cellRendererParams`. `EmptyCell` (the hidden "Empty" dash) is exported from `/grid` for custom renderers.
 - `DataGrid` translates the AG Grid ARIA strings through the catalog (`grid.*`; your own `localeText` still wins) and announces row count changes.
 
 ## Browser support

package/dist/components/core/FormField.vue

@@ -25,6 +25,9 @@
             <span v-if="isRequired && showRequiredHint" class="k-visually-hidden">{{
                t("form.requiredHint")
             }}</span>
+            <span v-if="optional && !isRequired" class="k-form-field-optional">{{
+               optionalText ?? t("form.optional")
+            }}</span>
          </label>
          <span v-if="hint || $slots.hint" :id="hintId" class="k-form-field-hint">
             <slot name="hint">{{ hint }}</slot>
@@ -76,6 +79,8 @@ const props = defineProps({
   error: { type: [String, Boolean], required: false, default: void 0 },
   warning: { type: [String, Boolean], required: false, default: void 0 },
   required: { type: Boolean, required: false },
+  optional: { type: Boolean, required: false },
+  optionalText: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   id: { type: String, required: false }

package/dist/components/core/FormField.vue.d.ts

@@ -23,6 +23,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     error?: string | false;
     warning?: string | false;
     required?: boolean;
+    optional?: boolean;
+    optionalText?: string;
     disabled?: boolean;
     icon?: IconName;
     id?: string | undefined;
@@ -225,6 +227,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     error?: string | false;
     warning?: string | false;
     required?: boolean;
+    optional?: boolean;
+    optionalText?: string;
     disabled?: boolean;
     icon?: IconName;
     id?: string | undefined;

package/dist/components/core/Input.vue

@@ -7,10 +7,14 @@
     'has-lead': hasLead,
     'has-trail': hasTrail,
     'is-numeric': numeric,
-    'is-disabled': control.disabled.value
+    'is-disabled': control.disabled.value,
+    'has-counter': counterState().visible
   }
 ]"
-      :style="props.style"
+      :style="[
+  props.style,
+  counterState().visible ? { '--k-input-counter-chars': String(counterState().width) } : {}
+]"
    >
       <span v-if="hasLead" class="k-input-lead">
          <slot name="leading"><Icon v-if="icon" :name="icon" /></slot>
@@ -29,13 +33,20 @@
          :disabled="control.disabled.value || void 0"
          :required="control.required.value || void 0"
          :aria-invalid="control.invalid.value ? 'true' : void 0"
-         :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
+         :aria-describedby="
+  joinIds(
+    $attrs['aria-describedby'],
+    control.describedBy.value,
+    counterState().visible && counterState().id
+  )
+"
          :type="type"
          :value="model ?? ''"
          :readonly="readonly"
          :class="['k-field', `k-field-${size}`, { 'is-invalid': control.invalid.value }]"
          @input="onInput"
          @change="onChange"
+         @compositionend="onInput"
       />
       <span v-if="hasTrail" class="k-input-trail">
          <button
@@ -50,15 +61,28 @@
          </button>
          <slot name="trailing" />
       </span>
+      <span
+         v-if="counterState().visible"
+         class="k-field-counter k-tabular"
+         :class="{ 'is-over': counterState().atLimit }"
+         aria-hidden="true"
+         >{{ counterState().text }}</span
+      >
+      <span v-if="counterState().visible" :id="counterState().id" class="k-visually-hidden">{{
+         counterState().label
+      }}</span>
+      <LiveRegion v-if="counter" :message="counterState().limitMessage" />
    </div>
 </template>
 
 <script setup>
-import { computed, useSlots, useTemplateRef } from "vue";
+import { computed, useAttrs, useSlots, useTemplateRef } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
 import Icon from "./Icon.vue";
 import { joinIds } from "../../internal/forms/control";
+import { useCharacterCounter } from "../../internal/forms/counter";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   type: { type: String, required: false, default: "text" },
@@ -72,6 +96,8 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   noAutofill: { type: Boolean, required: false },
+  counter: { type: Boolean, required: false },
+  transform: { type: Function, required: false },
   class: { type: null, required: false },
   style: { type: null, required: false }
 });
@@ -81,6 +107,7 @@ const { t } = useLocale();
 const clearText = computed(() => props.clearLabel ?? t("common.clear"));
 const slots = useSlots();
 const inputRef = useTemplateRef("inputRef");
+const attrs = useAttrs();
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
@@ -95,6 +122,11 @@ const showClear = computed(
 );
 const hasLead = computed(() => Boolean(props.icon || slots.leading));
 const hasTrail = computed(() => Boolean(props.clearable || slots.trailing));
+const counterState = useCharacterCounter({
+  enabled: () => props.counter,
+  value: () => model.value,
+  attrs
+});
 function parse(raw) {
   if (modifiers.trim) raw = raw.trim();
   if (!parsesNumber.value) return raw;
@@ -102,8 +134,30 @@ function parse(raw) {
   const parsed = Number(raw.replace(",", "."));
   return Number.isNaN(parsed) ? raw : parsed;
 }
+function applyTransform(target) {
+  const raw = target.value;
+  if (!props.transform) return raw;
+  const next = props.transform(raw);
+  if (next === raw) return raw;
+  const caret = target.selectionEnd;
+  target.value = next;
+  if (caret !== null) {
+    const position = Math.max(0, next.length - (raw.length - caret));
+    try {
+      target.setSelectionRange(position, position);
+    } catch {
+      return next;
+    }
+  }
+  return next;
+}
 function onInput(event) {
-  model.value = parse(event.target.value);
+  const target = event.target;
+  if (event.isComposing) {
+    model.value = parse(target.value);
+    return;
+  }
+  model.value = parse(applyTransform(target));
 }
 function onChange(event) {
   if (!modifiers.trim) return;

package/dist/components/core/Input.vue.d.ts

@@ -18,6 +18,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     readonly?: (boolean | "true" | "false") | undefined;
     required?: (boolean | "true" | "false") | undefined;
     noAutofill?: boolean;
+    counter?: boolean;
+    transform?: (value: string) => string;
     class?: unknown;
     style?: unknown;
     modelValue?: string | number | null | undefined;
@@ -233,13 +235,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }, {
@@ -261,6 +263,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     readonly?: (boolean | "true" | "false") | undefined;
     required?: (boolean | "true" | "false") | undefined;
     noAutofill?: boolean;
+    counter?: boolean;
+    transform?: (value: string) => string;
     class?: unknown;
     style?: unknown;
     modelValue?: string | number | null | undefined;
@@ -476,13 +480,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }> & Readonly<{

package/dist/components/core/Textarea.vue

@@ -1,7 +1,7 @@
 <template>
    <div
       class="k-textarea-box"
-      :class="[props.class, { 'has-trail': hasTrail }]"
+      :class="[props.class, { 'has-trail': hasTrail, 'has-counter': counterState().visible }]"
       :style="props.style"
    >
       <textarea
@@ -17,7 +17,13 @@
          :disabled="control.disabled.value || void 0"
          :required="control.required.value || void 0"
          :aria-invalid="control.invalid.value ? 'true' : void 0"
-         :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
+         :aria-describedby="
+  joinIds(
+    $attrs['aria-describedby'],
+    control.describedBy.value,
+    counterState().visible && counterState().id
+  )
+"
          :rows="rows"
          :value="model ?? ''"
          :readonly="readonly"
@@ -41,13 +47,26 @@
       <span v-if="hasTrail" class="k-textarea-trail">
          <slot name="trailing" />
       </span>
+      <span
+         v-if="counterState().visible"
+         class="k-field-counter k-tabular"
+         :class="{ 'is-over': counterState().atLimit }"
+         aria-hidden="true"
+         >{{ counterState().text }}</span
+      >
+      <span v-if="counterState().visible" :id="counterState().id" class="k-visually-hidden">{{
+         counterState().label
+      }}</span>
+      <LiveRegion v-if="counter" :message="counterState().limitMessage" />
    </div>
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, useSlots, useTemplateRef, watch } from "vue";
+import { computed, nextTick, onMounted, useAttrs, useSlots, useTemplateRef, watch } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
+import { useCharacterCounter } from "../../internal/forms/counter";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   size: { type: String, required: false, default: "md" },
@@ -60,12 +79,18 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   noAutofill: { type: Boolean, required: false },
+  counter: { type: Boolean, required: false },
   class: { type: null, required: false },
   style: { type: null, required: false }
 });
 const model = defineModel({ type: null });
 const slots = useSlots();
 const hasTrail = computed(() => Boolean(slots.trailing));
+const counterState = useCharacterCounter({
+  enabled: () => props.counter,
+  value: () => model.value,
+  attrs: useAttrs()
+});
 const textareaRef = useTemplateRef("textareaRef");
 const control = useFieldControl({
   invalid: () => props.invalid,

package/dist/components/core/Textarea.vue.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     readonly?: (boolean | "true" | "false") | undefined;
     required?: (boolean | "true" | "false") | undefined;
     noAutofill?: boolean;
+    counter?: boolean;
     class?: unknown;
     style?: unknown;
     modelValue?: string | null | undefined;
@@ -209,14 +210,14 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
     autofocus?: (boolean | "true" | "false") | undefined;
     autocomplete?: string | undefined | undefined;
     maxlength?: (string | number) | undefined;
+    wrap?: string | undefined | undefined;
     minlength?: (string | number) | undefined;
     cols?: (string | number) | undefined;
     dirname?: string | undefined | undefined;
-    wrap?: string | undefined | undefined;
 }, {
     focus: () => void | undefined;
     el: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
@@ -233,6 +234,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     readonly?: (boolean | "true" | "false") | undefined;
     required?: (boolean | "true" | "false") | undefined;
     noAutofill?: boolean;
+    counter?: boolean;
     class?: unknown;
     style?: unknown;
     modelValue?: string | null | undefined;
@@ -428,14 +430,14 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
     autofocus?: (boolean | "true" | "false") | undefined;
     autocomplete?: string | undefined | undefined;
     maxlength?: (string | number) | undefined;
+    wrap?: string | undefined | undefined;
     minlength?: (string | number) | undefined;
     cols?: (string | number) | undefined;
     dirname?: string | undefined | undefined;
-    wrap?: string | undefined | undefined;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {

package/dist/components/data/DescriptionList.vue.d.ts

@@ -410,8 +410,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     columns: number;
-    items: DescriptionItem[];
     layout: DescriptionLayout;
+    items: DescriptionItem[];
     divided: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/data/Pagination.vue

@@ -1,5 +1,9 @@
 <template>
-   <div class="k-pagination" :class="`k-pagination-${size}`">
+   <div
+      class="k-pagination"
+      :class="[`k-pagination-${size}`, { 'is-loading': loading }]"
+      :aria-busy="loading ? 'true' : void 0"
+   >
       <p v-if="showSummary" class="k-pagination-summary" aria-live="polite">
          <slot name="summary" :start="range.start" :end="range.end" :total="total">
             <template v-if="total > 0">
@@ -130,6 +134,7 @@ const props = defineProps({
   size: { type: String, required: false, default: "md" },
   compact: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
   showSummary: { type: Boolean, required: false, default: true },
   showEdges: { type: Boolean, required: false },
   showJump: { type: Boolean, required: false },
@@ -168,7 +173,8 @@ const range = computed(() => ({
   start: props.total === 0 ? 0 : (page.value - 1) * pageSize.value + 1,
   end: Math.min(page.value * pageSize.value, props.total)
 }));
-watch(pageCount, (count) => {
+watch([pageCount, () => props.total, () => props.loading], ([count, total, loading]) => {
+  if (loading || total <= 0) return;
   if (page.value > count) page.value = count;
 });
 function go(target) {

package/dist/components/data/Pagination.vue.d.ts

@@ -13,6 +13,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     size?: "sm" | "md";
     compact?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     showSummary?: boolean;
     showEdges?: boolean;
     showJump?: boolean;
@@ -230,6 +231,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     size?: "sm" | "md";
     compact?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     showSummary?: boolean;
     showEdges?: boolean;
     showJump?: boolean;

package/dist/components/forms/CheckboxGroup.vue

@@ -9,8 +9,13 @@
       class="k-choice-group k-checkbox-group"
       :class="[
   `k-choice-group-${orientation}`,
-  { 'is-invalid': control.invalid.value, 'is-disabled': control.disabled.value }
+  {
+    'is-invalid': control.invalid.value,
+    'is-disabled': control.disabled.value,
+    'has-columns': Boolean(columns)
+  }
 ]"
+      :style="columns ? { '--k-choice-columns': String(columns) } : void 0"
    >
       <legend v-if="hasLegend" class="k-choice-group-legend">
          <slot name="legend">{{ legendText }}</slot>
@@ -43,6 +48,7 @@ const props = defineProps({
   label: { type: String, required: false },
   legend: { type: String, required: false },
   orientation: { type: String, required: false, default: "vertical" },
+  columns: { type: Number, required: false },
   size: { type: String, required: false, default: "md" },
   name: { type: String, required: false },
   invalid: { type: Boolean, required: false, default: void 0 },

package/dist/components/forms/CheckboxGroup.vue.d.ts

@@ -6,6 +6,7 @@ declare const __VLS_export: <T extends ChoiceValue>(__VLS_props: NonNullable<Awa
         label?: string;
         legend?: string;
         orientation?: ChoiceOrientation;
+        columns?: number;
         size?: FieldSize;
         name?: string;
         invalid?: boolean;

package/dist/components/forms/ColorInput.vue.d.ts

@@ -225,13 +225,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }, {
@@ -464,13 +464,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }> & Readonly<{

package/dist/components/forms/Combobox.vue

@@ -28,7 +28,7 @@
          @mousedown="onControlMousedown"
       >
          <span v-if="icon" class="k-combobox-lead" aria-hidden="true"><Icon :name="icon" /></span>
-         <template v-if="multiple">
+         <template v-if="multiple && !hideTags">
             <span v-for="value in selectedValues" :key="keyOf(value)" class="k-combobox-tag">
                <span class="k-combobox-tag-label">{{ labelFor(value) }}</span>
                <button
@@ -211,6 +211,7 @@ const props = defineProps({
   search: { type: Function, required: false },
   filter: { type: Function, required: false },
   multiple: { type: Boolean, required: false },
+  hideTags: { type: Boolean, required: false },
   creatable: { type: [Boolean, Function], required: false },
   debounce: { type: Number, required: false, default: 250 },
   minQueryLength: { type: Number, required: false, default: 0 },
@@ -316,7 +317,7 @@ const inputValue = computed(() => {
   return selectedLabel.value;
 });
 const inputPlaceholder = computed(
-  () => props.multiple && selectedValues.value.length ? void 0 : props.placeholder
+  () => props.multiple && !props.hideTags && selectedValues.value.length ? void 0 : props.placeholder
 );
 const showClear = computed(
   () => props.clearable && interactive.value && selectedValues.value.length > 0
@@ -517,7 +518,7 @@ function onKeydown(event) {
       }
       break;
     case "Backspace":
-      if (props.multiple && !query.value && selectedValues.value.length) {
+      if (props.multiple && !props.hideTags && !query.value && selectedValues.value.length) {
         event.preventDefault();
         remove(selectedValues.value[selectedValues.value.length - 1]);
       }