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

package/dist/types/components/charts/charts-theme.d.ts

@@ -0,0 +1,80 @@
+import type { AgChartTheme, AgChartThemeName } from 'ag-charts-community';
+/**
+ * Build the UDP ag-charts theme.
+ *
+ * AG Grid and ag-charts have separate theme systems. The grid uses Quartz
+ * (`themeQuartz.withParams(...)` plus `--ag-*` CSS vars); ag-charts uses
+ * `AgChartTheme` objects with palette / params / overrides. None of the
+ * grid styling carries over, so every standalone chart needs its own theme.
+ *
+ * This helper resolves UDP brand CSS variables off a host element at chart
+ * creation time and emits a theme. Two curated, orthogonal knobs shape the
+ * result so consumers get consistent looks without hand-rolling ag-charts
+ * options:
+ *
+ *   - `appearance` — colour + visual weight: `default` (multi-colour brand
+ *     palette, calm chrome), `soft` (pastel/tinted, low contrast), `bold`
+ *     (saturated, heavier strokes, visible axis lines), `mono` (a single
+ *     brand-hue ramp), `colorful` (per-label hues hashed from the data label
+ *     — see `applyColorfulColors` — so the same label is the same colour
+ *     across every chart, matching Fluent avatar colours).
+ *   - `shape` — geometry roundness, mirroring button/input shape tokens:
+ *     `square` (sharp corners, straight line segments) and `rounded`
+ *     (rounded bar/sector corners, smoothed lines).
+ *
+ * Both default to the original look (`default` / `square`), so charts that
+ * don't opt in render exactly as before. Consumer per-series options always
+ * win over the theme.
+ *
+ * Pass `getComputedStyle(this.el)` results directly; if a token resolves to
+ * empty (e.g. shadow DOM that hasn't inherited yet), the fallback is the
+ * ag-charts default for that role.
+ */
+export type UdpChartAppearance = 'default' | 'soft' | 'bold' | 'mono' | 'colorful';
+export type UdpChartShape = 'square' | 'rounded';
+export type UdpChartChrome = 'full' | 'flush';
+export interface UdpChartThemeOptions {
+    /**
+     * Light or dark base. Defaults to light (`ag-default`). Pass `'dark'` to
+     * inherit from `ag-default-dark`.
+     */
+    mode?: 'light' | 'dark';
+    /** Colour + visual-weight variant. Defaults to `'default'`. */
+    appearance?: UdpChartAppearance;
+    /** Geometry roundness variant. Defaults to `'square'`. */
+    shape?: UdpChartShape;
+    /**
+     * Chrome density. `full` keeps axes, gridlines, legend and padding;
+     * `flush` strips all chrome and zeroes the chart's internal padding so the
+     * plot bleeds to the container edges — the KPI-card "sparkline" look. Pair
+     * `flush` with a `udp-fluent-card` `preview` slot (or `bodyPadding={false}`)
+     * for a chart that reads as part of the card surface. Defaults to `'full'`.
+     */
+    chrome?: UdpChartChrome;
+}
+export type ChartColorTier = 'fill' | 'stroke';
+/**
+ * Hash a string to a stable integer. Copied verbatim from the Fluent avatar
+ * (`@fluentui/web-components`) so the same label maps to the same hue here as
+ * it would on an avatar.
+ */
+export declare const getChartColorHash: (str: string) => number;
+/**
+ * Deterministic brand colour for a data label. The same `label` always returns
+ * the same hue, so a value (e.g. a status) reads consistently across every
+ * chart that plots it — and matches the Fluent avatar colour for that name.
+ * `tier` picks the light bubble fill (`'fill'`) or the saturated edge/line
+ * colour (`'stroke'`).
+ */
+export declare const chartColorForLabel: (label: string, tier?: ChartColorTier, styles?: CSSStyleDeclaration) => string;
+/**
+ * Read every UDP brand token off `rootEl` and return an `AgChartTheme`
+ * suitable for passing as the top-level `theme` option to
+ * `AgCharts.create({...})`. Returns the bare base theme name when no
+ * element is provided (SSR path).
+ */
+export declare const buildUdpChartTheme: (rootEl: Element | null | undefined, options?: UdpChartThemeOptions) => AgChartTheme | AgChartThemeName;
+export declare const applySeriesColors: <T extends {
+    series?: unknown;
+    data?: unknown;
+}>(options: T, rootEl: Element | null | undefined, appearance: UdpChartAppearance | undefined) => T;

package/dist/types/components/charts/udp-ag-area-chart/udp-ag-area-chart.d.ts

@@ -0,0 +1,73 @@
+import { type AgCartesianChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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.
+ */
+export declare class UdpAgAreaChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * 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.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}

package/dist/types/components/charts/udp-ag-bar-chart/udp-ag-bar-chart.d.ts

@@ -0,0 +1,62 @@
+import { type AgCartesianChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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.
+ */
+export declare class UdpAgBarChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * 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.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}

package/dist/types/components/charts/udp-ag-bubble-chart/udp-ag-bubble-chart.d.ts

@@ -0,0 +1,70 @@
+import { type AgCartesianChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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.
+ */
+export declare class UdpAgBubbleChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * 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.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}

package/dist/types/components/charts/udp-ag-combo-chart/udp-ag-combo-chart.d.ts

@@ -0,0 +1,83 @@
+import { type AgCartesianChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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.
+ */
+export declare class UdpAgComboChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * 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.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}

package/dist/types/components/charts/udp-ag-donut-chart/udp-ag-donut-chart.d.ts

@@ -0,0 +1,70 @@
+import { type AgPolarChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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.
+ */
+export declare class UdpAgDonutChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * Geometry roundness, mirroring the button/input shape tokens: `square`
+     * (sharp sector corners) or `rounded` (rounded sector corners).
+     * Per-series `cornerRadius` on `chartOptions` still wins.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}

package/dist/types/components/charts/udp-ag-line-chart/udp-ag-line-chart.d.ts

@@ -0,0 +1,75 @@
+import { type AgCartesianChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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.
+ */
+export declare class UdpAgLineChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * 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.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}

package/dist/types/components/charts/udp-ag-pie-chart/udp-ag-pie-chart.d.ts

@@ -0,0 +1,72 @@
+import { type AgPolarChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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.
+ */
+export declare class UdpAgPieChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * Geometry roundness, mirroring the button/input shape tokens: `square`
+     * (sharp sector corners) or `rounded` (rounded sector corners).
+     * Per-series `cornerRadius` on `chartOptions` still wins.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}

package/dist/types/components/charts/udp-ag-scatter-chart/udp-ag-scatter-chart.d.ts

@@ -0,0 +1,76 @@
+import { type AgCartesianChartOptions } from 'ag-charts-community';
+import { type UdpChartAppearance, type UdpChartShape, type UdpChartChrome } from '../charts-theme';
+/**
+ * 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`.
+ */
+export declare class UdpAgScatterChart {
+    el: HTMLElement;
+    /**
+     * 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;
+    /** Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customWidth?: number | string;
+    /** Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%). */
+    customHeight?: number | string;
+    /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+    chartId: string;
+    /**
+     * 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.
+     */
+    appearance: UdpChartAppearance;
+    /**
+     * 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.
+     */
+    shape: UdpChartShape;
+    /**
+     * 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}`.
+     */
+    chrome: UdpChartChrome;
+    private chart?;
+    handleOptionsChanged(): void;
+    componentDidLoad(): void;
+    private handleThemeChanged;
+    disconnectedCallback(): void;
+    private buildOptions;
+    render(): any;
+}