ngwr 11.0.0 → 11.2.0

package/skills/ngwr/references/setup.md

@@ -0,0 +1,73 @@
+# Setting up ngwr
+
+## Install
+
+```bash
+ng add ngwr
+```
+
+Prompts for styles, date adapter, density and theme, installs the peers, and
+prints a bootstrap snippet tailored to the answers.
+
+## Bootstrap
+
+```ts
+import { provideWrTheme } from 'ngwr/theme';
+import { provideWrOverlay } from 'ngwr/overlay';
+import { provideWrIcons } from 'ngwr/icon';
+import { lucideIcons } from 'ngwr/icon/adapters/lucide';
+
+bootstrapApplication(App, {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideWrTheme(),
+    provideWrOverlay(),
+    provideWrIcons(lucideIcons({ check, chevronDown })),
+  ],
+});
+```
+
+`provideWrOverlay()` gives ngwr its OWN CDK overlay container, which is what
+keeps it from colliding with Material or NG-ZORRO in the same app. It also
+installs `WrVisualViewport`, which publishes `--wr-keyboard-inset`.
+
+## Styles
+
+```scss
+@use 'ngwr';          // everything
+@use 'ngwr/button';   // or one entry point at a time
+```
+
+Resolved through the `sass` condition in the package's `exports` map. Entry
+points that ship no stylesheet (the `/testing` harnesses, `ngwr/utils`) have no
+`@use` target — importing one fails the build.
+
+## Providers with no default
+
+### `provideWrOverlay() // from 'ngwr/overlay'`
+
+Overlays render into an ngwr-owned container; without it they never appear. Needed by `WrDialog`, `WrDrawer`, `WrToast`, `WrPopover`, `WrPopconfirm`, `WrContextMenu`, `WrSelect`, `WrDropdown`, `WrCommandPalette`, `WrCascader`, `WrMention`, `WrDatePicker`, `WrTour`, `WrLightbox`.
+
+### `provideWrIcons(lucideIcons({ … })) // from 'ngwr/icon' + 'ngwr/icon/adapters/lucide'`
+
+Icons resolve by name from a registry you populate. Needed by `WrIcon`.
+
+### `provideWrDateAdapter(wrDateFnsAdapter) // from 'ngwr/date-adapter-fns'`
+
+Every date mode goes through an adapter; there is no built-in default. Needed by `WrDatePicker`, `WrCalendar`, `WrEventCalendar`.
+
+### `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n'`
+
+The pipe and directive read from a catalog you provide. Needed by `WrT`, `WrI18n`.
+
+## Optional, app-wide
+
+- `provideWrConfig({ button: { size: 'sm' } })` — component defaults. A bound
+  value always wins, including a bound `false` over a configured `true`.
+- `provideWrDensity('sm' | 'md' | 'lg' | 'touch')` — one control size for the
+  whole app; `touch` enlarges every hit area at once.
+- `provideWrResponsiveOverlays()` — overlays present as bottom sheets under the
+  breakpoint (640px by default). Per-component opt-out with `[responsive]="false"`.
+- `provideWrFormErrors({ … })` — one place for validation copy; `<wr-form-field>`
+  resolves a message per error key through it, then the i18n catalog, then a
+  built-in fallback.

package/stepper/styles/_index.scss

@@ -45,8 +45,17 @@
     }
   }
 
+  // A column, because the connector is a SIBLING of the button inside the `<li>`:
+  // in a row it lands to the right of the label, where nothing connects. The
+  // giveaway was already in the connector's own rule — a `margin-left` of half
+  // the indicator only means anything when the line runs beneath the circle.
+  // `flex-start` rather than `stretch`: in a column that is the horizontal axis,
+  // so stretch would pull the button to full width and unstick the label from its
+  // circle. `gap: 0` because the base rule's 0.75rem would break the line.
   &--vertical &__header {
-    align-items: stretch;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
     flex: 0 0 auto;
   }
 
@@ -141,6 +150,10 @@
 
   &--vertical &__connector {
     width: 1.5px;
+    // The shared rule's `min-width: 1rem` is a minimum LENGTH for the horizontal
+    // line, and it outranks `width` — so without this reset the vertical connector
+    // paints as a 16px block instead of a 1.5px thread.
+    min-width: 0;
     min-height: 1.25rem;
     height: auto;
     margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
@@ -167,12 +180,15 @@
   }
 
   .wr-stepper--responsive:not(.wr-stepper--vertical) .wr-stepper__header {
-    align-items: stretch;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
     flex: 0 0 auto;
   }
 
   .wr-stepper--responsive:not(.wr-stepper--vertical) .wr-stepper__connector {
     width: 1.5px;
+    min-width: 0;
     min-height: 1.25rem;
     height: auto;
     margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);

package/table/styles/_index.scss

@@ -824,7 +824,9 @@
     border: 0;
     padding: 0.375rem 0.5rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-primary);
+    // A real "Reset" text button, so `-ink`. The sort / filter GLYPHS above keep
+    // the bare intent: graphics are held to 3:1, which they clear.
+    color: var(--wr-color-primary-ink);
     font: inherit;
     font-size: var(--wr-text-sm);
     cursor: pointer;

package/theme/styles/_colors.scss

@@ -272,9 +272,22 @@ $contrast-light: #ffffff !default;
   // 4.42. Half a point of headroom absorbs that, for 2–7 points of share.
   //
   // Going further is not free: 5.25 costs 7–11 points and 5.5 up to 14, which
-  // on `primary` means 93% -> 79% and a visibly muddier blue.
+  // on `primary` meant 93% -> 79% and a visibly muddier blue. (That trade was
+  // priced on the PRE-v11 bases; moving a base reprices it, as `primary` below
+  // shows — 78% now buys 5.0, not 5.5.)
+  //
+  // `primary` was re-derived when the DARK base deepened to #3567ff so its label
+  // could go white: a deeper base makes the ink deeper too, which on a dark tint
+  // is the losing direction. axe measured the old 86% at 4.48:1 on the sidebar's
+  // own tint — under AA, never mind the target. 78% is the most saturated share
+  // that reaches 5.0 there (5.04), and it only helps the light theme, where a
+  // lower share means MORE `--wr-color-dark` and a deeper ink on a pale tint.
+  // Solved against the exact pair axe resolved on the page (#4e79fd on #0f1a36),
+  // because a hand-rolled composite of the tint over the canvas does not
+  // reproduce what the browser paints — this file's own numbers are arithmetic,
+  // and `pnpm check:contrast` is the authority.
   $ink-mix: (
-    primary: 86%,
+    primary: 78%,
     secondary: 75%,
     success: 67%,
     warning: 48%,

package/theme/styles/_dark.scss

@@ -124,18 +124,30 @@ $_dark: #e6ebf3;
   --wr-color-muted-text-rgb: 154, 166, 184;
 
   // Brand-color retune
-  // The default primary (#3969e2) reads a touch dim on the deep
-  // canvas. Bump the base + shade derivations so hover / focus rings
-  // stay visible against slate-900.
-  --wr-color-primary: #5b85ff;
-  // Same reason as the loop above — the light primary pairs with white, but the
-  // lightened dark-theme primary only reaches 3.36:1 against it.
-  --wr-color-primary-contrast: #{colors.contrast(#5b85ff)};
-  --wr-color-primary-rgb: 91, 133, 255;
-  --wr-color-primary-light: #7a9eff;
-  --wr-color-primary-dark: #2f56c9;
-  --wr-color-primary-lighter: #99b6ff;
-  --wr-color-primary-darker: #1f3a99;
+  // The default primary (#3969e2) reads a touch dim on the deep canvas. What
+  // carries here is SATURATION, not lightness: #3567ff is only ~7% more luminous
+  // than the light base but runs the blue channel to 255, and the shades follow it
+  // so hover / focus rings stay visible against slate-900.
+  //
+  // Deep enough for a WHITE label, and no deeper. `_contrast()` takes whichever
+  // of black / white scores higher, and the two are equal at √21 ≈ 4.58 — the
+  // previous #5b85ff sat at white 3.36 / black 6.24, so it took a BLACK label
+  // while the light theme's primary took white: one intent labelled two
+  // different ways across the themes. #3567ff reads white 4.63 / black 4.54.
+  //
+  // Saturation stays at 100%. Scaling the channels toward black reaches the same
+  // ratio at #4c6fd6, but that is S 63% — duller, which is the opposite of what
+  // this block exists for. Dropping lightness at full saturation keeps the colour
+  // vivid, and keeps it distinct from the light theme's #3969e2 rather than
+  // collapsing onto it.
+  --wr-color-primary: #3567ff;
+  --wr-color-primary-contrast: #{colors.contrast(#3567ff)};
+  --wr-color-primary-rgb: 53, 103, 255;
+  // The same lightness steps as before, taken off the new base.
+  --wr-color-primary-light: #547eff;
+  --wr-color-primary-dark: #2848aa;
+  --wr-color-primary-lighter: #7396ff;
+  --wr-color-primary-darker: #183179;
 
   // success / warning / danger — retuned bases now get the FULL symmetric
   // shade set in dark too (generated, so no intent can silently drift).

package/tree/styles/_index.scss

@@ -34,7 +34,8 @@
 
     &--selected {
       background: var(--wr-color-primary-soft);
-      color: var(--wr-color-primary);
+      // Text on the `-soft` tint: `-ink`. Bare measured 4.19:1 light / 3.63:1 dark.
+      color: var(--wr-color-primary-ink);
     }
 
     // Visible ring only when the row truly has keyboard focus — not
@@ -248,7 +249,8 @@
     padding-inline: 0.5rem 0.25rem;
     border-radius: 999px;
     background: var(--wr-color-primary-soft);
-    color: var(--wr-color-primary);
+    // The chip wraps a label, so this paints text on the chip's own tint.
+    color: var(--wr-color-primary-ink);
     font-size: var(--wr-text-sm);
     line-height: 1.4;
     user-select: none;

package/types/ngwr-action-sheet-testing.d.ts

@@ -0,0 +1,260 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { WrActionSheetAction } from 'ngwr/action-sheet';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/** Narrows which open `<wr-action-sheet>` a harness query matches. */
+interface WrActionSheetHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the sheet's VISIBLE heading — a string is an exact match, a RegExp is
+     * tested. A sheet with no `title` has none and matches nothing here; filter on
+     * `accessibleName` to reach one by the name it announces instead.
+     */
+    readonly title?: string | RegExp;
+    /** Match the muted sub-heading under the title. */
+    readonly message?: string | RegExp;
+    /**
+     * Match the name the dialog announces — the visible title when there is one, and
+     * otherwise the screen-reader-only fallback, which is the only name an untitled
+     * sheet has.
+     */
+    readonly accessibleName?: string | RegExp;
+}
+/** Narrows which row inside an action sheet a harness query matches. */
+interface WrActionSheetActionHarnessFilters extends BaseHarnessFilters {
+    /** Match the row's label — a string is an exact match, a RegExp is tested. */
+    readonly label?: string | RegExp;
+    /**
+     * Match the row's visual role. `default` covers every row the caller left
+     * unroled, which is what the component itself does with the value.
+     */
+    readonly role?: NonNullable<WrActionSheetAction['role']>;
+    /** Match only enabled (`false`) or only disabled (`true`) rows. */
+    readonly disabled?: boolean;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Test harness for one row inside a {@link WrActionSheetHarness}.
+ *
+ * A row is a real `<button>`, not an ARIA-decorated div, so `disabled` is the
+ * property rather than an attribute and the CDK refuses to click it — which is the
+ * behaviour a spec wants asserted, since the component ALSO checks `disabled`
+ * inside its own handler. Either guard alone would keep a disabled row inert; both
+ * being there means removing one is invisible until the other is removed too, and
+ * {@link click} is where that shows up.
+ *
+ * **Clicking a row closes the sheet.** The component emits `action` and clears
+ * `open` in the same call, so a harness held across a {@link click} is pointed at a
+ * detached element the moment it returns — read what you need first, and get a
+ * fresh harness afterwards if the sheet was reopened.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrActionSheetActionHarness extends ComponentHarness {
+    /** The class every row carries, cancel rows included. */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrActionSheetActionHarnessFilters): HarnessPredicate<WrActionSheetActionHarness>;
+    /**
+     * The row's label, trimmed.
+     *
+     * Read from `.wr-action-sheet__label` rather than from the button, so a leading
+     * icon can never join it. The icon contributes no text today — it is an `<svg>` —
+     * but an icon set that ships a `<title>` for its own accessibility would, and the
+     * label element is the thing that actually holds the string.
+     */
+    getLabel(): Promise<string>;
+    /**
+     * The row's visual role, as the component painted it.
+     *
+     * `default` is returned for a row the caller left unroled, which is what the
+     * component does with the value: only `destructive` and `cancel` change anything,
+     * and everything else falls through to the plain row. The two modifiers are
+     * mutually exclusive by construction — `cancel` rows are filtered into their own
+     * group before the destructive class is ever considered — so reading them in
+     * either order gives the same answer.
+     */
+    getRole(): Promise<NonNullable<WrActionSheetAction['role']>>;
+    /**
+     * Whether the row refuses interaction, from the button's own `disabled` property
+     * — the thing the CDK consults before dispatching a click, and the DOM before
+     * delivering one.
+     *
+     * There is no `aria-disabled` to fall back to here, and none is wanted: the row is
+     * a native button, where the property already carries the state to assistive tech.
+     */
+    isDisabled(): Promise<boolean>;
+    /** Whether the row draws a leading icon. */
+    hasIcon(): Promise<boolean>;
+    /**
+     * The icon's registered name, or `null` on a row without one.
+     *
+     * From `wr-icon`'s reflected `data-icon`, which is the only place the name reaches
+     * the DOM — the rendered `<svg>` carries no trace of which entry of the set it
+     * came from.
+     */
+    getIconName(): Promise<string | null>;
+    /**
+     * Pick this row — emitting `action` and closing the sheet.
+     *
+     * Throws on a disabled row instead of quietly doing nothing. The click would not
+     * land anyway (the DOM swallows it), so the alternative is a spec that reads as
+     * "picked the row" and asserts a sheet that never moved.
+     */
+    click(): Promise<void>;
+    /** Move keyboard focus to the row. */
+    focus(): Promise<void>;
+    /** Whether the row currently holds focus. */
+    isFocused(): Promise<boolean>;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Test harness for an open `<wr-action-sheet>` — the iOS-style bottom sheet of
+ * choices.
+ *
+ * The sheet renders through `<wr-drawer>`, so its rows are in the NGWR overlay
+ * container rather than in the fixture: load this from
+ * `TestbedHarnessEnvironment.documentRootLoader()`. A fixture-scoped loader finds
+ * nothing at all — the `<wr-action-sheet>` host element itself holds no content and
+ * the drawer it wraps is `display: none`.
+ *
+ * The anchor is `.wr-action-sheet`, the sheet's own root inside the drawer panel,
+ * which makes each instance self-scoping: two sheets open at once are two hosts, and
+ * every query here descends from one of them. That is worth stating because it is
+ * NOT how the drawer harness underneath has to work — a drawer publishes no link to
+ * the overlay it opened, so `WrDrawerHarness` anchors on the shared pane and scopes
+ * by id.
+ *
+ * **What belongs to the drawer, not here.** Dismissal by backdrop click or by the ✕
+ * button, the modal role, the focus trap and the panel's position are all the
+ * drawer's surface, and `WrDrawerHarness` from the same root loader answers them.
+ * {@link sendEscape} is the one exception, kept because dismissing without choosing
+ * is a documented behaviour of the sheet itself: it closes and emits NOTHING, which
+ * is the assertion most specs are actually after.
+ *
+ * @example
+ * ```ts
+ * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+ * const sheet = await rootLoader.getHarness(WrActionSheetHarness);
+ *
+ * expect(await sheet.getActionLabels()).toEqual(['Take Photo', 'Delete', 'Cancel']);
+ * await sheet.select({ label: 'Delete' });
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrActionSheetHarness extends ComponentHarness {
+    /** The sheet's root inside the drawer panel. A closed sheet renders none. */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — sheets can be stacked. */
+    static with(options?: WrActionSheetHarnessFilters): HarnessPredicate<WrActionSheetHarness>;
+    /**
+     * Whether this sheet is still open.
+     *
+     * A harness can only be obtained while the sheet is open — closing disposes the
+     * overlay and everything in it — so this is the answer for a harness you are
+     * already HOLDING: it flips to `false` after a pick or a dismissal, where a fresh
+     * `getHarnessOrNull()` comes back `null`.
+     *
+     * Attachment is the test rather than a class, because disposal removes the element
+     * without changing anything on it.
+     */
+    isOpen(): Promise<boolean>;
+    /** The visible heading, or `null` when the sheet was opened without a `title`. */
+    getTitle(): Promise<string | null>;
+    /** The muted sub-heading, or `null` when the sheet has no `message`. */
+    getMessage(): Promise<string | null>;
+    /**
+     * The name the dialog announces.
+     *
+     * The sheet always publishes one, and for an untitled sheet it is INVISIBLE: the
+     * component renders a screen-reader-only `[wrDrawerTitle]` carrying
+     * `actionSheet.label` (English default `Actions`), because a bottom sheet is an
+     * `aria-modal` dialog and an unnamed one is announced as nothing at all. Nothing
+     * on screen changes when that string is wrong or missing, which is exactly why it
+     * is worth an assertion.
+     *
+     * Read from `.wr-drawer__title` — the class the title directive applies — so the
+     * one query answers for both shapes: the visible heading carries it too.
+     */
+    getAccessibleName(): Promise<string>;
+    /** Whether the announced name comes from a visible heading rather than the fallback. */
+    isTitleVisible(): Promise<boolean>;
+    /**
+     * Whether the dialog is actually WIRED to that name — the drawer panel's
+     * `aria-labelledby` resolving to this sheet's own title element, and to nothing
+     * else on the page.
+     *
+     * {@link getAccessibleName} only proves a string exists in the markup; a screen
+     * reader reads it only if the reference points at it. The two are separate
+     * failures and the second is silent: the title renders, the sheet looks right, and
+     * the dialog is announced as unnamed. Worth its own assertion because the drawer
+     * resolves the reference AFTER attaching the panel rather than while rendering it,
+     * so a title that arrives late is named late or not at all.
+     *
+     * Counted across the document as well, because two panels answering to one id hand
+     * every reference to whichever comes first — which is how a second sheet ends up
+     * announcing the first one's title.
+     */
+    isNamed(): Promise<boolean>;
+    /** The rows this sheet offers, in DOM order — cancel rows last, in their own group. */
+    getActions(filters?: WrActionSheetActionHarnessFilters): Promise<WrActionSheetActionHarness[]>;
+    /** The labels of every row, in DOM order. */
+    getActionLabels(): Promise<string[]>;
+    /**
+     * The labels grouped the way the sheet lays them out: the main group first, then
+     * the cancel group when there is one.
+     *
+     * The grouping is the component's whole visual contract — a `cancel` row is pulled
+     * out of the list and pinned to the bottom with a gap above it — and it is
+     * invisible to {@link getActionLabels}, which flattens the two. A cancel row that
+     * stopped being separated would still come last in DOM order, so the flat list
+     * cannot catch it.
+     */
+    getActionGroups(): Promise<string[][]>;
+    /**
+     * Whether the sheet drew a separate bottom group — true exactly when at least one
+     * row was given `role: 'cancel'`, since the component omits the group entirely
+     * rather than rendering an empty one.
+     */
+    hasCancelGroup(): Promise<boolean>;
+    /**
+     * Pick the first row matching the filters.
+     *
+     * Throws when nothing matches, naming what the sheet does offer — the alternative
+     * is a silent no-op followed by an assertion about a sheet that never moved. A
+     * disabled match throws too, from the row harness.
+     */
+    select(filters: WrActionSheetActionHarnessFilters): Promise<void>;
+    /**
+     * Press Escape — dismissing the sheet WITHOUT emitting `action`.
+     *
+     * The key never needs to reach the sheet itself: the drawer underneath listens
+     * through the CDK's keyboard dispatcher, which keeps one document listener and
+     * hands the event to the top-most overlay. So with sheets stacked this dismisses
+     * the top one whichever harness it is called on.
+     */
+    sendEscape(): Promise<void>;
+}
+
+export { WrActionSheetActionHarness, WrActionSheetHarness };
+export type { WrActionSheetActionHarnessFilters, WrActionSheetHarnessFilters };

package/types/ngwr-bar-chart-testing.d.ts

@@ -0,0 +1,77 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/** Narrows which `<wr-bar-chart>` a harness query matches. */
+interface WrBarChartHarnessFilters extends BaseHarnessFilters {
+    /** Match a chart holding a bar with this label. */
+    readonly barLabel?: string | RegExp;
+}
+/** One column, as the chart draws and announces it. */
+interface WrBarChartBar {
+    /** The label printed under the column — decoration, and `aria-hidden`. */
+    readonly label: string;
+    /** The value printed above it, or `null` when `showValues` is off. */
+    readonly value: string | null;
+    /** What the column announces: the label and the value in one string. */
+    readonly name: string | null;
+    /** The bar's height as a percentage of the chart's maximum. */
+    readonly heightPercent: number;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Test harness for `<wr-bar-chart>`.
+ *
+ * **The bars are read as PERCENTAGES, not as pixels.** Each column's height is
+ * written inline as a share of the chart's maximum, which is the one number that
+ * survives a test with no layout — and it is also the component's whole job, since
+ * the maximum is either given or derived from the data.
+ *
+ * **The visible label row is decoration.** Every column carries `role="img"` with
+ * the label AND the value in its name, and the printed labels underneath are
+ * `aria-hidden` — so {@link WrBarChartBar.name} is what a screen reader gets and
+ * {@link WrBarChartBar.label} is what is drawn. Asserting only the second would pass
+ * on a chart that announces nothing.
+ *
+ * @example
+ * ```ts
+ * const chart = await loader.getHarness(WrBarChartHarness);
+ *
+ * expect(await chart.getLabels()).toEqual(['Mon', 'Tue', 'Wed']);
+ * expect((await chart.getBars())[1].heightPercent).toBe(100);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrBarChartHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrBarChartHarnessFilters): HarnessPredicate<WrBarChartHarness>;
+    /** Every column, in data order. */
+    getBars(): Promise<WrBarChartBar[]>;
+    /** The labels printed under the columns, in order. */
+    getLabels(): Promise<string[]>;
+    /** What each column announces — the label and the value together. */
+    getAccessibleNames(): Promise<(string | null)[]>;
+    /** How many columns the chart drew. */
+    getBarCount(): Promise<number>;
+    /** Whether the values are printed above the bars (`showValues`). */
+    hasValues(): Promise<boolean>;
+    /** The plot's height in pixels, as the component writes it inline. */
+    getPlotHeight(): Promise<number>;
+}
+
+export { WrBarChartHarness };
+export type { WrBarChartBar, WrBarChartHarnessFilters };