@persona/design-system 0.8.2 → 0.9.1

package/dist/{types-CoTzVfFl.d.mts → types-BjMJFNYH.d.mts}

@@ -21,4 +21,4 @@ interface AbsoluteDateRange {
 }
 //#endregion
 export { DateFilterPreset as a, RelativeDateFilterValue as c, DATE_FILTER_PRESET_LABELS as i, AbsoluteDateRange as n, DateFilterValue as o, DATE_FILTER_PRESETS as r, PresetRelativeDateFilterValue as s, AbsoluteDateFilterValue as t };
-//# sourceMappingURL=types-CoTzVfFl.d.mts.map
+//# sourceMappingURL=types-BjMJFNYH.d.mts.map

package/dist/{types-CptsgFbu.d.mts → types-CEQWndtF.d.mts}

@@ -1,6 +1,6 @@
-import { n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-BMPLdT4p.mjs";
-import { a as FunctionParamType, s as MethodChainNode } from "./methodChainTypes-BtSMV5OZ.mjs";
-import { t as ChainRoot } from "./chainTypes-dY6jc22J.mjs";
+import { n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-6mcLrVG3.mjs";
+import { a as FunctionParamType, s as MethodChainNode } from "./methodChainTypes-BuwpPC73.mjs";
+import { t as ChainRoot } from "./chainTypes-DT-9j_sG.mjs";
 import { ReactNode } from "react";
 
 //#region components/SmartTextInput/types.d.ts
@@ -80,4 +80,4 @@ type PopoverFooterRenderer = (helpers: {
 type TextStyle = 'none' | 'token' | 'hoverable' | 'hoverableToken' | 'schemaError' | 'syntaxError';
 //#endregion
 export { Mode as a, PopupMode as c, FunctionFormRenderProps as i, TextStyle as l, CustomFunctionDetailRenderProps as n, OpenCodeChainFunctionPanel as o, FunctionAtCursor as r, PopoverFooterRenderer as s, CodeChainFunctionPanelRenderProps as t, ValueType as u };
-//# sourceMappingURL=types-CptsgFbu.d.mts.map
+//# sourceMappingURL=types-CEQWndtF.d.mts.map

package/dist/{types-BfrEduGv.d.mts → types-C_ZEgHNa.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, l as FilterRule, u as FilterRuleValue } from "./types-Rj-C3LGL.mjs";
+import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-DEzlAdZW.mjs";
 import { ReactElement } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/types.d.ts
@@ -44,4 +44,4 @@ interface ValueControlProps {
 }
 //#endregion
 export { ValueControlProps as t };
-//# sourceMappingURL=types-BfrEduGv.d.mts.map
+//# sourceMappingURL=types-C_ZEgHNa.d.mts.map

package/dist/{types-ClbV4wNp.d.mts → types-CgKSEQyB.d.mts}

@@ -33,4 +33,4 @@ interface RouterAdapter {
 }
 //#endregion
 export { To as i, RouterAdapter as n, RouterLinkComponentProps as r, NavigateOptions as t };
-//# sourceMappingURL=types-ClbV4wNp.d.mts.map
+//# sourceMappingURL=types-CgKSEQyB.d.mts.map

package/dist/{types-B1KzKgBp.d.mts → types-CwzwClJx.d.mts}

@@ -24,4 +24,4 @@ interface BaseActiveFilter<TFilter extends BaseFilterConfig = BaseFilterConfig>
 }
 //#endregion
 export { BaseActiveFilter as n, BaseFilterConfig as r, AttributeColumn as t };
-//# sourceMappingURL=types-B1KzKgBp.d.mts.map
+//# sourceMappingURL=types-CwzwClJx.d.mts.map

package/dist/{types-Rj-C3LGL.d.mts → types-DEzlAdZW.d.mts}

@@ -1,4 +1,4 @@
-import { c as RelativeDateFilterValue } from "./types-CoTzVfFl.mjs";
+import { c as RelativeDateFilterValue } from "./types-BjMJFNYH.mjs";
 //#region components/DataTable/TableControls/FiltersV2/types.d.ts
 /**
  * Filter UI v2 — client-side state shape.
@@ -14,7 +14,7 @@ import { c as RelativeDateFilterValue } from "./types-CoTzVfFl.mjs";
  * - The Rules pill owns `compound.groups` (OR-of-AND / DNF).
  */
 /** All available field types we render type-aware controls + operators for. */
-type FilterFieldType = 'string' | 'email' | 'choices' | 'multi_choices' | 'boolean' | 'integer' | 'float' | 'date' | 'array' /** OR-of-AND tag conditions (`FilterTagsCondition[][]`). */ | 'tags_conditions' /** OR-of-AND platform-signal conditions (`SignalsConditionalGroup`). */ | 'signals' /** ISO date range (`DateRangeFilterValue`). */ | 'date_range';
+type FilterFieldType = 'string' | 'email' | 'choices' | 'multi_choices' | 'boolean' | 'integer' | 'float' | 'date' | 'array' /** OR-of-AND tag conditions (`FilterTagsCondition[][]`). */ | 'tags_conditions' /** Platform signals; aggregate unless `condition` is explicitly configured. */ | 'signals' /** ISO date range (`DateRangeFilterValue`). */ | 'date_range';
 /**
  * Per-rule operator vocabulary.
  *
@@ -23,12 +23,8 @@ type FilterFieldType = 'string' | 'email' | 'choices' | 'multi_choices' | 'boole
  * which operators are pickable in the Filter popover: a field's
  * `allowedOperators`, or its type's vocabulary when that list is absent.
  *
- * Numeric range operators (`gt` / `lt`) are deliberately omitted from this
- * union. When native `gt` / `lt` support exists, re-add them to this union,
- * the per-type vocabulary in `operators.ts`, the label map, and the adapter's
- * `normalizeValue` switch.
  */
-type FilterOperator = 'is' | 'is_not' | 'contains' | 'does_not_contain' | 'is_empty' | 'is_not_empty' | 'is_true' | 'is_false' | 'before' | 'after' /** Inclusive range over a `date` field. Its value is a {@link DateRangeFilterValue}. */ | 'between';
+type FilterOperator = 'is' | 'is_not' | 'gt' | 'gte' | 'lt' | 'lte' | `custom:${string}` | 'contains' | 'does_not_contain' | 'is_empty' | 'is_not_empty' | 'is_true' | 'is_false' | 'before' | 'after' /** Inclusive range over a `date` field. Its value is a {@link DateRangeFilterValue}. */ | 'between';
 /** Whether a field is a system/built-in field or a custom field on a parent record type. */
 type FilterFieldSource = 'system' | 'custom';
 /**
@@ -93,9 +89,39 @@ interface FilterField {
    * Optional operator allow-list, for a field whose host can only serialize
    * part of its type's vocabulary. When omitted or empty, the full per-type
    * vocabulary from `operators.ts` applies.
+   *
+   * Also how a numeric (`integer` / `float`) field opts into comparisons:
+   * `['is', ...NUMERIC_COMPARISON_OPERATORS]` (`['is', 'gt', 'lt']`) gives
+   * equal to / greater than / less than filtering with numeric validation.
    */
   allowedOperators?: ReadonlyArray<FilterOperator>;
+  pickerGroup?: string;
+  disabledReason?: string;
+  condition?: {
+    operators: readonly [FilterConditionOperator, ...FilterConditionOperator[]];
+    defaultOperator?: FilterOperator;
+  };
 }
+type FilterConditionOperator = {
+  operator: FilterOperator;
+  label: string;
+  isComplete?: (value: FilterRuleValue) => boolean;
+} & ({
+  valueType: 'string';
+  defaultValue?: string;
+} | {
+  valueType: 'number' | 'integer';
+  defaultValue?: number;
+} | {
+  valueType: 'boolean';
+  defaultValue?: boolean;
+} | {
+  valueType: 'string_array';
+  defaultValue?: ReadonlyArray<string>;
+} | {
+  valueType: 'none';
+  defaultValue?: null;
+});
 /**
  * ISO calendar-date range. Carried by `date_range` fields and by the
  * `between` operator on a `date` field.
@@ -173,5 +199,5 @@ declare const EMPTY_FILTER_STATE: FilterStateV2;
 /** True when no filters are applied — no pills and no compound groups. */
 declare function isEmptyState(state: FilterStateV2): boolean;
 //#endregion
-export { FilterField as a, FilterOperator as c, FilterRuleValueChange as d, FilterSize as f, isEmptyState as h, EMPTY_FILTER_STATE as i, FilterRule as l, TopLevelFilterRule as m, CompoundExpression as n, FilterFieldSource as o, FilterStateV2 as p, DateRangeFilterValue as r, FilterFieldType as s, AndGroup as t, FilterRuleValue as u };
-//# sourceMappingURL=types-Rj-C3LGL.d.mts.map
+export { FilterConditionOperator as a, FilterFieldType as c, FilterRuleValue as d, FilterRuleValueChange as f, isEmptyState as g, TopLevelFilterRule as h, EMPTY_FILTER_STATE as i, FilterOperator as l, FilterStateV2 as m, CompoundExpression as n, FilterField as o, FilterSize as p, DateRangeFilterValue as r, FilterFieldSource as s, AndGroup as t, FilterRule as u };
+//# sourceMappingURL=types-DEzlAdZW.d.mts.map

package/dist/{types-BB5WwerD.d.mts → types-VgGkS4JB.d.mts}

@@ -1,4 +1,4 @@
-import { a as ASTErrorNode, l as ASTMethodChainNode, n as ASTChain, u as ASTNodeType } from "./types-l-arEBLb.mjs";
+import { a as ASTErrorNode, l as ASTMethodChainNode, n as ASTChain, u as ASTNodeType } from "./types-4wnr5R9P.mjs";
 
 //#region components/SmartTextInput/parser/smart-text/types.d.ts
 type ErrorKind = NonNullable<ASTErrorNode['kind']> | 'unclosedHandlebars' | 'emptyHandlebars' | 'invalidHandlebarsContent' | 'interpolationInDataPath';
@@ -69,4 +69,4 @@ declare const isASTContainerNode: (node: {
 }) => node is ASTContainerNode;
 //#endregion
 export { NodeType as a, isMethodChainNode as c, ErrorNode as i, ErrorKind as n, isASTChainNode as o, ErrorMessageByKind as r, isASTContainerNode as s, ASTNode as t };
-//# sourceMappingURL=types-BB5WwerD.d.mts.map
+//# sourceMappingURL=types-VgGkS4JB.d.mts.map

package/dist/types.d.mts

@@ -1,2 +1,2 @@
-import { i as To, n as RouterAdapter, r as RouterLinkComponentProps, t as NavigateOptions } from "./types-ClbV4wNp.mjs";
+import { i as To, n as RouterAdapter, r as RouterLinkComponentProps, t as NavigateOptions } from "./types-CgKSEQyB.mjs";
 export { NavigateOptions, RouterAdapter, RouterLinkComponentProps, To };

package/dist/types2.d.mts

@@ -1,2 +1,2 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-B1KzKgBp.mjs";
+import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-CwzwClJx.mjs";
 export { AttributeColumn, BaseActiveFilter, BaseFilterConfig };

package/dist/types3.d.mts

@@ -1,2 +1,2 @@
-import { a as DateFilterPreset, c as RelativeDateFilterValue, i as DATE_FILTER_PRESET_LABELS, n as AbsoluteDateRange, o as DateFilterValue, r as DATE_FILTER_PRESETS, s as PresetRelativeDateFilterValue, t as AbsoluteDateFilterValue } from "./types-CoTzVfFl.mjs";
+import { a as DateFilterPreset, c as RelativeDateFilterValue, i as DATE_FILTER_PRESET_LABELS, n as AbsoluteDateRange, o as DateFilterValue, r as DATE_FILTER_PRESETS, s as PresetRelativeDateFilterValue, t as AbsoluteDateFilterValue } from "./types-BjMJFNYH.mjs";
 export { AbsoluteDateFilterValue, AbsoluteDateRange, DATE_FILTER_PRESETS, DATE_FILTER_PRESET_LABELS, DateFilterPreset, DateFilterValue, PresetRelativeDateFilterValue, RelativeDateFilterValue };

package/dist/types4.d.mts

@@ -1,2 +1,2 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, h as isEmptyState, i as EMPTY_FILTER_STATE, l as FilterRule, m as TopLevelFilterRule, n as CompoundExpression, o as FilterFieldSource, p as FilterStateV2, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-Rj-C3LGL.mjs";
-export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterRuleValueChange, FilterSize, FilterStateV2, TopLevelFilterRule, isEmptyState };
+import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, f as FilterRuleValueChange, g as isEmptyState, h as TopLevelFilterRule, i as EMPTY_FILTER_STATE, l as FilterOperator, m as FilterStateV2, n as CompoundExpression, o as FilterField, p as FilterSize, r as DateRangeFilterValue, s as FilterFieldSource, t as AndGroup, u as FilterRule } from "./types-DEzlAdZW.mjs";
+export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterConditionOperator, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterRuleValueChange, FilterSize, FilterStateV2, TopLevelFilterRule, isEmptyState };

package/dist/types5.d.mts

@@ -1,2 +1,2 @@
-import { t as ValueControlProps } from "./types-BfrEduGv.mjs";
+import { t as ValueControlProps } from "./types-C_ZEgHNa.mjs";
 export { ValueControlProps };

package/dist/types6.d.mts

@@ -1,2 +1,2 @@
-import { t as PaginationParams } from "./types-CBfgdnuB.mjs";
+import { t as PaginationParams } from "./types-6QeQmbFm.mjs";
 export { PaginationParams };

package/dist/types7.d.mts

@@ -1,2 +1,2 @@
-import { a as Mode, c as PopupMode, i as FunctionFormRenderProps, l as TextStyle, n as CustomFunctionDetailRenderProps, o as OpenCodeChainFunctionPanel, r as FunctionAtCursor, s as PopoverFooterRenderer, t as CodeChainFunctionPanelRenderProps, u as ValueType } from "./types-CptsgFbu.mjs";
+import { a as Mode, c as PopupMode, i as FunctionFormRenderProps, l as TextStyle, n as CustomFunctionDetailRenderProps, o as OpenCodeChainFunctionPanel, r as FunctionAtCursor, s as PopoverFooterRenderer, t as CodeChainFunctionPanelRenderProps, u as ValueType } from "./types-CEQWndtF.mjs";
 export { CodeChainFunctionPanelRenderProps, CustomFunctionDetailRenderProps, FunctionAtCursor, FunctionFormRenderProps, Mode, OpenCodeChainFunctionPanel, PopoverFooterRenderer, PopupMode, TextStyle, ValueType };

package/dist/{url-state-CrnZ3Ocy.d.mts → url-state-B_gTQ9uu.d.mts}

@@ -1,4 +1,4 @@
-import { p as FilterStateV2 } from "./types-Rj-C3LGL.mjs";
+import { m as FilterStateV2 } from "./types-DEzlAdZW.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/url-state.d.ts
 /**
@@ -39,4 +39,4 @@ declare function applyFilterStateToSearchParams(params: URLSearchParams, state:
 declare function decodeFilterStateFromString(raw: string | null | undefined): FilterStateV2 | null;
 //#endregion
 export { decodeFilterStateFromUrl as a, decodeFilterStateFromString as i, UrlStateCodecResult as n, encodeFilterStateToUrlParam as o, applyFilterStateToSearchParams as r, FILTER_STATE_URL_PARAM as t };
-//# sourceMappingURL=url-state-CrnZ3Ocy.d.mts.map
+//# sourceMappingURL=url-state-B_gTQ9uu.d.mts.map

package/dist/url-state.d.mts

@@ -1,2 +1,2 @@
-import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "./url-state-CrnZ3Ocy.mjs";
+import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "./url-state-B_gTQ9uu.mjs";
 export { FILTER_STATE_URL_PARAM, UrlStateCodecResult, applyFilterStateToSearchParams, decodeFilterStateFromString, decodeFilterStateFromUrl, encodeFilterStateToUrlParam };

package/dist/{useChain-DQq1UsGZ.d.mts → useChain-DPRVMwX8.d.mts}

@@ -1,8 +1,8 @@
-import { r as Sticker } from "./Sticker-rxBNVYlX.mjs";
-import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-BMPLdT4p.mjs";
-import { n as Chain, s as MethodChainNode } from "./methodChainTypes-BtSMV5OZ.mjs";
-import { t as Option } from "./schemaOptions-DTeNBwir.mjs";
-import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-dY6jc22J.mjs";
+import { r as Sticker } from "./Sticker-C260e6kl.mjs";
+import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-6mcLrVG3.mjs";
+import { n as Chain, s as MethodChainNode } from "./methodChainTypes-BuwpPC73.mjs";
+import { t as Option } from "./schemaOptions-DBOUChxi.mjs";
+import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-DT-9j_sG.mjs";
 import { ComponentProps } from "react";
 
 //#region lib/useChain.d.ts
@@ -74,4 +74,4 @@ declare const useChainSchema: ({
 declare const useChain: UseChainHook;
 //#endregion
 export { useChain as n, useChainSchema as r, chainRootsFromSchemaProperties as t };
-//# sourceMappingURL=useChain-DQq1UsGZ.d.mts.map
+//# sourceMappingURL=useChain-DPRVMwX8.d.mts.map

package/dist/useChainAtCursor.d.mts

@@ -1,9 +1,9 @@
-import { t as ASTNode } from "./types-BB5WwerD.mjs";
-import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-BMPLdT4p.mjs";
-import { n as Chain, s as MethodChainNode } from "./methodChainTypes-BtSMV5OZ.mjs";
-import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-dY6jc22J.mjs";
-import { u as ValueType } from "./types-CptsgFbu.mjs";
-import { n as useChain } from "./useChain-DQq1UsGZ.mjs";
+import { t as ASTNode } from "./types-VgGkS4JB.mjs";
+import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-6mcLrVG3.mjs";
+import { n as Chain, s as MethodChainNode } from "./methodChainTypes-BuwpPC73.mjs";
+import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-DT-9j_sG.mjs";
+import { u as ValueType } from "./types-CEQWndtF.mjs";
+import { n as useChain } from "./useChain-DPRVMwX8.mjs";
 
 //#region components/SmartTextInput/useChainAtCursor.d.ts
 /**

package/dist/useCodeChainFunctionPanel.d.mts

@@ -1,4 +1,4 @@
-import { o as OpenCodeChainFunctionPanel, t as CodeChainFunctionPanelRenderProps } from "./types-CptsgFbu.mjs";
+import { o as OpenCodeChainFunctionPanel, t as CodeChainFunctionPanelRenderProps } from "./types-CEQWndtF.mjs";
 import { ReactNode } from "react";
 
 //#region components/SmartTextInput/useCodeChainFunctionPanel.d.ts

package/dist/useComboboxFooterAction.d.mts

@@ -1,12 +1,13 @@
-import { p as FooterAction } from "./ComboboxBase-DXhu2YSh.mjs";
+import { p as FooterAction } from "./ComboboxBase-2nVpt8oj.mjs";
 import { KeyboardEvent } from "react";
 
 //#region components/Combobox/useComboboxFooterAction.d.ts
 interface UseComboboxFooterActionParams {
   footerAction?: FooterAction;
   isOptionsLoading?: boolean;
-  /** Number of keyboard-navigable options currently rendered. */
   itemCount: number;
+  firstNavigableIndex?: number;
+  lastNavigableIndex?: number;
   isMenuOpen: boolean;
   inputValue: string;
   /** Downshift's current option highlight (`-1` when no option is highlighted). */
@@ -36,6 +37,8 @@ declare function useComboboxFooterAction({
   footerAction,
   isOptionsLoading,
   itemCount,
+  firstNavigableIndex,
+  lastNavigableIndex,
   isMenuOpen,
   inputValue,
   highlightedIndex,

package/dist/{useFilterStateV2-CGGABOcq.d.mts → useFilterStateV2-BQZppUR0.d.mts}

@@ -1,5 +1,6 @@
-import { l as FilterRule, n as CompoundExpression, p as FilterStateV2 } from "./types-Rj-C3LGL.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-C2eIbP1X.mjs";
+import { m as FilterStateV2, n as CompoundExpression, u as FilterRule } from "./types-DEzlAdZW.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-DAk_3PhH.mjs";
+import { SetStateAction } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.d.ts
 interface UseFilterStateV2Options {
@@ -60,7 +61,7 @@ interface UseFilterStateV2Result {
    * Update an existing top-level rule by `id`. No-op if no rule with
    * that id exists (e.g. it was removed between event and dispatch).
    */
-  updateTopLevelRule: (id: string, rule: FilterRule) => void;
+  updateTopLevelRule: (id: string, rule: SetStateAction<FilterRule>) => void;
   /** Remove the top-level rule with the given id. No-op if absent. */
   removeTopLevelRule: (id: string) => void;
 }
@@ -90,4 +91,4 @@ interface UseFilterStateV2Result {
 declare function useFilterStateV2(options: UseFilterStateV2Options): UseFilterStateV2Result;
 //#endregion
 export { UseFilterStateV2Result as n, useFilterStateV2 as r, UseFilterStateV2Options as t };
-//# sourceMappingURL=useFilterStateV2-CGGABOcq.d.mts.map
+//# sourceMappingURL=useFilterStateV2-BQZppUR0.d.mts.map

package/dist/useFilterStateV2.d.mts

@@ -1,2 +1,2 @@
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-CGGABOcq.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-BQZppUR0.mjs";
 export { UseFilterStateV2Options, UseFilterStateV2Result, useFilterStateV2 };

package/dist/{useFormField-CbNYbDdp.mjs → useFormField-BAmkdxtA.mjs}

@@ -1,4 +1,4 @@
-import { n as useFormGroup } from "./useFormGroup-CsKC93Pt.mjs";
+import { n as useFormGroup } from "./useFormGroup-BZayb9fZ.mjs";
 import { createContext, useContext } from "react";
 //#region components/FormControl/useFormField.ts
 const FormControlContext = createContext({});
@@ -23,4 +23,4 @@ const useFormField = (props) => {
 //#endregion
 export { useFormField as n, FormControlContext as t };
 
-//# sourceMappingURL=useFormField-CbNYbDdp.mjs.map
+//# sourceMappingURL=useFormField-BAmkdxtA.mjs.map

package/dist/{useFormField-CbNYbDdp.mjs.map → useFormField-BAmkdxtA.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormField-CbNYbDdp.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  required?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    required: props.required ?? field.required,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAiBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}
+{"version":3,"file":"useFormField-BAmkdxtA.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  required?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    required: props.required ?? field.required,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAiBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}

package/dist/{useFormField-4w9TNFgD.d.mts → useFormField-DAwApAKK.d.mts}

@@ -1,4 +1,4 @@
-import { t as ErrorProps } from "./ErrorProps-C-sfKFxK.mjs";
+import { t as ErrorProps } from "./ErrorProps-oCHtJzEB.mjs";
 import * as _$react from "react";
 
 //#region components/FormControl/useFormField.d.ts
@@ -29,4 +29,4 @@ declare const useFormField: (props: Partial<FormControlContextProps>) => {
 };
 //#endregion
 export { FormControlContextProps as n, useFormField as r, FormControlContext as t };
-//# sourceMappingURL=useFormField-4w9TNFgD.d.mts.map
+//# sourceMappingURL=useFormField-DAwApAKK.d.mts.map

package/dist/useFormField.d.mts

@@ -1,2 +1,2 @@
-import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField-4w9TNFgD.mjs";
+import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField-DAwApAKK.mjs";
 export { FormControlContext, FormControlContextProps, useFormField as default };

package/dist/{useFormGroup-CsKC93Pt.mjs → useFormGroup-BZayb9fZ.mjs}

@@ -11,4 +11,4 @@ const useFormGroup = (props) => {
 //#endregion
 export { useFormGroup as n, FormGroupContext as t };
 
-//# sourceMappingURL=useFormGroup-CsKC93Pt.mjs.map
+//# sourceMappingURL=useFormGroup-BZayb9fZ.mjs.map

package/dist/{useFormGroup-CsKC93Pt.mjs.map → useFormGroup-BZayb9fZ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormGroup-CsKC93Pt.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}
+{"version":3,"file":"useFormGroup-BZayb9fZ.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}

package/dist/{useLocationPathname-CZwH8h5n.d.mts → useLocationPathname-BHL0pgiu.d.mts}

@@ -2,4 +2,4 @@
 declare const usePathname: () => string;
 //#endregion
 export { usePathname as t };
-//# sourceMappingURL=useLocationPathname-CZwH8h5n.d.mts.map
+//# sourceMappingURL=useLocationPathname-BHL0pgiu.d.mts.map

package/dist/useLocationPathname.d.mts

@@ -1,2 +1,2 @@
-import { t as usePathname } from "./useLocationPathname-CZwH8h5n.mjs";
+import { t as usePathname } from "./useLocationPathname-BHL0pgiu.mjs";
 export { usePathname };

package/dist/{useTableBoxDragAndDrop-Bw93rNFH.d.mts → useTableBoxDragAndDrop-Dq30b6yY.d.mts}

@@ -66,4 +66,4 @@ declare const useTableBoxDragAndDrop: <T extends object>({
 }: UseTableBoxDragAndDropArgs<T>) => UseTableBoxDragAndDropResult;
 //#endregion
 export { ReorderConfig as n, useTableBoxDragAndDrop as r, DragDirection as t };
-//# sourceMappingURL=useTableBoxDragAndDrop-Bw93rNFH.d.mts.map
+//# sourceMappingURL=useTableBoxDragAndDrop-Dq30b6yY.d.mts.map

package/dist/useTableBoxDragAndDrop.d.mts

@@ -1,2 +1,2 @@
-import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-Bw93rNFH.mjs";
+import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-Dq30b6yY.mjs";
 export { DragDirection, ReorderConfig, useTableBoxDragAndDrop };

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-DXhu2YSh.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-2nVpt8oj.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/dist/{utilities-B8PzMOza.d.mts → utilities-B2ry7_20.d.mts}

@@ -6,4 +6,4 @@
 type RequireOneOf<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys];
 //#endregion
 export { RequireOneOf as t };
-//# sourceMappingURL=utilities-B8PzMOza.d.mts.map
+//# sourceMappingURL=utilities-B2ry7_20.d.mts.map

package/dist/utilities.d.mts

@@ -1,2 +1,2 @@
-import { t as RequireOneOf } from "./utilities-B8PzMOza.mjs";
+import { t as RequireOneOf } from "./utilities-B2ry7_20.mjs";
 export { RequireOneOf };

package/dist/utils/testing.d.mts

@@ -1,4 +1,4 @@
-import { n as RouterAdapter } from "../types-ClbV4wNp.mjs";
+import { n as RouterAdapter } from "../types-CgKSEQyB.mjs";
 import { ReactElement } from "react";
 import * as _$_testing_library_react0 from "@testing-library/react";
 import { RenderOptions, screen } from "@testing-library/react";

package/dist/utils.d.mts

@@ -1,4 +1,4 @@
-import { u as FilterRuleValue } from "./types-Rj-C3LGL.mjs";
+import { d as FilterRuleValue } from "./types-DEzlAdZW.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/utils.d.ts
 /**

package/dist/utils4.d.mts

@@ -1,8 +1,8 @@
-import { n as ASTChain } from "./types-l-arEBLb.mjs";
-import { t as ASTNode } from "./types-BB5WwerD.mjs";
-import { n as Chain, s as MethodChainNode } from "./methodChainTypes-BtSMV5OZ.mjs";
-import { t as ChainRoot } from "./chainTypes-dY6jc22J.mjs";
-import { a as Mode, r as FunctionAtCursor, u as ValueType } from "./types-CptsgFbu.mjs";
+import { n as ASTChain } from "./types-4wnr5R9P.mjs";
+import { t as ASTNode } from "./types-VgGkS4JB.mjs";
+import { n as Chain, s as MethodChainNode } from "./methodChainTypes-BuwpPC73.mjs";
+import { t as ChainRoot } from "./chainTypes-DT-9j_sG.mjs";
+import { a as Mode, r as FunctionAtCursor, u as ValueType } from "./types-CEQWndtF.mjs";
 import { RefObject } from "react";
 
 //#region components/SmartTextInput/utils.d.ts

package/dist/{validation-DP8f6tgh.d.mts → validation-BODkbEvr.d.mts}

@@ -1,5 +1,5 @@
-import { l as FilterRule, p as FilterStateV2 } from "./types-Rj-C3LGL.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-C2eIbP1X.mjs";
+import { m as FilterStateV2, u as FilterRule } from "./types-DEzlAdZW.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-DAk_3PhH.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/validation.d.ts
 /**
@@ -48,4 +48,4 @@ declare function pruneToRegistry(state: FilterStateV2, registry: FieldRegistry |
 declare function hasCompleteValue(rule: FilterRule, registry: FieldRegistry): boolean;
 //#endregion
 export { isFilterStateV2 as n, pruneToRegistry as r, hasCompleteValue as t };
-//# sourceMappingURL=validation-DP8f6tgh.d.mts.map
+//# sourceMappingURL=validation-BODkbEvr.d.mts.map

package/dist/validation.d.mts

@@ -1,2 +1,2 @@
-import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-DP8f6tgh.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-BODkbEvr.mjs";
 export { hasCompleteValue, isFilterStateV2, pruneToRegistry };

package/dist/validation2.d.mts

@@ -1,7 +1,7 @@
-import { t as ASTNode } from "./types-BB5WwerD.mjs";
-import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-BMPLdT4p.mjs";
-import { t as ChainRoot } from "./chainTypes-dY6jc22J.mjs";
-import { u as ValueType } from "./types-CptsgFbu.mjs";
+import { t as ASTNode } from "./types-VgGkS4JB.mjs";
+import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-6mcLrVG3.mjs";
+import { t as ChainRoot } from "./chainTypes-DT-9j_sG.mjs";
+import { u as ValueType } from "./types-CEQWndtF.mjs";
 import { ReactNode } from "react";
 
 //#region components/SmartTextInput/validation.d.ts

package/dist/{value-control-resolver-CwjOaVAn.d.mts → value-control-resolver-BcZiReQ7.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, l as FilterRule, u as FilterRuleValue } from "./types-Rj-C3LGL.mjs";
+import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-DEzlAdZW.mjs";
 import { ReactNode } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.d.ts
@@ -46,4 +46,4 @@ type ValueControlResolver = (opts: ResolveValueControlOptions) => ReactNode | un
 declare function resolveValueControl(opts: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
 //#endregion
 export { ValueControlResolver as n, resolveValueControl as r, ResolveValueControlOptions as t };
-//# sourceMappingURL=value-control-resolver-CwjOaVAn.d.mts.map
+//# sourceMappingURL=value-control-resolver-BcZiReQ7.d.mts.map

package/dist/value-control-resolver.d.mts

@@ -1,2 +1,2 @@
-import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-CwjOaVAn.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-BcZiReQ7.mjs";
 export { ResolveValueControlOptions, ValueControlResolver, resolveValueControl };

package/dist/variables/effect.d.mts

@@ -1,4 +1,4 @@
-import { t as MaybeSemanticTheme } from "../semanticColor-BCPOKF9L.mjs";
+import { t as MaybeSemanticTheme } from "../semanticColor-BuG977_M.mjs";
 
 //#region variables/effect.d.ts
 /**

package/dist/variables/semantic.d.mts

@@ -1,2 +1,2 @@
-import { i as semanticLight, n as SemanticTokens, r as semanticDark, t as CssPercentage } from "../semantic-CfiNA4Yy.mjs";
+import { i as semanticLight, n as SemanticTokens, r as semanticDark, t as CssPercentage } from "../semantic-Duoh2Pxp.mjs";
 export { CssPercentage, SemanticTokens, semanticDark, semanticLight };

package/llms.txt

@@ -37,6 +37,7 @@ their own subpaths.
 - Overlays: `Modal`, `WizardModal` (`patterns/WizardModal`), `RightPanel`, `Popover`, `Tooltip` / `TextUnderlineTooltip`, `DropdownMenu`, `FloatingPanel`
 - Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`
 - Status: `Sticker` (status badges), `Badge` (counts), `StatusIndicator`
+- FilterBar: optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates in pills and native Rules; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx. Hosts own feature activation and serialization.
 
 ## Testing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -140,6 +140,7 @@
     "./mixins/print": "./dist/mixins/print/index.mjs",
     "./mixins/scrollbar": "./dist/mixins/scrollbar.mjs",
     "./mixins/text": "./dist/mixins/text.mjs",
+    "./patterns/CardGrouping": "./dist/patterns/CardGrouping/index.mjs",
     "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
     "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
     "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
@@ -211,8 +212,8 @@
   "devDependencies": {
     "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
-    "@persona/design-tokens": "0.4.17",
-    "@persona/icons": "0.1.6",
+    "@persona/design-tokens": "0.4.19",
+    "@persona/icons": "0.1.8",
     "@storybook/react": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
     "@tanstack/intent": "^0.3.6",
@@ -395,6 +396,7 @@
       "./mixins/print": "./dist/mixins/print/index.mjs",
       "./mixins/scrollbar": "./dist/mixins/scrollbar.mjs",
       "./mixins/text": "./dist/mixins/text.mjs",
+      "./patterns/CardGrouping": "./dist/patterns/CardGrouping/index.mjs",
       "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
       "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
       "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",

package/skills/ui-authoring/COMPONENTS.md

@@ -24,6 +24,7 @@ exists. If there is no `.mdx`, use the published type declarations
 | `SingleColumnLayout` | One page column, with optional tabs and a page notice. `width="wide"` uses the fluid grid | `@persona/design-system/patterns/PageLayout` |
 | `SplitColumnLayout` | An 8:4 main and aside page. Same optional regions as `SingleColumnLayout`. Stacks main then aside below 768px | `@persona/design-system/patterns/PageLayout` |
 | `DataTable` | Data table — browsing tabular data with filtering, bulk actions, search, pagination, and sorting | `@persona/design-system/components/DataTable` |
+| `FilterBar` | Structured filters with native Rules; opt-in field `condition`, `pickerGroup`, and `disabledReason` support individual host-defined predicates. Hosts own flags and serialization; see DataTable.mdx | `@persona/design-system/components/DataTable/TableControls` |
 | `DatePicker` | Picking a date or date range from a calendar | `@persona/design-system/components/DatePicker` |
 | `DropdownButton` | Opening a menu of related actions from a button | `@persona/design-system/components/DropdownButton` |
 | `DropdownMenu` | Showing a temporary action list on a custom trigger | `@persona/design-system/components/DropdownMenu` |

package/skills/ui-authoring/PATTERNS.md

@@ -19,6 +19,7 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 | LayoutLoadingShimmer | Filling space while content loads |
 | [Panels](../../patterns/Panels/Panels.mdx) | Use `RightPanel` when the page should stay visible. Use `Modal` when the task needs full attention. Never a custom drawer. |
 | [WizardModal](../../patterns/WizardModal/WizardModal.mdx) | A linear multi-step task behind a page overlay. |
+| [CardGrouping](../../patterns/CardGrouping/CardGrouping.mdx) | Distinct records as cards in collapsible groups, for a clean view rather than querying or filtering. Optional controls sit under the list description |
 
 
 ## Page layouts
@@ -137,8 +138,12 @@ import { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip'
   `footer`. Not for long config forms (use `WizardModal` or a page) or frequently reopened forms.
 - `RightPanel`: editing the selected item; dense, repeatable forms. No footer prop — right-align
   actions in the body with `HStack`.
-- Page: long or multi-section forms users may leave and return to. `PageHeader` holds actions; put
-  field groups in `Card` (`CardV2`).
+- Page: long or multi-section forms users may leave and return to. `PageHeader` is the title; put
+  field groups in `Card` (`CardV2`). Place actions under the field group with `Spacing[7]`, left
+  aligned, primary action on the left, `size="md"`.
+
+Buttons in the same group share one width, set by the longest label. Do not stretch the group to
+its container. Ghost (`text`) buttons stay at their own width.
 
 ## Layout