udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/types/components.d.ts

@@ -26,8 +26,11 @@ import { Config, FieldConfig, FormApi } from "final-form";
 import { UdpAccordionItem } from "./components/fluent-ui/accordion/udp-accordion";
 import { CatalogObject, CatalogTreeNode } from "./udp-utilities/catalog/index";
 import { AdvancedFilterConfig } from "./components/advanced-search-builder/models";
+import { AgCartesianChartOptions, AgPolarChartOptions } from "ag-charts-community";
+import { UdpChartAppearance, UdpChartChrome, UdpChartShape } from "./components/charts/charts-theme";
 import { AttachmentItem } from "./components/attachment-list/type";
 import { OptionBadge } from "./components/fluent-ui/dropdown/option-badge";
+import { CalendarOptions, DateInput } from "@fullcalendar/core";
 import { Event, VNode } from "./stencil-public-runtime";
 import { FlexSpacing } from "./components/fluent-ui/flexbox/udp-flexbox";
 import { DateFormat } from "./components/fluent-ui/date-input/udp-date-input";
@@ -79,8 +82,11 @@ export { Config, FieldConfig, FormApi } from "final-form";
 export { UdpAccordionItem } from "./components/fluent-ui/accordion/udp-accordion";
 export { CatalogObject, CatalogTreeNode } from "./udp-utilities/catalog/index";
 export { AdvancedFilterConfig } from "./components/advanced-search-builder/models";
+export { AgCartesianChartOptions, AgPolarChartOptions } from "ag-charts-community";
+export { UdpChartAppearance, UdpChartChrome, UdpChartShape } from "./components/charts/charts-theme";
 export { AttachmentItem } from "./components/attachment-list/type";
 export { OptionBadge } from "./components/fluent-ui/dropdown/option-badge";
+export { CalendarOptions, DateInput } from "@fullcalendar/core";
 export { Event, VNode } from "./stencil-public-runtime";
 export { FlexSpacing } from "./components/fluent-ui/flexbox/udp-flexbox";
 export { DateFormat } from "./components/fluent-ui/date-input/udp-date-input";
@@ -663,6 +669,13 @@ export namespace Components {
          */
         "tileLayersOptions"?: BaseTileLayerOption[];
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It backs the legacy amcharts wrappers and relies on cross-shadow DOM queries
+     * that no longer work. Use the `udp-ag-*` chart components (e.g.
+     * `udp-ag-line-chart`, `udp-ag-bar-chart`, `udp-ag-donut-chart`) instead — they
+     * size themselves and need no container.
+     */
     interface ChartContainer {
         "adjustChartWidthForKpis": boolean;
         "cardWidth": number | string;
@@ -695,6 +708,11 @@ export namespace Components {
         "subheader": string;
         "title": string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It is used only by the deprecated `chart-container`. Use the `udp-ag-*` chart
+     * components instead.
+     */
     interface ChartKpi {
         "label": string;
         "value": string;
@@ -3107,6 +3125,420 @@ export namespace Components {
         "maxDepth"?: number;
         "openAddMenuForGroupId": number | null;
     }
+    /**
+     * Area chart wrapped over `ag-charts-community`.
+     * See https://www.ag-grid.com/charts/javascript/area-series/ for the full
+     * option vocabulary. Consumers opt in by setting
+     * `series: [{ type: 'area', xKey, yKey, ... }]` on `chartOptions`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Because area and line share the `AgCartesianChartOptions` shape, the
+     * `udp-ag-line-chart` wrapper accepts the same options and a consumer
+     * could technically use either — this component exists for
+     * discoverability so consumers looking for "area chart" land on a
+     * dedicated component.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgAreaChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-area-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with an area series — `{ type: 'area', xKey, yKey }`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
+    /**
+     * Bar chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Always memoize `chartOptions` at the call site — a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgBarChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-bar-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a bar series). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
+    /**
+     * Bubble chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Bubble series are cartesian and require `xKey`, `yKey`, and `sizeKey`
+     * on each series entry — `sizeKey` drives the marker radius. See
+     * https://www.ag-grid.com/charts/javascript/bubble-series/ for the full
+     * series option surface (labelKey, colorKey, size / maxSize / domain,
+     * etc.).
+     * Always memoize `chartOptions` at the call site — a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgBubbleChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-bubble-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a bubble series — `type: 'bubble'`, plus `xKey`, `yKey`, and `sizeKey`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` or `rounded`. Bubble markers are unaffected; this only shapes any bar / line / area series sharing the chart. Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
+    /**
+     * Combination (combo) chart wrapped over `ag-charts-community`.
+     * ag-charts has no dedicated "combo" series type — a combination chart is
+     * just an `AgCartesianChartOptions` whose `series` array carries multiple
+     * entries of different `type`s (e.g. one `{ type: 'bar' }` plus one
+     * `{ type: 'line' }`, optionally mixed with `'area'`, `'scatter'`, etc.).
+     * This wrapper exists for discoverability and parity with the rest of the
+     * `udp-ag-*-chart` family; it shares the line / bar wrapper plumbing
+     * verbatim.
+     * For dual-axis combos, declare a second y-axis in `axes` (an object
+     * keyed by axis id, NOT an array) and use the axis's `keys` array to bind
+     * it to specific series `yKey`s — e.g. `axes: { x: { type: 'category',
+     * position: 'bottom' }, y: { type: 'number', position: 'left', keys:
+     * ['revenue'] }, y2: { type: 'number', position: 'right', keys:
+     * ['conversion'] } }`. Series render in array order, so place bars before
+     * lines if you want lines on top.
+     * See https://www.ag-grid.com/charts/javascript/combination-series/.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgComboChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette across the mixed series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-combo-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (an array mixing multiple series types — e.g. `'bar'` plus `'line'`). For dual-axis combos, include an `axes` object (keyed by axis id) and link the extra y-axis to specific series via its `keys` property. The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
+    /**
+     * Donut chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Donut is a polar chart series in ag-charts — pass a series of
+     * `{ type: 'donut', angleKey, ... }` and skip `axes` entirely. The donut
+     * hole is controlled via `innerRadiusRatio` (default `0.7`); set it to a
+     * smaller value for a thicker ring or `0` for a pie. See
+     * https://www.ag-grid.com/charts/javascript/donut-series/.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * The legacy `udp-donut-chart` is an amcharts wrapper — leave that one
+     * alone; reach for this component in new surfaces.
+     */
+    interface UdpAgDonutChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette across sectors), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp, light→dark across sectors), and `colorful` (each sector's label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-donut-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a `'donut'` series type and an `angleKey`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgPolarChartOptions;
+        /**
+          * Chrome density. `full` keeps the legend and padding; `flush` hides the legend and zeroes padding so the donut fills the container edge to edge (the KPI-card look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp sector corners) or `rounded` (rounded sector corners). Per-series `cornerRadius` on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
+    /**
+     * Line chart wrapped over `ag-charts-community`.
+     * See https://www.ag-grid.com/charts/javascript/line-series/ for the full
+     * option vocabulary. Consumers opt in by setting
+     * `series: [{ type: 'line', xKey, yKey, ... }]` on `chartOptions`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Consumers reach for ag-charts' own option vocabulary directly — no
+     * discrete-prop renames to learn, and no risk of the wrapper falling
+     * behind ag-charts feature releases.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * The legacy `udp-line-chart` is an amcharts wrapper still used by
+     * `InsightRenderer` — leave that one alone; reach for this component in
+     * new surfaces.
+     */
+    interface UdpAgLineChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-line-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a line series — `{ type: 'line', xKey, yKey }`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
+    /**
+     * Pie chart wrapped over `ag-charts-community`.
+     * Mirrors `udp-ag-line-chart` / `udp-ag-bar-chart`: one passthrough
+     * `chartOptions` prop carries the full ag-charts options object; the
+     * wrapper owns the brand theme, the transparent chart background,
+     * ag-charts module registration, and the host container. Anything the
+     * consumer passes wins over the wrapper's defaults; `container` is
+     * always wrapper-owned.
+     * Pie is a polar series, so `chartOptions` is typed as
+     * `AgPolarChartOptions` — polar charts have no x/y axes, so consumers
+     * should not pass an `axes` field. Each pie series requires `angleKey`;
+     * `calloutLabelKey` and `sectorLabelKey` are the usual companions for
+     * outer / inner labels. (For a donut, use ag-charts' separate `donut`
+     * series type — same polar options shape.)
+     * See https://www.ag-grid.com/charts/javascript/pie-series/.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgPieChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette across slices), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp, light→dark across slices), and `colorful` (each slice's label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-pie-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a `pie` series type and `angleKey` set). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored. Polar charts do not use `axes`.
+         */
+        "chartOptions": AgPolarChartOptions;
+        /**
+          * Chrome density. `full` keeps the legend and padding; `flush` hides the legend and zeroes padding so the pie fills the container edge to edge (the KPI-card look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp sector corners) or `rounded` (rounded sector corners). Per-series `cornerRadius` on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
+    /**
+     * Scatter chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base` (and the sibling line / bar chart
+     * wrappers): one passthrough `chartOptions` prop carries the full
+     * ag-charts options object; the wrapper owns the brand theme, the
+     * transparent chart background, ag-charts module registration, and the
+     * host container. Anything the consumer passes wins over the wrapper's
+     * defaults; `container` is always wrapper-owned.
+     * Consumers reach for ag-charts' own option vocabulary directly — no
+     * discrete-prop renames to learn, and no risk of the wrapper falling
+     * behind ag-charts feature releases.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * Scatter series require both `xKey` and `yKey` on each series entry
+     * (`type: 'scatter'`) and default to numeric x/y axes. See
+     * https://www.ag-grid.com/charts/javascript/scatter-series/ for the full
+     * option surface (markers, color scales, error bars, etc.). For markers
+     * whose size encodes a third variable, reach for `udp-ag-bubble-chart`
+     * instead — scatter has no `sizeKey`.
+     */
+    interface UdpAgScatterChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance": UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-scatter-chart-${uuid()}`
+         */
+        "chartId": string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a scatter series type — `xKey` and `yKey` are required per series). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome": UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` or `rounded`. Scatter markers are unaffected; this only shapes any bar / line / area series sharing the chart. Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape": UdpChartShape;
+    }
     interface UdpAmbientCard {
         /**
           * @default false
@@ -3305,6 +3737,12 @@ export namespace Components {
           * The current value of the selected option.
          */
         "value": any;
+        /**
+          * Controls the shape of the `valueChanged` payload (see that event's docs): - `'option'` (default): emit the matched option **object** from the source   list (legacy behavior). Convenient when the consumer wants the full option   (label, metadata) on change. - `'value'`: emit the scalar resolved via `optionValue` (a `string`, or   `string[]` in `multiple` mode). This is what form bindings want — the   stored value is the option's id, not the object. Set this when wiring the   autocomplete into a form (Final Form / react-hook-form / `udp-field`).   Feed the emitted scalar(s) back into `value`; label resolution still works   because every internal read goes through `optionValue`. With `freeForm`,   an unmatched typed entry emits its raw string in either mode.
+          * @remarks Default is `'option'` to preserve existing behavior. A future major version is expected to flip the default to `'value'`, since emitting the scalar matches the convention of most component libraries (MUI, Ant Design, Vuetify, Element) and avoids the "[object Object]" / stale-option class of bug in form contexts.
+          * @default 'option'
+         */
+        "valueAs": 'option' | 'value';
     }
     interface UdpAvatar {
         "color": string;
@@ -3325,6 +3763,10 @@ export namespace Components {
          */
         "max": number;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-bar-chart` instead.
+     */
     interface UdpBarChart {
         /**
           * @default undefined
@@ -3538,10 +3980,15 @@ export namespace Components {
           * @default []
          */
         "hiddenDays": number[];
+        "initialDate": DateInput;
         /**
           * @default 'dayGridMonth'
          */
         "initialView": string;
+        /**
+          * @default {}
+         */
+        "options": Partial<CalendarOptions>;
         /**
           * @default '06:00:00'
          */
@@ -3597,25 +4044,25 @@ export namespace Components {
         /**
           * @default {}
          */
-        "props": any;
+        "props": Record<string, any>;
     }
     interface UdpCalendarMonth {
         /**
           * @default {}
          */
-        "props": any;
+        "props": Record<string, any>;
     }
     interface UdpCalendarWeek {
         /**
           * @default {}
          */
-        "props": any;
+        "props": Record<string, any>;
     }
     interface UdpCalendarYear {
         /**
           * @default {}
          */
-        "props": any;
+        "props": Record<string, any>;
     }
     interface UdpCard {
         /**
@@ -3737,7 +4184,7 @@ export namespace Components {
         "title": string;
     }
     /**
-     * component used to render examples of all the charts. Mostly used for dev purposes
+     * Component used to render examples of all the charts. Mostly used for dev purposes.
      */
     interface UdpChartsExample {
     }
@@ -3921,6 +4368,10 @@ export namespace Components {
           * @default 'medium'
          */
         "controlSize": 'small' | 'medium' | 'large';
+        /**
+          * Date display format based on locale/region. Preferred over `format`. - 'MM/DD/YYYY' - US format - 'DD/MM/YYYY' - UK/Europe/Canada format - 'YYYY/MM/DD' - ISO/China/Japan format
+         */
+        "dateFormat": DateFormat;
         /**
           * The type of date selection.
           * @default 'single'
@@ -3936,7 +4387,8 @@ export namespace Components {
          */
         "error": string;
         /**
-          * Date display format based on locale/region. - 'MM/DD/YYYY' - US format - 'DD/MM/YYYY' - UK/Europe/Canada format - 'YYYY/MM/DD' - ISO/China/Japan format Defaults to browser locale detection if not specified.
+          * Date display format based on locale/region. - 'MM/DD/YYYY' - US format - 'DD/MM/YYYY' - UK/Europe/Canada format - 'YYYY/MM/DD' - ISO/China/Japan format
+          * @deprecated Use `dateFormat` instead. `format` collides with the reserved `format` prop of form libraries (e.g. react-final-form's `<Field>`), which treats it as a value-formatter function. Retained as an alias; `dateFormat` takes precedence when both are set.
           * @default 'MM/DD/YYYY'
          */
         "format": DateFormat;
@@ -4156,6 +4608,10 @@ export namespace Components {
           * @default 'medium'
          */
         "controlSize": 'small' | 'medium' | 'large';
+        /**
+          * Date display format. Preferred over `format`.
+         */
+        "dateFormat": DateFormat1;
         /**
           * Whether the input is disabled.
           * @default false
@@ -4167,6 +4623,7 @@ export namespace Components {
         "error": string;
         /**
           * Date display format.
+          * @deprecated Use `dateFormat` instead. `format` collides with the reserved `format` prop of form libraries (e.g. react-final-form's `<Field>`), which treats it as a value-formatter function. Retained as an alias; `dateFormat` takes precedence when both are set.
           * @default 'MM/DD/YYYY'
          */
         "format": DateFormat1;
@@ -4437,6 +4894,10 @@ export namespace Components {
          */
         "titleId": string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-bar-chart` instead.
+     */
     interface UdpDistributionChart {
         /**
           * @default uuid()
@@ -4503,6 +4964,10 @@ export namespace Components {
          */
         "variant": 'horizontal' | 'vertical';
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-donut-chart` (or `udp-ag-pie-chart`) instead.
+     */
     interface UdpDonutChart {
         /**
           * @default uuid()
@@ -5316,6 +5781,12 @@ export namespace Components {
           * The current value of the selected option.
          */
         "value": any;
+        /**
+          * Controls the shape of the `valueChanged` payload (see that event's docs): - `'option'` (default): emit the matched option **object** from `options`   (legacy behavior). Convenient when the consumer wants the full option   (label, metadata) on change. - `'value'`: emit the scalar resolved via `optionValue` (a `string`, or   `string[]` in `multiple` mode). This is what form bindings want — the   stored value is the option's id, not the object. Set this when wiring the   dropdown into a form (Final Form / react-hook-form / `udp-field`).
+          * @remarks Default is `'option'` to preserve existing behavior. A future major version is expected to flip the default to `'value'`, since emitting the scalar matches the convention of most component libraries (MUI, Ant Design, Vuetify, Element) and avoids the "[object Object]" / stale-option class of bug in form contexts.
+          * @default 'option'
+         */
+        "valueAs": 'option' | 'value';
     }
     /**
      * Fluent-styled file input. Renders a drop zone + browse button + selected-item
@@ -5883,11 +6354,35 @@ export namespace Components {
         "startIconName": string;
     }
     /**
-     * Radio group component. Can be used standalone or as part of a udp-field.
+     * Number input component with min/max/step constraints and decimal capping.
      */
-    interface UdpFluentRadioGroup {
+    interface UdpFluentNumberInput {
         /**
-          * Disables the radio group and child radios.
+          * The visual appearance of the input.
+          * @default 'outline'
+         */
+        "appearance": 'outline' | 'underline' | 'filled-lighter' | 'filled-darker';
+        /**
+          * Hints to the browser about what kind of data is expected. Defaults to "off" to suppress the browser's recent-values dropdown.
+          * @default 'off'
+         */
+        "autocomplete": string;
+        /**
+          * Whether the input should automatically focus when the page loads.
+          * @default false
+         */
+        "autofocus": boolean;
+        /**
+          * The size of the input control.
+          * @default 'medium'
+         */
+        "controlSize": 'small' | 'medium' | 'large';
+        /**
+          * Maximum number of decimal places. On blur, the value is rounded to this precision.
+         */
+        "decimals": number;
+        /**
+          * Whether the input is disabled and cannot be interacted with.
           * @default false
          */
         "disabled": boolean;
@@ -5896,43 +6391,112 @@ export namespace Components {
          */
         "error": string;
         /**
-          * Helper text displayed below the input to provide additional context.
+          * Helper text displayed below the input.
          */
         "hint": string;
         /**
-          * Whether to reserve space for error/helper text to prevent layout shift.
+          * Whether to include error padding below the input.
           * @default true
          */
         "includeErrorPadding": boolean;
         /**
-          * The items to display in the radio group.
+          * The label text displayed above the input.
          */
-        "items": RadioGroupItem[];
+        "label": string;
         /**
-          * The label for the radio group.
+          * Maximum allowed value. Enforced by the browser via native input constraints.
          */
-        "label": string;
+        "max": string;
         /**
-          * The name of the radio group.
+          * Minimum allowed value. Enforced by the browser via native input constraints.
+         */
+        "min": string;
+        /**
+          * The name of the input.
          */
         "name": string;
         /**
-          * The orientation of the group.
-          * @default 'horizontal'
+          * Placeholder text displayed when the input is empty.
          */
-        "orientation": 'horizontal' | 'vertical';
+        "placeholder": string;
         /**
-          * Helper text displayed on click of info icon in label
+          * Helper text displayed on click of info icon in label.
          */
         "popupHint": string;
         /**
-          * The current value of the checked radio.
+          * Whether the input is read-only.
+          * @default false
          */
-        "value": string;
-    }
-    /**
-     * Fluent-styled signature pad. Wraps the `signature_pad` library with a
-     * `<fluent-field>` envelope, an optional companion full-name input, and
+        "readonly": boolean;
+        /**
+          * Whether the input is required for form submission.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Selects the text in the input.
+         */
+        "select": () => Promise<void>;
+        /**
+          * Step increment for the spinner (e.g. "0.5", "0.01", "1").
+         */
+        "step": string;
+        /**
+          * The current value of the input.
+         */
+        "value": string;
+    }
+    /**
+     * Radio group component. Can be used standalone or as part of a udp-field.
+     */
+    interface UdpFluentRadioGroup {
+        /**
+          * Disables the radio group and child radios.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Error message text displayed below the input when validation fails.
+         */
+        "error": string;
+        /**
+          * Helper text displayed below the input to provide additional context.
+         */
+        "hint": string;
+        /**
+          * Whether to reserve space for error/helper text to prevent layout shift.
+          * @default true
+         */
+        "includeErrorPadding": boolean;
+        /**
+          * The items to display in the radio group.
+         */
+        "items": RadioGroupItem[];
+        /**
+          * The label for the radio group.
+         */
+        "label": string;
+        /**
+          * The name of the radio group.
+         */
+        "name": string;
+        /**
+          * The orientation of the group.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * Helper text displayed on click of info icon in label
+         */
+        "popupHint": string;
+        /**
+          * The current value of the checked radio.
+         */
+        "value": string;
+    }
+    /**
+     * Fluent-styled signature pad. Wraps the `signature_pad` library with a
+     * `<fluent-field>` envelope, an optional companion full-name input, and
      * stroke-time metadata capture (timestamp + optional geolocation).
      * Controlled via `value: SignatureValue` — pass a fresh reference to update
      * the canvas / full-name field. Emits `valueChanged` on stroke-end, full-name
@@ -6683,6 +7247,10 @@ export namespace Components {
          */
         "unmountDelay": number;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-line-chart` instead.
+     */
     interface UdpLineChart {
         /**
           * @default uuid()
@@ -7441,6 +8009,11 @@ export namespace Components {
         "name": string;
         "value": string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It is amcharts-based; there is no `ag-charts-community` sankey equivalent, so
+     * no direct replacement exists yet. Avoid new usage.
+     */
     interface UdpSankeyChart {
         /**
           * @default uuid()
@@ -7790,6 +8363,54 @@ export namespace Components {
          */
         "width": 'sm' | 'md' | 'lg' | 'full' | number;
     }
+    /**
+     * Two-pane page layout: a collapsible sidebar beside a main content area. The
+     * sidebar is meant to hold a tree, list, or outline (drop one into the
+     * `sidebar` slot); the page body goes in the default slot.
+     * Collapse is self-contained — the sidebar header carries a collapse button and,
+     * when collapsed, the sidebar shrinks to a slim rail with an expand button, so no
+     * external control is needed. Set `stickyOffset` to pin the sidebar below a fixed
+     * page header so it scrolls independently while the main column flows with the page.
+     */
+    interface UdpSidebarLayout {
+        /**
+          * When false, the collapse affordance is hidden and the sidebar stays open.
+          * @default true
+         */
+        "collapsible": boolean;
+        /**
+          * Fill the host's container top-to-bottom: the layout becomes `height: 100%` and the sidebar + main column each scroll independently inside it. Use when the layout is placed in a height-bearing region (e.g. a flex/grid cell or a fixed-height scroll area) and you want the sidebar to always span the full height regardless of content. Takes precedence over `stickyOffset`.
+          * @default false
+         */
+        "fill": boolean;
+        /**
+          * Whether the sidebar is expanded (`true`) or collapsed to a rail (`false`). Mutable so the built-in toggle works; consumers may bind/read it and listen to `openChange`.
+          * @default true
+         */
+        "open": boolean;
+        /**
+          * Which side the sidebar sits on.
+          * @default 'start'
+         */
+        "sidebarPosition": 'start' | 'end';
+        /**
+          * Title shown in the sidebar header. Ignored when a `sidebar-header` slot is provided.
+         */
+        "sidebarTitle"?: string;
+        /**
+          * Expanded sidebar width — any CSS length.
+          * @default '264px'
+         */
+        "sidebarWidth": string;
+        /**
+          * When set, the sidebar (and its collapsed rail) is `position: sticky`, pinned this far from the top of the scroll container, with a matching `max-height` so it scrolls on its own. Any CSS length — e.g. `"64px"` or `"var(--app-header-h)"`. Omit for a sidebar that flows with the page. Ignored when `fill` is set.
+         */
+        "stickyOffset"?: string;
+        /**
+          * Toggle the sidebar open/collapsed.
+         */
+        "toggle": () => Promise<void>;
+    }
     interface UdpSkeletonLoading {
         /**
           * @default '4px'
@@ -8464,10 +9085,28 @@ export namespace Components {
           * @default 'subtle'
          */
         "appearance": 'subtle' | 'transparent';
+        /**
+          * When `true`, parent rows get a disclosure chevron that toggles their expansion, while the rest of the row keeps its normal click behavior. Designed to pair with `interaction="button"`: clicking a row body still emits `itemClick` (open details), but clicking the chevron only expands/collapses that group — it neither selects the row nor emits `itemClick`. Initial open/closed state is seeded from `itemExpanded` (so a tree can render fully expanded on load); the user's subsequent collapse/expand choices are owned internally and persist by id across re-renders. No effect in `interaction="tree"` mode, where Fluent's native row-click already toggles expansion.
+          * @default false
+         */
+        "collapsible": boolean;
+        /**
+          * How a row click behaves:  - `'tree'` (default): native Fluent tree behavior — clicking a row toggles    its expansion and selects it; `itemClick` fires for the directly-clicked    row. Selection is managed internally by Fluent.  - `'button'`: rows act as buttons. A click anywhere on the row (icon, text,    aside) emits `itemClick` exactly once and stops there — no built-in    expand toggle and no internal selection. Pair with `selectedId` (for the    highlight) and `itemExpanded` (to control which parents are open).
+          * @default 'tree'
+         */
+        "interaction": 'tree' | 'button';
         /**
           * Path to the aside slot property, or a function to generate the aside slot content.
          */
         "itemAside"?: string | ((item: any) => any);
+        /**
+          * Path to an avatar descriptor (or a function returning one) rendered in the row's start slot as a `<udp-fluent-avatar>`: `{ name?, initials?, src?, color?, shape?, size?, iconName? }`. Takes precedence over `itemIcon` when both resolve.
+         */
+        "itemAvatar"?: string | ((item: any) => any);
+        /**
+          * Path to a badge value (or a function returning one) rendered in the row's end slot as a `<udp-fluent-badge>`. A scalar becomes the badge content; an object `{ content?, color?, appearance?, shape?, size?, startIconName?, endIconName? }` controls its appearance.
+         */
+        "itemBadge"?: string | ((item: any) => any);
         /**
           * Path to the content property, or a function to generate the content (default slot).
           * @default 'label'
@@ -8477,6 +9116,14 @@ export namespace Components {
           * Path to the end slot property, or a function to generate the end slot content.
          */
         "itemEnd"?: string | ((item: any) => any);
+        /**
+          * Path to a boolean "expanded" property, or a function returning whether the item should render expanded. Only meaningful for items that have children. Useful for trees that should render fully (or partly) expanded on load.
+         */
+        "itemExpanded"?: string | ((item: any) => boolean);
+        /**
+          * Path to an icon name (or a function returning one) rendered in the row's start slot as a `<udp-fluent-icon>`. Use for type/category icons. A function may also return `{ name, color?, size? }` for per-row control. Mutually exclusive with `itemAvatar` (avatar wins when both resolve). Rendered inside this component's shadow, so the row chrome in udp-tree.css styles it — unlike a consumer-slotted icon, which a shadow stylesheet can't reach via `::part`.
+         */
+        "itemIcon"?: string | ((item: any) => any);
         /**
           * Path to the id property, or a function to generate the id.
           * @default 'id'
@@ -8491,6 +9138,10 @@ export namespace Components {
           * Path to the start slot property, or a function to generate the start slot content.
          */
         "itemStart"?: string | ((item: any) => any);
+        /**
+          * Id of the item that should render as selected. Compared against each item's resolved id (`itemId`). Drives the selected appearance from the outside so the consumer owns "which row is active" as a single source of truth.
+         */
+        "selectedId"?: string | number;
         /**
           * The size of the tree item element.
           * @default 'medium'
@@ -8509,6 +9160,11 @@ export namespace Components {
          */
         "unit": FlexSpacing2;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use the `udp-ag-*` chart components instead — `udp-ag-line-chart`,
+     * `udp-ag-bar-chart`, or `udp-ag-scatter-chart` depending on the series type.
+     */
     interface UdpXyChart {
         /**
           * @default undefined
@@ -8608,6 +9264,10 @@ export namespace Components {
          */
         "yDataType": string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-line-chart` (or `udp-ag-combo-chart` for mixed series) instead.
+     */
     interface UdpXyMultiSeriesChart {
         /**
           * @default undefined
@@ -8942,6 +9602,10 @@ export interface UdpFluentMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLUdpFluentMenuElement;
 }
+export interface UdpFluentNumberInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLUdpFluentNumberInputElement;
+}
 export interface UdpFluentRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLUdpFluentRadioGroupElement;
@@ -9042,6 +9706,10 @@ export interface UdpSideSheetCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLUdpSideSheetElement;
 }
+export interface UdpSidebarLayoutCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLUdpSidebarLayoutElement;
+}
 export interface UdpSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLUdpSliderElement;
@@ -9226,12 +9894,24 @@ declare global {
         prototype: HTMLBaseMapElement;
         new (): HTMLBaseMapElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It backs the legacy amcharts wrappers and relies on cross-shadow DOM queries
+     * that no longer work. Use the `udp-ag-*` chart components (e.g.
+     * `udp-ag-line-chart`, `udp-ag-bar-chart`, `udp-ag-donut-chart`) instead — they
+     * size themselves and need no container.
+     */
     interface HTMLChartContainerElement extends Components.ChartContainer, HTMLStencilElement {
     }
     var HTMLChartContainerElement: {
         prototype: HTMLChartContainerElement;
         new (): HTMLChartContainerElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It is used only by the deprecated `chart-container`. Use the `udp-ag-*` chart
+     * components instead.
+     */
     interface HTMLChartKpiElement extends Components.ChartKpi, HTMLStencilElement {
     }
     var HTMLChartKpiElement: {
@@ -10245,6 +10925,196 @@ declare global {
         prototype: HTMLUdpAdvancedSearchFilterGroupElement;
         new (): HTMLUdpAdvancedSearchFilterGroupElement;
     };
+    /**
+     * Area chart wrapped over `ag-charts-community`.
+     * See https://www.ag-grid.com/charts/javascript/area-series/ for the full
+     * option vocabulary. Consumers opt in by setting
+     * `series: [{ type: 'area', xKey, yKey, ... }]` on `chartOptions`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Because area and line share the `AgCartesianChartOptions` shape, the
+     * `udp-ag-line-chart` wrapper accepts the same options and a consumer
+     * could technically use either — this component exists for
+     * discoverability so consumers looking for "area chart" land on a
+     * dedicated component.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface HTMLUdpAgAreaChartElement extends Components.UdpAgAreaChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgAreaChartElement: {
+        prototype: HTMLUdpAgAreaChartElement;
+        new (): HTMLUdpAgAreaChartElement;
+    };
+    /**
+     * Bar chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Always memoize `chartOptions` at the call site — a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface HTMLUdpAgBarChartElement extends Components.UdpAgBarChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgBarChartElement: {
+        prototype: HTMLUdpAgBarChartElement;
+        new (): HTMLUdpAgBarChartElement;
+    };
+    /**
+     * Bubble chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Bubble series are cartesian and require `xKey`, `yKey`, and `sizeKey`
+     * on each series entry — `sizeKey` drives the marker radius. See
+     * https://www.ag-grid.com/charts/javascript/bubble-series/ for the full
+     * series option surface (labelKey, colorKey, size / maxSize / domain,
+     * etc.).
+     * Always memoize `chartOptions` at the call site — a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface HTMLUdpAgBubbleChartElement extends Components.UdpAgBubbleChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgBubbleChartElement: {
+        prototype: HTMLUdpAgBubbleChartElement;
+        new (): HTMLUdpAgBubbleChartElement;
+    };
+    /**
+     * Combination (combo) chart wrapped over `ag-charts-community`.
+     * ag-charts has no dedicated "combo" series type — a combination chart is
+     * just an `AgCartesianChartOptions` whose `series` array carries multiple
+     * entries of different `type`s (e.g. one `{ type: 'bar' }` plus one
+     * `{ type: 'line' }`, optionally mixed with `'area'`, `'scatter'`, etc.).
+     * This wrapper exists for discoverability and parity with the rest of the
+     * `udp-ag-*-chart` family; it shares the line / bar wrapper plumbing
+     * verbatim.
+     * For dual-axis combos, declare a second y-axis in `axes` (an object
+     * keyed by axis id, NOT an array) and use the axis's `keys` array to bind
+     * it to specific series `yKey`s — e.g. `axes: { x: { type: 'category',
+     * position: 'bottom' }, y: { type: 'number', position: 'left', keys:
+     * ['revenue'] }, y2: { type: 'number', position: 'right', keys:
+     * ['conversion'] } }`. Series render in array order, so place bars before
+     * lines if you want lines on top.
+     * See https://www.ag-grid.com/charts/javascript/combination-series/.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface HTMLUdpAgComboChartElement extends Components.UdpAgComboChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgComboChartElement: {
+        prototype: HTMLUdpAgComboChartElement;
+        new (): HTMLUdpAgComboChartElement;
+    };
+    /**
+     * Donut chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Donut is a polar chart series in ag-charts — pass a series of
+     * `{ type: 'donut', angleKey, ... }` and skip `axes` entirely. The donut
+     * hole is controlled via `innerRadiusRatio` (default `0.7`); set it to a
+     * smaller value for a thicker ring or `0` for a pie. See
+     * https://www.ag-grid.com/charts/javascript/donut-series/.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * The legacy `udp-donut-chart` is an amcharts wrapper — leave that one
+     * alone; reach for this component in new surfaces.
+     */
+    interface HTMLUdpAgDonutChartElement extends Components.UdpAgDonutChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgDonutChartElement: {
+        prototype: HTMLUdpAgDonutChartElement;
+        new (): HTMLUdpAgDonutChartElement;
+    };
+    /**
+     * Line chart wrapped over `ag-charts-community`.
+     * See https://www.ag-grid.com/charts/javascript/line-series/ for the full
+     * option vocabulary. Consumers opt in by setting
+     * `series: [{ type: 'line', xKey, yKey, ... }]` on `chartOptions`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Consumers reach for ag-charts' own option vocabulary directly — no
+     * discrete-prop renames to learn, and no risk of the wrapper falling
+     * behind ag-charts feature releases.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * The legacy `udp-line-chart` is an amcharts wrapper still used by
+     * `InsightRenderer` — leave that one alone; reach for this component in
+     * new surfaces.
+     */
+    interface HTMLUdpAgLineChartElement extends Components.UdpAgLineChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgLineChartElement: {
+        prototype: HTMLUdpAgLineChartElement;
+        new (): HTMLUdpAgLineChartElement;
+    };
+    /**
+     * Pie chart wrapped over `ag-charts-community`.
+     * Mirrors `udp-ag-line-chart` / `udp-ag-bar-chart`: one passthrough
+     * `chartOptions` prop carries the full ag-charts options object; the
+     * wrapper owns the brand theme, the transparent chart background,
+     * ag-charts module registration, and the host container. Anything the
+     * consumer passes wins over the wrapper's defaults; `container` is
+     * always wrapper-owned.
+     * Pie is a polar series, so `chartOptions` is typed as
+     * `AgPolarChartOptions` — polar charts have no x/y axes, so consumers
+     * should not pass an `axes` field. Each pie series requires `angleKey`;
+     * `calloutLabelKey` and `sectorLabelKey` are the usual companions for
+     * outer / inner labels. (For a donut, use ag-charts' separate `donut`
+     * series type — same polar options shape.)
+     * See https://www.ag-grid.com/charts/javascript/pie-series/.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface HTMLUdpAgPieChartElement extends Components.UdpAgPieChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgPieChartElement: {
+        prototype: HTMLUdpAgPieChartElement;
+        new (): HTMLUdpAgPieChartElement;
+    };
+    /**
+     * Scatter chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base` (and the sibling line / bar chart
+     * wrappers): one passthrough `chartOptions` prop carries the full
+     * ag-charts options object; the wrapper owns the brand theme, the
+     * transparent chart background, ag-charts module registration, and the
+     * host container. Anything the consumer passes wins over the wrapper's
+     * defaults; `container` is always wrapper-owned.
+     * Consumers reach for ag-charts' own option vocabulary directly — no
+     * discrete-prop renames to learn, and no risk of the wrapper falling
+     * behind ag-charts feature releases.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * Scatter series require both `xKey` and `yKey` on each series entry
+     * (`type: 'scatter'`) and default to numeric x/y axes. See
+     * https://www.ag-grid.com/charts/javascript/scatter-series/ for the full
+     * option surface (markers, color scales, error bars, etc.). For markers
+     * whose size encodes a third variable, reach for `udp-ag-bubble-chart`
+     * instead — scatter has no `sizeKey`.
+     */
+    interface HTMLUdpAgScatterChartElement extends Components.UdpAgScatterChart, HTMLStencilElement {
+    }
+    var HTMLUdpAgScatterChartElement: {
+        prototype: HTMLUdpAgScatterChartElement;
+        new (): HTMLUdpAgScatterChartElement;
+    };
     interface HTMLUdpAmbientCardElement extends Components.UdpAmbientCard, HTMLStencilElement {
     }
     var HTMLUdpAmbientCardElement: {
@@ -10304,6 +11174,10 @@ declare global {
         prototype: HTMLUdpBadgeElement;
         new (): HTMLUdpBadgeElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-bar-chart` instead.
+     */
     interface HTMLUdpBarChartElement extends Components.UdpBarChart, HTMLStencilElement {
     }
     var HTMLUdpBarChartElement: {
@@ -10423,7 +11297,7 @@ declare global {
         new (): HTMLUdpCardMediaElement;
     };
     /**
-     * component used to render examples of all the charts. Mostly used for dev purposes
+     * Component used to render examples of all the charts. Mostly used for dev purposes.
      */
     interface HTMLUdpChartsExampleElement extends Components.UdpChartsExample, HTMLStencilElement {
     }
@@ -10694,6 +11568,10 @@ declare global {
         prototype: HTMLUdpDialogElement;
         new (): HTMLUdpDialogElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-bar-chart` instead.
+     */
     interface HTMLUdpDistributionChartElement extends Components.UdpDistributionChart, HTMLStencilElement {
     }
     var HTMLUdpDistributionChartElement: {
@@ -10706,6 +11584,10 @@ declare global {
         prototype: HTMLUdpDividerElement;
         new (): HTMLUdpDividerElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-donut-chart` (or `udp-ag-pie-chart`) instead.
+     */
     interface HTMLUdpDonutChartElement extends Components.UdpDonutChart, HTMLStencilElement {
     }
     var HTMLUdpDonutChartElement: {
@@ -11088,6 +11970,28 @@ declare global {
         prototype: HTMLUdpFluentMenuElement;
         new (): HTMLUdpFluentMenuElement;
     };
+    interface HTMLUdpFluentNumberInputElementEventMap {
+        "valueChanged": string;
+        "inputBlur": void;
+        "inputFocus": void;
+    }
+    /**
+     * Number input component with min/max/step constraints and decimal capping.
+     */
+    interface HTMLUdpFluentNumberInputElement extends Components.UdpFluentNumberInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLUdpFluentNumberInputElementEventMap>(type: K, listener: (this: HTMLUdpFluentNumberInputElement, ev: UdpFluentNumberInputCustomEvent<HTMLUdpFluentNumberInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLUdpFluentNumberInputElementEventMap>(type: K, listener: (this: HTMLUdpFluentNumberInputElement, ev: UdpFluentNumberInputCustomEvent<HTMLUdpFluentNumberInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLUdpFluentNumberInputElement: {
+        prototype: HTMLUdpFluentNumberInputElement;
+        new (): HTMLUdpFluentNumberInputElement;
+    };
     interface HTMLUdpFluentRadioGroupElementEventMap {
         "valueChanged": string;
     }
@@ -11433,6 +12337,10 @@ declare global {
         prototype: HTMLUdpLazyLoaderElement;
         new (): HTMLUdpLazyLoaderElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-line-chart` instead.
+     */
     interface HTMLUdpLineChartElement extends Components.UdpLineChart, HTMLStencilElement {
     }
     var HTMLUdpLineChartElement: {
@@ -11721,6 +12629,11 @@ declare global {
         prototype: HTMLUdpRadioButtonElement;
         new (): HTMLUdpRadioButtonElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It is amcharts-based; there is no `ag-charts-community` sankey equivalent, so
+     * no direct replacement exists yet. Avoid new usage.
+     */
     interface HTMLUdpSankeyChartElement extends Components.UdpSankeyChart, HTMLStencilElement {
     }
     var HTMLUdpSankeyChartElement: {
@@ -11816,6 +12729,32 @@ declare global {
         prototype: HTMLUdpSideSheetElement;
         new (): HTMLUdpSideSheetElement;
     };
+    interface HTMLUdpSidebarLayoutElementEventMap {
+        "openChange": boolean;
+    }
+    /**
+     * Two-pane page layout: a collapsible sidebar beside a main content area. The
+     * sidebar is meant to hold a tree, list, or outline (drop one into the
+     * `sidebar` slot); the page body goes in the default slot.
+     * Collapse is self-contained — the sidebar header carries a collapse button and,
+     * when collapsed, the sidebar shrinks to a slim rail with an expand button, so no
+     * external control is needed. Set `stickyOffset` to pin the sidebar below a fixed
+     * page header so it scrolls independently while the main column flows with the page.
+     */
+    interface HTMLUdpSidebarLayoutElement extends Components.UdpSidebarLayout, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLUdpSidebarLayoutElementEventMap>(type: K, listener: (this: HTMLUdpSidebarLayoutElement, ev: UdpSidebarLayoutCustomEvent<HTMLUdpSidebarLayoutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLUdpSidebarLayoutElementEventMap>(type: K, listener: (this: HTMLUdpSidebarLayoutElement, ev: UdpSidebarLayoutCustomEvent<HTMLUdpSidebarLayoutElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLUdpSidebarLayoutElement: {
+        prototype: HTMLUdpSidebarLayoutElement;
+        new (): HTMLUdpSidebarLayoutElement;
+    };
     interface HTMLUdpSkeletonLoadingElement extends Components.UdpSkeletonLoading, HTMLStencilElement {
     }
     var HTMLUdpSkeletonLoadingElement: {
@@ -12101,12 +13040,21 @@ declare global {
         prototype: HTMLUdpVerticalSpacerElement;
         new (): HTMLUdpVerticalSpacerElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use the `udp-ag-*` chart components instead — `udp-ag-line-chart`,
+     * `udp-ag-bar-chart`, or `udp-ag-scatter-chart` depending on the series type.
+     */
     interface HTMLUdpXyChartElement extends Components.UdpXyChart, HTMLStencilElement {
     }
     var HTMLUdpXyChartElement: {
         prototype: HTMLUdpXyChartElement;
         new (): HTMLUdpXyChartElement;
     };
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-line-chart` (or `udp-ag-combo-chart` for mixed series) instead.
+     */
     interface HTMLUdpXyMultiSeriesChartElement extends Components.UdpXyMultiSeriesChart, HTMLStencilElement {
     }
     var HTMLUdpXyMultiSeriesChartElement: {
@@ -12210,6 +13158,14 @@ declare global {
         "udp-adornment": HTMLUdpAdornmentElement;
         "udp-advanced-search-builder": HTMLUdpAdvancedSearchBuilderElement;
         "udp-advanced-search-filter-group": HTMLUdpAdvancedSearchFilterGroupElement;
+        "udp-ag-area-chart": HTMLUdpAgAreaChartElement;
+        "udp-ag-bar-chart": HTMLUdpAgBarChartElement;
+        "udp-ag-bubble-chart": HTMLUdpAgBubbleChartElement;
+        "udp-ag-combo-chart": HTMLUdpAgComboChartElement;
+        "udp-ag-donut-chart": HTMLUdpAgDonutChartElement;
+        "udp-ag-line-chart": HTMLUdpAgLineChartElement;
+        "udp-ag-pie-chart": HTMLUdpAgPieChartElement;
+        "udp-ag-scatter-chart": HTMLUdpAgScatterChartElement;
         "udp-ambient-card": HTMLUdpAmbientCardElement;
         "udp-ambient-tool-tip": HTMLUdpAmbientToolTipElement;
         "udp-attachment-item": HTMLUdpAttachmentItemElement;
@@ -12274,6 +13230,7 @@ declare global {
         "udp-fluent-list-item": HTMLUdpFluentListItemElement;
         "udp-fluent-location-input": HTMLUdpFluentLocationInputElement;
         "udp-fluent-menu": HTMLUdpFluentMenuElement;
+        "udp-fluent-number-input": HTMLUdpFluentNumberInputElement;
         "udp-fluent-radio-group": HTMLUdpFluentRadioGroupElement;
         "udp-fluent-signature-input": HTMLUdpFluentSignatureInputElement;
         "udp-fluent-switch": HTMLUdpFluentSwitchElement;
@@ -12326,6 +13283,7 @@ declare global {
         "udp-search-input": HTMLUdpSearchInputElement;
         "udp-selector": HTMLUdpSelectorElement;
         "udp-side-sheet": HTMLUdpSideSheetElement;
+        "udp-sidebar-layout": HTMLUdpSidebarLayoutElement;
         "udp-skeleton-loading": HTMLUdpSkeletonLoadingElement;
         "udp-slider": HTMLUdpSliderElement;
         "udp-spinner": HTMLUdpSpinnerElement;
@@ -12921,6 +13879,13 @@ declare namespace LocalJSX {
          */
         "tileLayersOptions"?: BaseTileLayerOption[];
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It backs the legacy amcharts wrappers and relies on cross-shadow DOM queries
+     * that no longer work. Use the `udp-ag-*` chart components (e.g.
+     * `udp-ag-line-chart`, `udp-ag-bar-chart`, `udp-ag-donut-chart`) instead — they
+     * size themselves and need no container.
+     */
     interface ChartContainer {
         "adjustChartWidthForKpis"?: boolean;
         "cardWidth"?: number | string;
@@ -12953,6 +13918,11 @@ declare namespace LocalJSX {
         "subheader"?: string;
         "title"?: string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It is used only by the deprecated `chart-container`. Use the `udp-ag-*` chart
+     * components instead.
+     */
     interface ChartKpi {
         "label"?: string;
         "value"?: string;
@@ -15419,66 +16389,480 @@ declare namespace LocalJSX {
           * The configuration for the field tree
           * @default {}
          */
-        "config"?: AdvancedFilterConfig;
+        "config"?: AdvancedFilterConfig;
+        /**
+          * The name of the entity to build the field tree for
+         */
+        "entityName"?: string;
+        /**
+          * The initial filter data to use for the field tree
+         */
+        "initialFilterData"?: Search;
+        /**
+          * The maximum depth to traverse when building the field tree
+          * @default 2
+         */
+        "maxDepth"?: number;
+        /**
+          * Emits the filter data when the filter is saved
+         */
+        "onFilterSave"?: (event: UdpAdvancedSearchBuilderCustomEvent<Search>) => void;
+        /**
+          * Emits the filter data when the filter is changed
+         */
+        "onSearchChange"?: (event: UdpAdvancedSearchBuilderCustomEvent<Search>) => void;
+    }
+    interface UdpAdvancedSearchFilterGroup {
+        /**
+          * @default []
+         */
+        "errorMessages"?: string[];
+        "fields"?: CatalogTreeNode[];
+        "filterData"?: Search;
+        "groupId"?: number;
+        /**
+          * @default true
+         */
+        "isFilterValid"?: boolean;
+        /**
+          * @default false
+         */
+        "isRoot"?: boolean;
+        /**
+          * Current max depth (only meaningful for the root group, which renders the depth selector).
+         */
+        "maxDepth"?: number;
+        "onAddFilter"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
+        "onAddGroup"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
+        /**
+          * Emitted when the user changes the max depth from the root group's depth selector.
+         */
+        "onDepthChange"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
+        "onFilterChange"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<{
+    filterId: string;
+    field?: string;
+    value?: any;
+    updates?: { [key: string]: any };
+  }>) => void;
+        "onGroupChange"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<{ groupId: number; logicalSearchOperator: 1 | 2 }>) => void;
+        "onRemoveFilter"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<string>) => void;
+        "onRemoveGroup"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
+        "onToggleAddMenu"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
+        "openAddMenuForGroupId"?: number | null;
+    }
+    /**
+     * Area chart wrapped over `ag-charts-community`.
+     * See https://www.ag-grid.com/charts/javascript/area-series/ for the full
+     * option vocabulary. Consumers opt in by setting
+     * `series: [{ type: 'area', xKey, yKey, ... }]` on `chartOptions`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Because area and line share the `AgCartesianChartOptions` shape, the
+     * `udp-ag-line-chart` wrapper accepts the same options and a consumer
+     * could technically use either — this component exists for
+     * discoverability so consumers looking for "area chart" land on a
+     * dedicated component.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgAreaChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance"?: UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-area-chart-${uuid()}`
+         */
+        "chartId"?: string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with an area series — `{ type: 'area', xKey, yKey }`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome"?: UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape"?: UdpChartShape;
+    }
+    /**
+     * Bar chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Always memoize `chartOptions` at the call site — a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgBarChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance"?: UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-bar-chart-${uuid()}`
+         */
+        "chartId"?: string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a bar series). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome"?: UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape"?: UdpChartShape;
+    }
+    /**
+     * Bubble chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Bubble series are cartesian and require `xKey`, `yKey`, and `sizeKey`
+     * on each series entry — `sizeKey` drives the marker radius. See
+     * https://www.ag-grid.com/charts/javascript/bubble-series/ for the full
+     * series option surface (labelKey, colorKey, size / maxSize / domain,
+     * etc.).
+     * Always memoize `chartOptions` at the call site — a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgBubbleChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance"?: UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-bubble-chart-${uuid()}`
+         */
+        "chartId"?: string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a bubble series — `type: 'bubble'`, plus `xKey`, `yKey`, and `sizeKey`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome"?: UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` or `rounded`. Bubble markers are unaffected; this only shapes any bar / line / area series sharing the chart. Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape"?: UdpChartShape;
+    }
+    /**
+     * Combination (combo) chart wrapped over `ag-charts-community`.
+     * ag-charts has no dedicated "combo" series type — a combination chart is
+     * just an `AgCartesianChartOptions` whose `series` array carries multiple
+     * entries of different `type`s (e.g. one `{ type: 'bar' }` plus one
+     * `{ type: 'line' }`, optionally mixed with `'area'`, `'scatter'`, etc.).
+     * This wrapper exists for discoverability and parity with the rest of the
+     * `udp-ag-*-chart` family; it shares the line / bar wrapper plumbing
+     * verbatim.
+     * For dual-axis combos, declare a second y-axis in `axes` (an object
+     * keyed by axis id, NOT an array) and use the axis's `keys` array to bind
+     * it to specific series `yKey`s — e.g. `axes: { x: { type: 'category',
+     * position: 'bottom' }, y: { type: 'number', position: 'left', keys:
+     * ['revenue'] }, y2: { type: 'number', position: 'right', keys:
+     * ['conversion'] } }`. Series render in array order, so place bars before
+     * lines if you want lines on top.
+     * See https://www.ag-grid.com/charts/javascript/combination-series/.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgComboChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette across the mixed series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance"?: UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-combo-chart-${uuid()}`
+         */
+        "chartId"?: string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (an array mixing multiple series types — e.g. `'bar'` plus `'line'`). For dual-axis combos, include an `axes` object (keyed by axis id) and link the extra y-axis to specific series via its `keys` property. The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome"?: UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape"?: UdpChartShape;
+    }
+    /**
+     * Donut chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Donut is a polar chart series in ag-charts — pass a series of
+     * `{ type: 'donut', angleKey, ... }` and skip `axes` entirely. The donut
+     * hole is controlled via `innerRadiusRatio` (default `0.7`); set it to a
+     * smaller value for a thicker ring or `0` for a pie. See
+     * https://www.ag-grid.com/charts/javascript/donut-series/.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * The legacy `udp-donut-chart` is an amcharts wrapper — leave that one
+     * alone; reach for this component in new surfaces.
+     */
+    interface UdpAgDonutChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette across sectors), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp, light→dark across sectors), and `colorful` (each sector's label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance"?: UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-donut-chart-${uuid()}`
+         */
+        "chartId"?: string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a `'donut'` series type and an `angleKey`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgPolarChartOptions;
+        /**
+          * Chrome density. `full` keeps the legend and padding; `flush` hides the legend and zeroes padding so the donut fills the container edge to edge (the KPI-card look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome"?: UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp sector corners) or `rounded` (rounded sector corners). Per-series `cornerRadius` on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape"?: UdpChartShape;
+    }
+    /**
+     * Line chart wrapped over `ag-charts-community`.
+     * See https://www.ag-grid.com/charts/javascript/line-series/ for the full
+     * option vocabulary. Consumers opt in by setting
+     * `series: [{ type: 'line', xKey, yKey, ... }]` on `chartOptions`.
+     * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+     * carries the full ag-charts options object; the wrapper owns the brand
+     * theme, the transparent chart background, ag-charts module registration,
+     * and the host container. Anything the consumer passes wins over the
+     * wrapper's defaults; `container` is always wrapper-owned.
+     * Consumers reach for ag-charts' own option vocabulary directly — no
+     * discrete-prop renames to learn, and no risk of the wrapper falling
+     * behind ag-charts feature releases.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * The legacy `udp-line-chart` is an amcharts wrapper still used by
+     * `InsightRenderer` — leave that one alone; reach for this component in
+     * new surfaces.
+     */
+    interface UdpAgLineChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance"?: UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-line-chart-${uuid()}`
+         */
+        "chartId"?: string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a line series — `{ type: 'line', xKey, yKey }`). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
+         */
+        "chartOptions": AgCartesianChartOptions;
+        /**
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome"?: UdpChartChrome;
+        /**
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customHeight"?: number | string;
+        /**
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
+         */
+        "customWidth"?: number | string;
+        /**
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp bar corners, straight line segments) or `rounded` (rounded bar corners, smoothed lines). Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
+         */
+        "shape"?: UdpChartShape;
+    }
+    /**
+     * Pie chart wrapped over `ag-charts-community`.
+     * Mirrors `udp-ag-line-chart` / `udp-ag-bar-chart`: one passthrough
+     * `chartOptions` prop carries the full ag-charts options object; the
+     * wrapper owns the brand theme, the transparent chart background,
+     * ag-charts module registration, and the host container. Anything the
+     * consumer passes wins over the wrapper's defaults; `container` is
+     * always wrapper-owned.
+     * Pie is a polar series, so `chartOptions` is typed as
+     * `AgPolarChartOptions` — polar charts have no x/y axes, so consumers
+     * should not pass an `axes` field. Each pie series requires `angleKey`;
+     * `calloutLabelKey` and `sectorLabelKey` are the usual companions for
+     * outer / inner labels. (For a donut, use ag-charts' separate `donut`
+     * series type — same polar options shape.)
+     * See https://www.ag-grid.com/charts/javascript/pie-series/.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     */
+    interface UdpAgPieChart {
+        /**
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette across slices), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp, light→dark across slices), and `colorful` (each slice's label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
+         */
+        "appearance"?: UdpChartAppearance;
+        /**
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-pie-chart-${uuid()}`
+         */
+        "chartId"?: string;
+        /**
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a `pie` series type and `angleKey` set). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored. Polar charts do not use `axes`.
+         */
+        "chartOptions": AgPolarChartOptions;
+        /**
+          * Chrome density. `full` keeps the legend and padding; `flush` hides the legend and zeroes padding so the pie fills the container edge to edge (the KPI-card look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
+         */
+        "chrome"?: UdpChartChrome;
         /**
-          * The name of the entity to build the field tree for
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
          */
-        "entityName"?: string;
+        "customHeight"?: number | string;
         /**
-          * The initial filter data to use for the field tree
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
          */
-        "initialFilterData"?: Search;
+        "customWidth"?: number | string;
         /**
-          * The maximum depth to traverse when building the field tree
-          * @default 2
+          * Geometry roundness, mirroring the button/input shape tokens: `square` (sharp sector corners) or `rounded` (rounded sector corners). Per-series `cornerRadius` on `chartOptions` still wins.
+          * @default 'square'
          */
-        "maxDepth"?: number;
+        "shape"?: UdpChartShape;
+    }
+    /**
+     * Scatter chart wrapped over `ag-charts-community`.
+     * Mirrors the shape of `ag-grid-base` (and the sibling line / bar chart
+     * wrappers): one passthrough `chartOptions` prop carries the full
+     * ag-charts options object; the wrapper owns the brand theme, the
+     * transparent chart background, ag-charts module registration, and the
+     * host container. Anything the consumer passes wins over the wrapper's
+     * defaults; `container` is always wrapper-owned.
+     * Consumers reach for ag-charts' own option vocabulary directly — no
+     * discrete-prop renames to learn, and no risk of the wrapper falling
+     * behind ag-charts feature releases.
+     * Always memoize `chartOptions` at the call site; a new object every
+     * render triggers a `chart.update()` cycle.
+     * Scatter series require both `xKey` and `yKey` on each series entry
+     * (`type: 'scatter'`) and default to numeric x/y axes. See
+     * https://www.ag-grid.com/charts/javascript/scatter-series/ for the full
+     * option surface (markers, color scales, error bars, etc.). For markers
+     * whose size encodes a third variable, reach for `udp-ag-bubble-chart`
+     * instead — scatter has no `sizeKey`.
+     */
+    interface UdpAgScatterChart {
         /**
-          * Emits the filter data when the filter is saved
+          * Colour + visual-weight variant applied via the brand theme: `default` (balanced categorical palette for multi-category charts, the exact brand colour for a single series), `soft` (same palette lightened, for dense low-emphasis surfaces), `bold` (same palette deepened, for a hero chart), `mono` (a single brand-hue ramp for sequential / magnitude data), and `colorful` (each label hashed to a stable Fluent avatar hue, so the same label keeps its colour across charts). Per-series colours on `chartOptions` always win.
+          * @default 'default'
          */
-        "onFilterSave"?: (event: UdpAdvancedSearchBuilderCustomEvent<Search>) => void;
+        "appearance"?: UdpChartAppearance;
         /**
-          * Emits the filter data when the filter is changed
+          * Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests).
+          * @default `udp-ag-scatter-chart-${uuid()}`
          */
-        "onSearchChange"?: (event: UdpAdvancedSearchBuilderCustomEvent<Search>) => void;
-    }
-    interface UdpAdvancedSearchFilterGroup {
+        "chartId"?: string;
         /**
-          * @default []
+          * Full ag-charts options. Required. Should include at least `data` and `series` (with a scatter series type — `xKey` and `yKey` are required per series). The wrapper merges in defaults for `theme` and `background`; either can be overridden by passing them on `chartOptions`. `container` is wrapper-owned and any value passed here is ignored.
          */
-        "errorMessages"?: string[];
-        "fields"?: CatalogTreeNode[];
-        "filterData"?: Search;
-        "groupId"?: number;
+        "chartOptions": AgCartesianChartOptions;
         /**
-          * @default true
+          * Chrome density. `full` keeps axes, gridlines, legend and padding; `flush` strips all chrome and zeroes padding so the plot bleeds to the container edges (the KPI-card "sparkline" look). Pair with a `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+          * @default 'full'
          */
-        "isFilterValid"?: boolean;
+        "chrome"?: UdpChartChrome;
         /**
-          * @default false
+          * Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
          */
-        "isRoot"?: boolean;
+        "customHeight"?: number | string;
         /**
-          * Current max depth (only meaningful for the root group, which renders the depth selector).
+          * Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%).
          */
-        "maxDepth"?: number;
-        "onAddFilter"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
-        "onAddGroup"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
+        "customWidth"?: number | string;
         /**
-          * Emitted when the user changes the max depth from the root group's depth selector.
+          * Geometry roundness, mirroring the button/input shape tokens: `square` or `rounded`. Scatter markers are unaffected; this only shapes any bar / line / area series sharing the chart. Per-series geometry on `chartOptions` still wins.
+          * @default 'square'
          */
-        "onDepthChange"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
-        "onFilterChange"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<{
-    filterId: string;
-    field?: string;
-    value?: any;
-    updates?: { [key: string]: any };
-  }>) => void;
-        "onGroupChange"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<{ groupId: number; logicalSearchOperator: 1 | 2 }>) => void;
-        "onRemoveFilter"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<string>) => void;
-        "onRemoveGroup"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
-        "onToggleAddMenu"?: (event: UdpAdvancedSearchFilterGroupCustomEvent<number>) => void;
-        "openAddMenuForGroupId"?: number | null;
+        "shape"?: UdpChartShape;
     }
     interface UdpAmbientCard {
         /**
@@ -15631,7 +17015,7 @@ declare namespace LocalJSX {
          */
         "onInputFocus"?: (event: UdpAutocompleteCustomEvent<void>) => void;
         /**
-          * Fires when the selection changes (option chosen, chip removed, or clear). The payload mirrors the items in `options`/fetched results: - Single-select: the matched option (the original object from the source list,   or the primitive value when options are primitives). With `freeForm`, an   unmatched typed entry emits the raw string. Emits `''` when cleared or the   input is backspaced empty. - Multi-select (`multiple`): an array of the matched options (objects or   primitives), including any currently-selected items hidden by the filter.   Emits `[]` when cleared.
+          * Fires when the selection changes (option chosen, chip removed, or clear). The payload mirrors the items in `options`/fetched results: The payload shape is governed by the `valueAs` prop: - `valueAs="option"` (default): the matched option (the original object from   the source list, or the primitive value when options are primitives) in   single-select; an array of those in `multiple` mode (including any   currently-selected items hidden by the filter). - `valueAs="value"`: the scalar value resolved via `optionValue` — a `string`   in single-select, `string[]` in `multiple` mode. With `freeForm`, an unmatched typed entry emits its raw string in either mode. Clearing (or backspacing the input empty) emits `''` (single) or `[]` (multi).
          */
         "onValueChanged"?: (event: UdpAutocompleteCustomEvent<any>) => void;
         /**
@@ -15690,6 +17074,12 @@ declare namespace LocalJSX {
           * The current value of the selected option.
          */
         "value"?: any;
+        /**
+          * Controls the shape of the `valueChanged` payload (see that event's docs): - `'option'` (default): emit the matched option **object** from the source   list (legacy behavior). Convenient when the consumer wants the full option   (label, metadata) on change. - `'value'`: emit the scalar resolved via `optionValue` (a `string`, or   `string[]` in `multiple` mode). This is what form bindings want — the   stored value is the option's id, not the object. Set this when wiring the   autocomplete into a form (Final Form / react-hook-form / `udp-field`).   Feed the emitted scalar(s) back into `value`; label resolution still works   because every internal read goes through `optionValue`. With `freeForm`,   an unmatched typed entry emits its raw string in either mode.
+          * @remarks Default is `'option'` to preserve existing behavior. A future major version is expected to flip the default to `'value'`, since emitting the scalar matches the convention of most component libraries (MUI, Ant Design, Vuetify, Element) and avoids the "[object Object]" / stale-option class of bug in form contexts.
+          * @default 'option'
+         */
+        "valueAs"?: 'option' | 'value';
     }
     interface UdpAvatar {
         "color"?: string;
@@ -15710,6 +17100,10 @@ declare namespace LocalJSX {
          */
         "max"?: number;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-bar-chart` instead.
+     */
     interface UdpBarChart {
         /**
           * @default undefined
@@ -15927,10 +17321,15 @@ declare namespace LocalJSX {
           * @default []
          */
         "hiddenDays"?: number[];
+        "initialDate"?: DateInput;
         /**
           * @default 'dayGridMonth'
          */
         "initialView"?: string;
+        /**
+          * @default {}
+         */
+        "options"?: Partial<CalendarOptions>;
         /**
           * @default '06:00:00'
          */
@@ -15986,25 +17385,25 @@ declare namespace LocalJSX {
         /**
           * @default {}
          */
-        "props"?: any;
+        "props"?: Record<string, any>;
     }
     interface UdpCalendarMonth {
         /**
           * @default {}
          */
-        "props"?: any;
+        "props"?: Record<string, any>;
     }
     interface UdpCalendarWeek {
         /**
           * @default {}
          */
-        "props"?: any;
+        "props"?: Record<string, any>;
     }
     interface UdpCalendarYear {
         /**
           * @default {}
          */
-        "props"?: any;
+        "props"?: Record<string, any>;
     }
     interface UdpCard {
         /**
@@ -16130,7 +17529,7 @@ declare namespace LocalJSX {
         "title"?: string;
     }
     /**
-     * component used to render examples of all the charts. Mostly used for dev purposes
+     * Component used to render examples of all the charts. Mostly used for dev purposes.
      */
     interface UdpChartsExample {
     }
@@ -16322,6 +17721,10 @@ declare namespace LocalJSX {
           * @default 'medium'
          */
         "controlSize"?: 'small' | 'medium' | 'large';
+        /**
+          * Date display format based on locale/region. Preferred over `format`. - 'MM/DD/YYYY' - US format - 'DD/MM/YYYY' - UK/Europe/Canada format - 'YYYY/MM/DD' - ISO/China/Japan format
+         */
+        "dateFormat"?: DateFormat;
         /**
           * The type of date selection.
           * @default 'single'
@@ -16337,7 +17740,8 @@ declare namespace LocalJSX {
          */
         "error"?: string;
         /**
-          * Date display format based on locale/region. - 'MM/DD/YYYY' - US format - 'DD/MM/YYYY' - UK/Europe/Canada format - 'YYYY/MM/DD' - ISO/China/Japan format Defaults to browser locale detection if not specified.
+          * Date display format based on locale/region. - 'MM/DD/YYYY' - US format - 'DD/MM/YYYY' - UK/Europe/Canada format - 'YYYY/MM/DD' - ISO/China/Japan format
+          * @deprecated Use `dateFormat` instead. `format` collides with the reserved `format` prop of form libraries (e.g. react-final-form's `<Field>`), which treats it as a value-formatter function. Retained as an alias; `dateFormat` takes precedence when both are set.
           * @default 'MM/DD/YYYY'
          */
         "format"?: DateFormat;
@@ -16573,6 +17977,10 @@ declare namespace LocalJSX {
           * @default 'medium'
          */
         "controlSize"?: 'small' | 'medium' | 'large';
+        /**
+          * Date display format. Preferred over `format`.
+         */
+        "dateFormat"?: DateFormat1;
         /**
           * Whether the input is disabled.
           * @default false
@@ -16584,6 +17992,7 @@ declare namespace LocalJSX {
         "error"?: string;
         /**
           * Date display format.
+          * @deprecated Use `dateFormat` instead. `format` collides with the reserved `format` prop of form libraries (e.g. react-final-form's `<Field>`), which treats it as a value-formatter function. Retained as an alias; `dateFormat` takes precedence when both are set.
           * @default 'MM/DD/YYYY'
          */
         "format"?: DateFormat1;
@@ -16865,6 +18274,10 @@ declare namespace LocalJSX {
          */
         "titleId"?: string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-bar-chart` instead.
+     */
     interface UdpDistributionChart {
         /**
           * @default uuid()
@@ -16931,6 +18344,10 @@ declare namespace LocalJSX {
          */
         "variant"?: 'horizontal' | 'vertical';
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-donut-chart` (or `udp-ag-pie-chart`) instead.
+     */
     interface UdpDonutChart {
         /**
           * @default uuid()
@@ -17735,7 +19152,7 @@ declare namespace LocalJSX {
          */
         "onInputFocus"?: (event: UdpFluentDropdownCustomEvent<void>) => void;
         /**
-          * Fires when the selection changes (option chosen, multi-select toggle, or clear). The payload mirrors the items in `options`: - Single-select: the matched option (the original object from `options`, or the   primitive value when `options` are primitives). Emits `''` when cleared. - Multi-select (`multiple`): an array of the matched options (objects or primitives).   Emits `[]` when cleared/empty.
+          * Fires when the selection changes (option chosen, multi-select toggle, or clear). The payload shape is governed by the `valueAs` prop: - `valueAs="option"` (default): the matched option (the original object from   `options`, or the primitive value when `options` are primitives) in   single-select; an array of those in `multiple` mode. - `valueAs="value"`: the scalar value resolved via `optionValue` — a `string`   in single-select, `string[]` in `multiple` mode. Either way, clearing emits `''` (single) or `[]` (multi).
          */
         "onValueChanged"?: (event: UdpFluentDropdownCustomEvent<any>) => void;
         /**
@@ -17790,6 +19207,12 @@ declare namespace LocalJSX {
           * The current value of the selected option.
          */
         "value"?: any;
+        /**
+          * Controls the shape of the `valueChanged` payload (see that event's docs): - `'option'` (default): emit the matched option **object** from `options`   (legacy behavior). Convenient when the consumer wants the full option   (label, metadata) on change. - `'value'`: emit the scalar resolved via `optionValue` (a `string`, or   `string[]` in `multiple` mode). This is what form bindings want — the   stored value is the option's id, not the object. Set this when wiring the   dropdown into a form (Final Form / react-hook-form / `udp-field`).
+          * @remarks Default is `'option'` to preserve existing behavior. A future major version is expected to flip the default to `'value'`, since emitting the scalar matches the convention of most component libraries (MUI, Ant Design, Vuetify, Element) and avoids the "[object Object]" / stale-option class of bug in form contexts.
+          * @default 'option'
+         */
+        "valueAs"?: 'option' | 'value';
     }
     /**
      * Fluent-styled file input. Renders a drop zone + browse button + selected-item
@@ -18423,6 +19846,107 @@ declare namespace LocalJSX {
          */
         "startIconName"?: string;
     }
+    /**
+     * Number input component with min/max/step constraints and decimal capping.
+     */
+    interface UdpFluentNumberInput {
+        /**
+          * The visual appearance of the input.
+          * @default 'outline'
+         */
+        "appearance"?: 'outline' | 'underline' | 'filled-lighter' | 'filled-darker';
+        /**
+          * Hints to the browser about what kind of data is expected. Defaults to "off" to suppress the browser's recent-values dropdown.
+          * @default 'off'
+         */
+        "autocomplete"?: string;
+        /**
+          * Whether the input should automatically focus when the page loads.
+          * @default false
+         */
+        "autofocus"?: boolean;
+        /**
+          * The size of the input control.
+          * @default 'medium'
+         */
+        "controlSize"?: 'small' | 'medium' | 'large';
+        /**
+          * Maximum number of decimal places. On blur, the value is rounded to this precision.
+         */
+        "decimals"?: number;
+        /**
+          * Whether the input is disabled and cannot be interacted with.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Error message text displayed below the input when validation fails.
+         */
+        "error"?: string;
+        /**
+          * Helper text displayed below the input.
+         */
+        "hint"?: string;
+        /**
+          * Whether to include error padding below the input.
+          * @default true
+         */
+        "includeErrorPadding"?: boolean;
+        /**
+          * The label text displayed above the input.
+         */
+        "label"?: string;
+        /**
+          * Maximum allowed value. Enforced by the browser via native input constraints.
+         */
+        "max"?: string;
+        /**
+          * Minimum allowed value. Enforced by the browser via native input constraints.
+         */
+        "min"?: string;
+        /**
+          * The name of the input.
+         */
+        "name"?: string;
+        /**
+          * Fires when the input loses focus. Payload is `void`.
+         */
+        "onInputBlur"?: (event: UdpFluentNumberInputCustomEvent<void>) => void;
+        /**
+          * Fires when the input gains focus. Payload is `void`.
+         */
+        "onInputFocus"?: (event: UdpFluentNumberInputCustomEvent<void>) => void;
+        /**
+          * Fires on each input change (every keystroke). Emits the new value as a `string`.
+         */
+        "onValueChanged"?: (event: UdpFluentNumberInputCustomEvent<string>) => void;
+        /**
+          * Placeholder text displayed when the input is empty.
+         */
+        "placeholder"?: string;
+        /**
+          * Helper text displayed on click of info icon in label.
+         */
+        "popupHint"?: string;
+        /**
+          * Whether the input is read-only.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required for form submission.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Step increment for the spinner (e.g. "0.5", "0.01", "1").
+         */
+        "step"?: string;
+        /**
+          * The current value of the input.
+         */
+        "value"?: string;
+    }
     /**
      * Radio group component. Can be used standalone or as part of a udp-field.
      */
@@ -19280,6 +20804,10 @@ declare namespace LocalJSX {
          */
         "unmountDelay"?: number;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-line-chart` instead.
+     */
     interface UdpLineChart {
         /**
           * @default uuid()
@@ -20070,6 +21598,11 @@ declare namespace LocalJSX {
         "name"?: string;
         "value"?: string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * It is amcharts-based; there is no `ag-charts-community` sankey equivalent, so
+     * no direct replacement exists yet. Avoid new usage.
+     */
     interface UdpSankeyChart {
         /**
           * @default uuid()
@@ -20439,6 +21972,54 @@ declare namespace LocalJSX {
          */
         "width"?: 'sm' | 'md' | 'lg' | 'full' | number;
     }
+    /**
+     * Two-pane page layout: a collapsible sidebar beside a main content area. The
+     * sidebar is meant to hold a tree, list, or outline (drop one into the
+     * `sidebar` slot); the page body goes in the default slot.
+     * Collapse is self-contained — the sidebar header carries a collapse button and,
+     * when collapsed, the sidebar shrinks to a slim rail with an expand button, so no
+     * external control is needed. Set `stickyOffset` to pin the sidebar below a fixed
+     * page header so it scrolls independently while the main column flows with the page.
+     */
+    interface UdpSidebarLayout {
+        /**
+          * When false, the collapse affordance is hidden and the sidebar stays open.
+          * @default true
+         */
+        "collapsible"?: boolean;
+        /**
+          * Fill the host's container top-to-bottom: the layout becomes `height: 100%` and the sidebar + main column each scroll independently inside it. Use when the layout is placed in a height-bearing region (e.g. a flex/grid cell or a fixed-height scroll area) and you want the sidebar to always span the full height regardless of content. Takes precedence over `stickyOffset`.
+          * @default false
+         */
+        "fill"?: boolean;
+        /**
+          * Emitted when the sidebar is expanded/collapsed. `detail` is the new `open` value.
+         */
+        "onOpenChange"?: (event: UdpSidebarLayoutCustomEvent<boolean>) => void;
+        /**
+          * Whether the sidebar is expanded (`true`) or collapsed to a rail (`false`). Mutable so the built-in toggle works; consumers may bind/read it and listen to `openChange`.
+          * @default true
+         */
+        "open"?: boolean;
+        /**
+          * Which side the sidebar sits on.
+          * @default 'start'
+         */
+        "sidebarPosition"?: 'start' | 'end';
+        /**
+          * Title shown in the sidebar header. Ignored when a `sidebar-header` slot is provided.
+         */
+        "sidebarTitle"?: string;
+        /**
+          * Expanded sidebar width — any CSS length.
+          * @default '264px'
+         */
+        "sidebarWidth"?: string;
+        /**
+          * When set, the sidebar (and its collapsed rail) is `position: sticky`, pinned this far from the top of the scroll container, with a matching `max-height` so it scrolls on its own. Any CSS length — e.g. `"64px"` or `"var(--app-header-h)"`. Omit for a sidebar that flows with the page. Ignored when `fill` is set.
+         */
+        "stickyOffset"?: string;
+    }
     interface UdpSkeletonLoading {
         /**
           * @default '4px'
@@ -21167,10 +22748,28 @@ declare namespace LocalJSX {
           * @default 'subtle'
          */
         "appearance"?: 'subtle' | 'transparent';
+        /**
+          * When `true`, parent rows get a disclosure chevron that toggles their expansion, while the rest of the row keeps its normal click behavior. Designed to pair with `interaction="button"`: clicking a row body still emits `itemClick` (open details), but clicking the chevron only expands/collapses that group — it neither selects the row nor emits `itemClick`. Initial open/closed state is seeded from `itemExpanded` (so a tree can render fully expanded on load); the user's subsequent collapse/expand choices are owned internally and persist by id across re-renders. No effect in `interaction="tree"` mode, where Fluent's native row-click already toggles expansion.
+          * @default false
+         */
+        "collapsible"?: boolean;
+        /**
+          * How a row click behaves:  - `'tree'` (default): native Fluent tree behavior — clicking a row toggles    its expansion and selects it; `itemClick` fires for the directly-clicked    row. Selection is managed internally by Fluent.  - `'button'`: rows act as buttons. A click anywhere on the row (icon, text,    aside) emits `itemClick` exactly once and stops there — no built-in    expand toggle and no internal selection. Pair with `selectedId` (for the    highlight) and `itemExpanded` (to control which parents are open).
+          * @default 'tree'
+         */
+        "interaction"?: 'tree' | 'button';
         /**
           * Path to the aside slot property, or a function to generate the aside slot content.
          */
         "itemAside"?: string | ((item: any) => any);
+        /**
+          * Path to an avatar descriptor (or a function returning one) rendered in the row's start slot as a `<udp-fluent-avatar>`: `{ name?, initials?, src?, color?, shape?, size?, iconName? }`. Takes precedence over `itemIcon` when both resolve.
+         */
+        "itemAvatar"?: string | ((item: any) => any);
+        /**
+          * Path to a badge value (or a function returning one) rendered in the row's end slot as a `<udp-fluent-badge>`. A scalar becomes the badge content; an object `{ content?, color?, appearance?, shape?, size?, startIconName?, endIconName? }` controls its appearance.
+         */
+        "itemBadge"?: string | ((item: any) => any);
         /**
           * Path to the content property, or a function to generate the content (default slot).
           * @default 'label'
@@ -21180,6 +22779,14 @@ declare namespace LocalJSX {
           * Path to the end slot property, or a function to generate the end slot content.
          */
         "itemEnd"?: string | ((item: any) => any);
+        /**
+          * Path to a boolean "expanded" property, or a function returning whether the item should render expanded. Only meaningful for items that have children. Useful for trees that should render fully (or partly) expanded on load.
+         */
+        "itemExpanded"?: string | ((item: any) => boolean);
+        /**
+          * Path to an icon name (or a function returning one) rendered in the row's start slot as a `<udp-fluent-icon>`. Use for type/category icons. A function may also return `{ name, color?, size? }` for per-row control. Mutually exclusive with `itemAvatar` (avatar wins when both resolve). Rendered inside this component's shadow, so the row chrome in udp-tree.css styles it — unlike a consumer-slotted icon, which a shadow stylesheet can't reach via `::part`.
+         */
+        "itemIcon"?: string | ((item: any) => any);
         /**
           * Path to the id property, or a function to generate the id.
           * @default 'id'
@@ -21198,6 +22805,10 @@ declare namespace LocalJSX {
           * Event emitted when a tree item is clicked
          */
         "onItemClick"?: (event: UdpTreeCustomEvent<any>) => void;
+        /**
+          * Id of the item that should render as selected. Compared against each item's resolved id (`itemId`). Drives the selected appearance from the outside so the consumer owns "which row is active" as a single source of truth.
+         */
+        "selectedId"?: string | number;
         /**
           * The size of the tree item element.
           * @default 'medium'
@@ -21216,6 +22827,11 @@ declare namespace LocalJSX {
          */
         "unit"?: FlexSpacing2;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use the `udp-ag-*` chart components instead — `udp-ag-line-chart`,
+     * `udp-ag-bar-chart`, or `udp-ag-scatter-chart` depending on the series type.
+     */
     interface UdpXyChart {
         /**
           * @default undefined
@@ -21315,6 +22931,10 @@ declare namespace LocalJSX {
          */
         "yDataType"?: string;
     }
+    /**
+     * @deprecated This component is deprecated and will be removed in a future version.
+     * Use `udp-ag-line-chart` (or `udp-ag-combo-chart` for mixed series) instead.
+     */
     interface UdpXyMultiSeriesChart {
         /**
           * @default undefined
@@ -21527,6 +23147,14 @@ declare namespace LocalJSX {
         "udp-adornment": UdpAdornment;
         "udp-advanced-search-builder": UdpAdvancedSearchBuilder;
         "udp-advanced-search-filter-group": UdpAdvancedSearchFilterGroup;
+        "udp-ag-area-chart": UdpAgAreaChart;
+        "udp-ag-bar-chart": UdpAgBarChart;
+        "udp-ag-bubble-chart": UdpAgBubbleChart;
+        "udp-ag-combo-chart": UdpAgComboChart;
+        "udp-ag-donut-chart": UdpAgDonutChart;
+        "udp-ag-line-chart": UdpAgLineChart;
+        "udp-ag-pie-chart": UdpAgPieChart;
+        "udp-ag-scatter-chart": UdpAgScatterChart;
         "udp-ambient-card": UdpAmbientCard;
         "udp-ambient-tool-tip": UdpAmbientToolTip;
         "udp-attachment-item": UdpAttachmentItem;
@@ -21591,6 +23219,7 @@ declare namespace LocalJSX {
         "udp-fluent-list-item": UdpFluentListItem;
         "udp-fluent-location-input": UdpFluentLocationInput;
         "udp-fluent-menu": UdpFluentMenu;
+        "udp-fluent-number-input": UdpFluentNumberInput;
         "udp-fluent-radio-group": UdpFluentRadioGroup;
         "udp-fluent-signature-input": UdpFluentSignatureInput;
         "udp-fluent-switch": UdpFluentSwitch;
@@ -21643,6 +23272,7 @@ declare namespace LocalJSX {
         "udp-search-input": UdpSearchInput;
         "udp-selector": UdpSelector;
         "udp-side-sheet": UdpSideSheet;
+        "udp-sidebar-layout": UdpSidebarLayout;
         "udp-skeleton-loading": UdpSkeletonLoading;
         "udp-slider": UdpSlider;
         "udp-spinner": UdpSpinner;
@@ -21704,7 +23334,19 @@ declare module "@stencil/core" {
             "api-method-instance-grid": LocalJSX.ApiMethodInstanceGrid & JSXBase.HTMLAttributes<HTMLApiMethodInstanceGridElement>;
             "app-bar": LocalJSX.AppBar & JSXBase.HTMLAttributes<HTMLAppBarElement>;
             "base-map": LocalJSX.BaseMap & JSXBase.HTMLAttributes<HTMLBaseMapElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * It backs the legacy amcharts wrappers and relies on cross-shadow DOM queries
+             * that no longer work. Use the `udp-ag-*` chart components (e.g.
+             * `udp-ag-line-chart`, `udp-ag-bar-chart`, `udp-ag-donut-chart`) instead — they
+             * size themselves and need no container.
+             */
             "chart-container": LocalJSX.ChartContainer & JSXBase.HTMLAttributes<HTMLChartContainerElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * It is used only by the deprecated `chart-container`. Use the `udp-ag-*` chart
+             * components instead.
+             */
             "chart-kpi": LocalJSX.ChartKpi & JSXBase.HTMLAttributes<HTMLChartKpiElement>;
             /**
              * A standardized checkbox component with proper controlled/uncontrolled patterns and validation.
@@ -22103,6 +23745,156 @@ declare module "@stencil/core" {
             "udp-adornment": LocalJSX.UdpAdornment & JSXBase.HTMLAttributes<HTMLUdpAdornmentElement>;
             "udp-advanced-search-builder": LocalJSX.UdpAdvancedSearchBuilder & JSXBase.HTMLAttributes<HTMLUdpAdvancedSearchBuilderElement>;
             "udp-advanced-search-filter-group": LocalJSX.UdpAdvancedSearchFilterGroup & JSXBase.HTMLAttributes<HTMLUdpAdvancedSearchFilterGroupElement>;
+            /**
+             * Area chart wrapped over `ag-charts-community`.
+             * See https://www.ag-grid.com/charts/javascript/area-series/ for the full
+             * option vocabulary. Consumers opt in by setting
+             * `series: [{ type: 'area', xKey, yKey, ... }]` on `chartOptions`.
+             * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+             * carries the full ag-charts options object; the wrapper owns the brand
+             * theme, the transparent chart background, ag-charts module registration,
+             * and the host container. Anything the consumer passes wins over the
+             * wrapper's defaults; `container` is always wrapper-owned.
+             * Because area and line share the `AgCartesianChartOptions` shape, the
+             * `udp-ag-line-chart` wrapper accepts the same options and a consumer
+             * could technically use either — this component exists for
+             * discoverability so consumers looking for "area chart" land on a
+             * dedicated component.
+             * Always memoize `chartOptions` at the call site; a new object every
+             * render triggers a `chart.update()` cycle.
+             */
+            "udp-ag-area-chart": LocalJSX.UdpAgAreaChart & JSXBase.HTMLAttributes<HTMLUdpAgAreaChartElement>;
+            /**
+             * Bar chart wrapped over `ag-charts-community`.
+             * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+             * carries the full ag-charts options object; the wrapper owns the brand
+             * theme, the transparent chart background, ag-charts module registration,
+             * and the host container. Anything the consumer passes wins over the
+             * wrapper's defaults; `container` is always wrapper-owned.
+             * Always memoize `chartOptions` at the call site — a new object every
+             * render triggers a `chart.update()` cycle.
+             */
+            "udp-ag-bar-chart": LocalJSX.UdpAgBarChart & JSXBase.HTMLAttributes<HTMLUdpAgBarChartElement>;
+            /**
+             * Bubble chart wrapped over `ag-charts-community`.
+             * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+             * carries the full ag-charts options object; the wrapper owns the brand
+             * theme, the transparent chart background, ag-charts module registration,
+             * and the host container. Anything the consumer passes wins over the
+             * wrapper's defaults; `container` is always wrapper-owned.
+             * Bubble series are cartesian and require `xKey`, `yKey`, and `sizeKey`
+             * on each series entry — `sizeKey` drives the marker radius. See
+             * https://www.ag-grid.com/charts/javascript/bubble-series/ for the full
+             * series option surface (labelKey, colorKey, size / maxSize / domain,
+             * etc.).
+             * Always memoize `chartOptions` at the call site — a new object every
+             * render triggers a `chart.update()` cycle.
+             */
+            "udp-ag-bubble-chart": LocalJSX.UdpAgBubbleChart & JSXBase.HTMLAttributes<HTMLUdpAgBubbleChartElement>;
+            /**
+             * Combination (combo) chart wrapped over `ag-charts-community`.
+             * ag-charts has no dedicated "combo" series type — a combination chart is
+             * just an `AgCartesianChartOptions` whose `series` array carries multiple
+             * entries of different `type`s (e.g. one `{ type: 'bar' }` plus one
+             * `{ type: 'line' }`, optionally mixed with `'area'`, `'scatter'`, etc.).
+             * This wrapper exists for discoverability and parity with the rest of the
+             * `udp-ag-*-chart` family; it shares the line / bar wrapper plumbing
+             * verbatim.
+             * For dual-axis combos, declare a second y-axis in `axes` (an object
+             * keyed by axis id, NOT an array) and use the axis's `keys` array to bind
+             * it to specific series `yKey`s — e.g. `axes: { x: { type: 'category',
+             * position: 'bottom' }, y: { type: 'number', position: 'left', keys:
+             * ['revenue'] }, y2: { type: 'number', position: 'right', keys:
+             * ['conversion'] } }`. Series render in array order, so place bars before
+             * lines if you want lines on top.
+             * See https://www.ag-grid.com/charts/javascript/combination-series/.
+             * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+             * carries the full ag-charts options object; the wrapper owns the brand
+             * theme, the transparent chart background, ag-charts module registration,
+             * and the host container. Anything the consumer passes wins over the
+             * wrapper's defaults; `container` is always wrapper-owned.
+             * Always memoize `chartOptions` at the call site; a new object every
+             * render triggers a `chart.update()` cycle.
+             */
+            "udp-ag-combo-chart": LocalJSX.UdpAgComboChart & JSXBase.HTMLAttributes<HTMLUdpAgComboChartElement>;
+            /**
+             * Donut chart wrapped over `ag-charts-community`.
+             * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+             * carries the full ag-charts options object; the wrapper owns the brand
+             * theme, the transparent chart background, ag-charts module registration,
+             * and the host container. Anything the consumer passes wins over the
+             * wrapper's defaults; `container` is always wrapper-owned.
+             * Donut is a polar chart series in ag-charts — pass a series of
+             * `{ type: 'donut', angleKey, ... }` and skip `axes` entirely. The donut
+             * hole is controlled via `innerRadiusRatio` (default `0.7`); set it to a
+             * smaller value for a thicker ring or `0` for a pie. See
+             * https://www.ag-grid.com/charts/javascript/donut-series/.
+             * Always memoize `chartOptions` at the call site; a new object every
+             * render triggers a `chart.update()` cycle.
+             * The legacy `udp-donut-chart` is an amcharts wrapper — leave that one
+             * alone; reach for this component in new surfaces.
+             */
+            "udp-ag-donut-chart": LocalJSX.UdpAgDonutChart & JSXBase.HTMLAttributes<HTMLUdpAgDonutChartElement>;
+            /**
+             * Line chart wrapped over `ag-charts-community`.
+             * See https://www.ag-grid.com/charts/javascript/line-series/ for the full
+             * option vocabulary. Consumers opt in by setting
+             * `series: [{ type: 'line', xKey, yKey, ... }]` on `chartOptions`.
+             * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+             * carries the full ag-charts options object; the wrapper owns the brand
+             * theme, the transparent chart background, ag-charts module registration,
+             * and the host container. Anything the consumer passes wins over the
+             * wrapper's defaults; `container` is always wrapper-owned.
+             * Consumers reach for ag-charts' own option vocabulary directly — no
+             * discrete-prop renames to learn, and no risk of the wrapper falling
+             * behind ag-charts feature releases.
+             * Always memoize `chartOptions` at the call site; a new object every
+             * render triggers a `chart.update()` cycle.
+             * The legacy `udp-line-chart` is an amcharts wrapper still used by
+             * `InsightRenderer` — leave that one alone; reach for this component in
+             * new surfaces.
+             */
+            "udp-ag-line-chart": LocalJSX.UdpAgLineChart & JSXBase.HTMLAttributes<HTMLUdpAgLineChartElement>;
+            /**
+             * Pie chart wrapped over `ag-charts-community`.
+             * Mirrors `udp-ag-line-chart` / `udp-ag-bar-chart`: one passthrough
+             * `chartOptions` prop carries the full ag-charts options object; the
+             * wrapper owns the brand theme, the transparent chart background,
+             * ag-charts module registration, and the host container. Anything the
+             * consumer passes wins over the wrapper's defaults; `container` is
+             * always wrapper-owned.
+             * Pie is a polar series, so `chartOptions` is typed as
+             * `AgPolarChartOptions` — polar charts have no x/y axes, so consumers
+             * should not pass an `axes` field. Each pie series requires `angleKey`;
+             * `calloutLabelKey` and `sectorLabelKey` are the usual companions for
+             * outer / inner labels. (For a donut, use ag-charts' separate `donut`
+             * series type — same polar options shape.)
+             * See https://www.ag-grid.com/charts/javascript/pie-series/.
+             * Always memoize `chartOptions` at the call site; a new object every
+             * render triggers a `chart.update()` cycle.
+             */
+            "udp-ag-pie-chart": LocalJSX.UdpAgPieChart & JSXBase.HTMLAttributes<HTMLUdpAgPieChartElement>;
+            /**
+             * Scatter chart wrapped over `ag-charts-community`.
+             * Mirrors the shape of `ag-grid-base` (and the sibling line / bar chart
+             * wrappers): one passthrough `chartOptions` prop carries the full
+             * ag-charts options object; the wrapper owns the brand theme, the
+             * transparent chart background, ag-charts module registration, and the
+             * host container. Anything the consumer passes wins over the wrapper's
+             * defaults; `container` is always wrapper-owned.
+             * Consumers reach for ag-charts' own option vocabulary directly — no
+             * discrete-prop renames to learn, and no risk of the wrapper falling
+             * behind ag-charts feature releases.
+             * Always memoize `chartOptions` at the call site; a new object every
+             * render triggers a `chart.update()` cycle.
+             * Scatter series require both `xKey` and `yKey` on each series entry
+             * (`type: 'scatter'`) and default to numeric x/y axes. See
+             * https://www.ag-grid.com/charts/javascript/scatter-series/ for the full
+             * option surface (markers, color scales, error bars, etc.). For markers
+             * whose size encodes a third variable, reach for `udp-ag-bubble-chart`
+             * instead — scatter has no `sizeKey`.
+             */
+            "udp-ag-scatter-chart": LocalJSX.UdpAgScatterChart & JSXBase.HTMLAttributes<HTMLUdpAgScatterChartElement>;
             "udp-ambient-card": LocalJSX.UdpAmbientCard & JSXBase.HTMLAttributes<HTMLUdpAmbientCardElement>;
             "udp-ambient-tool-tip": LocalJSX.UdpAmbientToolTip & JSXBase.HTMLAttributes<HTMLUdpAmbientToolTipElement>;
             "udp-attachment-item": LocalJSX.UdpAttachmentItem & JSXBase.HTMLAttributes<HTMLUdpAttachmentItemElement>;
@@ -22114,6 +23906,10 @@ declare module "@stencil/core" {
             "udp-autocomplete": LocalJSX.UdpAutocomplete & JSXBase.HTMLAttributes<HTMLUdpAutocompleteElement>;
             "udp-avatar": LocalJSX.UdpAvatar & JSXBase.HTMLAttributes<HTMLUdpAvatarElement>;
             "udp-badge": LocalJSX.UdpBadge & JSXBase.HTMLAttributes<HTMLUdpBadgeElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * Use `udp-ag-bar-chart` instead.
+             */
             "udp-bar-chart": LocalJSX.UdpBarChart & JSXBase.HTMLAttributes<HTMLUdpBarChartElement>;
             /**
              * UdpButton is a versatile button component inspired by MUI, using global theme variables.
@@ -22146,7 +23942,7 @@ declare module "@stencil/core" {
             "udp-card-header": LocalJSX.UdpCardHeader & JSXBase.HTMLAttributes<HTMLUdpCardHeaderElement>;
             "udp-card-media": LocalJSX.UdpCardMedia & JSXBase.HTMLAttributes<HTMLUdpCardMediaElement>;
             /**
-             * component used to render examples of all the charts. Mostly used for dev purposes
+             * Component used to render examples of all the charts. Mostly used for dev purposes.
              */
             "udp-charts-example": LocalJSX.UdpChartsExample & JSXBase.HTMLAttributes<HTMLUdpChartsExampleElement>;
             /**
@@ -22268,8 +24064,16 @@ declare module "@stencil/core" {
              */
             "udp-detail-list-item": LocalJSX.UdpDetailListItem & JSXBase.HTMLAttributes<HTMLUdpDetailListItemElement>;
             "udp-dialog": LocalJSX.UdpDialog & JSXBase.HTMLAttributes<HTMLUdpDialogElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * Use `udp-ag-bar-chart` instead.
+             */
             "udp-distribution-chart": LocalJSX.UdpDistributionChart & JSXBase.HTMLAttributes<HTMLUdpDistributionChartElement>;
             "udp-divider": LocalJSX.UdpDivider & JSXBase.HTMLAttributes<HTMLUdpDividerElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * Use `udp-ag-donut-chart` (or `udp-ag-pie-chart`) instead.
+             */
             "udp-donut-chart": LocalJSX.UdpDonutChart & JSXBase.HTMLAttributes<HTMLUdpDonutChartElement>;
             /**
              * Duration input component with dropdown selection and smart parsing support.
@@ -22367,6 +24171,10 @@ declare module "@stencil/core" {
              * @cssvar --udp-menu-min-width - Sets the min-width of the menu list popup. e.g. `style={{ '--udp-menu-min-width': '200px' }}`
              */
             "udp-fluent-menu": LocalJSX.UdpFluentMenu & JSXBase.HTMLAttributes<HTMLUdpFluentMenuElement>;
+            /**
+             * Number input component with min/max/step constraints and decimal capping.
+             */
+            "udp-fluent-number-input": LocalJSX.UdpFluentNumberInput & JSXBase.HTMLAttributes<HTMLUdpFluentNumberInputElement>;
             /**
              * Radio group component. Can be used standalone or as part of a udp-field.
              */
@@ -22451,6 +24259,10 @@ declare module "@stencil/core" {
              */
             "udp-kpi-cards": LocalJSX.UdpKpiCards & JSXBase.HTMLAttributes<HTMLUdpKpiCardsElement>;
             "udp-lazy-loader": LocalJSX.UdpLazyLoader & JSXBase.HTMLAttributes<HTMLUdpLazyLoaderElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * Use `udp-ag-line-chart` instead.
+             */
             "udp-line-chart": LocalJSX.UdpLineChart & JSXBase.HTMLAttributes<HTMLUdpLineChartElement>;
             "udp-linear-loader": LocalJSX.UdpLinearLoader & JSXBase.HTMLAttributes<HTMLUdpLinearLoaderElement>;
             "udp-link": LocalJSX.UdpLink & JSXBase.HTMLAttributes<HTMLUdpLinkElement>;
@@ -22494,6 +24306,11 @@ declare module "@stencil/core" {
             "udp-question": LocalJSX.UdpQuestion & JSXBase.HTMLAttributes<HTMLUdpQuestionElement>;
             "udp-question-comments": LocalJSX.UdpQuestionComments & JSXBase.HTMLAttributes<HTMLUdpQuestionCommentsElement>;
             "udp-radio-button": LocalJSX.UdpRadioButton & JSXBase.HTMLAttributes<HTMLUdpRadioButtonElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * It is amcharts-based; there is no `ag-charts-community` sankey equivalent, so
+             * no direct replacement exists yet. Avoid new usage.
+             */
             "udp-sankey-chart": LocalJSX.UdpSankeyChart & JSXBase.HTMLAttributes<HTMLUdpSankeyChartElement>;
             "udp-save-draft-button": LocalJSX.UdpSaveDraftButton & JSXBase.HTMLAttributes<HTMLUdpSaveDraftButtonElement>;
             /**
@@ -22538,6 +24355,16 @@ declare module "@stencil/core" {
              * Side sheet component used for contextual drawers.
              */
             "udp-side-sheet": LocalJSX.UdpSideSheet & JSXBase.HTMLAttributes<HTMLUdpSideSheetElement>;
+            /**
+             * Two-pane page layout: a collapsible sidebar beside a main content area. The
+             * sidebar is meant to hold a tree, list, or outline (drop one into the
+             * `sidebar` slot); the page body goes in the default slot.
+             * Collapse is self-contained — the sidebar header carries a collapse button and,
+             * when collapsed, the sidebar shrinks to a slim rail with an expand button, so no
+             * external control is needed. Set `stickyOffset` to pin the sidebar below a fixed
+             * page header so it scrolls independently while the main column flows with the page.
+             */
+            "udp-sidebar-layout": LocalJSX.UdpSidebarLayout & JSXBase.HTMLAttributes<HTMLUdpSidebarLayoutElement>;
             "udp-skeleton-loading": LocalJSX.UdpSkeletonLoading & JSXBase.HTMLAttributes<HTMLUdpSkeletonLoadingElement>;
             /**
              * Slider component. Can be used standalone or as part of a udp-field.
@@ -22615,7 +24442,16 @@ declare module "@stencil/core" {
              */
             "udp-tree": LocalJSX.UdpTree & JSXBase.HTMLAttributes<HTMLUdpTreeElement>;
             "udp-vertical-spacer": LocalJSX.UdpVerticalSpacer & JSXBase.HTMLAttributes<HTMLUdpVerticalSpacerElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * Use the `udp-ag-*` chart components instead — `udp-ag-line-chart`,
+             * `udp-ag-bar-chart`, or `udp-ag-scatter-chart` depending on the series type.
+             */
             "udp-xy-chart": LocalJSX.UdpXyChart & JSXBase.HTMLAttributes<HTMLUdpXyChartElement>;
+            /**
+             * @deprecated This component is deprecated and will be removed in a future version.
+             * Use `udp-ag-line-chart` (or `udp-ag-combo-chart` for mixed series) instead.
+             */
             "udp-xy-multi-series-chart": LocalJSX.UdpXyMultiSeriesChart & JSXBase.HTMLAttributes<HTMLUdpXyMultiSeriesChartElement>;
             "unity-typography": LocalJSX.UnityTypography & JSXBase.HTMLAttributes<HTMLUnityTypographyElement>;
             "upd-alert-banner": LocalJSX.UpdAlertBanner & JSXBase.HTMLAttributes<HTMLUpdAlertBannerElement>;