@xleddyl/443-components-vue 0.8.3 → 0.8.5

package/README.md

@@ -110,20 +110,23 @@ Input tokens, declared only on the outermost root so nested roots inherit them:
 
 A few component tokens are unset by default and only exist to be overridden on a root (or any ancestor). Unset, every one keeps the library look. The full list with defaults is in [CONVENTIONS.md](./CONVENTIONS.md#tokens):
 
-| Area     | Tokens                                                                                                                                                                                                                          |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Type     | `--k-font-weight` (400), `--k-font-weight-medium` (500), `--k-font-weight-strong` (600), `--k-font-weight-display` (650)                                                                                                        |
-| Buttons  | `--k-btn-highlight`, `--k-btn-shadow` (`0 0 #0000` for a flat button), `--k-btn-border`, `--k-btn-padding-x`, `--k-btn-font-size`, `--k-btn-icon-size`, `--k-press-scale` (0.97)                                                |
-| Fields   | `--k-field-padding-x`                                                                                                                                                                                                           |
-| Overlays | `--k-modal-radius`, `--k-modal-shadow`, `--k-drawer-radius`, `--k-drawer-shadow`, `--k-popover-radius`, `--k-popover-shadow`, `--k-toast-radius`, `--k-toast-shadow`, `--k-scrim-blur` (3px)                                    |
-| Tooltip  | `--k-tooltip-background`, `--k-tooltip-text`, `--k-tooltip-border`, `--k-tooltip-radius`, `--k-tooltip-shadow`, `--k-tooltip-padding`                                                                                           |
-| Shell    | `--k-sidebar-width` (15rem), `--k-sidebar-rail-width`, `--k-topbar-height` (3rem), `--k-shell-inset`, `--k-shell-padding`, `--k-shell-content`                                                                                  |
-| Switch   | `--k-switch-track-width`, `--k-switch-track-height`, `--k-switch-thumb-size` (md size)                                                                                                                                          |
-| Badge    | `--k-badge-radius`, `--k-badge-font`, `--k-badge-font-size`, `--k-badge-font-weight`, `--k-badge-text-transform`, `--k-badge-letter-spacing`                                                                                    |
-| DataGrid | `--k-grid-header-background`, `--k-grid-header-text`, `--k-grid-header-font`, `--k-grid-header-font-weight`, `--k-grid-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).
+| 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`).
 
 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.
 
@@ -247,6 +250,10 @@ 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.
 
+`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.
@@ -321,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).
+- `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).
@@ -635,13 +642,14 @@ Accessibility related props and defaults:
 - `DataGrid` sort is a model: `v-model:sort` (`{ column, direction } | null`) sets the sorted column from outside (server side sort, a sort restored from the URL) and follows header clicks. Leave it unset for an uncontrolled grid. `sortChange` still fires with `serverSort`.
 - `DataGrid` takes `rowHeight` and `headerHeight` (pixels) for an exact row size on top of `density`, and `headerText: (field, column) => string | undefined` to name every column that has a `field` and no `headerName` (from your i18n).
 - `DataGrid` `filterable` registers the AG Grid text, number and date filters (`registerGridFilterModules()` does it without the prop) and turns `filter` on for every column. `filterChange(model, event)` fires with `api.getFilterModel()` whenever a column filter changes, also when the filters come from `gridOptions` or your own registered modules.
-- `DateCell` takes `relative: true` (or `Intl.RelativeTimeFormatOptions`) in `cellRendererParams` for "3 days ago"; the absolute date stays in the `title`.
+- `DateCell` takes `relative: true` (or `Intl.RelativeTimeFormatOptions`) in `cellRendererParams` for "3 days ago"; the absolute date stays in the `title`. `relativeWithin` (milliseconds, default unset: always relative) shows the absolute date instead once the value is further than that from now, in the past or the future (`relativeWithin: 7 * 86_400_000` keeps "3 days ago" and prints older dates in full).
 - `DataGrid` takes `gridOptions` for any AG Grid option it does not wrap (`rowHeight`, `onCellEditingStopped`, `onFilterChanged`, ...). A prop of `DataGrid` wins only when it is set: `getRowId`, `rowSelection` (when `selectable` is off), `autoSizeStrategy` (also `undefined` to turn it off), `tooltipShowDelay`, `overlayNoRowsTemplate` and `overlayLoadingTemplate` from `gridOptions` are used otherwise; `defaultColDef` and `localeText` are merged over the component defaults, and `context` is merged under the cell context. Handlers from both run.
 - `DataGrid` row ids: `getRowId: (params) => string` (wins), `rowIdKey` (a field of the row), or `gridOptions.getRowId`.
 - `DataGrid` `fill` makes the grid, with its toolbar and footer, fill its parent (a flex or grid item with `flex: 1; min-height: 0`, or `height: 100%` in a block with a height) instead of the fixed `height`. Ignored with `autoHeight`.
 - `DataGrid` `showEdges` and `showJump` reach the footer pager (first and last page buttons, page number input). `loading` also keeps the pager from resetting the page while a server total is unknown.
 - `DataGrid` registers the AG Grid cell editors (text, large text, number, date, checkbox, select, custom and undo/redo) when `editable` is set or when a column or `gridOptions.defaultColDef` has `editable` at mount. `registerGridEditorModules()` from `/grid` does it by hand, before the first grid mounts, for columns that become editable later.
 - `ImageCell` takes `fit` (`'cover'` default, or `'contain'` for logos) and `size` (any CSS length, default `1.75rem`) in `cellRendererParams`. `EmptyCell` (the hidden "Empty" dash) is exported from `/grid` for custom renderers.
+- `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

@@ -1,18 +1,34 @@
 <template>
    <div
       class="k-separator"
-      :class="[`k-separator-${orientation}`, { 'has-label': hasContent }]"
+      :class="[
+  `k-separator-${orientation}`,
+  {
+    '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"
    >
-      <span v-if="hasText" class="k-separator-text">
-         <span v-if="label || $slots.default" class="k-separator-label">
+      <component :is="isHeading ? 'div' : 'span'" v-if="hasText" class="k-separator-text">
+         <component
+            :is="isHeading ? `h${level}` : 'span'"
+            v-if="label || $slots.default"
+            class="k-separator-label"
+         >
             <slot>{{ label }}</slot>
-         </span>
-         <span v-if="description || $slots.description" class="k-separator-description">
+         </component>
+         <component
+            :is="isHeading ? 'p' : 'span'"
+            v-if="description || $slots.description"
+            class="k-separator-description"
+         >
             <slot name="description">{{ description }}</slot>
-         </span>
-      </span>
+         </component>
+      </component>
       <span v-if="$slots.actions" class="k-separator-actions">
          <slot name="actions" />
       </span>
@@ -23,6 +39,10 @@
 import { computed, useSlots } from "vue";
 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 },
   decorative: { type: Boolean, required: false }
@@ -32,5 +52,6 @@ const hasText = computed(
   () => Boolean(props.label || slots.default || props.description || slots.description)
 );
 const hasContent = computed(() => Boolean(hasText.value || slots.actions));
+const isHeading = computed(() => props.variant === "heading" && props.orientation === "horizontal");
 const plain = computed(() => props.decorative || hasContent.value);
 </script>

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

@@ -1,13 +1,18 @@
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+import type { HeadingLevel, SeparatorAlign, SeparatorVariant } from './types';
+declare var __VLS_13: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 } & {
-    description?: (props: typeof __VLS_3) => any;
+    description?: (props: typeof __VLS_21) => any;
 } & {
-    actions?: (props: typeof __VLS_5) => any;
+    actions?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     orientation?: "horizontal" | "vertical";
+    variant?: SeparatorVariant;
+    lines?: boolean;
+    align?: SeparatorAlign;
+    level?: HeadingLevel;
     label?: string;
     description?: string;
     decorative?: boolean;
@@ -205,6 +210,10 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     orientation?: "horizontal" | "vertical";
+    variant?: SeparatorVariant;
+    lines?: boolean;
+    align?: SeparatorAlign;
+    level?: HeadingLevel;
     label?: string;
     description?: string;
     decorative?: boolean;
@@ -402,6 +411,10 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
+    variant: SeparatorVariant;
+    align: SeparatorAlign;
+    level: HeadingLevel;
+    lines: boolean;
 }, {}, {}, {}, 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/layout/types.d.ts

@@ -45,6 +45,8 @@ export interface AccordionItem {
 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/components/overlays/ConfirmDialog.vue.d.ts

@@ -26,6 +26,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -220,7 +221,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
-    flush?: boolean;
     sheet?: boolean;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
@@ -256,6 +256,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -450,7 +451,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
-    flush?: boolean;
     sheet?: boolean;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;

package/dist/components/overlays/ConfirmHost.vue.d.ts

@@ -16,6 +16,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
+    readonly flush?: boolean | undefined;
     readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
@@ -210,7 +211,6 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    readonly flush?: boolean | undefined;
     readonly sheet?: boolean | undefined;
     readonly onClose?: (() => any) | undefined;
     readonly onOpen?: (() => any) | undefined;
@@ -242,6 +242,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
+    readonly flush?: boolean | undefined;
     readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
@@ -436,7 +437,6 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    readonly flush?: boolean | undefined;
     readonly sheet?: boolean | undefined;
     readonly onClose?: (() => any) | undefined;
     readonly onOpen?: (() => any) | undefined;

package/dist/components/templates/SettingsModal.vue.d.ts

@@ -42,6 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -236,7 +237,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     rootClass?: unknown;
@@ -281,6 +281,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -475,7 +476,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     rootClass?: unknown;

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;
@@ -61,7 +62,7 @@ export type FormWarningsFunction<V> = (values: V) => FormWarningsResult | Promis
 export type FormWarnings<V> = StandardSchemaV1 | Readonly<Ref<StandardSchemaV1 | undefined>> | FormWarningsFunction<V>;
 export type FormPath<V> = (keyof V & string) | (string & {});
 export interface UseFormOptions<S extends FormSchema = FormSchema, V extends object = FormValues<S>> {
-    schema?: S;
+    schema?: MaybeRefOrGetter<S>;
     values?: MaybeRefOrGetter<V>;
     validator?: MaybeRefOrGetter<StandardSchemaV1 | undefined>;
     warnings?: FormWarnings<V>;

package/dist/composables/useForm.mjs

@@ -105,8 +105,8 @@ function replaceEntries(target, next, inScope = () => true) {
   }
 }
 export function useForm(options) {
-  const schema = options.schema ?? {};
-  const schemaNames = Object.keys(schema);
+  const schema = computed(() => toValue(options.schema) ?? {});
+  const schemaNames = computed(() => Object.keys(schema.value));
   const external = options.values !== void 0;
   const { t, locale } = useLocale();
   const config = hasInjectionContext() && inject(FORM_CONFIG_KEY, null) || null;
@@ -123,19 +123,21 @@ export function useForm(options) {
   };
   const translateIssues = (issues, kind) => issues.map((issue) => {
     const name = issue.path.map(String).join(".") || void 0;
-    const label = name ? schema[name]?.label : void 0;
+    const label = name ? schema.value[name]?.label : void 0;
     return { ...issue, message: translate(issue.message, { name, label, kind }) };
   });
   const validateOn = options.validateOn ?? "submit";
   const issueKey = options.issueKey ?? defaultIssueKey;
-  const initialValues = () => Object.fromEntries(schemaNames.map((name) => [name, resolveInitial(schema[name])]));
+  const initialValues = () => Object.fromEntries(
+    schemaNames.value.map((name) => [name, resolveInitial(schema.value[name])])
+  );
   const internalValues = external ? void 0 : reactive(initialValues());
   const target = () => external ? toValue(options.values) : internalValues;
   let baseline = cloneValue(target());
   const baselineVersion = ref(0);
   const names = computed(() => {
-    if (!external) return schemaNames;
-    return [.../* @__PURE__ */ new Set([...schemaNames, ...Object.keys(target())])];
+    if (!external) return schemaNames.value;
+    return [.../* @__PURE__ */ new Set([...schemaNames.value, ...Object.keys(target())])];
   });
   const errors = reactive({});
   const warnings = reactive({});
@@ -183,8 +185,12 @@ 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[name];
+    const definition = schema.value[name];
     if (!definition) return void 0;
     const value = readValue(name);
     const fieldMessages = { ...messages.value, ...definition.messages };
@@ -203,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)
@@ -394,6 +400,53 @@ export function useForm(options) {
     },
     { deep: true }
   );
+  function dropErrorsWithin(name) {
+    for (const source of [ruleErrors, manualErrors, issueErrors, touched]) {
+      for (const key of Object.keys(source)) {
+        if (isWithin(key, name)) delete source[key];
+      }
+    }
+  }
+  watch(
+    schemaNames,
+    (next, previous) => {
+      const added = next.filter((name) => !previous.includes(name));
+      const removed = previous.filter((name) => !next.includes(name));
+      if (!added.length && !removed.length) return;
+      if (internalValues) {
+        for (const name of removed) delete internalValues[name];
+        for (const name of added) internalValues[name] = resolveInitial(schema.value[name]);
+      }
+      for (const name of removed) {
+        if (names.value.includes(name)) continue;
+        if (!external) delete baseline[name];
+        snapshots.delete(name);
+        fieldRuns.delete(name);
+        dropErrorsWithin(name);
+      }
+      for (const name of added) {
+        if (!external) baseline[name] = cloneValue(readValue(name));
+        snapshots.set(name, cloneValue(readValue(name)));
+      }
+      baselineVersion.value++;
+      syncErrors();
+    },
+    { flush: "sync" }
+  );
+  watch(
+    schema,
+    () => {
+      if (submitCount.value > 0) void validate();
+    },
+    { 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),
     () => {
@@ -425,7 +478,9 @@ export function useForm(options) {
     });
   }
   return {
-    schema,
+    get schema() {
+      return schema.value;
+    },
     get values() {
       return target();
     },
@@ -447,7 +502,7 @@ export function useForm(options) {
     setErrors,
     clearErrors,
     touch,
-    isRequired: (name) => Boolean(schema[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/cells/DateCell.vue

@@ -3,7 +3,7 @@
       v-if="formatted"
       class="k-data-grid-date k-tabular"
       :datetime="iso"
-      :title="params.relative ? absolute : void 0"
+      :title="isRelative ? absolute : void 0"
       >{{ formatted }}</time
    >
    <EmptyCell v-else :context="cellContext" />
@@ -30,9 +30,14 @@ const absolute = computed(
     date.value
   ) : ""
 );
+const isRelative = computed(() => {
+  if (!date.value || !props.params.relative) return false;
+  const within = props.params.relativeWithin;
+  return within === void 0 || Math.abs(Date.now() - date.value.getTime()) <= within;
+});
 const formatted = computed(() => {
   const relative = props.params.relative;
-  if (!date.value || !relative) return absolute.value;
+  if (!date.value || !relative || !isRelative.value) return absolute.value;
   return formatRelativeTime(
     date.value,
     locale.value,

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';
@@ -39,11 +40,15 @@ export interface DateCellParams {
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
     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/internal/overlays/OverlayView.vue.d.ts

@@ -11,6 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -207,7 +208,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     side?: import("../../index.ts").DrawerSide;
@@ -234,6 +234,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -430,7 +431,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     side?: import("../../index.ts").DrawerSide;

package/dist/styles/core/button.css

@@ -141,22 +141,22 @@
 }
 
 .k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-btn-tone) 90%, black);
+   background: var(--k-btn-hover-background, color-mix(in oklab, var(--k-btn-tone) 90%, black));
    box-shadow:
       inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.22)),
       var(--k-btn-shadow, 0 2px 8px -2px color-mix(in oklab, var(--k-btn-tone) 60%, transparent));
 }
 
 .k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-btn-tone) 82%, black);
+   background: var(--k-btn-active-background, color-mix(in oklab, var(--k-btn-tone) 82%, black));
 }
 
 .k-btn-accent.k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
-   background: var(--k-accent-hover);
+   background: var(--k-btn-hover-background, var(--k-accent-hover));
 }
 
 .k-btn-accent.k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
-   background: var(--k-accent-press);
+   background: var(--k-btn-active-background, var(--k-accent-press));
 }
 
 .k-btn-neutral.k-btn-solid {
@@ -167,12 +167,18 @@
 }
 
 .k-btn-neutral.k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-text) 86%, var(--k-surface));
+   background: var(
+      --k-btn-hover-background,
+      color-mix(in oklab, var(--k-text) 86%, var(--k-surface))
+   );
    box-shadow: inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.14));
 }
 
 .k-btn-neutral.k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-text) 80%, var(--k-surface));
+   background: var(
+      --k-btn-active-background,
+      color-mix(in oklab, var(--k-text) 80%, var(--k-surface))
+   );
 }
 
 .k-btn-soft {

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

@@ -61,7 +61,7 @@
    place-items: center;
    width: 100%;
    height: 100%;
-   border-radius: var(--k-radius-md);
+   border-radius: var(--k-calendar-day-radius, var(--k-radius-md));
    color: var(--k-text-toned);
    font-variant-numeric: tabular-nums;
    transition:
@@ -134,14 +134,14 @@
 
 .k-calendar-day.is-in-range:first-child::before,
 .k-calendar-day.is-in-preview:first-child::before {
-   border-top-left-radius: var(--k-radius-md);
-   border-bottom-left-radius: var(--k-radius-md);
+   border-top-left-radius: var(--k-calendar-day-radius, var(--k-radius-md));
+   border-bottom-left-radius: var(--k-calendar-day-radius, var(--k-radius-md));
 }
 
 .k-calendar-day.is-in-range:last-child::before,
 .k-calendar-day.is-in-preview:last-child::before {
-   border-top-right-radius: var(--k-radius-md);
-   border-bottom-right-radius: var(--k-radius-md);
+   border-top-right-radius: var(--k-calendar-day-radius, var(--k-radius-md));
+   border-bottom-right-radius: var(--k-calendar-day-radius, var(--k-radius-md));
 }
 
 .k-calendar-day.is-selected .k-calendar-day-number,
@@ -169,9 +169,22 @@
 .k-calendar-day.is-unavailable .k-calendar-day-number,
 .k-calendar-day.is-unavailable:hover .k-calendar-day-number {
    background: transparent;
-   color: var(--k-text-dimmed);
-   text-decoration: line-through;
-   opacity: 0.6;
+   color: var(--k-calendar-unavailable-color, var(--k-text-dimmed));
+   text-decoration: var(--k-calendar-unavailable-decoration, line-through);
+   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 {

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;
@@ -56,3 +56,61 @@
    font-size: 0.75rem;
    color: var(--k-text-muted);
 }
+
+.k-separator.no-lines {
+   background: none;
+}
+
+.k-separator.has-label.no-lines {
+   justify-content: center;
+}
+
+.k-separator.has-label.no-lines::before,
+.k-separator.has-label.no-lines::after,
+.k-separator-heading.has-label::before,
+.k-separator-heading.has-label::after {
+   display: none;
+}
+
+.k-separator-heading.has-label {
+   justify-content: flex-start;
+   padding-top: 0.75rem;
+   border-top: 1px solid var(--k-line);
+}
+
+.k-separator-heading.has-label.no-lines {
+   padding-top: 0;
+   border-top: 0;
+}
+
+.k-separator-heading .k-separator-text {
+   display: flex;
+   flex: 1;
+   align-items: flex-start;
+   gap: 0.25rem;
+   text-align: start;
+}
+
+.k-separator-heading .k-separator-label {
+   margin: 0;
+   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-separator-heading-color, var(--k-text));
+   white-space: normal;
+}
+
+.k-separator-heading .k-separator-description {
+   margin: 0;
+   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/dist/styles/shared.css

@@ -126,7 +126,8 @@
    .k-error-code,
    .k-error-title,
    .k-stat-value,
-   .k-settings-modal-title
+   .k-settings-modal-title,
+   .k-separator-heading .k-separator-label
 ) {
    font-family: var(--k-font-display, var(--k-font-sans));
 }

package/package.json

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