@xleddyl/443-components-vue 0.8.4 → 0.8.5

package/README.md

@@ -110,20 +110,21 @@ 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-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)                                                                                                                                                                                           |
+| 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), `--k-separator-heading-color` (`--k-text`), `--k-separator-label-font-size` (0.75rem)                                                                                                                                                                                 |
+| Calendar       | `--k-calendar-day-radius`, `--k-calendar-unavailable-color`, `--k-calendar-unavailable-decoration` (line-through), `--k-calendar-unavailable-opacity` (0.6), `--k-calendar-out-of-range-color`, `--k-calendar-out-of-range-decoration`, `--k-calendar-out-of-range-opacity` (each defaults to its unavailable token) |
+| Checkbox group | `--k-checkbox-group-background`, `--k-checkbox-group-padding` (0.75rem), `--k-checkbox-group-radius`, `--k-checkbox-group-border` (`variant="filled"`)                                                                                                                                                               |
+| 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`).
 
@@ -251,6 +252,8 @@ Built-in messages follow the active language. `messages` overrides them for one
 
 `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` is a boolean or a function of the current values (`FieldRequired`, `boolean | ((values) => boolean)`) for conditional fields: `required: (values) => values.delivery === 'ship'`. The `FormField` required marker, `aria-required` and `form.isRequired(name)` follow the current result, and after the first submit the form validates again when it changes.
+
 `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.
@@ -325,12 +328,12 @@ Composables: `useTheme`, `usePreset`, `useForm`, `useField`, `useFieldControl`,
 - `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.
+- `CheckboxGroup` takes `columns` (a number): the options are laid out in a grid with that many equal columns. Unset keeps the `orientation` layout. `variant="filled"` (`CheckboxGroupVariant`, `'default' | 'filled'`, default `'default'`) puts the options in a subtle filled panel, styled by `--k-checkbox-group-background` (`--k-subtle`), `--k-checkbox-group-padding` (0.75rem), `--k-checkbox-group-radius` (`--k-radius-md`) and `--k-checkbox-group-border` (none).
 - `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). `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.
+- `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, outOfRange, inMonth }`) replaces the cell content; it is decorative, so announced text still comes from `dayText`. Days before `min` or after `max` get the `is-out-of-range` class (and `is-unavailable`, like days rejected by `isDateDisabled`), so the `--k-calendar-out-of-range-*` tokens style them apart from disabled days.
+- `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. `align` (`SeparatorAlign`, `'start' | 'center'`, default `'start'`) centers the heading title and description. `--k-separator-heading-font-size` (0.9375rem) sizes the heading, `--k-separator-heading-color` (default `--k-text`) colors it, and `--k-separator-label-font-size` (0.75rem) sizes the small label of `variant="label"`, with or without lines.
 - `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).
@@ -646,6 +649,7 @@ Accessibility related props and defaults:
 - `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.
+- `BadgeCell` takes `variant` (`BadgeVariant`, `'soft' | 'solid' | 'outline'`) in `cellRendererParams`: set, the cell renders a `KBadge` with that variant and the resolved tone (`size`, `BadgeSize`, default `'sm'`); unset keeps the compact grid pill. `badgeClass` (`string | ((value, data) => string | undefined)`) adds host classes to the badge, to set the per instance badge tokens (`--k-badge-background`, `--k-badge-color`, `--k-badge-border-color`, which the grid pill also reads) for values outside `Tone`. `BadgeCellParams<T>` types the row of `data`.
 - `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/forms/Calendar.vue

@@ -66,6 +66,7 @@
   'is-today': day.iso === today,
   'is-selected': day.selected,
   'is-unavailable': day.unavailable,
+  'is-out-of-range': day.outOfRange,
   'is-range-start': day.rangeStart,
   'is-range-end': day.rangeEnd,
   'is-in-range': day.inRange,
@@ -90,6 +91,7 @@
                         :text="day.text"
                         :selected="day.selected"
                         :unavailable="day.unavailable"
+                        :out-of-range="day.outOfRange"
                         :in-month="day.inMonth"
                      >
                         {{ day.number }}
@@ -185,10 +187,11 @@ const previewEnd = computed(() => {
   if (!props.range || !start || end) return null;
   return hoverDate.value ?? null;
 });
+function isOutOfRange(iso) {
+  return Boolean(props.min && iso < props.min || props.max && iso > props.max);
+}
 function isUnavailable(iso) {
-  if (props.min && iso < props.min) return true;
-  if (props.max && iso > props.max) return true;
-  return Boolean(props.isDateDisabled?.(iso));
+  return isOutOfRange(iso) || Boolean(props.isDateDisabled?.(iso));
 }
 function dayLabel(iso, start, end) {
   const label = formatIso(iso, resolvedLocale.value, {
@@ -211,6 +214,7 @@ const weeks = computed(() => {
   const [previewFrom, previewTo] = start && preview ? preview < start ? [preview, start] : [start, preview] : [null, null];
   const days = monthGrid(firstOfMonth(focusedDate.value), weekStart.value).map((iso) => {
     const inMonth = monthKey(iso) === currentMonth;
+    const outOfRange = isOutOfRange(iso);
     const selected = Boolean(
       start && (props.range ? iso === start || iso === end : iso === start)
     );
@@ -220,7 +224,8 @@ const weeks = computed(() => {
       number: Number(iso.slice(8)),
       text: props.dayText?.(iso),
       label: dayLabel(iso, start, end),
-      unavailable: isUnavailable(iso),
+      outOfRange,
+      unavailable: outOfRange || Boolean(props.isDateDisabled?.(iso)),
       selected: selected || Boolean(props.range && start && end && iso > start && iso < end),
       rangeStart: Boolean(props.range && start && end && iso === start && start !== end),
       rangeEnd: Boolean(props.range && start && end && iso === end && start !== end),

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

@@ -5,6 +5,7 @@ declare var __VLS_25: {
     text: string | undefined;
     selected: boolean;
     unavailable: boolean;
+    outOfRange: boolean;
     inMonth: boolean;
 }, __VLS_27: {};
 type __VLS_Slots = {} & {

package/dist/components/forms/CheckboxGroup.vue

@@ -9,6 +9,7 @@
       class="k-choice-group k-checkbox-group"
       :class="[
   `k-choice-group-${orientation}`,
+  `k-checkbox-group-${variant}`,
   {
     'is-invalid': control.invalid.value,
     'is-disabled': control.disabled.value,
@@ -48,6 +49,7 @@ const props = defineProps({
   label: { type: String, required: false },
   legend: { type: String, required: false },
   orientation: { type: String, required: false, default: "vertical" },
+  variant: { type: String, required: false, default: "default" },
   columns: { type: Number, required: false },
   size: { type: String, required: false, default: "md" },
   name: { type: String, required: false },

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

@@ -1,11 +1,12 @@
 import type { FieldSize } from '../core/types';
-import type { ChoiceOption, ChoiceOrientation, ChoiceValue } from './types';
+import type { CheckboxGroupVariant, ChoiceOption, ChoiceOrientation, ChoiceValue } from './types';
 declare const __VLS_export: <T extends ChoiceValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         options?: ChoiceOption<T>[];
         label?: string;
         legend?: string;
         orientation?: ChoiceOrientation;
+        variant?: CheckboxGroupVariant;
         columns?: number;
         size?: FieldSize;
         name?: string;

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

@@ -58,6 +58,7 @@ export type FileInputDirectory = boolean | 'drop';
 export type FileInputAcceptMode = 'filter' | 'hint';
 export type PinInputMode = 'numeric' | 'alphanumeric' | 'alphabetic';
 export type RadioGroupVariant = 'default' | 'card';
+export type CheckboxGroupVariant = 'default' | 'filled';
 export type SliderBubble = boolean | 'always';
 export type ColorSwatch = string | {
     value: string;

package/dist/components/layout/Separator.vue

@@ -3,7 +3,12 @@
       class="k-separator"
       :class="[
   `k-separator-${orientation}`,
-  { 'k-separator-heading': isHeading, 'has-label': hasContent, 'no-lines': !lines }
+  {
+    'k-separator-heading': isHeading,
+    'k-separator-center': isHeading && align === 'center',
+    'has-label': hasContent,
+    'no-lines': !lines
+  }
 ]"
       :role="plain ? 'none' : 'separator'"
       :aria-orientation="!plain && orientation === 'vertical' ? 'vertical' : void 0"
@@ -36,6 +41,7 @@ const props = defineProps({
   orientation: { type: String, required: false, default: "horizontal" },
   variant: { type: String, required: false, default: "label" },
   lines: { type: Boolean, required: false, default: true },
+  align: { type: String, required: false, default: "start" },
   level: { type: Number, required: false, default: 3 },
   label: { type: String, required: false },
   description: { type: String, required: false },

package/dist/components/layout/Separator.vue.d.ts

@@ -1,4 +1,4 @@
-import type { HeadingLevel, SeparatorVariant } from './types';
+import type { HeadingLevel, SeparatorAlign, SeparatorVariant } from './types';
 declare var __VLS_13: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_13) => any;
@@ -11,6 +11,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     orientation?: "horizontal" | "vertical";
     variant?: SeparatorVariant;
     lines?: boolean;
+    align?: SeparatorAlign;
     level?: HeadingLevel;
     label?: string;
     description?: string;
@@ -211,6 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     orientation?: "horizontal" | "vertical";
     variant?: SeparatorVariant;
     lines?: boolean;
+    align?: SeparatorAlign;
     level?: HeadingLevel;
     label?: string;
     description?: string;
@@ -410,6 +412,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
     variant: SeparatorVariant;
+    align: SeparatorAlign;
     level: HeadingLevel;
     lines: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -46,6 +46,7 @@ export type AccordionVariant = 'separated' | 'plain' | 'card' | 'outline';
 export type AccordionContentVariant = 'text' | 'neutral';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type SeparatorVariant = 'label' | 'heading';
+export type SeparatorAlign = 'start' | 'center';
 export interface AppShellContext {
     sidebarId: string;
     collapsed: Readonly<{

package/dist/composables/useForm.d.ts

@@ -7,10 +7,11 @@ export interface FieldValidationMessage {
     params?: MessageParams;
 }
 export type FieldValidationResult = string | FieldValidationMessage | undefined | null | boolean;
+export type FieldRequired = boolean | ((values: Record<string, unknown>) => boolean);
 export interface FieldDefinition<T = unknown> {
     initial?: T | (() => T);
     label?: string;
-    required?: boolean;
+    required?: FieldRequired;
     min?: number;
     max?: number;
     minLength?: number;

package/dist/composables/useForm.mjs

@@ -185,6 +185,10 @@ export function useForm(options) {
   async function runValidator() {
     return evaluateValidator();
   }
+  function isFieldRequired(name) {
+    const required = schema.value[name]?.required;
+    return typeof required === "function" ? Boolean(required(target())) : Boolean(required);
+  }
   function evaluateRules(name) {
     const definition = schema.value[name];
     if (!definition) return void 0;
@@ -205,7 +209,7 @@ export function useForm(options) {
       maxLength: definition.maxLength
     };
     if (definition.isEmpty ? definition.isEmpty(value) : isEmptyValue(value)) {
-      if (definition.required) return fieldMessages.required(context);
+      if (isFieldRequired(name)) return fieldMessages.required(context);
     } else {
       if (typeof value === "number") {
         if (definition.min !== void 0 && value < definition.min)
@@ -436,6 +440,13 @@ export function useForm(options) {
     },
     { deep: 2 }
   );
+  watch(
+    () => names.value.map((name) => isFieldRequired(name)),
+    (next, previous) => {
+      if (submitCount.value > 0 && next.some((required, index) => required !== previous[index]))
+        void validate();
+    }
+  );
   watch(
     () => toValue(options.validator),
     () => {
@@ -491,7 +502,7 @@ export function useForm(options) {
     setErrors,
     clearErrors,
     touch,
-    isRequired: (name) => Boolean(schema.value[name]?.required),
+    isRequired: isFieldRequired,
     reset,
     submit
   };

package/dist/grid/cells/BadgeCell.vue

@@ -1,12 +1,18 @@
 <template>
-   <span v-if="text" class="k-data-grid-badge" :class="`k-data-grid-badge-${tone}`">{{
-      text
-   }}</span>
+   <template v-if="text">
+      <Badge v-if="params.variant" :class="badgeClass" :tone :variant="params.variant" :size>{{
+         text
+      }}</Badge>
+      <span v-else class="k-data-grid-badge" :class="[`k-data-grid-badge-${tone}`, badgeClass]">{{
+         text
+      }}</span>
+   </template>
    <EmptyCell v-else :context="cellContext" />
 </template>
 
 <script setup>
 import { computed } from "vue";
+import Badge from "../../components/data/Badge.vue";
 import EmptyCell from "./EmptyCell.vue";
 const props = defineProps({
   params: { type: Object, required: true }
@@ -19,5 +25,10 @@ const text = computed(() => key.value ? props.params.labels?.[key.value] ?? key.
 const tone = computed(
   () => props.params.tones?.[key.value] ?? props.params.defaultTone ?? "neutral"
 );
+const size = computed(() => props.params.size ?? "sm");
+const badgeClass = computed(() => {
+  const source = props.params.badgeClass;
+  return typeof source === "function" ? source(props.params.value, props.params.data) : source;
+});
 const cellContext = computed(() => props.params.context);
 </script>

package/dist/grid/cells/BadgeCell.vue.d.ts

@@ -1,6 +1,13 @@
 import type { BadgeCellParams, GridCellContext } from '../types';
 declare const __VLS_export: import("vue").DefineComponent<{
-    params: import("ag-grid-community").ICellRendererParams<any, any, any> & BadgeCellParams;
+    params: import("ag-grid-community").ICellRendererParams<any, any, any> & BadgeCellParams<unknown>;
+    label?: string | number;
+    tone?: import("../../index.ts").Tone;
+    variant?: import("../../index.ts").BadgeVariant;
+    size?: import("../../index.ts").BadgeSize;
+    dot?: boolean;
+    pulse?: boolean;
+    icon?: import("../../index.ts").IconName;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -193,15 +200,22 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
-    context?: GridCellContext;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    context?: GridCellContext;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    params: import("ag-grid-community").ICellRendererParams<any, any, any> & BadgeCellParams;
+    params: import("ag-grid-community").ICellRendererParams<any, any, any> & BadgeCellParams<unknown>;
+    label?: string | number;
+    tone?: import("../../index.ts").Tone;
+    variant?: import("../../index.ts").BadgeVariant;
+    size?: import("../../index.ts").BadgeSize;
+    dot?: boolean;
+    pulse?: boolean;
+    icon?: import("../../index.ts").IconName;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -394,13 +408,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
-    context?: GridCellContext;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    context?: GridCellContext;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/grid/data-grid.css

@@ -156,8 +156,9 @@
    font-size: 0.75rem;
    font-weight: var(--k-font-weight-medium, 500);
    line-height: 1.2;
-   color: var(--k-badge-tone);
-   background: color-mix(in oklab, var(--k-badge-tone) 12%, transparent);
+   color: var(--k-badge-color, var(--k-badge-tone));
+   background: var(--k-badge-background, color-mix(in oklab, var(--k-badge-tone) 12%, transparent));
+   box-shadow: inset 0 0 0 1px var(--k-badge-border-color, transparent);
    border-radius: var(--k-radius-full);
    white-space: nowrap;
 }

package/dist/grid/types.d.ts

@@ -1,5 +1,6 @@
 import type { ColDef, GridApi, ICellRendererParams } from 'ag-grid-community';
 import type { Tone } from '../components/core/types';
+import type { BadgeSize, BadgeVariant } from '../components/data/types';
 import type { KMessages } from '../locale/types';
 export type GridDensity = 'compact' | 'normal' | 'comfortable';
 export type GridSelection = boolean | 'single' | 'multiple';
@@ -41,10 +42,13 @@ export interface DateCellParams {
     relative?: boolean | Intl.RelativeTimeFormatOptions;
     relativeWithin?: number;
 }
-export interface BadgeCellParams {
+export interface BadgeCellParams<T = unknown> {
     tones?: Record<string, Tone>;
     labels?: Record<string, string>;
     defaultTone?: Tone;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    badgeClass?: string | ((value: unknown, data: T | undefined) => string | undefined);
 }
 export type ImageCellFit = 'cover' | 'contain';
 export interface ImageCellParams<T = unknown> {

package/dist/styles/forced-colors.css

@@ -192,6 +192,10 @@
       background: none;
    }
 
+   .k-checkbox-group-filled > .k-choice-group-items {
+      border: 1px solid CanvasText;
+   }
+
    :is(.k-btn-solid, .k-btn-soft, .k-btn-subtle, .k-btn-ghost, .k-badge) {
       border: 1px solid ButtonText;
    }

package/dist/styles/forms/calendar.css

@@ -174,6 +174,19 @@
    opacity: var(--k-calendar-unavailable-opacity, 0.6);
 }
 
+.k-calendar-day.is-out-of-range .k-calendar-day-number,
+.k-calendar-day.is-out-of-range:hover .k-calendar-day-number {
+   color: var(
+      --k-calendar-out-of-range-color,
+      var(--k-calendar-unavailable-color, var(--k-text-dimmed))
+   );
+   text-decoration: var(
+      --k-calendar-out-of-range-decoration,
+      var(--k-calendar-unavailable-decoration, line-through)
+   );
+   opacity: var(--k-calendar-out-of-range-opacity, var(--k-calendar-unavailable-opacity, 0.6));
+}
+
 .k-calendar.is-disabled {
    opacity: 0.6;
    pointer-events: none;

package/dist/styles/forms/choice.css

@@ -31,6 +31,13 @@
    gap: 0.625rem 1.25rem;
 }
 
+.k-checkbox-group-filled > .k-choice-group-items {
+   padding: var(--k-checkbox-group-padding, 0.75rem);
+   border: var(--k-checkbox-group-border, 0 solid transparent);
+   border-radius: var(--k-checkbox-group-radius, var(--k-radius-md));
+   background: var(--k-checkbox-group-background, var(--k-subtle));
+}
+
 .k-radio-group-card > .k-choice-group-items {
    gap: 0.5rem;
 }

package/dist/styles/layout/separator.css

@@ -31,7 +31,7 @@
 }
 
 .k-separator-label {
-   font-size: 0.75rem;
+   font-size: var(--k-separator-label-font-size, 0.75rem);
    font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
    white-space: nowrap;
@@ -96,7 +96,7 @@
    font-size: var(--k-separator-heading-font-size, 0.9375rem);
    font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.3;
-   color: var(--k-text);
+   color: var(--k-separator-heading-color, var(--k-text));
    white-space: normal;
 }
 
@@ -105,3 +105,12 @@
    font-size: 0.8125rem;
    line-height: 1.4;
 }
+
+.k-separator-heading.k-separator-center.has-label {
+   justify-content: center;
+}
+
+.k-separator-heading.k-separator-center .k-separator-text {
+   align-items: center;
+   text-align: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/443-components-vue",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Compact, scoped dashboard components for Vue and Nuxt",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",