nuxt-ui-tools 1.2.0 → 1.3.0

package/dist/runtime/dashboard/utils/format.js

@@ -0,0 +1,66 @@
+const formatsByLocale = /* @__PURE__ */ new Map();
+const numberFormats = /* @__PURE__ */ new Map();
+const monthFormats = /* @__PURE__ */ new Map();
+export function normalizeDashboardSpaces(text) {
+  return text.replaceAll("\u202F", "\xA0");
+}
+export function resolveDashboardNumberFormat(locale, options) {
+  const resolvedOptions = withCurrencyShorthand(options);
+  const key = `${locale}|${JSON.stringify(resolvedOptions)}`;
+  let format = numberFormats.get(key);
+  if (!format) {
+    format = new Intl.NumberFormat(locale, resolvedOptions);
+    numberFormats.set(key, format);
+  }
+  const resolved = format;
+  return (value) => normalizeDashboardSpaces(resolved.format(value));
+}
+function withCurrencyShorthand(options) {
+  if (options.currency === void 0 || options.style !== void 0) return options;
+  const digits = options.minimumFractionDigits === void 0 && options.maximumFractionDigits === void 0 ? { maximumFractionDigits: 0 } : {};
+  return { ...digits, ...options, style: "currency" };
+}
+export function resolveDashboardFormats(locale) {
+  const cached = formatsByLocale.get(locale);
+  if (cached) return cached;
+  const plain = resolveDashboardNumberFormat(locale, { maximumFractionDigits: 1 });
+  const compact = resolveDashboardNumberFormat(locale, {
+    maximumFractionDigits: 1,
+    notation: "compact"
+  });
+  const percent = resolveDashboardNumberFormat(locale, {
+    maximumFractionDigits: 1,
+    style: "percent"
+  });
+  const delta = resolveDashboardNumberFormat(locale, {
+    maximumFractionDigits: 1,
+    signDisplay: "exceptZero",
+    style: "percent"
+  });
+  const formats = {
+    compact,
+    decimal: plain,
+    delta: (value) => delta(value / 100),
+    integer: resolveDashboardNumberFormat(locale, { maximumFractionDigits: 0 }),
+    number: (value) => Math.abs(value) >= 1e4 ? compact(value) : plain(value),
+    percent: (value) => percent(value / 100),
+    ratio: percent,
+    signed: resolveDashboardNumberFormat(locale, {
+      maximumFractionDigits: 1,
+      signDisplay: "exceptZero"
+    })
+  };
+  formatsByLocale.set(locale, formats);
+  return formats;
+}
+export function formatDashboardMonth(locale, value, width = "short") {
+  const key = `${locale}|${width}`;
+  let format = monthFormats.get(key);
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, { month: width });
+    monthFormats.set(key, format);
+  }
+  const date = typeof value === "number" ? new Date(2e3, value - 1, 1) : value;
+  const text = format.format(date);
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}

package/dist/runtime/dashboard/utils/grid.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Flex item style of one grid cell. Dashboard grids are wrapping flex rows: a cell's basis is the
+ * width its `size` spans over the grid's columns (the same widths a CSS grid would give), so rows
+ * break where the column count says. When `fill` is on, a row that is not full (a block hidden
+ * because its source is disabled, or a short last row) shares the free width between its cells in
+ * proportion to their span, so no gap is left.
+ *
+ * `span` is the resolved column span, `null` for a full-row cell.
+ */
+export declare function resolveDashboardCellStyle(params: {
+    span: number | null;
+    columns: number;
+    gap: string;
+    fill: boolean;
+}): string;
+/** Parses a resolved responsive token (`"8"`) into a positive integer, `null` when unset. */
+export declare function parseDashboardSpan(value: number | string | null | undefined): number | null;

package/dist/runtime/dashboard/utils/grid.js

@@ -0,0 +1,14 @@
+import { isNumber } from "../../shared/utils/predicate.js";
+export function resolveDashboardCellStyle(params) {
+  const columns = Math.max(1, Math.round(params.columns));
+  const span = params.span === null || !Number.isFinite(params.span) ? columns : Math.min(columns, Math.max(1, Math.round(params.span)));
+  if (span >= columns) return "flex: 1 1 100%; min-width: 0";
+  const { gap } = params;
+  const basis = `calc((100% - ${columns - 1} * ${gap}) / ${columns} * ${span} + ${span - 1} * ${gap} - 0.02px)`;
+  return `flex: ${params.fill ? span : 0} 1 ${basis}; min-width: 0`;
+}
+export function parseDashboardSpan(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  const parsed = isNumber(value) ? value : Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}

package/dist/runtime/dashboard/utils/options.d.ts

@@ -1,5 +1,7 @@
 import type { DashboardOption } from '../types/index.js';
-/** Normalizes a single or multiple param value to its string keys, in value order. */
+/** Normalizes a single or multiple filter value to its string keys, in value order. */
 export declare function resolveDashboardOptionValues(value: unknown): string[];
 /** Unique options by value, keeping the first occurrence. */
 export declare function mergeDashboardOptions(...lists: readonly (readonly DashboardOption[])[]): DashboardOption[];
+/** The label contains the search term, ignoring case and diacritics. */
+export declare function matchesDashboardSearch(label: string, term: string): boolean;

package/dist/runtime/dashboard/utils/options.js

@@ -16,3 +16,9 @@ export function mergeDashboardOptions(...lists) {
   }
   return merged;
 }
+function normalizeDashboardSearch(value) {
+  return value.normalize("NFD").replaceAll(/[̀-ͯ]/gu, "").toLowerCase().trim();
+}
+export function matchesDashboardSearch(label, term) {
+  return normalizeDashboardSearch(label).includes(normalizeDashboardSearch(term));
+}

package/dist/runtime/dashboard/utils/remote.d.ts

@@ -0,0 +1,7 @@
+import type { QueryFunctionContext, QueryKey } from '@tanstack/vue-query';
+import type { DashboardRemoteResult } from '../types/index.js';
+/**
+ * Settles what a remote option source returned: awaits a promise, or runs a query definition's
+ * `queryFn` under the definition's own key (the page is already cached by the caller's query).
+ */
+export declare function runDashboardRemoteResult<TResult>(result: DashboardRemoteResult<TResult>, context: QueryFunctionContext<QueryKey, never>): Promise<TResult>;

package/dist/runtime/dashboard/utils/remote.js

@@ -0,0 +1,14 @@
+export async function runDashboardRemoteResult(result, context) {
+  if (!("queryKey" in result)) return result;
+  if (!result.queryFn) {
+    throw new Error(
+      "[dashboard] Remote option sources returning a query definition need a queryFn."
+    );
+  }
+  return result.queryFn({
+    ...context,
+    direction: "forward",
+    pageParam: null,
+    queryKey: result.queryKey
+  });
+}

package/dist/runtime/dashboard/utils/resource.d.ts

@@ -1,16 +1,25 @@
 import type { ShallowRef } from 'vue';
 import type { useDashboardResource } from '../composables/use-dashboard-resource.js';
 import type { DashboardSourceLike, DashboardStage } from '../types/index.js';
+import type { DashboardReadTracker } from './tracker.js';
 export type DashboardResourceSlot = ShallowRef<ReturnType<typeof useDashboardResource> | null>;
+type DashboardResourceFacade = DashboardSourceLike & {
+    kind: 'query';
+    stage: DashboardStage;
+    active: boolean;
+    filters: object;
+    controls: object;
+};
 /**
  * Public resource object returned by `stage.query(...)`. It exists before its key is known (keys
  * come from the object the `queries` builder returns), so it reads the resource runtime through a
- * slot. Reads before instantiation track the slot, which keeps dependent gates reactive.
+ * slot. Reads before instantiation track the slot, which keeps dependent gates reactive, and every
+ * `data` read is recorded by the tracker, so `requires` and `derive` know what they depend on.
  */
-export declare function createDashboardResourceFacade(stage: DashboardStage, slot: DashboardResourceSlot, defaultValue: unknown): DashboardSourceLike & {
-    kind: 'query';
+export declare function createDashboardResourceFacade(params: {
     stage: DashboardStage;
-    active: boolean;
-    params: object;
-    options: object;
-};
+    slot: DashboardResourceSlot;
+    defaultValue: unknown;
+    tracker: DashboardReadTracker;
+}): DashboardResourceFacade;
+export {};

package/dist/runtime/dashboard/utils/resource.js

@@ -1,7 +1,8 @@
 import { markRaw } from "vue";
 const emptyFacade = markRaw({});
-export function createDashboardResourceFacade(stage, slot, defaultValue) {
-  return markRaw({
+export function createDashboardResourceFacade(params) {
+  const { slot, stage, tracker } = params;
+  const facade = markRaw({
     activate() {
       slot.value?.activate();
     },
@@ -9,20 +10,24 @@ export function createDashboardResourceFacade(stage, slot, defaultValue) {
       return slot.value?.active.value ?? false;
     },
     get data() {
-      return slot.value ? slot.value.data.value : defaultValue;
+      tracker.record(facade);
+      return slot.value ? slot.value.data.value : params.defaultValue;
     },
     get error() {
-      return slot.value?.error.value ?? void 0;
+      return slot.value?.error.value;
+    },
+    get controls() {
+      return slot.value?.filters.controls ?? emptyFacade;
+    },
+    get filters() {
+      return slot.value?.filters.values ?? emptyFacade;
     },
     get id() {
       return slot.value?.id ?? "";
     },
     kind: "query",
-    get options() {
-      return slot.value?.widget.options ?? emptyFacade;
-    },
-    get params() {
-      return slot.value?.widget.values ?? emptyFacade;
+    get fetching() {
+      return slot.value?.fetching.value ?? false;
     },
     refresh: () => slot.value?.refresh() ?? Promise.resolve(),
     get refreshing() {
@@ -36,4 +41,5 @@ export function createDashboardResourceFacade(stage, slot, defaultValue) {
       return slot.value?.updatedAt.value;
     }
   });
+  return facade;
 }

package/dist/runtime/dashboard/utils/schema.d.ts

@@ -1,9 +1,14 @@
-import type { DashboardSchemaLike } from '../types/index.js';
-import type { DashboardRuntimeSchema } from '../types/runtime.js';
+import type { DashboardFilterBuilder, DashboardFilterLike, DashboardSchemaLike } from '../types/index.js';
+import type { DashboardRuntimeFiltersInput, DashboardRuntimeSchema } from '../types/runtime.js';
 /**
  * Erases the schema generics once so the runtime can invoke every builder with the contexts it
- * creates. Views are resolved here (their builder is an identity function at runtime).
+ * creates. Views keep the object they were declared with.
  */
 export declare function resolveDashboardRuntimeSchema(schema: DashboardSchemaLike): DashboardRuntimeSchema;
+/** Runs a scope's `filters` callback with the `f` builder. */
+export declare function resolveDashboardFilters(params: {
+    input: DashboardRuntimeFiltersInput | undefined;
+    builder: DashboardFilterBuilder;
+}): Record<string, DashboardFilterLike>;
 /** Dev guard mirroring the compile-time key checks, for schemas assembled without inference. */
 export declare function assertDashboardMemberKey(key: string, taken: ReadonlySet<string>, scope: string): void;

package/dist/runtime/dashboard/utils/schema.js

@@ -1,9 +1,11 @@
 const reservedKeys = /* @__PURE__ */ new Set([
   "autoRefresh",
-  "options",
-  "params",
+  "controls",
+  "filtered",
+  "filters",
   "refresh",
   "refreshing",
+  "resetFilters",
   "schema",
   "state",
   "updatedAt",
@@ -11,19 +13,22 @@ const reservedKeys = /* @__PURE__ */ new Set([
 ]);
 export function resolveDashboardRuntimeSchema(schema) {
   const input = schema;
-  const views = Object.entries(input.views?.((view) => view) ?? {});
+  const views = Object.entries(input.views ?? {});
   return {
     autoRefresh: input.autoRefresh,
     defaultView: input.defaultView ?? views[0]?.[0],
     derive: input.derive,
+    filters: input.filters,
     key: input.key,
     label: input.label,
-    params: input.params,
     queries: input.queries,
     urlPrefix: input.urlPrefix,
     views
   };
 }
+export function resolveDashboardFilters(params) {
+  return params.input?.(params.builder) ?? {};
+}
 export function assertDashboardMemberKey(key, taken, scope) {
   if (reservedKeys.has(key) || taken.has(key)) {
     throw new Error(`[dashboard] "${key}" in ${scope} is reserved or already used.`);

package/dist/runtime/dashboard/utils/state.d.ts

@@ -1,28 +1,33 @@
-import type { DashboardResourceState } from '../types/index.js';
+import type { DashboardCondition, DashboardResourceState } from '../types/index.js';
 /**
  * Combines the states of several sources the way a dependent value experiences them: any error
  * wins, then any pending source. Idle sources were not requested (gated by `requires`, or a
  * deferred query nobody activated), so they do not hold the value back unless all are idle.
+ * Disabled sources are not part of the dashboard: they are left out, and only when every source is
+ * disabled is the combination disabled too.
  */
 export declare function combineDashboardStates(states: readonly DashboardResourceState[]): DashboardResourceState;
+/** Whether an `enabled` condition holds. No condition always holds. */
+export declare function resolveDashboardCondition(condition: DashboardCondition | undefined): boolean;
 /** Oldest defined timestamp of a set of sources: they are all at least this fresh. */
 export declare function resolveDashboardUpdatedAt(values: readonly (number | undefined)[]): number | undefined;
 /** Refreshes sources in parallel and reports every failure at once. */
 export declare function refreshDashboardSources(sources: readonly {
     refresh: () => Promise<void>;
 }[]): Promise<void>;
-/** URL segment of the current view. A root param cannot use it while the dashboard has views. */
+/** URL segment of the current view. No filter can use it while the dashboard has views. */
 export declare const DASHBOARD_VIEW_URL_KEY = "view";
-/** URL segment of the auto-refresh interval. A root param cannot use it. */
+/** URL segment of the auto-refresh interval. No filter can use it. */
 export declare const DASHBOARD_REFRESH_URL_KEY = "refresh";
 /** URL key of the auto-refresh interval: `refresh`, or `<urlPrefix>.refresh`. */
 export declare function resolveDashboardRefreshKey(urlPrefix: string | undefined): string;
 /** Joins the non-empty segments of a URL key with dots. */
 export declare function joinDashboardUrlKey(...segments: readonly (string | undefined)[]): string;
 /**
- * URL key prefix of one scope, named after what it holds: none for the root (`year`), the view
- * key for a view (`consumption.currency`). `urlPrefix` namespaces both when set.
+ * URL key prefix of a dashboard's filters: none (`year`, `currency`), or `urlPrefix` when two
+ * dashboards share a page. Views add no segment: a filter key names the same state in every scope,
+ * so `year` declared by two views keeps its value across tabs.
  */
-export declare function resolveDashboardScopePrefix(urlPrefix: string | undefined, viewKey?: string): string;
+export declare function resolveDashboardScopePrefix(urlPrefix: string | undefined): string;
 /** URL key of the current view: `view`, or `<urlPrefix>.view`. */
 export declare function resolveDashboardViewKey(urlPrefix: string | undefined): string;

package/dist/runtime/dashboard/utils/state.js

@@ -1,9 +1,14 @@
 export function combineDashboardStates(states) {
-  if (states.includes("error")) return "error";
-  if (states.includes("loading")) return "loading";
-  if (states.length > 0 && states.every((state) => state === "idle")) return "idle";
+  const live = states.filter((state) => state !== "disabled");
+  if (live.length === 0) return states.length > 0 ? "disabled" : "ready";
+  if (live.includes("error")) return "error";
+  if (live.includes("loading")) return "loading";
+  if (live.every((state) => state === "idle")) return "idle";
   return "ready";
 }
+export function resolveDashboardCondition(condition) {
+  return condition === void 0 || condition();
+}
 export function resolveDashboardUpdatedAt(values) {
   let oldest;
   for (const value of values) {
@@ -24,8 +29,8 @@ export function resolveDashboardRefreshKey(urlPrefix) {
 export function joinDashboardUrlKey(...segments) {
   return segments.filter(Boolean).join(".");
 }
-export function resolveDashboardScopePrefix(urlPrefix, viewKey) {
-  return joinDashboardUrlKey(urlPrefix, viewKey);
+export function resolveDashboardScopePrefix(urlPrefix) {
+  return joinDashboardUrlKey(urlPrefix);
 }
 export function resolveDashboardViewKey(urlPrefix) {
   return joinDashboardUrlKey(urlPrefix, DASHBOARD_VIEW_URL_KEY);

package/dist/runtime/dashboard/utils/time.d.ts

@@ -13,5 +13,7 @@ export declare function formatDashboardDateTime(time: number, locale: string): s
  * line.
  */
 export declare function formatDashboardDay(time: number, now: number, locale: string): string;
+/** The date of a page header: `Wednesday, September 23, 2026`. Capitalized, since it starts a line. */
+export declare function formatDashboardToday(now: number, locale: string): string;
 /** Local start of the day of a time, used as a stable group key. */
 export declare function startOfDashboardDay(time: number): number;

package/dist/runtime/dashboard/utils/time.js

@@ -19,7 +19,13 @@ function resolveTimeFormats(locale) {
       year: "numeric"
     }),
     full: new Intl.DateTimeFormat(locale, { dateStyle: "long", timeStyle: "short" }),
-    relative: new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" })
+    relative: new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" }),
+    today: new Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "long",
+      weekday: "long",
+      year: "numeric"
+    })
   };
   formatsByLocale.set(locale, formats);
   return formats;
@@ -50,6 +56,10 @@ export function formatDashboardDay(time, now, locale) {
   const text = days < 2 ? formats.relative.format(-days, "day") : (sameYear ? formats.date : formats.dateWithYear).format(time);
   return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
 }
+export function formatDashboardToday(now, locale) {
+  const text = resolveTimeFormats(locale).today.format(now);
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}
 export function startOfDashboardDay(time) {
   const day = new Date(time);
   day.setHours(0, 0, 0, 0);

package/dist/runtime/dashboard/utils/ui.d.ts

@@ -20,7 +20,7 @@ export declare const DASHBOARD_TABLE_CLASSES: {
  * never moves, so its divider stays aligned with the card content; the highlight is a pseudo-element
  * reaching 8px past both edges, behind the content (`isolate` keeps it inside the row).
  */
-export declare const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>button:hover]:before:bg-elevated/60 has-[>button:focus-visible]:before:bg-elevated/60";
+export declare const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>:is(button,a):hover]:before:bg-elevated/60 has-[>:is(button,a):focus-visible]:before:bg-elevated/60";
 /**
  * A row shown as selected (`selected` prop): the same tint as the hover, stronger, and an accent
  * on its start edge, both drawn around the row box.

package/dist/runtime/dashboard/utils/ui.js

@@ -15,7 +15,7 @@ export const DASHBOARD_TABLE_CLASSES = {
   th: "px-2.5 pt-0.5 pb-2 text-xs font-medium whitespace-nowrap text-dimmed first:ps-0 last:pe-0",
   wrapper: "min-w-0 overflow-auto"
 };
-export const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>button:hover]:before:bg-elevated/60 has-[>button:focus-visible]:before:bg-elevated/60";
+export const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>:is(button,a):hover]:before:bg-elevated/60 has-[>:is(button,a):focus-visible]:before:bg-elevated/60";
 export const DASHBOARD_SELECTED_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:bg-elevated after:pointer-events-none after:absolute after:inset-y-2 after:-start-2 after:w-0.5 after:rounded-full after:bg-primary";
 export const DASHBOARD_ROW_BUTTON = "absolute inset-y-0 -inset-x-2 cursor-pointer rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset";
 export const DASHBOARD_TABLE_ROW_BUTTON = "absolute inset-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset";

package/dist/runtime/form/components/root/form.vue

@@ -163,7 +163,7 @@ const viewportClass = computed(
 );
 const footerClass = computed(
   () => mergeFormUiClass(
-    isOverlayShell.value ? "flex shrink-0 items-center justify-between gap-3 border-t border-default bg-default px-[22px] pt-3.5 pb-[18px]" : "flex items-center justify-between gap-3 border-t border-default pt-4",
+    isOverlayShell.value ? "flex shrink-0 items-center justify-between gap-3 border-t border-default bg-default px-[22px] pt-3.5 pb-[18px]" : "flex items-center justify-between gap-3",
     formUi.ui.value.root?.ui?.footer
   )
 );

package/dist/runtime/form/fields/card-selection.d.ts

@@ -0,0 +1 @@
+export declare const CARD_SELECTED_RING = "has-data-[state=checked]:ring-4 has-data-[state=checked]:ring-primary/20";

package/dist/runtime/form/fields/card-selection.js

@@ -0,0 +1 @@
+export const CARD_SELECTED_RING = "has-data-[state=checked]:ring-4 has-data-[state=checked]:ring-primary/20";

package/dist/runtime/form/fields/checkbox-card/component.vue

@@ -6,6 +6,7 @@ import { useFieldControl } from "../../composables/use-field-control";
 import { formOptionKey } from "../../utils/options";
 import { isBoolean, isNumber, isString, isUndefined } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
+import { CARD_SELECTED_RING } from "../card-selection";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -38,7 +39,8 @@ const groupUi = computed(() => ({
   fieldset: mergeFormUiClass(
     controlProps.value.ui?.fieldset,
     fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
-  )
+  ),
+  item: mergeFormUiClass(CARD_SELECTED_RING, controlProps.value.ui?.item)
 }));
 function isOptionValue(value) {
   return isString(value) || isNumber(value) || isBoolean(value);

package/dist/runtime/form/fields/checkbox-group/component.vue

@@ -6,6 +6,7 @@ import { useFieldControl } from "../../composables/use-field-control";
 import { formOptionKey } from "../../utils/options";
 import { isBoolean, isNumber, isString, isUndefined } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
+import { CARD_SELECTED_RING } from "../card-selection";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -38,6 +39,10 @@ const groupUi = computed(() => ({
   fieldset: mergeFormUiClass(
     controlProps.value.ui?.fieldset,
     fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
+  ),
+  item: mergeFormUiClass(
+    fieldProps.value.variant === "card" ? CARD_SELECTED_RING : void 0,
+    controlProps.value.ui?.item
   )
 }));
 function isOptionValue(value) {

package/dist/runtime/form/fields/radio/component.vue

@@ -4,6 +4,8 @@ import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
+import { mergeFormUiClass } from "../../utils/ui";
+import { CARD_SELECTED_RING } from "../card-selection";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -23,6 +25,13 @@ const model = computed({
   set: (value) => form.setValue(props.path, value)
 });
 const items = computed(() => [...options.items.value]);
+const groupUi = computed(() => ({
+  ...controlProps.value.ui,
+  item: mergeFormUiClass(
+    fieldProps.value.variant === "card" ? CARD_SELECTED_RING : void 0,
+    controlProps.value.ui?.item
+  )
+}));
 </script>
 
 <template>
@@ -34,6 +43,7 @@ const items = computed(() => [...options.items.value]);
       label-key="label"
       description-key="description"
       :items="items"
+      :ui="groupUi"
       :variant="fieldProps.variant === 'table' ? 'list' : fieldProps.variant ?? 'list'"
       :orientation="fieldProps.orientation"
       :indicator="fieldProps.indicator"

package/dist/runtime/form/fields/radio-card/component.vue

@@ -6,6 +6,7 @@ import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
+import { CARD_SELECTED_RING } from "../card-selection";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -30,7 +31,8 @@ const groupUi = computed(() => ({
   fieldset: mergeFormUiClass(
     controlProps.value.ui?.fieldset,
     fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
-  )
+  ),
+  item: mergeFormUiClass(CARD_SELECTED_RING, controlProps.value.ui?.item)
 }));
 </script>
 

package/dist/runtime/form/types/options.d.ts

@@ -1,4 +1,4 @@
-import type { RemoteCursorOptionsPage, RemoteOptionsPage, RemoteOptionsPageRequest, RemoteOptionsPagination, RemoteOptionsResult, RemoteOptionsSearch } from '../../shared/types/remote-options.js';
+import type { RemoteOptionsPageRequest, RemoteOptionsPagination, RemoteOptionsResult, RemoteOptionsSearch } from '../../shared/types/remote-options.js';
 import type { FormValue } from './/index.js';
 import type { FormFieldCallback, FormFieldCallbackParams } from './callbacks.js';
 import type { FormQueryOptions } from './context.js';
@@ -68,12 +68,6 @@ export interface FormOptionConfig<TOption, TContext = NonNullable<unknown>, TDep
     /** Disable the field while its option source has no usable data yet. */
     disableOnLoading?: boolean;
 }
-/** @deprecated Use `RemoteOptionsPage` from `#ui-tools/shared`. Kept for public type compatibility. */
-export type FormRemoteOptionsPage<TOption> = RemoteOptionsPage<TOption>;
-/** @deprecated Use `RemoteCursorOptionsPage` from `#ui-tools/shared`. Kept for public type compatibility. */
-export type FormRemoteCursorOptionsPage<TOption> = RemoteCursorOptionsPage<TOption>;
-/** @deprecated Use `RemoteOptionsResult` from `#ui-tools/shared`. Kept for public type compatibility. */
-export type FormRemoteOptionsResult<TOption> = RemoteOptionsResult<TOption>;
 export interface FormRemoteOptionsRequest<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue = FormValue, TOption = FormValue> extends FormFieldCallbackParams<TContext, TDeps, TValue, TOption> {
     /** Current debounced search term. Empty when the menu lists unfiltered options. */
     search: string;
@@ -87,10 +81,6 @@ export interface FormRemoteSelectedRequest<TContext = NonNullable<unknown>, TDep
     values: readonly FormOptionValue[];
 }
 export type FormRemoteSource<TResult> = FormQueryOptions<TResult> | Promise<TResult>;
-/** @deprecated Use `RemoteOptionsPagination` from `#ui-tools/shared`. Kept for public type compatibility. */
-export type FormRemotePagination = RemoteOptionsPagination;
-/** @deprecated Use `RemoteOptionsSearch` from `#ui-tools/shared`. Kept for public type compatibility. */
-export type FormRemoteSearch = RemoteOptionsSearch;
 /**
  * Remote option configuration: server-side search, pagination, and selected-value hydration.
  */

package/dist/runtime/form/utils/focus.js

@@ -24,7 +24,7 @@ export async function focusFormFieldElement(fieldElement) {
   focusableElement.focus({ preventScroll: true });
   fieldElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
   await waitForFocusSettle();
-  return document.activeElement === focusableElement;
+  return focusableElement.ownerDocument.activeElement === focusableElement;
 }
 export async function focusFirstInvalidFormField(errors) {
   for (const error of errors) {

package/dist/runtime/i18n/locales/en.js

@@ -19,6 +19,27 @@ export default defineUiToolsLocale({
         series: "{label} (previous period)",
         year: "Previous year"
       },
+      filters: {
+        all: "All",
+        clear: "Clear {label}",
+        clearSelection: "Clear selection",
+        empty: "No results",
+        label: "Filters",
+        loadError: "Options could not be loaded",
+        loading: "Loading\u2026",
+        more: "{label} +{count}",
+        no: "No",
+        presets: "Presets",
+        reset: "Reset",
+        retry: "Retry",
+        search: "Search\u2026",
+        views: "Views",
+        yes: "Yes"
+      },
+      format: {
+        pointsOne: "{value} pt",
+        pointsOther: "{value} pts"
+      },
       freshness: {
         prefix: "Updated",
         updated: "Updated {time}"
@@ -39,6 +60,14 @@ export default defineUiToolsLocale({
         label: "Refresh",
         off: "Off"
       },
+      page: {
+        loading: "loading\u2026",
+        updated: "updated"
+      },
+      series: {
+        add: "Add",
+        remove: "Remove {label}"
+      },
       rowActions: "Actions for {label}",
       stat: {
         goal: "Goal {value}"