@xleddyl/443-components-vue 0.8.1 → 0.8.3

package/README.md

@@ -108,7 +108,22 @@ Tokens live on `.k-root`, never on `:root`. Override them on a root element: Roo
 
 Input tokens, declared only on the outermost root so nested roots inherit them: `--k-accent`, `--k-accent-contrast`, `--k-font-sans`, `--k-font-mono`, `--k-font-size`, `--k-font-features`, `--k-line-height`, `--k-radius-scale`. Every other token (surfaces, text, lines, accent shades, status colors, radii, shadows, motion) is derived per root, so a nested root with its own `theme` or `accent` re-themes a region. The full list is in [CONVENTIONS.md](./CONVENTIONS.md#tokens).
 
-A few component tokens are unset by default and only exist to be overridden on a root: `--k-scrim-blur` (backdrop blur of Modal and Drawer, `3px`), `--k-badge-radius` (Badge corners, `--k-radius-full`), `--k-grid-header-background`, `--k-grid-header-text` and `--k-grid-header-font` (DataGrid header, `--k-subtle`, `--k-text-muted` and `--k-font-sans`).
+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-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).
 
 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.
 
@@ -218,7 +233,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({
@@ -232,6 +247,12 @@ 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.
 
+`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:
 
 ```ts
@@ -287,7 +308,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                                                                                                                                                                     |
 
@@ -296,6 +317,23 @@ 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 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).
+- `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.
 - `SegmentedControl` with `required` narrows `v-model` to a non null value. Options take `title` (tooltip and description) and `muted`, and the `#option` slot replaces the content of each option.
@@ -412,6 +450,7 @@ Ready defaults to start a dashboard project: an app frame, an auth frame and pag
 | `shortcut`                                                                         | `'mod+b'`                       | Toggles the rail on desktop and the drawer on mobile. `searchShortcut` defaults to `mod+k`.                                                                                                                                                                                                                                                                |
 | `v-model:open`                                                                     | `false`                         | Mobile drawer (below 768px of shell width): scrim, focus moves into the drawer, the content is `inert`, Escape and the scrim close it and focus returns to the burger.                                                                                                                                                                                     |
 | `fluid`, `viewTransition`                                                          | `false`, `true`                 | Full width content; `view-transition-name` on sidebar and panel so page transitions keep the frame still.                                                                                                                                                                                                                                                  |
+| `fill`                                                                             | `false`                         | Full height, full bleed content: no padding, gap or max width, and the content fills the panel (a page that is one DataGrid with `height="100%"`). Also on `AppShell`; in the `k-dashboard` layout per page with `definePageMeta({ fill: true })` or for every page with `dashboard.fill`.                                                                 |
 
 Slots: `brand`, `search`, `sidebar` (replaces the navigation), `sidebar-footer`, `account`, `topbar-brand`, `topbar`, `actions`, default, plus `settings-section-<id>`, `settings-actions-<id>` and `settings-account-fields`, forwarded to the SettingsModal. The exposed `openSettings(id?)` opens it on a section. Landmarks: skip link, `aside` and `nav` with labels, `main` with an id, `aria-current="page"` on the active link. `SidebarNav` (layout group) renders the same navigation data inside your own `Sidebar`.
 
@@ -593,7 +632,16 @@ Accessibility related props and defaults:
 - Copy props that contain a value are templates: `removeLabel` (`'Remove {label}'`) on `Tag`, `Combobox` and `FileInput`, `moreLabel` (`'{count} more'`) on `AvatarGroup`, `pageLabel` (`'Page {page}'`) on `Pagination`. `ListPage` takes `resultsText: (count) => string` for the announced result count, `ColorInput` takes `invalidText`.
 - `ColorInput` `swatches` accept `{ value, label }` objects (a radio group named by `label` or the hex). `PasswordInput` picks `autocomplete="new-password"` with `generate` or `strength`, `current-password` otherwise.
 - `Tree` with `reorderable` shows small move buttons (up, down, indent, outdent) on the hovered or focused row, as a single pointer alternative to dragging. Set `patterns` on `LineChart` and `BarChart` to tell series apart without color (dash and point style per line, a fill pattern per bar series, mirrored in the legend); it is off by default.
-- `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.
+- `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`, ...). 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/chart/BarChart.vue

@@ -35,40 +35,51 @@ const props = defineProps({
   horizontal: { type: Boolean, required: false },
   patterns: { type: Boolean, required: false },
   formatValue: { type: Function, required: false },
-  options: { type: null, required: false }
+  options: { type: null, required: false },
+  colorByPoint: { type: Boolean, required: false },
+  colors: { type: Array, required: false }
 });
 const { colors, reducedMotion, ready, colorAt, isHidden, toggle } = useChartSurface(
   useTemplateRef("root"),
   {
-    color: (index) => props.series[index]?.color,
-    key: (index) => props.series[index]?.label
+    color: (index) => props.colorByPoint ? props.colors?.[index] : props.series[index]?.color,
+    key: (index) => props.colorByPoint ? props.labels[index] : props.series[index]?.label
   }
 );
 const legendItems = computed(
-  () => props.series.map((entry, index) => ({
-    label: entry.label,
-    color: colorAt(index),
-    hidden: isHidden(index),
-    pattern: props.patterns ? seriesPattern(index) : void 0
-  }))
+  () => (props.colorByPoint ? props.labels : props.series.map((entry) => entry.label)).map(
+    (label, index) => ({
+      label,
+      color: colorAt(index),
+      hidden: isHidden(index),
+      pattern: props.patterns ? seriesPattern(index) : void 0
+    })
+  )
+);
+const visibleIndexes = computed(
+  () => props.labels.map((_, index) => index).filter((index) => !props.colorByPoint || !isHidden(index))
 );
 function fillAt(index) {
   const color = colorAt(index);
   return props.patterns ? barFill(color, seriesPattern(index), colors.value.surface) : color;
 }
-const chartData = computed(() => ({
-  labels: props.labels,
-  datasets: props.series.map((entry, index) => ({
-    label: entry.label,
-    data: entry.data,
-    hidden: isHidden(index),
-    backgroundColor: fillAt(index),
-    hoverBackgroundColor: fillAt(index),
-    borderRadius: 4,
-    borderSkipped: false,
-    maxBarThickness: 36
-  }))
-}));
+const chartData = computed(() => {
+  const indexes = visibleIndexes.value;
+  const pointFills = props.colorByPoint ? indexes.map(fillAt) : void 0;
+  return {
+    labels: props.colorByPoint ? indexes.map((index) => props.labels[index] ?? "") : props.labels,
+    datasets: props.series.map((entry, index) => ({
+      label: entry.label,
+      data: props.colorByPoint ? indexes.map((point) => entry.data[point] ?? null) : entry.data,
+      hidden: props.colorByPoint ? false : isHidden(index),
+      backgroundColor: pointFills ?? fillAt(index),
+      hoverBackgroundColor: pointFills ?? fillAt(index),
+      borderRadius: 4,
+      borderSkipped: false,
+      maxBarThickness: 36
+    }))
+  };
+});
 const chartOptions = computed(
   () => buildCartesianOptions(
     {

package/dist/chart/BarChart.vue.d.ts

@@ -12,6 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     patterns?: boolean;
     formatValue?: ChartValueFormatter;
     options?: ChartOptions<"bar">;
+    colorByPoint?: boolean;
+    colors?: string[];
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -216,6 +218,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     patterns?: boolean;
     formatValue?: ChartValueFormatter;
     options?: ChartOptions<"bar">;
+    colorByPoint?: boolean;
+    colors?: string[];
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;

package/dist/chart/chart.css

@@ -24,7 +24,7 @@
 .k-chart-panel-title {
    margin: 0;
    font-size: 0.9375rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    letter-spacing: -0.015em;
    color: var(--k-text);
 }
@@ -156,7 +156,7 @@
 }
 
 .k-chart-legend-item:active {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-chart-legend-item.is-hidden {

package/dist/chart/useChartColors.mjs

@@ -23,14 +23,14 @@ const fallbackColors = {
   fontFamily: "ui-sans-serif, system-ui, sans-serif"
 };
 const seriesExpressions = [
-  "var(--k-accent)",
-  "var(--k-info)",
-  "var(--k-success)",
-  "var(--k-warning)",
-  "var(--k-danger)",
-  "color-mix(in oklab, var(--k-accent) 55%, var(--k-danger))",
-  "color-mix(in oklab, var(--k-info) 55%, var(--k-success))",
-  "color-mix(in oklab, var(--k-warning) 50%, var(--k-success))"
+  "var(--k-chart-1, var(--k-accent))",
+  "var(--k-chart-2, var(--k-info))",
+  "var(--k-chart-3, var(--k-success))",
+  "var(--k-chart-4, var(--k-warning))",
+  "var(--k-chart-5, var(--k-danger))",
+  "var(--k-chart-6, color-mix(in oklab, var(--k-accent) 55%, var(--k-danger)))",
+  "var(--k-chart-7, color-mix(in oklab, var(--k-info) 55%, var(--k-success)))",
+  "var(--k-chart-8, color-mix(in oklab, var(--k-warning) 50%, var(--k-success)))"
 ];
 let normalizeContext;
 function normalize(color) {

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

@@ -459,8 +459,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
 }> & Readonly<{}>, {
-    tone: Tone;
     size: ButtonSize;
+    tone: Tone;
     type: "submit" | "button" | "reset";
     variant: ButtonVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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,21 +480,21 @@ 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<{
     onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: FieldSize;
+    invalid: boolean;
     type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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,19 +430,19 @@ 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;
 }>, {
-    invalid: boolean;
     size: FieldSize;
+    invalid: boolean;
     rows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/core/types.d.ts

@@ -1,5 +1,5 @@
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export type Tone = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
-export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
+export type ButtonVariant = 'solid' | 'soft' | 'subtle' | 'outline' | 'ghost' | 'link';
 export type FieldSize = 'sm' | 'md' | 'lg';
 export type LinkTarget = string | Record<string, unknown>;