@persona/design-system 0.10.10 → 0.10.12

package/dist/useChartStyles.d.mts

@@ -0,0 +1,108 @@
+//#region src/components/Chart/useChartStyles.d.ts
+/** Axis tick text style (TextSmall). @experimental */
+interface ChartTickStyle {
+  fill: string;
+  fontSize: string;
+  fontFamily: string;
+}
+/** What {@link useChartStyles} returns: props to spread on Recharts components. @experimental */
+interface ChartStyles {
+  /** The resolved semantic colours behind the props below. */
+  colors: {
+    grid: string;
+    axis: string;
+    text: string;
+    surface: string;
+    hover: string;
+  };
+  grid: {
+    vertical: false;
+    stroke: string;
+    zIndex: number;
+  };
+  xAxis: {
+    tick: ChartTickStyle;
+    tickLine: false;
+    axisLine: {
+      stroke: string;
+    };
+  };
+  yAxis: {
+    tick: ChartTickStyle;
+    tickLine: false;
+    axisLine: false;
+  };
+  barCursor: {
+    fill: string;
+    fillOpacity: number;
+  };
+  lineCursor: {
+    stroke: string;
+  };
+  segmentGap: {
+    stroke: string;
+    strokeWidth: number;
+  };
+  activeDot: {
+    r: number;
+    stroke: string;
+    strokeWidth: number;
+  };
+}
+/**
+ * PDS styling for hand-built Recharts charts, as props to spread on Recharts' own components so a
+ * custom chart (reference lines, formatters, extra children) keeps the PDS look:
+ *
+ * ```tsx
+ * const styles = useChartStyles();
+ * <BarChart data={data} margin={CHART_PLOT_MARGIN}>
+ *   <Tooltip cursor={styles.barCursor} content={<ChartPopover series={series} />} />
+ *   <CartesianGrid {...styles.grid} />
+ *   <XAxis dataKey='month' {...styles.xAxis} tickFormatter={formatMonth} />
+ *   <YAxis {...styles.yAxis} />
+ *   <ReferenceLine y={target} stroke={styles.colors.axis} strokeDasharray='4 4' />
+ *   ...
+ * </BarChart>
+ * ```
+ *
+ * Colours come from semantic tokens, so they follow light and dark mode.
+ *
+ * @experimental Part of the in-progress PDS charting components; the API may change.
+ */
+declare function useChartStyles(): ChartStyles;
+/** @experimental */
+interface ChartActiveSeries<K extends string> {
+  /** The series under the pointer, for `ChartPopover activeSeries`. */
+  activeSeries: K | undefined;
+  /** Spread on each `<Bar>`: tracks which series and category the pointer is on. */
+  barHandlers: (key: K) => {
+    onMouseEnter: (data: unknown, index: number) => void;
+    onMouseLeave: () => void;
+  };
+  /**
+   * `fillOpacity` for a series' bar at `index` (pass it to a `<Cell>`): 0.65 for the other series in
+   * the hovered category, 1 otherwise.
+   */
+  segmentOpacity: (key: K, index: number) => number;
+}
+/**
+ * Hover emphasis for bars holding several series (stacked or grouped): the segment under the
+ * pointer stays at full strength, the other segments of the same category drop to 65% opacity, and
+ * `activeSeries` dims the matching popover rows.
+ *
+ * ```tsx
+ * const { activeSeries, barHandlers, segmentOpacity } = useChartActiveSeries<Key>();
+ * <Tooltip content={<ChartPopover series={series} activeSeries={activeSeries} />} />
+ * {series.map(({ key }) => (
+ *   <Bar key={key} dataKey={key} {...barHandlers(key)}>
+ *     {data.map((_, i) => <Cell key={i} fillOpacity={segmentOpacity(key, i)} />)}
+ *   </Bar>
+ * ))}
+ * ```
+ *
+ * @experimental
+ */
+declare function useChartActiveSeries<K extends string>(): ChartActiveSeries<K>;
+//#endregion
+export { ChartActiveSeries, ChartStyles, ChartTickStyle, useChartActiveSeries, useChartStyles };
+//# sourceMappingURL=useChartStyles.d.mts.map

package/dist/useColumnConfiguration.d.mts

@@ -1,5 +1,5 @@
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-Cp7ausV_.mjs";
-import { i as ColumnConfig } from "./types-BiqzeNsa.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-DE9HFXYY.mjs";
+import { i as ColumnConfig } from "./types-Dws2XDz2.mjs";
 import { RowData } from "@tanstack/react-table";
 
 //#region src/patterns/IndexTableLayout/useColumnConfiguration.d.ts

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { p as FooterAction } from "./ComboboxBase-BPXqJHaQ.mjs";
+import { m as FooterAction } from "./ComboboxBase-CrFweFGi.mjs";
 import { KeyboardEvent } from "react";
 
 //#region src/components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useFilterStateV2-DBpbxAEC.d.mts → useFilterStateV2-DiTS9DTg.d.mts}

@@ -1,5 +1,5 @@
-import { m as FilterStateV2, n as CompoundExpression, u as FilterRule } from "./types-DLnCkvTt.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-C2NVPhMO.mjs";
+import { m as FilterStateV2, n as CompoundExpression, u as FilterRule } from "./types-BJqmRXFV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-CJwGpUVK.mjs";
 import { SetStateAction } from "react";
 
 //#region src/components/DataTable/TableControls/FiltersV2/useFilterStateV2.d.ts
@@ -91,4 +91,4 @@ interface UseFilterStateV2Result {
 declare function useFilterStateV2(options: UseFilterStateV2Options): UseFilterStateV2Result;
 //#endregion
 export { UseFilterStateV2Result as n, useFilterStateV2 as r, UseFilterStateV2Options as t };
-//# sourceMappingURL=useFilterStateV2-DBpbxAEC.d.mts.map
+//# sourceMappingURL=useFilterStateV2-DiTS9DTg.d.mts.map

package/dist/useFilterStateV2.d.mts

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

package/dist/{useTableColumns-Xd14vx_h.d.mts → useTableColumns-tITjHasE.d.mts}

@@ -1,4 +1,4 @@
-import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat } from "./types-BiqzeNsa.mjs";
+import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat } from "./types-Dws2XDz2.mjs";
 import { ColumnDef, Row, RowData, Table } from "@tanstack/react-table";
 
 //#region src/components/DataTable/useTableColumns.d.ts
@@ -69,4 +69,4 @@ declare function useTableColumns<TData extends RowData, TFormat extends {
 }[]];
 //#endregion
 export { UseTableColumnsParams as n, useTableColumns as r, RenderFormatFn as t };
-//# sourceMappingURL=useTableColumns-Xd14vx_h.d.mts.map
+//# sourceMappingURL=useTableColumns-tITjHasE.d.mts.map

package/dist/useTableColumns.d.mts

@@ -1,2 +1,2 @@
-import { n as UseTableColumnsParams, r as useTableColumns, t as RenderFormatFn } from "./useTableColumns-Xd14vx_h.mjs";
+import { n as UseTableColumnsParams, r as useTableColumns, t as RenderFormatFn } from "./useTableColumns-tITjHasE.mjs";
 export { RenderFormatFn, UseTableColumnsParams, useTableColumns };

package/dist/useTruncation.d.mts

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

package/dist/useValueControlError.d.mts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+//#region src/components/DataTable/TableControls/FiltersV2/value-controls/useValueControlError.d.ts
+interface ValueControlErrorInputProps {
+  hasError?: boolean;
+  'aria-describedby'?: string;
+  'aria-errormessage'?: string;
+}
+/**
+ * Error state for a text-like value control (`Input`). Returns the props that
+ * put the input in its error state (red border, `aria-invalid`, linked to the
+ * message) and the message element to render after the input, styled like
+ * `FormField`'s `errorText`.
+ *
+ * With no `errorMessage` both are empty, so the control renders exactly as it
+ * did without validation. The message is a sibling rather than a wrapper, so
+ * the input keeps its place in the tree (and its focus) when the message
+ * appears or clears while the user types.
+ */
+declare function useValueControlError(errorMessage: string | undefined): {
+  inputProps: ValueControlErrorInputProps;
+  errorText: ReactNode;
+};
+//#endregion
+export { useValueControlError };
+//# sourceMappingURL=useValueControlError.d.mts.map

package/dist/utils.d.mts

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

package/dist/{validation-Tgg3AhuP.d.mts → validation-BDQdQ1cY.d.mts}

@@ -1,5 +1,5 @@
-import { m as FilterStateV2, u as FilterRule } from "./types-DLnCkvTt.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-C2NVPhMO.mjs";
+import { m as FilterStateV2, u as FilterRule } from "./types-BJqmRXFV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-CJwGpUVK.mjs";
 
 //#region src/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-Tgg3AhuP.d.mts.map
+//# sourceMappingURL=validation-BDQdQ1cY.d.mts.map

package/dist/validation.d.mts

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

package/dist/{value-control-resolver-XQbGCdsP.d.mts → value-control-resolver-BFJZEWDn.d.mts}

@@ -1,4 +1,4 @@
-import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-DLnCkvTt.mjs";
+import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-BJqmRXFV.mjs";
 import { ReactNode } from "react";
 
 //#region src/components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.d.ts
@@ -41,9 +41,15 @@ interface ResolveValueControlOptions {
    * with chips over a vertically expansive list.
    */
   layout?: 'popover' | 'inline';
+  /**
+   * Validation error for the current value. When omitted,
+   * `resolveValueControl` fills it from the condition operator's `validate`
+   * (see `FilterConditionOperator`), so a host resolver receives it too.
+   */
+  errorMessage?: string;
 }
 type ValueControlResolver = (opts: ResolveValueControlOptions) => ReactNode | undefined;
-declare function resolveValueControl(opts: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
+declare function resolveValueControl(options: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
 //#endregion
 export { ValueControlResolver as n, resolveValueControl as r, ResolveValueControlOptions as t };
-//# sourceMappingURL=value-control-resolver-XQbGCdsP.d.mts.map
+//# sourceMappingURL=value-control-resolver-BFJZEWDn.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-XQbGCdsP.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-BFJZEWDn.mjs";
 export { ResolveValueControlOptions, ValueControlResolver, resolveValueControl };

package/dist/value-labels.d.mts

@@ -0,0 +1,12 @@
+import { d as FilterRuleValue, o as FilterField } from "./types-BJqmRXFV.mjs";
+
+//#region src/components/DataTable/TableControls/FiltersV2/FilterBar/value-labels.d.ts
+type GetValueLabel = (fieldId: string, value: string) => string | undefined;
+/**
+ * Render-only overlay; never mutate/cache labels in the immutable registry. Re-evaluate
+ * on each render so a stable host getter can read newly hydrated external names.
+ */
+declare function optionLabelsForDisplay(field: FilterField | undefined, value: FilterRuleValue, optionLabels: Record<string, string> | undefined, getValueLabel?: GetValueLabel): Record<string, string> | undefined;
+//#endregion
+export { GetValueLabel, optionLabelsForDisplay };
+//# sourceMappingURL=value-labels.d.mts.map

package/dist/variables/keyframes.d.mts

@@ -3,6 +3,7 @@ import * as _$styled_components0 from "styled-components";
 //#region src/variables/keyframes.d.ts
 declare const rotate: _$styled_components0.Keyframes;
 declare const fadeIn: _$styled_components0.Keyframes;
+declare const fadeOut: _$styled_components0.Keyframes;
 //#endregion
-export { fadeIn, rotate };
+export { fadeIn, fadeOut, rotate };
 //# sourceMappingURL=keyframes.d.mts.map

package/dist/variables/keyframes.mjs

@@ -13,7 +13,15 @@ const fadeIn = keyframes`
     opacity: 1;
   }
 `;
+const fadeOut = keyframes`
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`;
 //#endregion
-export { fadeIn, rotate };
+export { fadeIn, fadeOut, rotate };
 
 //# sourceMappingURL=keyframes.mjs.map

package/dist/variables/keyframes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyframes.mjs","names":[],"sources":["../../src/variables/keyframes.ts"],"sourcesContent":["import { keyframes } from 'styled-components';\n\nexport const rotate = keyframes`\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n"],"mappings":";;AAEA,MAAa,SAAS,SAAS;;;;;AAM/B,MAAa,SAAS,SAAS"}
+{"version":3,"file":"keyframes.mjs","names":[],"sources":["../../src/variables/keyframes.ts"],"sourcesContent":["import { keyframes } from 'styled-components';\n\nexport const rotate = keyframes`\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n`;\n"],"mappings":";;AAEA,MAAa,SAAS,SAAS;;;;;AAM/B,MAAa,SAAS,SAAS;;;;;;;;AAS/B,MAAa,UAAU,SAAS"}

package/dist/variables/transitions.d.mts

@@ -1,11 +1,18 @@
 //#region src/variables/transitions.d.ts
+/**
+ * Durations for CSS. Which step a motion takes depends on its use, not on the nearest number: see the
+ * motion scale in `skills/ui-authoring/STANDARD.md`. Closes run one step faster than opens, nothing
+ * over `Medium` is a state change, and `OneSecond` is for loop periods only.
+ */
 declare enum TransitionDuration {
   ExtraFast = "100ms",
   Faster = "150ms",
   Fast = "200ms",
+  MediumFast = "300ms",
   Medium = "400ms",
   OneSecond = "1000ms"
 }
+/** The same steps in seconds, for framer-motion. */
 declare enum TransitionDurationInSeconds {
   ExtraFast = 0.1,
   Faster = 0.15,
@@ -14,6 +21,29 @@ declare enum TransitionDurationInSeconds {
   Medium = 0.4,
   OneSecond = 1
 }
+/**
+ * Timing functions for CSS. `Enter` decelerates something arriving, `Exit` accelerates something
+ * leaving, and `Move` is for anything already on screen changing (colour, size, position) and for
+ * the reduced-motion fade. `Linear` is for loops only.
+ */
+declare enum TransitionEasing {
+  Enter = "cubic-bezier(0, 0, 0.2, 1)",
+  Exit = "cubic-bezier(0.4, 0, 1, 1)",
+  Move = "cubic-bezier(0.4, 0, 0.2, 1)",
+  Linear = "linear"
+}
+type CubicBezier = [number, number, number, number];
+/** `TransitionEasing`'s curves as control points, for framer-motion's `ease`. */
+declare const TransitionEasingCurve: Readonly<Record<'Enter' | 'Exit' | 'Move', CubicBezier>>;
+/**
+ * Under `prefers-reduced-motion: reduce`, an enter or exit keeps a short opacity fade on the same
+ * cue, with no translate, scale or size change. It is never instant.
+ */
+declare const ReducedMotionFade: {
+  readonly duration: TransitionDuration.Faster;
+  readonly durationInSeconds: TransitionDurationInSeconds.Faster;
+  readonly easing: TransitionEasing.Move;
+};
 //#endregion
-export { TransitionDuration, TransitionDurationInSeconds };
+export { ReducedMotionFade, TransitionDuration, TransitionDurationInSeconds, TransitionEasing, TransitionEasingCurve };
 //# sourceMappingURL=transitions.d.mts.map

package/dist/variables/transitions.mjs

@@ -1,12 +1,19 @@
 //#region src/variables/transitions.ts
+/**
+* Durations for CSS. Which step a motion takes depends on its use, not on the nearest number: see the
+* motion scale in `skills/ui-authoring/STANDARD.md`. Closes run one step faster than opens, nothing
+* over `Medium` is a state change, and `OneSecond` is for loop periods only.
+*/
 let TransitionDuration = /* @__PURE__ */ function(TransitionDuration) {
 	TransitionDuration["ExtraFast"] = "100ms";
 	TransitionDuration["Faster"] = "150ms";
 	TransitionDuration["Fast"] = "200ms";
+	TransitionDuration["MediumFast"] = "300ms";
 	TransitionDuration["Medium"] = "400ms";
 	TransitionDuration["OneSecond"] = "1000ms";
 	return TransitionDuration;
 }({});
+/** The same steps in seconds, for framer-motion. */
 let TransitionDurationInSeconds = /* @__PURE__ */ function(TransitionDurationInSeconds) {
 	TransitionDurationInSeconds[TransitionDurationInSeconds["ExtraFast"] = .1] = "ExtraFast";
 	TransitionDurationInSeconds[TransitionDurationInSeconds["Faster"] = .15] = "Faster";
@@ -16,7 +23,49 @@ let TransitionDurationInSeconds = /* @__PURE__ */ function(TransitionDurationInS
 	TransitionDurationInSeconds[TransitionDurationInSeconds["OneSecond"] = 1] = "OneSecond";
 	return TransitionDurationInSeconds;
 }({});
+/**
+* Timing functions for CSS. `Enter` decelerates something arriving, `Exit` accelerates something
+* leaving, and `Move` is for anything already on screen changing (colour, size, position) and for
+* the reduced-motion fade. `Linear` is for loops only.
+*/
+let TransitionEasing = /* @__PURE__ */ function(TransitionEasing) {
+	TransitionEasing["Enter"] = "cubic-bezier(0, 0, 0.2, 1)";
+	TransitionEasing["Exit"] = "cubic-bezier(0.4, 0, 1, 1)";
+	TransitionEasing["Move"] = "cubic-bezier(0.4, 0, 0.2, 1)";
+	TransitionEasing["Linear"] = "linear";
+	return TransitionEasing;
+}({});
+/** `TransitionEasing`'s curves as control points, for framer-motion's `ease`. */
+const TransitionEasingCurve = {
+	Enter: [
+		0,
+		0,
+		.2,
+		1
+	],
+	Exit: [
+		.4,
+		0,
+		1,
+		1
+	],
+	Move: [
+		.4,
+		0,
+		.2,
+		1
+	]
+};
+/**
+* Under `prefers-reduced-motion: reduce`, an enter or exit keeps a short opacity fade on the same
+* cue, with no translate, scale or size change. It is never instant.
+*/
+const ReducedMotionFade = {
+	duration: "150ms",
+	durationInSeconds: .15,
+	easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+};
 //#endregion
-export { TransitionDuration, TransitionDurationInSeconds };
+export { ReducedMotionFade, TransitionDuration, TransitionDurationInSeconds, TransitionEasing, TransitionEasingCurve };
 
 //# sourceMappingURL=transitions.mjs.map

package/dist/variables/transitions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"transitions.mjs","names":[],"sources":["../../src/variables/transitions.ts"],"sourcesContent":["export enum TransitionDuration {\n  ExtraFast = '100ms',\n  Faster = '150ms',\n  Fast = '200ms',\n  Medium = '400ms',\n\n  OneSecond = '1000ms',\n}\n\nexport enum TransitionDurationInSeconds {\n  ExtraFast = 0.1,\n  Faster = 0.15,\n  Fast = 0.2,\n  MediumFast = 0.3,\n  Medium = 0.4,\n\n  OneSecond = 1,\n}\n"],"mappings":";AAAA,IAAY,qBAAL,yBAAA,oBAAA;AACL,oBAAA,eAAA;AACA,oBAAA,YAAA;AACA,oBAAA,UAAA;AACA,oBAAA,YAAA;AAEA,oBAAA,eAAA;;KACD;AAED,IAAY,8BAAL,yBAAA,6BAAA;AACL,6BAAA,4BAAA,eAAA,MAAA;AACA,6BAAA,4BAAA,YAAA,OAAA;AACA,6BAAA,4BAAA,UAAA,MAAA;AACA,6BAAA,4BAAA,gBAAA,MAAA;AACA,6BAAA,4BAAA,YAAA,MAAA;AAEA,6BAAA,4BAAA,eAAA,KAAA;;KACD"}
+{"version":3,"file":"transitions.mjs","names":[],"sources":["../../src/variables/transitions.ts"],"sourcesContent":["/**\n * Durations for CSS. Which step a motion takes depends on its use, not on the nearest number: see the\n * motion scale in `skills/ui-authoring/STANDARD.md`. Closes run one step faster than opens, nothing\n * over `Medium` is a state change, and `OneSecond` is for loop periods only.\n */\nexport enum TransitionDuration {\n  ExtraFast = '100ms',\n  Faster = '150ms',\n  Fast = '200ms',\n  MediumFast = '300ms',\n  Medium = '400ms',\n\n  OneSecond = '1000ms',\n}\n\n/** The same steps in seconds, for framer-motion. */\nexport enum TransitionDurationInSeconds {\n  ExtraFast = 0.1,\n  Faster = 0.15,\n  Fast = 0.2,\n  MediumFast = 0.3,\n  Medium = 0.4,\n\n  OneSecond = 1,\n}\n\n/**\n * Timing functions for CSS. `Enter` decelerates something arriving, `Exit` accelerates something\n * leaving, and `Move` is for anything already on screen changing (colour, size, position) and for\n * the reduced-motion fade. `Linear` is for loops only.\n */\nexport enum TransitionEasing {\n  Enter = 'cubic-bezier(0, 0, 0.2, 1)',\n  Exit = 'cubic-bezier(0.4, 0, 1, 1)',\n  Move = 'cubic-bezier(0.4, 0, 0.2, 1)',\n  Linear = 'linear',\n}\n\ntype CubicBezier = [number, number, number, number];\n\n/** `TransitionEasing`'s curves as control points, for framer-motion's `ease`. */\nexport const TransitionEasingCurve: Readonly<Record<'Enter' | 'Exit' | 'Move', CubicBezier>> = {\n  Enter: [0, 0, 0.2, 1],\n  Exit: [0.4, 0, 1, 1],\n  Move: [0.4, 0, 0.2, 1],\n};\n\n/**\n * Under `prefers-reduced-motion: reduce`, an enter or exit keeps a short opacity fade on the same\n * cue, with no translate, scale or size change. It is never instant.\n */\nexport const ReducedMotionFade = {\n  duration: TransitionDuration.Faster,\n  durationInSeconds: TransitionDurationInSeconds.Faster,\n  easing: TransitionEasing.Move,\n} as const;\n"],"mappings":";;;;;;AAKA,IAAY,qBAAL,yBAAA,oBAAA;AACL,oBAAA,eAAA;AACA,oBAAA,YAAA;AACA,oBAAA,UAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,YAAA;AAEA,oBAAA,eAAA;;KACD;;AAGD,IAAY,8BAAL,yBAAA,6BAAA;AACL,6BAAA,4BAAA,eAAA,MAAA;AACA,6BAAA,4BAAA,YAAA,OAAA;AACA,6BAAA,4BAAA,UAAA,MAAA;AACA,6BAAA,4BAAA,gBAAA,MAAA;AACA,6BAAA,4BAAA,YAAA,MAAA;AAEA,6BAAA,4BAAA,eAAA,KAAA;;KACD;;;;;;AAOD,IAAY,mBAAL,yBAAA,kBAAA;AACL,kBAAA,WAAA;AACA,kBAAA,UAAA;AACA,kBAAA,UAAA;AACA,kBAAA,YAAA;;KACD;;AAKD,MAAa,wBAAkF;CAC7F,OAAO;EAAC;EAAG;EAAG;EAAK;EAAE;CACrB,MAAM;EAAC;EAAK;EAAG;EAAG;EAAE;CACpB,MAAM;EAAC;EAAK;EAAG;EAAK;EAAE;CACvB;;;;;AAMD,MAAa,oBAAoB;CAC/B,UAAA;CACA,mBAAA;CACA,QAAA;CACD"}

package/llms.txt

@@ -39,11 +39,12 @@ their own subpaths.
 - Overlays: `Modal`, `WizardModal` (`patterns/WizardModal`), `RightPanel`, `Popover`, `Tooltip` / `TextUnderlineTooltip`, `DropdownMenu`, `FloatingPanel`
 - Modal close button: localize the default with `PDSProvider strings={{ closeModal: translatedLabel }}` (English: "Close"), or override one modal with `contentProps.closeButtonLabel`.
 - Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`, `RichTextEditor` (tiptap-based Markdown/HTML editor with menu bar and optional floating toolbar), `FloatingToolbar` (tiptap bubble-menu toolbar)
+- Combobox server search: `filterMode='server'` requires controlled `query` / `onQueryChange`, `selectedOptions` for selected labels, and flat `options`. Only native edits change the query; selection/display events never report it. PDS skips Fuse and hides Select all. Consumers own requests/pages; wire `onScrollEnd={loadMore}` for repeatable near-end reports and `isLoadingMore` for a loading row. Callers dedupe loading/exhausted requests; PDS re-checks short lists only on open/count changes and has no request lock. Use generic `footerAction` for error retry. Nested/grouped options and `onInputChange` remain client-mode features. See skills/ui-authoring/COMPONENTS.md.
 - Status: `StatusIndicator` (named lifecycle status, including version and deployment status), `Badge` (counts); `Sticker` is for tags and complementary labels, not status
 - Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views. Pass `starredDefaultView` to star the default view: the `isDefault` view is pinned first with a star icon, cannot be dragged, hidden, deleted or unset, and its menu offers only Save, Duplicate and Reset (its name field still renames it); every other view gets the full menu. Rename and Duplicate on it call `onViewNameChange` / `onDuplicateView` with its id; Save calls `onSaveView()` with no id, saving whatever the consumer treats as the current view. A null `currentView` is shown as the starred view, so `onSaveView` and toolbar Save must treat null as the starred view; while an `isDefault` view exists, pass its id as `currentView` rather than null. A lazy default is a consumer-owned placeholder view with `isDefault: true`. While a view is the default the built-in tab is not shown and a `null` `currentView` is displayed as the starred view; with no `isDefault` view the built-in tab is shown starred and read-only.
 - DataTable filters: pass `filtersV2` (`TableControlsFiltersV2Props` / `FilterBarProps`) through `DataTable.controls` or directly to `TableControls` for a first-class FilterBar; defaults visible with size derived from `compact`. Hosts own V2 data filtering and feed `onChange` back to `initialState` for active-filter messaging; hydration needs no remount key. Precedence: `filterPanel` → `filtersV2` → legacy `filters`. Legacy `filters` supports `input`, `select`, `multiselect`, `combobox`, and `daterange` with optional `filterResolver`. With `clientFiltering`, `column.filter` generates legacy-only controls backed by TanStack column-filter state, not V2 filtering.
 - SmartTextInput: when method chains are allowed (`ValueType.MethodChain` or `{{...}}` interpolation), you MUST pass `renderFunctionForm`. PDS does not build the function-parameter form, so without it the dialog opened by placing the cursor in a call like `convert_to(...)` shows only the function name over an empty body. It receives `FunctionFormRenderProps` and must call `onComplete(nodes)` or `onCancel()`. In persona-web, `useDashboardSmartTextInputProps` supplies it (backed by `InputMethodChain/FunctionForm`). See components/SmartTextInput/SmartTextInput.mdx.
-- 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.
+- FilterBar: optional `getValueLabel(fieldId, value)` supplies synchronous display-only choice/multi-choice names in closed pills, overflow tooltips and Rules summaries, before registry labels/raw values. Re-render when host names arrive; it does not fetch, change values/options or mutate the registry. Optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx; hosts own editors, feature activation and serialization.
 
 ## Testing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -41,6 +41,7 @@
     "./components/ButtonGroup": "./dist/components/ButtonGroup/index.mjs",
     "./components/Card": "./dist/components/Card/index.mjs",
     "./components/CardV2": "./dist/components/CardV2/index.mjs",
+    "./components/Chart": "./dist/components/Chart/index.mjs",
     "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
     "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
     "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
@@ -84,8 +85,10 @@
     "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
     "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
     "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+    "./components/SmartTextInput/parser/safe-parse": "./dist/components/SmartTextInput/parser/safe-parse.mjs",
     "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
     "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+    "./components/SmartTextInput/parser/tree": "./dist/components/SmartTextInput/parser/tree.mjs",
     "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
     "./components/Spacer": "./dist/components/Spacer/index.mjs",
     "./components/Spinner": "./dist/components/Spinner/index.mjs",
@@ -142,6 +145,7 @@
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
     "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
     "./lib/useChain": "./dist/lib/useChain.mjs",
+    "./lib/useCloseFocus": "./dist/lib/useCloseFocus.mjs",
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
     "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
     "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
@@ -155,6 +159,7 @@
     "./mixins/hoverable": "./dist/mixins/hoverable.mjs",
     "./mixins/input": "./dist/mixins/input.mjs",
     "./mixins/menuItem": "./dist/mixins/menuItem.mjs",
+    "./mixins/motion": "./dist/mixins/motion.mjs",
     "./mixins/print": "./dist/mixins/print/index.mjs",
     "./mixins/scrollbar": "./dist/mixins/scrollbar.mjs",
     "./mixins/text": "./dist/mixins/text.mjs",
@@ -182,6 +187,7 @@
     "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs && node scripts/assert-parser-declarations.mjs",
     "release": "scripts/release.sh --dry-run",
     "skills:validate": "intent validate skills",
+    "typecheck:charts": "node scripts/typecheck-charts.mjs",
     "tokens:generate": "node scripts/generate-semantic-tokens.mjs && node scripts/generate-charting-tokens.mjs",
     "tokens:check": "node scripts/generate-semantic-tokens.mjs --check && node scripts/generate-charting-tokens.mjs --check",
     "skills:stale": "intent stale"
@@ -242,8 +248,8 @@
     "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
     "@oxlint/plugins": "1.72.0",
-    "@persona/design-tokens": "0.4.24",
-    "@persona/icons": "0.1.13",
+    "@persona/design-tokens": "0.4.26",
+    "@persona/icons": "0.1.15",
     "@storybook/react": "^10.6.2",
     "@storybook/react-vite": "^10.6.2",
     "@tanstack/intent": "^0.3.6",
@@ -276,6 +282,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.30.5",
     "recharts": "^2.13.3",
+    "recharts-v3": "npm:recharts@^3.2.1",
     "storybook": "^10.6.2",
     "styled-components": "^5.3.5",
     "tsdown": "^0.21.0",
@@ -284,7 +291,7 @@
   },
   "peerDependencies": {
     "@persona/design-tokens": ">=0.4.17",
-    "@persona/icons": ">=0.1.0",
+    "@persona/icons": ">=0.1.14",
     "@tanstack/react-router": ">=1.0.0",
     "@testing-library/dom": ">=8",
     "@testing-library/react": ">=12",
@@ -293,6 +300,7 @@
     "react": ">=17",
     "react-dom": ">=17",
     "react-router-dom": "^6.30.1 || ^7.18.2",
+    "recharts": "^2.13.3 || ^3",
     "styled-components": "^5.3.5"
   },
   "peerDependenciesMeta": {
@@ -304,6 +312,9 @@
     },
     "oxlint": {
       "optional": true
+    },
+    "recharts": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -319,6 +330,7 @@
       "./components/ButtonGroup": "./dist/components/ButtonGroup/index.mjs",
       "./components/Card": "./dist/components/Card/index.mjs",
       "./components/CardV2": "./dist/components/CardV2/index.mjs",
+      "./components/Chart": "./dist/components/Chart/index.mjs",
       "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
       "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
       "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
@@ -362,8 +374,10 @@
       "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
       "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
       "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+      "./components/SmartTextInput/parser/safe-parse": "./dist/components/SmartTextInput/parser/safe-parse.mjs",
       "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
       "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+      "./components/SmartTextInput/parser/tree": "./dist/components/SmartTextInput/parser/tree.mjs",
       "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
       "./components/Spacer": "./dist/components/Spacer/index.mjs",
       "./components/Spinner": "./dist/components/Spinner/index.mjs",
@@ -420,6 +434,7 @@
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
       "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
       "./lib/useChain": "./dist/lib/useChain.mjs",
+      "./lib/useCloseFocus": "./dist/lib/useCloseFocus.mjs",
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
       "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
       "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
@@ -433,6 +448,7 @@
       "./mixins/hoverable": "./dist/mixins/hoverable.mjs",
       "./mixins/input": "./dist/mixins/input.mjs",
       "./mixins/menuItem": "./dist/mixins/menuItem.mjs",
+      "./mixins/motion": "./dist/mixins/motion.mjs",
       "./mixins/print": "./dist/mixins/print/index.mjs",
       "./mixins/scrollbar": "./dist/mixins/scrollbar.mjs",
       "./mixins/text": "./dist/mixins/text.mjs",

package/skills/new-screen/SKILL.md

@@ -44,6 +44,39 @@ Put this in the PR body before building, so the design source is consulted first
 - **Intent:** who uses the screen, to do what, in one line
 - **Source:** the live product, a Figma link, or none (say so if a source couldn't be reached)
 - **PDS version:** from the app's lockfile
+- **State changes:** the table below
+
+### State changes
+
+Give every state change on the screen one row: open and close, enter and exit, loading to loaded,
+empty, error, success, selection, disabled, and any value that updates in place.
+
+| State change | Motion | Reason |
+| ------------ | ------ | ------ |
+| Review dialog opens | `Modal`, built in | |
+| Review dialog closes | `Modal`, built in | |
+| Case list loads | `IndexViewLayoutShimmer`, built in | Built in; the shimmer holds still under reduced motion |
+| Save fails | instant | An error shouldn't wait on an animation |
+| Result count updates | instant | The number is the content |
+| Edited value is highlighted | Feedback on a surface: `TransitionDuration.Fast`, `TransitionEasing.Move` | No PDS component highlights an edit |
+
+Motion is one of these, in this order:
+
+1. **A PDS component's own motion.** Name the component's export and add nothing on top.
+2. **A usage row from the motion scale** ([STANDARD.md](../ui-authoring/STANDARD.md#motion-scale)),
+   for motion the screen authors itself: its `TransitionDuration` (CSS) or
+   `TransitionDurationInSeconds` (framer-motion) step and its `TransitionEasing` or
+   `TransitionEasingCurve`, plus `fadeIn` or `rotate` from `variables/keyframes`. Say why no
+   component covers it. No literal durations or timing functions.
+3. **`instant`**, with a reason.
+
+**Reduced motion.** Any file the screen adds that animates keeps a short opacity fade with no
+movement under reduced motion (`ReducedMotionFade`, 150 ms): a `prefers-reduced-motion` block in CSS
+(`pds/reduced-motion` checks this), or `useReducedMotion()` in framer-motion. The state changes at
+the same cue, never instantly.
+If a component's own motion ignores reduced motion, pick `instant` or another component that honours
+it. If neither works, keep the component and note the gap in the PR body as a PDS gap, not a
+departure: no screen bends the PDH-F3 floor. Don't override the component from the screen.
 
 ## Before you hand it over