ngwr 11.1.0 → 12.0.0

package/theme/styles/_variables.scss

@@ -3,6 +3,20 @@
 // These are the canonical knobs every component reads from. Consumers
 // override them on `:root` (or any subtree) without touching SCSS.
 
+/// The tokens here that are composed out of one the THEME re-tunes, kept in a
+/// mixin so `_dark.scss` can re-declare them on the themed element. See the long
+/// note above `colors.derived()`: a `var()` inside a custom property is
+/// substituted where it is DECLARED, so a `:root` composition inherits into a
+/// scoped `[data-theme="dark"]` subtree as the light literal.
+///
+/// Only the ring. The other compositions in this file — `--wr-control-font-size-*`,
+/// `--wr-transition-*`, `--wr-overlay-*` — read sizes and durations, which no
+/// theme flips, so freezing them is the same value either way.
+@mixin derived-focus-ring() {
+  --wr-focus-ring-color: var(--wr-color-primary);
+  --wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), 0.25);
+}
+
 :root {
   // Border radius
   --wr-border-radius-sm: 0.375rem;
@@ -45,11 +59,16 @@
   --wr-duration-fast: 0.1s;
   --wr-duration-base: 0.15s;
   --wr-duration-slow: 0.3s;
+  // unused-ok: the slow end of a public scale. The catalog's own animations top
+  // out at `-slow`; a consumer's need not.
   --wr-duration-slower: 0.5s;
 
   // Transition shorthands
   --wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);
   --wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);
+  // unused-ok: the third shorthand. Components compose `-slow` with an easing
+  // themselves where they need it, but dropping one rung out of three would make
+  // the set look arbitrary.
   --wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);
 
   // Elevation
@@ -65,6 +84,52 @@
   --wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);
   --wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);
 
+  // Disabled
+  //
+  // How far a control fades when it will not respond. One number, because the
+  // catalog had **seven** — 0.6 in eighteen places, then 0.5, 0.7, 0.55, 0.4,
+  // 0.35 and 0.65 — spread over 29 entry points, and two components disagreed
+  // with THEMSELVES three ways inside one file (`date-picker` at 0.5 / 0.4 / 0.7,
+  // `calendar` at 0.5 / 0.35 / 0.6). Sibling text fields fading differently is
+  // not a design decision anyone made; it is what happens when the value has no
+  // name.
+  //
+  // 0.6 is the value eighteen of them already used. A component that genuinely
+  // needs another strength overrides this token in its own block, with the reason
+  // — the point is that the exception has to be argued rather than typed.
+  --wr-disabled-opacity: 0.6;
+
+  // Focus ring
+  //
+  // The keyboard indicator, as tokens rather than a recipe baked into SCSS —
+  // the ring was the one surface a consumer could not retheme, because
+  // `theme.focus-ring` hard-coded it.
+  //
+  // It is an OUTLINE now, and the halo is a second channel rather than the only
+  // one. The halo alone is a 25% tint of the primary over the page: **1.41:1 in
+  // light, 1.31:1 in dark**, where WCAG 1.4.11 asks 3:1 of a focus indicator —
+  // and the mixin also set `outline: none`, so for the forty-one selectors whose
+  // entire focus style is that mixin, nothing on screen met the bar. The solid
+  // token measures 4.89:1 and 4.07:1. Two components had already worked this out
+  // on their own, in three places, and hand-rolled
+  // `outline: 2px solid var(--wr-color-primary)` (`event-calendar` twice,
+  // `lightbox` once), and four more wrote an `outline-offset` next to the include
+  // that could never apply.
+  //
+  // An outline is also the only form the indicator survives in under
+  // `forced-colors`, which drops every `box-shadow` outright, and it is exempt
+  // from layout, so focus never reflows the box.
+  //
+  // Halo spread equals the offset on purpose: the halo fills exactly the gap the
+  // outline leaves, so the two read as one ring instead of two. A component that
+  // insets its outline (`outline-offset: -2px`, the idiom for a row inside an
+  // `overflow: hidden` container) keeps the halo outside, where its own clipping
+  // hides it.
+  // `-color` and `-halo` are composed off `--wr-color-primary`, so they live in
+  // `derived-focus-ring()` at the top of this file, included at the end of `:root`.
+  --wr-focus-ring-width: 2px;
+  --wr-focus-ring-offset: 2px;
+
   // Z-index scale
   //
   // Overlay panels inside the CDK container inherit its stacking; these
@@ -124,6 +189,8 @@
   --wr-tracking-wide: 0.025em;
   --wr-tracking-wider: 0.05em;
   --wr-tracking-widest: 0.1em;
+
+  @include derived-focus-ring;
 }
 
 // Shared open animation for overlay panels. Every overlay component

package/transfer/styles/_index.scss

@@ -11,7 +11,7 @@
   color: var(--wr-color-on-surface);
 
   &--disabled {
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 
   &__pane {
@@ -31,11 +31,24 @@
     gap: 0.5rem;
     padding: 0.5rem 0.625rem;
     border-bottom: 1px solid var(--wr-color-outline);
-    background: rgba(var(--wr-color-outline-rgb), 0.25);
+    background: var(--wr-color-fill);
+    // The checkbox and the count are intrinsically sized, so on a narrow pane
+    // the title absorbed the entire shortfall: at 375px it was 26px of a 91px
+    // track and the headers read "A…" and "S…". Let the count drop to its own
+    // line before that happens — it is the one part of the row that reads fine
+    // anywhere. Nothing moves while the row fits (measured: identical at 190px
+    // and 430px panes).
+    flex-wrap: wrap;
   }
 
   &__title {
-    flex: 1 1 auto;
+    // A small basis rather than `auto`: the title has to be the item that
+    // yields, and with a content-sized basis a long title pushes ITSELF onto
+    // the next line, leaving the select-all checkbox alone on a row and the
+    // two panes of one transfer with headers of different heights. 3.5rem is
+    // the widest basis that still shares a row with the checkbox in the
+    // narrowest pane the component reaches (113px).
+    flex: 1 1 3.5rem;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -98,6 +111,16 @@
     height: 1rem;
   }
 
+  // The panes are a plain flex row, so they already swap: under `dir="rtl"` the
+  // source pane lays out at the right. The move chevrons are drawn to physical
+  // directions, though, so "move to target" ends up pointing at the pane it
+  // moves away from. Turn them around with the panes, the same way the
+  // pagination and carousel arrows do. Both move buttons are icon-only, so
+  // nothing textual is caught.
+  [dir='rtl'] &__move .wr-icon__svg {
+    transform: scaleX(-1);
+  }
+
   // No container query here on purpose: `@container` only styles DESCENDANTS, so
   // a rule that reflows `.wr-transfer` itself could never match its own query.
   // Doing it properly means the house `responsive` opt-in modifier (a wrapper

package/tree/styles/_index.scss

@@ -46,7 +46,7 @@
 
     &--disabled {
       cursor: not-allowed;
-      opacity: 0.55;
+      opacity: var(--wr-disabled-opacity);
     }
 
     // Active-descendant cursor when virtualized — focus lives on the list
@@ -101,6 +101,20 @@
     transform: rotate(90deg);
   }
 
+  // The indent is logical and mirrors on its own, but the triangle is drawn
+  // pointing physically right — so under `dir="rtl"` a collapsed node aims back
+  // at its parent instead of at the children it would reveal. `tree.ts` already
+  // swaps ArrowLeft / ArrowRight for the same reason; this is the picture of that
+  // axis. Turn it around the way the cascader's branch arrow does.
+  //
+  // Scoped to the COLLAPSED state deliberately, and both halves matter: an
+  // unscoped rule sets the same property as the `aria-expanded='true'` rule
+  // above, and mirroring the inner `<svg>` instead would compose `rotate(90deg)`
+  // over `scaleX(-1)` and point an expanded node UP rather than down.
+  [dir='rtl'] &__row[aria-expanded='false'] &__toggle {
+    transform: scaleX(-1);
+  }
+
   &__label {
     flex: 1 1 auto;
     overflow: hidden;
@@ -109,7 +123,7 @@
   }
 
   &--disabled {
-    opacity: 0.7;
+    opacity: var(--wr-disabled-opacity);
     pointer-events: none;
   }
 
@@ -137,7 +151,7 @@
 
     &.wr-tree--disabled {
       --wr-tree-trigger-color: var(--wr-color-on-surface-muted);
-      --wr-tree-trigger-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+      --wr-tree-trigger-bg: var(--wr-color-fill);
     }
   }
 
@@ -152,7 +166,12 @@
     color: var(--wr-tree-trigger-color);
     border: 1px solid var(--wr-tree-trigger-border);
     border-radius: var(--wr-tree-trigger-radius);
-    padding: var(--wr-tree-trigger-padding-y) var(--wr-tree-trigger-padding-x);
+    // Density-multiplied like select / input / textarea / button. The comment
+    // above promises this trigger "lines up with select / input / button", and
+    // that only holds at `md` without the multiplier: at `touch` the others
+    // measured 35.59px and this one stayed at 30.
+    padding: calc(var(--wr-tree-trigger-padding-y) * var(--wr-density-y, 1))
+      calc(var(--wr-tree-trigger-padding-x) * var(--wr-density-x, 1));
     font-family: var(--wr-font-family-base);
     font-size: var(--wr-tree-trigger-font-size);
     line-height: var(--wr-tree-trigger-line-height);
@@ -226,8 +245,12 @@
     flex-wrap: wrap;
     align-items: center;
     padding: 0.25rem 0.5rem;
-    // Empty / one-row floor = single-mode height (+2px for the border).
-    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2 + 2px);
+    // Empty / one-row floor = single-mode height (+2px for the border), so it
+    // has to carry the same density multiplier the single-mode padding does —
+    // otherwise the two modes stop agreeing the moment density leaves `md`.
+    min-height: calc(
+      var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * var(--wr-density-y, 1) * 2 + 2px
+    );
   }
 
   &__chips {

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,85 @@
+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. That share is read off the
+ * `style` ATTRIBUTE rather than through `getCssValue()`, and the difference is not
+ * cosmetic: `getCssValue()` is `getComputedStyle()`, which hands the declared `60%`
+ * straight back in jsdom and resolves it to used pixels in a real browser — so the
+ * same harness answered `100` here and `200` under Selenium or a browser runner,
+ * with no error to say which one you got. The stylesheet's own `min-height: 1px`
+ * is a second way that read lies, turning an empty bar into `1`.
+ *
+ * **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[]>;
+    /** Parse one bar's declared share. See the class note on why this is not `getCssValue()`. */
+    private static heightPercentOf;
+    /** 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 };