@ojiepermana/angular 22.1.11 → 22.1.13

package/theme/styles/css/neutral/slate.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: slate. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='slate'][data-mode='light'] {
+    --layout-canvas: 215 40% 95%;
+    --foreground: 215 16% 12%;
+    --surface: 215 16% 96%;
+    --surface-foreground: 215 16% 12%;
+    --card: 215 52% 99%;
+    --card-foreground: 215 16% 12%;
+    --popover: 215 52% 99%;
+    --popover-foreground: 215 16% 12%;
+    --muted: 215 16% 95%;
+    --muted-foreground: 215 16% 42%;
+    --border: 215 16% 88%;
+    --input: 215 16% 88%;
+    --layout-grid-line: 215 16% 82%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 215 35%;
+    --layout-pattern-node: 215 35% 32%;
+  }
+
+  html[theme-neutral='slate'][data-mode='dark'] {
+    --layout-canvas: 215 16% 15%;
+    --foreground: 215 8% 96%;
+    --surface: 215 16% 11%;
+    --surface-foreground: 215 8% 96%;
+    --card: 215 16% 8%;
+    --card-foreground: 215 8% 96%;
+    --popover: 215 16% 8%;
+    --popover-foreground: 215 8% 96%;
+    --muted: 215 16% 15%;
+    --muted-foreground: 215 11% 64%;
+    --border: 215 16% 17%;
+    --input: 215 16% 17%;
+    --layout-grid-line: 215 16% 22%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 215 30%;
+    --layout-pattern-node: 215 30% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='slate']:not([data-mode='light']) {
+      --layout-canvas: 215 16% 15%;
+      --foreground: 215 8% 96%;
+      --surface: 215 16% 11%;
+      --surface-foreground: 215 8% 96%;
+      --card: 215 16% 8%;
+      --card-foreground: 215 8% 96%;
+      --popover: 215 16% 8%;
+      --popover-foreground: 215 8% 96%;
+      --muted: 215 16% 15%;
+      --muted-foreground: 215 11% 64%;
+      --border: 215 16% 17%;
+      --input: 215 16% 17%;
+      --layout-grid-line: 215 16% 22%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 215 30%;
+      --layout-pattern-node: 215 30% 78%;
+    }
+  }
+}

package/theme/styles/css/neutral/stone.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: stone. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='stone'][data-mode='light'] {
+    --layout-canvas: 30 15% 95%;
+    --foreground: 30 6% 12%;
+    --surface: 30 6% 96%;
+    --surface-foreground: 30 6% 12%;
+    --card: 30 27% 99%;
+    --card-foreground: 30 6% 12%;
+    --popover: 30 27% 99%;
+    --popover-foreground: 30 6% 12%;
+    --muted: 30 6% 95%;
+    --muted-foreground: 30 6% 42%;
+    --border: 30 6% 88%;
+    --input: 30 6% 88%;
+    --layout-grid-line: 30 6% 82%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 30 15%;
+    --layout-pattern-node: 30 15% 32%;
+  }
+
+  html[theme-neutral='stone'][data-mode='dark'] {
+    --layout-canvas: 30 6% 15%;
+    --foreground: 30 3% 96%;
+    --surface: 30 6% 11%;
+    --surface-foreground: 30 3% 96%;
+    --card: 30 6% 8%;
+    --card-foreground: 30 3% 96%;
+    --popover: 30 6% 8%;
+    --popover-foreground: 30 3% 96%;
+    --muted: 30 6% 15%;
+    --muted-foreground: 30 4% 64%;
+    --border: 30 6% 17%;
+    --input: 30 6% 17%;
+    --layout-grid-line: 30 6% 22%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 30 12%;
+    --layout-pattern-node: 30 12% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='stone']:not([data-mode='light']) {
+      --layout-canvas: 30 6% 15%;
+      --foreground: 30 3% 96%;
+      --surface: 30 6% 11%;
+      --surface-foreground: 30 3% 96%;
+      --card: 30 6% 8%;
+      --card-foreground: 30 3% 96%;
+      --popover: 30 6% 8%;
+      --popover-foreground: 30 3% 96%;
+      --muted: 30 6% 15%;
+      --muted-foreground: 30 4% 64%;
+      --border: 30 6% 17%;
+      --input: 30 6% 17%;
+      --layout-grid-line: 30 6% 22%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 30 12%;
+      --layout-pattern-node: 30 12% 78%;
+    }
+  }
+}

package/theme/styles/css/neutral/taupe.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: taupe. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='taupe'][data-mode='light'] {
+    --layout-canvas: 28 25% 95%;
+    --foreground: 28 10% 12%;
+    --surface: 28 10% 96%;
+    --surface-foreground: 28 10% 12%;
+    --card: 28 37% 99%;
+    --card-foreground: 28 10% 12%;
+    --popover: 28 37% 99%;
+    --popover-foreground: 28 10% 12%;
+    --muted: 28 10% 95%;
+    --muted-foreground: 28 10% 42%;
+    --border: 28 10% 88%;
+    --input: 28 10% 88%;
+    --layout-grid-line: 28 10% 82%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 28 25%;
+    --layout-pattern-node: 28 25% 32%;
+  }
+
+  html[theme-neutral='taupe'][data-mode='dark'] {
+    --layout-canvas: 28 10% 15%;
+    --foreground: 28 5% 96%;
+    --surface: 28 10% 11%;
+    --surface-foreground: 28 5% 96%;
+    --card: 28 10% 8%;
+    --card-foreground: 28 5% 96%;
+    --popover: 28 10% 8%;
+    --popover-foreground: 28 5% 96%;
+    --muted: 28 10% 15%;
+    --muted-foreground: 28 7% 64%;
+    --border: 28 10% 17%;
+    --input: 28 10% 17%;
+    --layout-grid-line: 28 10% 22%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 28 20%;
+    --layout-pattern-node: 28 20% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='taupe']:not([data-mode='light']) {
+      --layout-canvas: 28 10% 15%;
+      --foreground: 28 5% 96%;
+      --surface: 28 10% 11%;
+      --surface-foreground: 28 5% 96%;
+      --card: 28 10% 8%;
+      --card-foreground: 28 5% 96%;
+      --popover: 28 10% 8%;
+      --popover-foreground: 28 5% 96%;
+      --muted: 28 10% 15%;
+      --muted-foreground: 28 7% 64%;
+      --border: 28 10% 17%;
+      --input: 28 10% 17%;
+      --layout-grid-line: 28 10% 22%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 28 20%;
+      --layout-pattern-node: 28 20% 78%;
+    }
+  }
+}

package/theme/styles/css/neutral/zinc.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: zinc. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='zinc'][data-mode='light'] {
+    --layout-canvas: 240 13% 95%;
+    --foreground: 240 5% 12%;
+    --surface: 240 5% 96%;
+    --surface-foreground: 240 5% 12%;
+    --card: 240 25% 99%;
+    --card-foreground: 240 5% 12%;
+    --popover: 240 25% 99%;
+    --popover-foreground: 240 5% 12%;
+    --muted: 240 5% 95%;
+    --muted-foreground: 240 5% 42%;
+    --border: 240 5% 88%;
+    --input: 240 5% 88%;
+    --layout-grid-line: 240 5% 82%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 240 13%;
+    --layout-pattern-node: 240 13% 32%;
+  }
+
+  html[theme-neutral='zinc'][data-mode='dark'] {
+    --layout-canvas: 240 5% 15%;
+    --foreground: 240 3% 96%;
+    --surface: 240 5% 11%;
+    --surface-foreground: 240 3% 96%;
+    --card: 240 5% 8%;
+    --card-foreground: 240 3% 96%;
+    --popover: 240 5% 8%;
+    --popover-foreground: 240 3% 96%;
+    --muted: 240 5% 15%;
+    --muted-foreground: 240 4% 64%;
+    --border: 240 5% 17%;
+    --input: 240 5% 17%;
+    --layout-grid-line: 240 5% 22%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 240 10%;
+    --layout-pattern-node: 240 10% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='zinc']:not([data-mode='light']) {
+      --layout-canvas: 240 5% 15%;
+      --foreground: 240 3% 96%;
+      --surface: 240 5% 11%;
+      --surface-foreground: 240 3% 96%;
+      --card: 240 5% 8%;
+      --card-foreground: 240 3% 96%;
+      --popover: 240 5% 8%;
+      --popover-foreground: 240 3% 96%;
+      --muted: 240 5% 15%;
+      --muted-foreground: 240 4% 64%;
+      --border: 240 5% 17%;
+      --input: 240 5% 17%;
+      --layout-grid-line: 240 5% 22%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 240 10%;
+      --layout-pattern-node: 240 10% 78%;
+    }
+  }
+}

package/theme/styles/css/radius/index.css

@@ -0,0 +1,30 @@
+/*
+ * Corner radius axis (theme-radius). Each preset sets the single --radius-base
+ * knob; the whole --radius-* scale + every rounded-* utility follows via the
+ * calc() chain (base/tailwind.css @theme inline). Runtime-switched by
+ * ThemeRadiusService via <html theme-radius>. Every value is Tailwind's stock
+ * radius for that name (rounded-none/xs/sm/md/xl/full); 'md' is the default.
+ *
+ * Wrapped in @layer tokens to match base/tokens.css and the color/neutral
+ * presets; html[theme-radius='x'] (0,1,1) beats the :root default (0,1,0).
+ */
+@layer tokens {
+  html[theme-radius='none'] {
+    --radius-base: 0px;
+  }
+  html[theme-radius='xs'] {
+    --radius-base: 0.125rem;
+  }
+  html[theme-radius='sm'] {
+    --radius-base: 0.25rem;
+  }
+  html[theme-radius='md'] {
+    --radius-base: 0.375rem;
+  }
+  html[theme-radius='xl'] {
+    --radius-base: 0.75rem;
+  }
+  html[theme-radius='full'] {
+    --radius-base: calc(infinity * 1px);
+  }
+}

package/theme/styles/css/space/index.css

@@ -0,0 +1,20 @@
+/*
+ * Spacing density axis (theme-space). Each preset sets the single --spacing-base
+ * knob; Tailwind derives --spacing from it (base/tailwind.css @theme inline), so
+ * every padding, margin, gap, width and height utility (and the --spacing-N
+ * scale) rescales at runtime. Switched by ThemeSpaceService via <html theme-space>.
+ * normal = the 0.25rem default (the Tailwind unit), so it is a no-op baseline.
+ *
+ * Wrapped in @layer tokens to match the radius/color/neutral presets;
+ * html[theme-space='x'] (0,1,1) beats the :root default (0,1,0).
+ */
+@layer tokens {
+  /* Two presets only: compact (~14% tighter step) and normal, the 0.25rem
+   * Tailwind default (no-op baseline). */
+  html[theme-space='compact'] {
+    --spacing-base: 0.215rem;
+  }
+  html[theme-space='normal'] {
+    --spacing-base: 0.25rem;
+  }
+}

package/types/ojiepermana-angular-chart-area.d.ts

@@ -1 +1,76 @@
-export * from '@ojiepermana/angular-chart/area';
+import * as _ojiepermana_angular_chart_core from '@ojiepermana/angular/chart/core';
+import { ChartOrientation, LineCurve, ChartMargin, ChartPointClickEvent, LinePoint, LineSeriesPath } from '@ojiepermana/angular/chart/core';
+import * as _angular_core from '@angular/core';
+
+/**
+ * @deprecated Use `ChartPointClickEvent` from
+ * `@ojiepermana/angular/chart/core`. Kept so existing handlers keep compiling;
+ * the shape is identical.
+ */
+type AreaPointClickEvent = ChartPointClickEvent;
+/**
+ * Area chart — composable within `<Chart>`.
+ *
+ * - `stacked=true` stacks series along the value axis.
+ * - `gradient=true` fills each area with a vertical linear-gradient from
+ *   the series color (top) to transparent (bottom). The gradient is
+ *   emitted as `<defs><linearGradient>` per series, unique per chart id.
+ */
+declare class AreaChart {
+    private readonly root;
+    private readonly cart;
+    private readonly viewport;
+    readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
+    readonly xKey: _angular_core.InputSignal<string>;
+    readonly orientation: _angular_core.InputSignal<ChartOrientation>;
+    /**
+     * Presentational style of the chart.
+     *
+     * Replaces `styles`, which read like a CSS styles bag rather than a single
+     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
+     * publishes a `variant` input for its grouped versus stacked axis, and one
+     * name cannot mean two things across the family.
+     */
+    readonly styleVariant: _angular_core.InputSignal<"base" | undefined>;
+    /**
+     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
+     *   `styleVariant` wins. Due for removal in the next major.
+     */
+    readonly styles: _angular_core.InputSignal<"base">;
+    /** The style actually in effect. Bind this, never `styles()`. */
+    protected readonly chartStyle: _angular_core.Signal<"base">;
+    readonly stacked: _angular_core.InputSignal<boolean>;
+    readonly expanded: _angular_core.InputSignal<boolean>;
+    readonly gradient: _angular_core.InputSignal<boolean>;
+    readonly curve: _angular_core.InputSignal<LineCurve>;
+    private readonly themeSpace;
+    /**
+     * Plot gutters. Leave it unset and they follow the theme-space density
+     * axis; set it and your numbers win, unchanged, whatever the axis says.
+     */
+    readonly margin: _angular_core.InputSignal<ChartMargin | null>;
+    /** The margin actually in effect. Bind this, never `margin()`. */
+    protected readonly plotMargin: _angular_core.Signal<ChartMargin>;
+    readonly strokeWidth: _angular_core.InputSignal<number>;
+    readonly showDots: _angular_core.InputSignal<boolean>;
+    readonly dotRadius: _angular_core.InputSignal<number>;
+    readonly pointClick: _angular_core.OutputEmitterRef<AreaPointClickEvent>;
+    /**
+     * The shared cartesian scaffolding: geometry, the index window, the layout
+     * effect, and the click plus active-point plus aria-label handlers.
+     *
+     * Declared before `layout` because the layout computed reads its geometry.
+     */
+    protected readonly cx: _ojiepermana_angular_chart_core.CartesianChartSetup<LinePoint>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_chart_core.AreaLayoutResult>;
+    protected readonly series: _angular_core.Signal<readonly LineSeriesPath[]>;
+    protected readonly ariaSummary: _angular_core.Signal<string>;
+    protected readonly dataColumns: _angular_core.Signal<string[]>;
+    protected gradientId(seriesKey: string): string;
+    protected areaFill(seriesKey: string, color: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaChart, "ChartArea", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "xKey": { "alias": "xKey"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "styleVariant": { "alias": "styleVariant"; "required": false; "isSignal": true; }; "styles": { "alias": "styles"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "gradient": { "alias": "gradient"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "dotRadius": { "alias": "dotRadius"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; }, never, ["svg:g[ChartBrush]", "svg\\:g[ChartGrid]", "svg\\:g[ChartAxisX]", "svg\\:g[ChartAxisY]", "svg\\:g[ChartCrosshair]", "ChartTooltip", "ChartLegend", "ChartZoomControls"], true, never>;
+}
+
+export { AreaChart };
+export type { AreaPointClickEvent };

package/types/ojiepermana-angular-chart-bar.d.ts

@@ -1 +1,201 @@
-export * from '@ojiepermana/angular-chart/bar';
+import * as _ojiepermana_angular_chart_bar from '@ojiepermana/angular/chart/bar';
+import * as _ojiepermana_angular_chart_core from '@ojiepermana/angular/chart/core';
+import { ChartDatum, ChartOrientation, ChartStyleVariant, ChartMargin, ChartPointClickEvent } from '@ojiepermana/angular/chart/core';
+import * as _angular_core from '@angular/core';
+import { scaleBand, scaleLinear } from 'd3-scale';
+
+/** Bar-chart layout variant. */
+type BarVariant = 'grouped' | 'stacked';
+/** A single bar rectangle ready to render. */
+interface BarRect {
+    readonly key: string;
+    readonly seriesKey: string;
+    readonly datumIndex: number;
+    readonly category: string;
+    readonly value: number;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly color: string;
+    readonly active: boolean;
+}
+/** Inputs required to compute bar-chart geometry. */
+interface BarLayoutInput {
+    readonly data: readonly ChartDatum[];
+    readonly xKey: string;
+    readonly seriesKeys: readonly string[];
+    readonly variant: BarVariant;
+    readonly orientation: ChartOrientation;
+    readonly innerWidth: number;
+    readonly innerHeight: number;
+    readonly bandPadding: number;
+    readonly groupPadding: number;
+    readonly colorKey?: string;
+    readonly activeKey?: string;
+    readonly activeValue?: string | number;
+}
+/** Computed layout: bars + scales. */
+interface BarLayoutResult {
+    readonly bars: readonly BarRect[];
+    readonly categoryScale: ReturnType<typeof scaleBand<string>>;
+    readonly valueScale: ReturnType<typeof scaleLinear<number, number>>;
+    readonly categories: readonly string[];
+}
+/** Build all bar rectangles for the given config. */
+declare function computeBarLayout(input: BarLayoutInput): BarLayoutResult;
+
+/**
+ * Styles supported by the bar family.
+ *
+ * - `base` — classic solid rectangles.
+ * - `dot`  — dot-matrix rendering: each bar becomes a stack of small rounded
+ *   cells, on top of a faint full-height cell track. Colors only reference
+ *   theme CSS variables (`--color-<key>` per series, `--muted` for the track),
+ *   so the style follows the active theme without touching the theme library.
+ */
+type BarChartStyle = ChartStyleVariant | 'dot';
+/** A faint background cell of the dot-matrix track. */
+interface BarDotTrackCell {
+    readonly key: string;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+/** A filled (value) cell of the dot-matrix style. */
+interface BarDotValueCell extends BarDotTrackCell {
+    readonly seriesKey: string;
+    readonly datumIndex: number;
+    readonly color: string;
+    readonly active: boolean;
+}
+/** Inputs required to compute the dot-matrix cell layout. */
+interface BarDotLayoutInput {
+    readonly bars: readonly BarRect[];
+    readonly orientation: ChartOrientation;
+    readonly innerWidth: number;
+    readonly innerHeight: number;
+    /** Pixel position of value 0 on the value axis (`valueScale(0)`). */
+    readonly baseline: number;
+    /** Cell length along the value axis. Defaults to the bar thickness (square cells). */
+    readonly dotSize?: number;
+    /** Gap between consecutive cells along the value axis. */
+    readonly dotGap: number;
+}
+/** Computed dot-matrix layout: faint track cells + filled value cells. */
+interface BarDotLayoutResult {
+    readonly track: readonly BarDotTrackCell[];
+    readonly values: readonly BarDotValueCell[];
+}
+/**
+ * Build the dot-matrix cells for the `dot` bar style.
+ *
+ * Cells tile a global grid anchored at the value baseline, so stacked
+ * segments snap to the same rows and never overlap. A bar fills every cell
+ * whose center lies inside its value range; bars too short to cover a center
+ * still claim the cell nearest their midpoint when it is free.
+ */
+declare function computeBarDotCells(input: BarDotLayoutInput): BarDotLayoutResult;
+
+/** Event emitted when a user clicks a bar. */
+/**
+ * @deprecated Use `ChartPointClickEvent` from
+ * `@ojiepermana/angular/chart/core`. Kept so existing handlers keep compiling;
+ * the shape is identical.
+ */
+type BarClickEvent = ChartPointClickEvent;
+/**
+ * Bar chart — composable within `<Chart>`.
+ *
+ * Layout variants (via inputs):
+ * - `orientation`: `'vertical'` (default) or `'horizontal'`
+ * - `variant`:     `'grouped'`  (default) or `'stacked'`
+ * - `styles`:      `'base'`     (default) or `'dot'` (dot-matrix cells)
+ */
+declare class BarChart {
+    private readonly root;
+    private readonly cart;
+    private readonly themeRadius;
+    readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
+    readonly xKey: _angular_core.InputSignal<string>;
+    readonly orientation: _angular_core.InputSignal<ChartOrientation>;
+    readonly variant: _angular_core.InputSignal<BarVariant>;
+    /**
+     * Presentational style of the chart.
+     *
+     * Replaces `styles`, which read like a CSS styles bag rather than a single
+     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
+     * publishes a `variant` input for its grouped versus stacked axis, and one
+     * name cannot mean two things across the family.
+     */
+    readonly styleVariant: _angular_core.InputSignal<BarChartStyle | undefined>;
+    /**
+     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
+     *   `styleVariant` wins. Due for removal in the next major.
+     */
+    readonly styles: _angular_core.InputSignal<BarChartStyle>;
+    /** The style actually in effect. Bind this, never `styles()`. */
+    protected readonly chartStyle: _angular_core.Signal<BarChartStyle>;
+    private readonly themeSpace;
+    /**
+     * Plot gutters. Leave it unset and they follow the theme-space density
+     * axis; set it and your numbers win, unchanged, whatever the axis says.
+     */
+    readonly margin: _angular_core.InputSignal<ChartMargin | null>;
+    /** The margin actually in effect. Bind this, never `margin()`. */
+    protected readonly plotMargin: _angular_core.Signal<ChartMargin>;
+    readonly bandPadding: _angular_core.InputSignal<number>;
+    readonly groupPadding: _angular_core.InputSignal<number>;
+    readonly cornerRadius: _angular_core.InputSignal<number | null>;
+    readonly colorKey: _angular_core.InputSignal<string | undefined>;
+    readonly activeKey: _angular_core.InputSignal<string | undefined>;
+    readonly activeValue: _angular_core.InputSignal<string | number | undefined>;
+    readonly showValueLabels: _angular_core.InputSignal<boolean>;
+    readonly valueLabelFormat: _angular_core.InputSignal<(value: number) => string>;
+    /** Cell length along the value axis for the `dot` style; defaults to the bar thickness. */
+    readonly dotSize: _angular_core.InputSignal<number | undefined>;
+    /** Gap between consecutive cells along the value axis for the `dot` style. */
+    readonly dotGap: _angular_core.InputSignal<number>;
+    /** Corner radius of each `dot` cell. */
+    readonly dotCornerRadius: _angular_core.InputSignal<number | null>;
+    /** Render the faint full-height cell track behind the `dot` values. */
+    readonly showDotTrack: _angular_core.InputSignal<boolean>;
+    readonly barClick: _angular_core.OutputEmitterRef<BarClickEvent>;
+    /**
+     * The shared cartesian scaffolding: geometry, the layout effect, and the click
+     * plus active-point plus aria-label handlers. No `viewport` here, so the bar
+     * chart always renders its whole dataset and `resolveDatumIndex` is the
+     * identity.
+     *
+     * Declared before `layout` because the layout computed reads its geometry.
+     */
+    protected readonly cx: _ojiepermana_angular_chart_core.CartesianChartSetup<BarRect>;
+    /** Bar corner radius; an unset input follows the live theme-radius axis. */
+    protected readonly resolvedCornerRadius: _angular_core.Signal<number>;
+    /** Dot-cell corner radius; an unset input follows the theme-radius axis (smaller, SVG clamps to half the cell). */
+    protected readonly resolvedDotCornerRadius: _angular_core.Signal<number>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_chart_bar.BarLayoutResult>;
+    protected readonly bars: _angular_core.Signal<readonly BarRect[]>;
+    protected readonly dotLayout: _angular_core.Signal<BarDotLayoutResult | null>;
+    protected readonly dotTrackCells: _angular_core.Signal<readonly _ojiepermana_angular_chart_bar.BarDotTrackCell[]>;
+    protected readonly dotValueCells: _angular_core.Signal<readonly BarDotValueCell[]>;
+    protected readonly ariaSummary: _angular_core.Signal<string>;
+    protected readonly visibleSeriesKeys: _angular_core.Signal<readonly string[]>;
+    protected readonly dataColumns: _angular_core.Signal<string[]>;
+    protected barOpacity(bar: BarRect): number;
+    protected dotCellOpacity(cell: BarDotValueCell): number;
+    /** In `dot` style the bar rect stays as an invisible interaction target. */
+    protected barFill(bar: BarRect): string;
+    private emphasisOpacity;
+    protected formatValueLabel(bar: BarRect): string;
+    protected barLabelX(bar: BarRect): number;
+    protected barLabelY(bar: BarRect): number;
+    protected barLabelAnchor(bar: BarRect): 'middle' | 'start' | 'end';
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarChart, "ChartBar", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "xKey": { "alias": "xKey"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "styleVariant": { "alias": "styleVariant"; "required": false; "isSignal": true; }; "styles": { "alias": "styles"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "bandPadding": { "alias": "bandPadding"; "required": false; "isSignal": true; }; "groupPadding": { "alias": "groupPadding"; "required": false; "isSignal": true; }; "cornerRadius": { "alias": "cornerRadius"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": false; "isSignal": true; }; "activeValue": { "alias": "activeValue"; "required": false; "isSignal": true; }; "showValueLabels": { "alias": "showValueLabels"; "required": false; "isSignal": true; }; "valueLabelFormat": { "alias": "valueLabelFormat"; "required": false; "isSignal": true; }; "dotSize": { "alias": "dotSize"; "required": false; "isSignal": true; }; "dotGap": { "alias": "dotGap"; "required": false; "isSignal": true; }; "dotCornerRadius": { "alias": "dotCornerRadius"; "required": false; "isSignal": true; }; "showDotTrack": { "alias": "showDotTrack"; "required": false; "isSignal": true; }; }, { "barClick": "barClick"; }, never, ["svg\\:g[ChartGrid]", "svg\\:g[ChartAxisX]", "svg\\:g[ChartAxisY]", "svg\\:g[ChartCrosshair]", "*", "ChartTooltip", "ChartLegend"], true, never>;
+}
+
+export { BarChart, computeBarDotCells, computeBarLayout };
+export type { BarChartStyle, BarClickEvent, BarDotLayoutInput, BarDotLayoutResult, BarDotTrackCell, BarDotValueCell, BarLayoutInput, BarLayoutResult, BarRect, BarVariant };