@xleddyl/443-components-vue 0.8.4 → 0.9.0

package/README.md

@@ -100,30 +100,48 @@ Vite 8 minifies CSS with Lightning CSS. Set `build.cssTarget` to browsers that s
 
 ## Theming
 
-Tokens live on `.k-root`, never on `:root`. Override them on a root element: Root props, inline style or host CSS.
+Tokens live on `.k-root`, never on `:root`. Override them on a root element: host CSS, Root props or inline style.
+
+The brand of an app is a custom theme: a class on the outermost root, with the token overrides in host CSS. Keep the brand values in this one place, not in Root props.
 
 ```vue
-<KRoot accent="#ff4d00" font-sans="'Inter', sans-serif" :radius-scale="0.75" theme="dark">
+<KRoot class="theme-acme">...</KRoot>
+```
+
+```css
+.k-root.theme-acme {
+   --k-accent: #ff4d00;
+   --k-accent-contrast: #ffffff;
+   --k-font-sans: 'Inter', sans-serif;
+   --k-radius-scale: 0.75;
+}
+```
+
+Use Root props for values that change at runtime (an accent that the user selects, a preview, a demo):
+
+```vue
+<KRoot :accent="userAccent" theme="dark">
 ```
 
 Input tokens, declared only on the outermost root so nested roots inherit them: `--k-accent`, `--k-accent-contrast`, `--k-font-sans`, `--k-font-mono`, `--k-font-size`, `--k-font-features`, `--k-line-height`, `--k-radius-scale`. Every other token (surfaces, text, lines, accent shades, status colors, radii, shadows, motion) is derived per root, so a nested root with its own `theme` or `accent` re-themes a region. The full list is in [CONVENTIONS.md](./CONVENTIONS.md#tokens).
 
 A few component tokens are unset by default and only exist to be overridden on a root (or any ancestor). Unset, every one keeps the library look. The full list with defaults is in [CONVENTIONS.md](./CONVENTIONS.md#tokens):
 
-| Area      | Tokens                                                                                                                                                                                                                                    |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Type      | `--k-font-weight` (400), `--k-font-weight-medium` (500), `--k-font-weight-strong` (600), `--k-font-weight-display` (650)                                                                                                                  |
-| Buttons   | `--k-btn-highlight`, `--k-btn-shadow` (`0 0 #0000` for a flat button), `--k-btn-border`, `--k-btn-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`).
 
@@ -168,14 +186,10 @@ import '@fontsource-variable/funnel-display'
 import '@fontsource-variable/geist-mono'
 ```
 
-Presets set the input tokens (accent, accent contrast and accent text, fonts, font features, radius scale) and the surface, line and text tokens. Root props, inline style and unlayered host CSS still win, so a custom brand is a few lines:
-
-```vue
-<KRoot accent="#ff4d00" accent-contrast="#ffffff" :radius-scale="0.5" theme="dark">...</KRoot>
-```
+Presets set the input tokens (accent, accent contrast and accent text, fonts, font features, radius scale) and the surface, line and text tokens. Unlayered host CSS, Root props and inline style still win, so a custom theme on top of a preset is a few lines of host CSS (see [Theming](#theming)):
 
 ```css
-.k-root.brand-secret {
+.k-root.theme-acme {
    --k-accent: #ff4d00;
    --k-radius-scale: 0.5;
 }
@@ -183,6 +197,8 @@ Presets set the input tokens (accent, accent contrast and accent text, fonts, fo
 
 Semantic color props are always called `tone` and accept `'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'` (type `Tone`).
 
+Buttons show `icon` before the label and `trailingIcon` after it. Put action icons (`plus`, `trash`, `pencil`) in `icon`. Put direction icons (`arrow-right`, `chevron-right`, `arrow-top-right-on-square`) in `trailingIcon`: `<KButton trailing-icon="arrow-right">Continue</KButton>`.
+
 ## Scoping
 
 - The reset only matches `.k-root` and its descendants, wrapped in `:where()` (zero specificity). Markup outside a root keeps browser defaults.
@@ -251,6 +267,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 +343,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).
@@ -449,7 +467,7 @@ Ready defaults to start a dashboard project: an app frame, an auth frame and pag
 | `breadcrumbs`                                                                      |                                 | Rendered in the desktop topbar. `#topbar` replaces them, `#actions` adds buttons on the right.                                                                                                                                                                                                                                                             |
 | `search`                                                                           | `false`                         | `true` adds a CommandPalette with every navigation item, an array adds your own command groups, an async function `(query, signal) => CommandGroup<T>[]` searches on your server (item `data` reaches `#search-item` typed) (matching navigation items come first unless `searchNavigation` is `false`). `#search` replaces it.                            |
 | `searchProps`                                                                      |                                 | Options for the built-in CommandPalette: `minQueryLength`, `debounce`, `placeholder`, `label`, `emptyText` (a string or `(query) => string`), `minQueryText`, `errorText`, `loadingText`, `resultsText`, `notice`, `recentKey`, footer labels. Slots `#search-item`, `#search-empty`, `#search-group-label` and `#search-after-results` reach the palette. |
-| `themeSwitch`                                                                      | `'sidebar'`                     | `'sidebar'`, `'topbar'` or `false`.                                                                                                                                                                                                                                                                                                                        |
+| `themeSwitch`                                                                      | `false`                         | `'sidebar'`, `'topbar'` or `false`. The default keeps the theme choice only in the Appearance section of the settings modal. With `accountAction="menu"` there is no settings modal, so set `'sidebar'` or `'topbar'`.                                                                                                                                     |
 | `collapsible`, `v-model:collapsed`, `storageKey`                                   | `true`, `'k-sidebar-collapsed'` | Icon rail on desktop. Persisted in a cookie under Nuxt (rendered on the server, no flash) or `localStorage` elsewhere. `false` disables persistence.                                                                                                                                                                                                       |
 | `shortcut`                                                                         | `'mod+b'`                       | Toggles the rail on desktop and the drawer on mobile. `searchShortcut` defaults to `mod+k`.                                                                                                                                                                                                                                                                |
 | `v-model:open`                                                                     | `false`                         | Mobile drawer (below 768px of shell width): scrim, focus moves into the drawer, the content is `inert`, Escape and the scrim close it and focus returns to the burger.                                                                                                                                                                                     |
@@ -586,7 +604,7 @@ export default defineAppConfig({
          ],
          signOutTo: '/logout',
       },
-      dashboard: { variant: 'inset', search: true, themeSwitch: 'sidebar' },
+      dashboard: { variant: 'inset', search: true },
       auth: { variant: 'split', footer: 'Acme Inc.', asideTitle: 'Run the store.' },
    },
 })
@@ -646,6 +664,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/components/templates/DashboardLayout.vue

@@ -189,7 +189,7 @@ const props = defineProps({
   searchPlaceholder: { type: String, required: false },
   searchShortcut: { type: [String, Boolean], required: false, default: "mod+k" },
   searchNavigationLabel: { type: String, required: false },
-  themeSwitch: { type: [String, Boolean], required: false, default: "sidebar" },
+  themeSwitch: { type: [String, Boolean], required: false, default: false },
   collapsible: { type: Boolean, required: false, default: true },
   storageKey: { type: [String, Boolean], required: false, default: "k-sidebar-collapsed" },
   shortcut: { type: [String, Boolean], required: false, default: "mod+b" },

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/app-shell.css

@@ -203,6 +203,49 @@ html.k-root body {
       transform: rotate(180deg);
    }
 
+   @media (hover: hover) {
+      .k-shell.is-collapsed .k-sidebar-header:has(> .k-sidebar-brand:not(:empty)) {
+         position: relative;
+      }
+
+      .k-shell.is-collapsed
+         .k-sidebar-header:has(> .k-sidebar-brand:not(:empty))
+         > .k-sidebar-brand,
+      .k-shell.is-collapsed
+         .k-sidebar-header:has(> .k-sidebar-brand:not(:empty))
+         > .k-sidebar-collapse {
+         transition: opacity var(--k-duration) var(--k-ease);
+      }
+
+      .k-shell.is-collapsed
+         .k-sidebar-header:has(> .k-sidebar-brand:not(:empty))
+         > .k-sidebar-collapse {
+         position: absolute;
+         top: 50%;
+         left: 50%;
+         translate: -50% -50%;
+         opacity: 0;
+      }
+
+      .k-shell.is-collapsed
+         .k-sidebar-header:has(> .k-sidebar-brand:not(:empty)):is(
+            :hover,
+            :has(> .k-sidebar-collapse:focus-visible)
+         )
+         > .k-sidebar-brand {
+         opacity: 0;
+      }
+
+      .k-shell.is-collapsed
+         .k-sidebar-header:has(> .k-sidebar-brand:not(:empty)):is(
+            :hover,
+            :has(> .k-sidebar-collapse:focus-visible)
+         )
+         > .k-sidebar-collapse {
+         opacity: 1;
+      }
+   }
+
    .k-shell.is-collapsed .k-navlink {
       justify-content: center;
       padding-inline: 0;

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/dist/styles/overlays/command.css

@@ -13,7 +13,7 @@
    border: 1px solid var(--k-field-line);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-xs);
-   cursor: text;
+   cursor: pointer;
    transition:
       border-color var(--k-duration) var(--k-ease),
       color var(--k-duration) var(--k-ease),

package/dist/styles/templates/dashboard-layout.css

@@ -55,7 +55,30 @@
 @container k-shell (min-width: 768px) {
    .k-shell.is-collapsed .k-dashboard-search.k-command-trigger {
       justify-content: center;
+      min-width: 0;
+      height: 1.875rem;
       padding: 0;
+      color: var(--k-text-dimmed);
+      background: transparent;
+      border-color: transparent;
+      box-shadow: none;
+      transition:
+         background-color var(--k-duration) var(--k-ease),
+         color var(--k-duration) var(--k-ease),
+         scale var(--k-duration) var(--k-ease);
+   }
+
+   .k-shell.is-collapsed .k-dashboard-search.k-command-trigger:hover {
+      color: var(--k-text-muted);
+      background: var(--k-hover);
+   }
+
+   .k-shell.is-collapsed .k-dashboard-search.k-command-trigger:active {
+      scale: 0.985;
+   }
+
+   .k-shell.is-collapsed .k-dashboard-search.k-command-trigger:focus-visible {
+      box-shadow: var(--k-focus-ring);
    }
 
    .k-shell.is-collapsed .k-dashboard-search .k-command-trigger-text,

package/package.json

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