@fusion.dev/helix-headless 0.0.0-dev

package/dist/avatar/root/avatar-root.d.ts

@@ -0,0 +1,71 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/** Initials for a name: first letter of the first and last words. */
+export declare const initialsOf: (name: string) => string;
+/**
+ * @summary Represents a person or entity with an image or their initials.
+ *
+ * @description
+ * Shows `src` until it fails to load. Without an image, or after a failure,
+ * the default slot is shown; its own fallback is the initials.
+ *
+ * The host carries the accessible name, taken from `name`, so the `<img>` has an
+ * empty `alt` and the initials are hidden from assistive technology. Announcing
+ * either would repeat the name. An `aria-label` on the host overrides `name`,
+ * for an avatar standing for something a person's name does not describe.
+ *
+ * `load` and `error` are relayed from the host. They are not composed, so they
+ * stop at the shadow boundary otherwise.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @aliases Profile picture, Gravatar
+ * @documentation https://helix.fusion.dev/components/avatar
+ *
+ * @slot - Shown when there is no usable image, in place of the initials.
+ *
+ * @event {Event} error - Relayed from the image when it fails.
+ * @event {Event} load - Relayed from the image once it has loaded.
+ *
+ * @csspart image - The image, when one is loading or loaded.
+ * @csspart initials - The initials shown when there is no usable image.
+ */
+export declare class HelixHeadlessAvatar extends HelixElement {
+    /**
+     * Image to show.
+     *
+     * Falls back to the slot, or to initials, if it fails.
+     */
+    src: string;
+    /**
+     * Name of the person or entity.
+     *
+     * Used for the label and the initials.
+     */
+    name: string;
+    /**
+     * Whether the image failed.
+     *
+     * The element's own observation, never set.
+     */
+    private failed;
+    private readonly handleError;
+    private readonly handleLoad;
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+    /**
+     * The mark shown where no image loaded, behind a seam a tier can move.
+     *
+     * A consumer replaces it by slotting something; a tier above replaces it by
+     * overriding this, and those answer different people. Written inline it
+     * answered only the first, and a styled tier wanting initials drawn its own
+     * way had to reimplement the whole template to reach three elements.
+     */
+    protected renderInitials(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-avatar': HelixHeadlessAvatar;
+    }
+}

package/dist/avatar/root/avatar-root.js

@@ -0,0 +1,147 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+/** Initials for a name: first letter of the first and last words. */
+export const initialsOf = (name) => {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+        return '';
+    }
+    /* By code point, not by code unit.
+     *
+     * `word[0]` indexes UTF-16, so a name beginning with anything outside the
+     * basic plane, an emoji or most of the world's less common scripts, yields a
+     * lone surrogate and the avatar paints U+FFFD. Spreading a string iterates
+     * code points, which is what a first letter means. */
+    const initial = (word) => [...(word ?? '')][0] ?? '';
+    const first = initial(words[0]);
+    const last = words.length > 1 ? initial(words[words.length - 1]) : '';
+    return (first + last).toUpperCase();
+};
+/**
+ * @summary Represents a person or entity with an image or their initials.
+ *
+ * @description
+ * Shows `src` until it fails to load. Without an image, or after a failure,
+ * the default slot is shown; its own fallback is the initials.
+ *
+ * The host carries the accessible name, taken from `name`, so the `<img>` has an
+ * empty `alt` and the initials are hidden from assistive technology. Announcing
+ * either would repeat the name. An `aria-label` on the host overrides `name`,
+ * for an avatar standing for something a person's name does not describe.
+ *
+ * `load` and `error` are relayed from the host. They are not composed, so they
+ * stop at the shadow boundary otherwise.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @aliases Profile picture, Gravatar
+ * @documentation https://helix.fusion.dev/components/avatar
+ *
+ * @slot - Shown when there is no usable image, in place of the initials.
+ *
+ * @event {Event} error - Relayed from the image when it fails.
+ * @event {Event} load - Relayed from the image once it has loaded.
+ *
+ * @csspart image - The image, when one is loading or loaded.
+ * @csspart initials - The initials shown when there is no usable image.
+ */
+let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Image to show.
+         *
+         * Falls back to the slot, or to initials, if it fails.
+         */
+        this.src = '';
+        /**
+         * Name of the person or entity.
+         *
+         * Used for the label and the initials.
+         */
+        this.name = '';
+        /**
+         * Whether the image failed.
+         *
+         * The element's own observation, never set.
+         */
+        this.failed = false;
+        this.handleError = (event) => {
+            this.failed = true;
+            this.relayNativeEvent(event);
+        };
+        this.handleLoad = (event) => {
+            this.relayNativeEvent(event);
+        };
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        /* A new source is a new attempt.
+         *
+         * `failed` is an observation about the image that was loading, and it
+         * outlived the image: it latched on the first error and nothing ever
+         * cleared it, so an avatar that failed once fell back to initials for the
+         * life of the element. A consumer swapping a broken URL for a good one, or
+         * a list reusing an avatar for the next person, got the initials forever
+         * and no error to say why. */
+        if (changed.has('src')) {
+            this.failed = false;
+        }
+        /* A role only where there is a name to carry.
+         *
+         * `role="img"` was asserted unconditionally, so an avatar with no `name`
+         * was an unnamed image: a screen reader announces "image" and stops, which
+         * is worse than announcing nothing, because nothing is what a decorative
+         * mark should be. With a name it is content and needs the role to hold it. */
+        hostAria(this.internals, {
+            label: this.name,
+            role: this.name === '' ? '' : 'img',
+        });
+    }
+    render() {
+        if (this.src !== '' && !this.failed) {
+            return html `<img
+        part="image"
+        src=${this.src}
+        alt=""
+        @error=${this.handleError}
+        @load=${this.handleLoad}
+      />`;
+        }
+        return this.renderInitials();
+    }
+    /**
+     * The mark shown where no image loaded, behind a seam a tier can move.
+     *
+     * A consumer replaces it by slotting something; a tier above replaces it by
+     * overriding this, and those answer different people. Written inline it
+     * answered only the first, and a styled tier wanting initials drawn its own
+     * way had to reimplement the whole template to reach three elements.
+     */
+    renderInitials() {
+        return html `<slot>
+      <span part="initials" aria-hidden="true">${initialsOf(this.name)}</span>
+    </slot>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessAvatar.prototype, "src", void 0);
+__decorate([
+    property()
+], HelixHeadlessAvatar.prototype, "name", void 0);
+__decorate([
+    state()
+], HelixHeadlessAvatar.prototype, "failed", void 0);
+HelixHeadlessAvatar = __decorate([
+    customElement('helix-headless-avatar')
+], HelixHeadlessAvatar);
+export { HelixHeadlessAvatar };

package/dist/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './root/badge-root.js';

package/dist/badge/index.js

@@ -0,0 +1 @@
+export * from './root/badge-root.js';

package/dist/badge/root/badge-root.d.ts

@@ -0,0 +1,61 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary Attaches a count or a presence mark to another element.
+ *
+ * @description
+ * Wraps whatever it decorates and pins the indicator to its corner, so the
+ * thing being counted stays the thing in the layout: a badge is an annotation,
+ * not a container that happens to hold an icon.
+ *
+ * The indicator says how many, and none is none. A `value` that reads as zero
+ * shows no mark at all, an absent one shows a bare dot, and any other value
+ * shows the value. `max` caps the top: past it the indicator reads `{max}+`
+ * rather than growing to fit, since a corner mark that widens with its value
+ * pushes the layout around.
+ *
+ * **A dot needs a label.** Without one it is a colored circle that announces
+ * nothing, which tells a sighted reader there is something new and tells
+ * everyone else there is not. The label is required in that form, and the
+ * indicator is hidden from assistive technology when a number already says it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Count, Indicator, Pip
+ * @documentation https://helix.fusion.dev/components/badge
+ *
+ * @slot - The element being decorated.
+ *
+ * @csspart indicator - The count, or the dot when there is no value.
+ */
+export declare class HelixHeadlessBadge extends HelixElement {
+    /**
+     * The count or short text to show.
+     *
+     * Absent shows a dot, zero shows nothing.
+     */
+    value: string;
+    /**
+     * Cap for a numeric value.
+     *
+     * Past it the indicator reads `{max}+`.
+     */
+    max?: number;
+    /**
+     * Accessible name.
+     *
+     * Required for a dot, which has no text to read.
+     */
+    label: string;
+    /** Whether the value counts nothing, in which case there is no mark. */
+    private get blank();
+    /** What the indicator reads, once the cap has been applied. */
+    private get text();
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-badge': HelixHeadlessBadge;
+    }
+}

package/dist/badge/root/badge-root.js

@@ -0,0 +1,121 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary Attaches a count or a presence mark to another element.
+ *
+ * @description
+ * Wraps whatever it decorates and pins the indicator to its corner, so the
+ * thing being counted stays the thing in the layout: a badge is an annotation,
+ * not a container that happens to hold an icon.
+ *
+ * The indicator says how many, and none is none. A `value` that reads as zero
+ * shows no mark at all, an absent one shows a bare dot, and any other value
+ * shows the value. `max` caps the top: past it the indicator reads `{max}+`
+ * rather than growing to fit, since a corner mark that widens with its value
+ * pushes the layout around.
+ *
+ * **A dot needs a label.** Without one it is a colored circle that announces
+ * nothing, which tells a sighted reader there is something new and tells
+ * everyone else there is not. The label is required in that form, and the
+ * indicator is hidden from assistive technology when a number already says it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Count, Indicator, Pip
+ * @documentation https://helix.fusion.dev/components/badge
+ *
+ * @slot - The element being decorated.
+ *
+ * @csspart indicator - The count, or the dot when there is no value.
+ */
+let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The count or short text to show.
+         *
+         * Absent shows a dot, zero shows nothing.
+         */
+        this.value = '';
+        /**
+         * Accessible name.
+         *
+         * Required for a dot, which has no text to read.
+         */
+        this.label = '';
+    }
+    /** Whether the value counts nothing, in which case there is no mark. */
+    get blank() {
+        return this.value.trim() !== '' && Number(this.value) === 0;
+    }
+    /** What the indicator reads, once the cap has been applied. */
+    get text() {
+        const count = Number(this.value);
+        if (this.max !== undefined && Number.isFinite(count) && count > this.max) {
+            return `${this.max}+`;
+        }
+        return this.value;
+    }
+    render() {
+        const blank = this.blank;
+        const text = this.text;
+        /* A mark with text is content and is announced; a dot is decoration and is
+           not.
+         *
+         * This asked for a `label` as well, so a badge showing a count and no label
+         * was `aria-hidden` and the number it exists to show reached nobody using a
+         * screen reader. The number is its own name where none is given, which is
+         * why `aria-label` is now conditional on the label rather than on this: a
+         * `4` announces as "4" from the text, and `label="4 unread"` says the
+         * better thing.
+         *
+         * A dot with no label still says nothing, which is the deliberate half: a
+         * dot means "something here" and cannot say what, so naming it is the
+         * consumer's to do and silence is better than "badge". */
+        const announced = !blank && (text !== '' || this.label !== '');
+        // The indicator holds the text and nothing else, so an absent value leaves
+        // it empty and `[part="indicator"]:empty` is what draws the dot. Lit's
+        // marker comments do not affect `:empty`, but a whitespace text node does,
+        // which is why the tags close the way they do.
+        //
+        // It stays mounted when there is nothing to show, so the styled tier can
+        // transition it out rather than having it vanish between frames. Both
+        // markers are on the shadow content, not the host, so they cost no
+        // attribute a consumer's server markup would have to match.
+        //
+        // `single` is what lets a one-character mark be a circle. Whether the text
+        // fits inside the square is a fact about the string, and CSS cannot count
+        // characters.
+        return html `<slot></slot>
+      <span
+        part="indicator"
+        data-blank=${blank ? '' : nothing}
+        data-single=${text.length <= 1 ? '' : nothing}
+        role=${announced ? 'status' : nothing}
+        aria-label=${this.label !== '' && announced ? this.label : nothing}
+        aria-hidden=${announced ? nothing : 'true'}
+        >${text}</span
+      >`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessBadge.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessBadge.prototype, "max", void 0);
+__decorate([
+    property()
+], HelixHeadlessBadge.prototype, "label", void 0);
+HelixHeadlessBadge = __decorate([
+    customElement('helix-headless-badge')
+], HelixHeadlessBadge);
+export { HelixHeadlessBadge };

package/dist/bar-chart/index.d.ts

@@ -0,0 +1 @@
+export * from './root/bar-chart-root.js';

package/dist/bar-chart/index.js

@@ -0,0 +1 @@
+export * from './root/bar-chart-root.js';

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -0,0 +1,266 @@
+import { HelixElement, type Series } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+/**
+ * @summary Categories as columns, read from a table.
+ *
+ * @description
+ * The chart most often asked for and the one most often drawn wrongly, so two
+ * decisions are made here rather than left to a consumer.
+ *
+ * **It measures from zero and there is no property to change that.** A bar's
+ * length *is* its value, so a baseline anywhere else makes the lengths
+ * proportional to nothing. That is the oldest misleading chart there is, and a
+ * design system that ships the switch has shipped the mistake. A reader who
+ * wants the differences between values rather than the values should be drawing
+ * a line, which claims only a shape.
+ *
+ * **The labels are HTML beside the drawing rather than `<text>` inside it.** An
+ * `<svg>` that fills its box scales everything in it, including type: the same
+ * `font-size` comes out at 10px in a narrow chart and 43px in a wide one, and
+ * there is no non-scaling-font to answer it the way `vector-effect` answers
+ * strokes. So the columns are drawn and the words are written around them.
+ *
+ * The table is the accessible representation and this drawing is `aria-hidden`.
+ * A reader who wants the numbers gets the numbers, not a described picture of
+ * them.
+ *
+ * The properties below are written by this component and read by whoever draws
+ * it. A consumer sets none of them: they carry a number this element computed
+ * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
+ * without measuring anything itself.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @aliases Column Chart, Categorical Chart
+ * @documentation https://helix.fusion.dev/components/bar-chart
+ *
+ * @csspart axis - One scale's numbers, drawn only when `secondary` splits them.
+ * @csspart band - The slot the pointer is resting in.
+ * @csspart bar - One column.
+ * @csspart bar-wash-end - The far stop of a bar's gradient, where one is used.
+ * @csspart bar-wash-start - The stop of a bar's gradient at its base.
+ * @csspart baseline - The rule the columns stand on.
+ * @csspart gridline - One rule across the plot, under `gridlines`.
+ * @csspart group - One category's columns, together.
+ * @csspart label - One category's name.
+ * @csspart labels - The row of category names.
+ * @csspart line - A series drawn as a line rather than as columns, under `lines`.
+ * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart plot - The drawing.
+ * @csspart svg - The drawing surface the bars and lines sit on.
+ * @csspart tick - One number on an axis.
+ * @csspart tooltip - The bubble, forwarded from `Tooltip`.
+ * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-label - The reading's own name inside the tooltip.
+ * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-value - A column's value inside the tooltip.
+ *
+ * @cssproperty --bar-chart-axis - The color of a single-series axis, taken from that series.
+ * @cssproperty --bar-chart-secondary - The color of the secondary axis when one series owns it. It resolves a `--helix-color-series-*` token, so on the headless tier alone it names something that is not there. #138.
+ * @cssproperty --chart-bar-wash - The gradient a bar would take, named per bar so the
+ *   styled tier can point `fill` at it. Drawn whatever the treatment and used only where
+ *   `wash="gradient"` asks for it.
+ */
+export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
+    /**
+     * Whether the categories run down the side rather than along the bottom.
+     *
+     * Absent is columns. `horizontal` is the one to reach for when the category
+     * names are words rather than dates: a row of long names either overlaps or
+     * turns on its side, and neither is as readable as putting them down the left
+     * where they read normally.
+     */
+    direction?: 'horizontal';
+    /**
+     * Which rules are drawn across the plot, if any.
+     *
+     * Absent draws none. `value` rules the axis the columns are *measured* on,
+     * `category` rules the axis they are *arranged* on with one through each
+     * group, and `both` draws both. Which of those is horizontal turns with
+     * `direction`, because a rule belongs to an axis and not to a screen edge.
+     *
+     * **A bare `gridlines` means `value`**, and so does anything unrecognised: an
+     * unrecognised value that draws nothing is indistinguishable from the
+     * attribute being absent, which is the one thing a reader cannot debug.
+     *
+     * `category` is the quieter half of this on a bar chart and is here for
+     * completeness rather than because it is usually right: columns already
+     * divide the categories by being separate columns, and a rule through each
+     * one is a second statement of the same fact. It earns its place on a chart
+     * of many thin bars, where the eye has stopped counting.
+     *
+     * Furniture rather than data, so the rules are inside the `aria-hidden` plot
+     * and reach no reader through the table.
+     */
+    gridlines?: 'both' | 'category' | 'value';
+    /**
+     * Which series are drawn as a line instead of as columns, by name.
+     *
+     * Space separated, matched against the column headings the table gives, so a
+     * chart says `lines="Margin"` rather than counting columns. Names because
+     * they are what the table already carries and what the legend already shows:
+     * an index is a fourth place the column order is written down and the first
+     * one to go stale when somebody moves a column.
+     *
+     * **A combination chart is one scale, and that is the honest half of it.**
+     * Both marks are measured against the same domain, so a line here says
+     * something comparable to the columns beside it. The usual reason to reach
+     * for a combination chart is the other thing, a count against a percentage on
+     * a second axis, and that is deliberately not this: two scales on one frame
+     * let the author put any two shapes in any relation by choosing the ranges,
+     * and the reader has no way to see it happening.
+     *
+     * A line among columns still measures from zero, because the columns do and
+     * they share the axis. That is the trade for comparability, and it is why
+     * this is a bar chart that can carry a line rather than a line chart that can
+     * carry columns.
+     */
+    lines?: string;
+    /**
+     * Which series are measured against a scale of their own, by name.
+     *
+     * Space separated and matched the way `lines` is, against the column headings
+     * the table gives. Opt in: absent, every series shares one domain, which is
+     * what makes a chart comparable and is the right default.
+     *
+     * **Two scales on one frame let an author put any two shapes in any relation
+     * by choosing the ranges, and a reader cannot see it happening.** That is not
+     * a caveat, it is what the feature does: a line that crosses the columns
+     * twice and a line that never touches them can be the same two series drawn
+     * against different ranges. It earns its place when the two quantities are
+     * genuinely incomparable, a count against a percentage, and it is a way to
+     * mislead in every other case.
+     *
+     * **So it draws its axes**, and that is not optional here. The chart renders
+     * no value axis at all when there is one scale, because the columns are
+     * measured against each other and a reader needs no numbers to do that. With
+     * two, a reader has no way of knowing there are two, let alone which series
+     * is on which, so both scales are labeled the moment this is set. An
+     * unlabelled second axis is the deceptive case rather than the tidy one.
+     *
+     * The grid stays on the primary axis, since a rule measured against two
+     * scales at once is a rule that means nothing. The tooltip is unaffected: it
+     * has always shown every column's own number, which is the reader's way out
+     * of any scale question the picture raises.
+     */
+    secondary?: string;
+    /** The series names on the second scale, lowercased and trimmed. */
+    private get scaled();
+    /** The series names drawn as a line, lowercased and trimmed for matching. */
+    private get lined();
+    /** Whether the levels are ruled, which is every value but `category`. */
+    protected get rulesValue(): boolean;
+    /** Whether each category is ruled, which only two values ask for. */
+    protected get rulesCategory(): boolean;
+    /**
+     * Tells the pointer which way the categories run.
+     *
+     * In `willUpdate` because `direction` is a property a consumer can change at
+     * any time, and the controller resolves a reading from whichever axis it was
+     * last told about: set once at connect, a chart turned sideways after that
+     * would go on reading x and answer with the same row wherever the pointer
+     * went. That is the bug this pair was written for, one step later.
+     *
+     * `willUpdate` and not `updated`, because SSR calls the first and not the
+     * second, and a value the server and the client disagree about is worse than
+     * one neither has.
+     */
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    /**
+     * The columns themselves, behind a seam the styled tier can move.
+     *
+     * `aria-hidden`, because the table it was read from is the readable version
+     * and a screen reader hearing both hears the same numbers twice.
+     */
+    protected renderPlot(series: Series[], categories: string[], y: (value: number) => number, domain: [number, number], floor: number, z?: (value: number) => number): TemplateResult;
+    /**
+     * The numbers along one scale, drawn only where there are two of them.
+     *
+     * **A chart with one scale renders no axis, on purpose.** Columns measured
+     * against each other need no numbers to be compared, and a row of them beside
+     * a small chart is furniture that makes the drawing smaller for no reading a
+     * reader was going to do. With two scales that argument inverts: a reader
+     * cannot tell there are two, cannot tell which series is on which, and cannot
+     * recover either from the picture. So this appears with `secondary` and never
+     * without it.
+     *
+     * **Beside the plot and not inside it**, which is the second thing this got
+     * wrong. Inside, the numbers are drawn over the drawing, and a horizontal
+     * chart shows it immediately: its value axis runs along the bottom, which is
+     * where the last row of bars is. The vertical case has the same fault and
+     * enough slack to hide it. The plot is also the pointer's catchment and the
+     * tooltip's containing block, both measured from its box, so padding it to
+     * make room would move every reading half an axis to the right.
+     *
+     * A column of the host grid instead, which the stylesheet grows only when
+     * `secondary` is set. That is what the property reflects for.
+     *
+     * The primary hugs the edge the drawing starts at and the secondary the edge
+     * it ends at: down the two sides for columns, along the bottom and top for
+     * bars, which is where each axis is when the chart is turned.
+     */
+    protected renderAxis(scale: (value: number) => number, domain: [number, number], which: 'primary' | 'secondary', sideways: boolean, widest: number, tint?: string): TemplateResult;
+    /**
+     * The grid, behind everything, or nothing at all.
+     *
+     * Across the measured axis, which turns with `direction`: a rule belongs to
+     * the axis the bars are measured on and not the one they are arranged on, so
+     * columns get horizontal rules and rows get vertical ones. Getting that
+     * backwards draws a grid that divides the categories, which are already
+     * divided by being separate bars.
+     *
+     * Drawn before the baseline, so where a gridline and zero coincide the
+     * baseline is what shows: zero is a fact about the data and a gridline is a
+     * ruler.
+     */
+    protected renderGridlines(y: (value: number) => number, domain: [number, number], sideways: boolean, count: number): TemplateResult | typeof nothing;
+    /**
+     * The slot the pointer is resting in, drawn behind the columns.
+     *
+     * **The honest version of the fade.** A group under the pointer already sets
+     * `data-active` and the stylesheet dims the others, which says which group is
+     * meant by making four of five quieter: it reads as the chart losing
+     * confidence rather than as one column being pointed at. A band says the same
+     * thing by lighting the region the pointer is actually in, and the region is
+     * the whole slot, because that is the catchment the pointer resolves against.
+     *
+     * Both are kept. The fade separates the active group from its neighbours and
+     * the band says where the neighbourhood is, and on a chart of two categories
+     * the fade alone is ambiguous about which half is lit.
+     */
+    protected renderBand(count: number, sideways: boolean): TemplateResult | typeof nothing;
+    protected renderLabels(categories: string[]): TemplateResult;
+    /**
+     * One series drawn as a line across the categories, behind a seam.
+     *
+     * Through the middle of each slot, which is where the group stands, so a
+     * point sits over its own columns rather than over the gap between two of
+     * them. The same arithmetic the category gridlines use, and for the same
+     * reason: the reading is the thing, the boundary is only where the pointer
+     * changes its mind.
+     *
+     * `data-series` keeps the index the series has among *all* of them, not among
+     * the lines, so the color a line takes is the color the legend gives it and
+     * moving a column between marks does not repaint the chart.
+     */
+    protected renderLine(one: Series, depth: number, slot: number, y: (value: number) => number, sideways: boolean): TemplateResult;
+    /**
+     * What a pointer resting on a reading shows.
+     *
+     * A seam over `drawTooltip`, which holds the markup every chart shares. The
+     * usual reason to override is arrangement: every cell of the row is already
+     * there, including the columns nothing was plotted from.
+     */
+    protected renderTooltip(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-bar-chart': HelixHeadlessBarChart;
+    }
+}
+export {};