@xleddyl/443-components-vue 0.8.0 → 0.8.2

package/README.md

@@ -45,7 +45,7 @@ Every component is registered with the prefix (`Button.vue` becomes `<KButton>`)
 | `prefix`                  | `'K'`                                     | Component name prefix.                                                                                                                                                                                                                                                                   |
 | `css`                     | `true`                                    | Injects `@xleddyl/443-components-vue/style.css` (and the CSS of enabled optional groups).                                                                                                                                                                                                |
 | `cssLayers`               | `'theme, base, k, components, utilities'` | Cascade layer order declared before any other CSS. The library layer `k` sits after the `theme` and `base` layers of Tailwind (so preflight does not reset components) and before `components` and `utilities` (so host classes win). `false` declares nothing. See [Scoping](#scoping). |
-| `locale`                  | `'en'`                                    | Language of the built-in copy: `'en'`, `'it'`, or any code completed with `messages`. With `@nuxtjs/i18n` the current i18n locale wins. See [Languages](#languages).                                                                                                                     |
+| `locale`                  | `'en'`                                    | Language of the built-in copy: `'en'`, `'it'`, `'de'`, or any code completed with `messages`. With `@nuxtjs/i18n` the current i18n locale wins. See [Languages](#languages).                                                                                                             |
 | `messages`                | `{}`                                      | Overrides per locale code, for example `{ it: { common: { cancel: 'Indietro' } } }`.                                                                                                                                                                                                     |
 | `composables`             | `true`                                    | Auto-imports the composables.                                                                                                                                                                                                                                                            |
 | `global`                  | `false`                                   | Puts `k-root` and `data-theme` on `<html>` for apps that are dashboard only.                                                                                                                                                                                                             |
@@ -108,6 +108,23 @@ 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 (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).
+
 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.
 
 Themes: `data-theme="light"` or `"dark"` forces the scheme, `system` (or no attribute) follows the OS. `useTheme()` returns `preference`, `set()` and `cycle()`; `KThemeSwitch` is a ready control.
@@ -202,7 +219,7 @@ Each collection is a separate chunk loaded the first time one of its icons rende
 
 ## Languages
 
-The components have no hardcoded copy. Every label, placeholder, status text and validation message comes from a typed catalog (`KMessages`), with English (`en`) and Italian (`it`) built in. Plurals are `'one | other'` templates with a `{count}` parameter.
+The components have no hardcoded copy. Every label, placeholder, status text and validation message comes from a typed catalog (`KMessages`), with English (`en`), Italian (`it`) and German (`de`) built in. Plurals are `'one | other'` templates with a `{count}` parameter.
 
 ```ts
 k: { locale: 'it', messages: { it: { common: { cancel: 'Indietro' } } } }
@@ -230,6 +247,8 @@ 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.
+
 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
@@ -294,6 +313,17 @@ 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.
+- `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).
+- `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.
@@ -410,6 +440,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`.
 
@@ -591,6 +622,11 @@ 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` 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.
 - `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/Input.vue.d.ts

@@ -489,8 +489,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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.d.ts

@@ -439,8 +439,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & 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>;

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

@@ -406,8 +406,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
-    tone: Tone;
     size: BadgeSize;
+    tone: Tone;
     variant: BadgeVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/data/FilterPills.vue

@@ -34,6 +34,7 @@
 <script setup>
 import { computed, h, nextTick, ref, useTemplateRef, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { translateOr } from "../../locale";
 import { hasFocusWithin } from "../../internal/core/focus";
 import Button from "../core/Button.vue";
 import DropdownMenu from "../overlays/DropdownMenu.vue";
@@ -46,10 +47,12 @@ const props = defineProps({
   size: { type: String, required: false, default: "md" },
   clearable: { type: Boolean, required: false },
   clearLabel: { type: String, required: false },
+  removeLabel: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: null, required: false }
 });
-const { t } = useLocale();
+const emit = defineEmits(["select", "remove"]);
+const { t, locale } = useLocale();
 const groupLabel = computed(() => props.label ?? t("filterPills.label"));
 const clearText = computed(() => props.clearLabel ?? t("common.clear"));
 const slots = defineSlots();
@@ -82,10 +85,10 @@ function toggle(value) {
   setModel(active ? null : value);
 }
 const root = useTemplateRef("root");
-async function clear() {
+async function keepFocus(change) {
   const group = root.value;
   const hadFocus = hasFocusWithin(group);
-  setModel(props.multiple ? [] : null);
+  change();
   if (!hadFocus || !group) return;
   await nextTick();
   if (hasFocusWithin(group)) return;
@@ -98,6 +101,35 @@ async function clear() {
     group.focus({ preventScroll: true });
   }
 }
+function clear() {
+  return keepFocus(() => setModel(props.multiple ? [] : null));
+}
+function remove(value) {
+  return keepFocus(() => {
+    const rest = activeValues.value.filter((item) => item !== value);
+    if (isActive(value) && !(props.required && rest.length === 0))
+      setModel(props.multiple ? rest : null);
+    emit("remove", value);
+  });
+}
+function removable(pill, option, disabled) {
+  return h("span", { class: "k-filter-pill-group" }, [
+    pill,
+    h(Button, {
+      class: "k-filter-pill-remove",
+      variant: "ghost",
+      tone: "neutral",
+      size: "xs",
+      icon: "x-mark",
+      square: true,
+      disabled,
+      "aria-label": translateOr(locale.value, props.removeLabel, "filterPills.remove", {
+        label: option.valueLabel ? `${option.label} ${option.valueLabel}` : option.label
+      }),
+      onClick: () => remove(option.value)
+    })
+  ]);
+}
 function setPanel(value, open) {
   if (open) openPanel.value = value;
   else if (openPanel.value === value) openPanel.value = null;
@@ -113,7 +145,12 @@ function renderPill(value) {
     size: props.size,
     disabled: Boolean(props.disabled || option.disabled)
   };
-  const active = option.active ?? isActive(value);
+  const active = option.active ?? (option.removable ? true : isActive(value));
+  const pill = renderTrigger(option, base, active);
+  return option.removable ? removable(pill, option, base.disabled) : pill;
+}
+function renderTrigger(option, base, active) {
+  const value = option.value;
   if (option.menu)
     return h(
       DropdownMenu,
@@ -140,6 +177,8 @@ function renderPill(value) {
       }
     );
   }
+  if (option.removable)
+    return h(FilterPill, { ...base, active, onClick: () => emit("select", value) });
   return h(FilterPill, { ...base, pressed: isActive(value), onClick: () => toggle(value) });
 }
 const defaultPills = /* @__PURE__ */ new Map();

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

@@ -8,11 +8,14 @@ declare const __VLS_export: <T extends FilterPillValue, M extends boolean = fals
         size?: "sm" | "md";
         clearable?: boolean;
         clearLabel?: string;
+        removeLabel?: string;
         disabled?: boolean;
         required?: R;
     } & {
         modelValue?: M extends true ? T[] : R extends true ? T : T | null;
     }) & {
+        onRemove?: ((value: T) => any) | undefined;
+        onSelect?: ((value: T) => any) | undefined;
         "onUpdate:modelValue"?: ((value: M extends true ? T[] : R extends true ? T : T | null) => any) | undefined;
     } & Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -36,7 +39,7 @@ declare const __VLS_export: <T extends FilterPillValue, M extends boolean = fals
             close: () => void;
         }) => unknown) | undefined;
     };
-    emit: (event: "update:modelValue", value: M extends true ? T[] : R extends true ? T : T | null) => void;
+    emit: (((evt: "remove", value: T) => void) & ((evt: "select", value: T) => void)) & ((event: "update:modelValue", value: M extends true ? T[] : R extends true ? T : T | null) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/data/Pagination.vue

@@ -28,6 +28,18 @@
          </span>
       </div>
       <nav class="k-pagination-nav" :aria-label="navLabel">
+         <button
+            v-if="showEdges"
+            type="button"
+            class="k-btn k-btn-neutral k-btn-ghost is-icon"
+            :class="`k-btn-${buttonSize}`"
+            :disabled="disabled"
+            :aria-disabled="!disabled && page <= 1 ? 'true' : void 0"
+            :aria-label="firstText"
+            @click="go(1)"
+         >
+            <Icon name="chevron-double-left" />
+         </button>
          <button
             type="button"
             class="k-btn k-btn-neutral k-btn-ghost is-icon"
@@ -73,7 +85,35 @@
          >
             <Icon name="chevron-right" />
          </button>
+         <button
+            v-if="showEdges"
+            type="button"
+            class="k-btn k-btn-neutral k-btn-ghost is-icon"
+            :class="`k-btn-${buttonSize}`"
+            :disabled="disabled"
+            :aria-disabled="!disabled && page >= pageCount ? 'true' : void 0"
+            :aria-label="lastText"
+            @click="go(pageCount)"
+         >
+            <Icon name="chevron-double-right" />
+         </button>
       </nav>
+      <div v-if="showJump" class="k-pagination-jump">
+         <label :for="jumpId" class="k-pagination-size-label">{{ jumpText }}</label>
+         <input
+            :id="jumpId"
+            class="k-field k-field-sm k-pagination-jump-input"
+            type="number"
+            inputmode="numeric"
+            min="1"
+            :max="pageCount"
+            :value="page"
+            :disabled="disabled"
+            @change="onJump"
+            @keydown.enter.prevent="onJump"
+         />
+         <span class="k-pagination-jump-total" aria-hidden="true">/ {{ pageCount }}</span>
+      </div>
    </div>
 </template>
 
@@ -91,10 +131,15 @@ const props = defineProps({
   compact: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   showSummary: { type: Boolean, required: false, default: true },
+  showEdges: { type: Boolean, required: false },
+  showJump: { type: Boolean, required: false },
   label: { type: String, required: false },
   pageLabel: { type: String, required: false },
   previousLabel: { type: String, required: false },
   nextLabel: { type: String, required: false },
+  firstLabel: { type: String, required: false },
+  lastLabel: { type: String, required: false },
+  jumpLabel: { type: String, required: false },
   pageSizeLabel: { type: String, required: false },
   ofText: { type: String, required: false },
   emptyText: { type: String, required: false }
@@ -106,12 +151,16 @@ function pageText(value) {
 }
 const previousText = computed(() => props.previousLabel ?? t("pagination.previous"));
 const nextText = computed(() => props.nextLabel ?? t("pagination.next"));
+const firstText = computed(() => props.firstLabel ?? t("pagination.first"));
+const lastText = computed(() => props.lastLabel ?? t("pagination.last"));
+const jumpText = computed(() => props.jumpLabel ?? t("pagination.jump"));
 const pageSizeText = computed(() => props.pageSizeLabel ?? t("pagination.pageSize"));
 const ofLabel = computed(() => props.ofText ?? t("pagination.of"));
 const emptyLabel = computed(() => props.emptyText ?? t("common.noResults"));
 const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const pageSize = defineModel("pageSize", { type: Number, ...{ default: 20 } });
 const sizeId = useId();
+const jumpId = useId();
 const buttonSize = computed(() => props.size === "sm" ? "xs" : "sm");
 const pageCount = computed(() => Math.max(1, Math.ceil(props.total / pageSize.value)));
 const items = computed(() => paginationItems(page.value, pageCount.value, props.siblings));
@@ -126,6 +175,12 @@ function go(target) {
   const next = Math.min(Math.max(target, 1), pageCount.value);
   if (next !== page.value) page.value = next;
 }
+function onJump(event) {
+  const input = event.target;
+  const target = Math.trunc(Number(input.value));
+  if (Number.isFinite(target) && input.value !== "") go(target);
+  input.value = String(page.value);
+}
 function onSizeChange(event) {
   const firstItem = (page.value - 1) * pageSize.value;
   pageSize.value = Number(event.target.value);

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

@@ -14,10 +14,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     compact?: boolean;
     disabled?: boolean;
     showSummary?: boolean;
+    showEdges?: boolean;
+    showJump?: boolean;
     label?: string;
     pageLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
+    firstLabel?: string;
+    lastLabel?: string;
+    jumpLabel?: string;
     pageSizeLabel?: string;
     ofText?: string;
     emptyText?: string;
@@ -226,10 +231,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     compact?: boolean;
     disabled?: boolean;
     showSummary?: boolean;
+    showEdges?: boolean;
+    showJump?: boolean;
     label?: string;
     pageLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
+    firstLabel?: string;
+    lastLabel?: string;
+    jumpLabel?: string;
     pageSizeLabel?: string;
     ofText?: string;
     emptyText?: string;

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

@@ -410,8 +410,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     onRemove?: (() => any) | undefined;
 }>, {
-    tone: Tone;
     size: BadgeSize;
+    tone: Tone;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -441,8 +441,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "onUpdate:selected"?: ((value: TreeNodeId | null) => any) | undefined;
     "onUpdate:expanded"?: ((value: TreeNodeId[]) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: TreeSize;
+    invalid: boolean;
     selectable: boolean;
     bordered: boolean;
     descriptionVariant: TreeDescriptionVariant;

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

@@ -91,5 +91,6 @@ export interface FilterPillOption<T extends FilterPillValue = FilterPillValue> {
     panel?: boolean;
     panelLabel?: string;
     active?: boolean;
+    removable?: boolean;
 }
 export type SelectionBarPlacement = 'inline' | 'sticky' | 'floating';

package/dist/components/feedback/Meter.vue.d.ts

@@ -407,9 +407,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
+    size: "sm" | "md";
     min: number;
     max: number;
-    size: "sm" | "md";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/feedback/Progress.vue.d.ts

@@ -408,9 +408,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     value: number | null;
+    size: ProgressSize;
     tone: Tone;
     max: number;
-    size: ProgressSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/feedback/ProgressRing.vue.d.ts

@@ -410,9 +410,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     value: number | null;
+    size: number | "sm" | "md" | "lg";
     tone: Tone;
     max: number;
-    size: number | "sm" | "md" | "lg";
     thickness: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;