@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/accordion/item/accordion-item.d.ts

@@ -18,6 +18,10 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  * out of the tab order and the accessibility tree after the styled tier's
  * `display` overrides `hidden`.
  *
+ * While it is open, the content part carries the content's height as
+ * `--accordion-content-height`, as Radix's accordion does, for a stylesheet
+ * that animates the section open with keyframes of its own.
+ *
  * Set `hidden-until-found` and the browser's find in page searches a closed
  * section too: a match opens it, with `helix-before-open` first, as React
  * Aria's disclosure does. The content is then `hidden="until-found"` while
@@ -43,6 +47,8 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  * @csspart heading - The heading that holds the trigger.
  * @csspart trigger - The button that opens and closes the section, holding the summary.
  *
+ * @cssproperty --accordion-content-height - The height of the content, in pixels, written on the `content` part while the section is open.
+ *
  * @cssstate open - While the item is open.
  */
 export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionItem_base {
@@ -166,6 +172,12 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * settle, once every item is there to compare.
      */
     protected updated(changed: PropertyValues): void;
+    /**
+     * Writes the content's height onto the content part while the section is
+     * open. `scrollHeight`, so a sheet that clips the box while it grows still
+     * reads the whole height.
+     */
+    private readonly measure;
     /**
      * Moves focus to this item's trigger.
      *
@@ -203,6 +215,8 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * overrides `display`, `inert` is the only one of the two still in force.
      * `content-visibility: hidden` keeps skipped content out of the tab order and
      * the accessibility tree by itself, and an inert region is never searched.
+     * It leaves the region's own box in the tree, so a closed findable section
+     * drops `role="region"` and its name until it opens.
      */
     protected render(): TemplateResult;
 }

package/dist/accordion/item/accordion-item.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { closestInstance, customElement, HelixElement, MixinControllerOpen, } from '@fusion.dev/helix-core';
+import { closestInstance, customElement, HelixElement, headingLevel, MixinControllerOpen, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -43,12 +43,20 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
                 this.closePeers();
             }
         };
+        this.measure = () => {
+            const content = this.partNamed('content');
+            const inner = this.partNamed('content-inner');
+            if (!content || !inner || !this.open) {
+                return;
+            }
+            content.style.setProperty('--accordion-content-height', `${inner.scrollHeight}px`);
+        };
     }
     renderChevron() {
         if (this.chevronPlacement === 'none') {
             return nothing;
         }
-        return html `<slot name="chevron"
+        return html `<slot name="chevron" aria-hidden="true"
       ><svg part="chevron" fill="currentColor" viewBox=${caretDown.viewBox} aria-hidden="true">
         ${unsafeSVG(caretDown.content)}
       </svg></slot
@@ -89,13 +97,15 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
             this.closePeers();
         }
         this.wasOpen = this.open;
+        this.measure();
     }
     focusTrigger() {
         this.renderRoot.querySelector(`#${TRIGGER_ID}`)?.focus();
     }
     render() {
         const open = this.open;
-        const level = Math.min(6, Math.max(1, this.headingLevel ?? this.groupHeadingLevel ?? 3));
+        const landmark = open || !this.findable;
+        const level = headingLevel(this.headingLevel ?? this.groupHeadingLevel);
         return html `
       <div part="container">
         <div part="heading" role="heading" aria-level=${level}>
@@ -115,15 +125,15 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         </div>
         <div
           id=${CONTENT_ID}
-          aria-labelledby=${TRIGGER_ID}
+          aria-labelledby=${landmark ? TRIGGER_ID : nothing}
           part="content"
           hidden=${open ? nothing : this.findable ? 'until-found' : ''}
           ?inert=${!open && !this.findable}
-          role="region"
+          role=${landmark ? 'region' : nothing}
           @beforematch=${this.handleBeforeMatch}
         >
           <div part="content-inner">
-            <slot></slot>
+            <slot @slotchange=${this.measure}></slot>
           </div>
         </div>
       </div>

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

@@ -17,12 +17,15 @@ import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
  * matched with `instanceof HelixHeadlessAccordionItem`, so the headless tier
  * does not depend on the styled tier's tag names.
  *
- * The keyboard listener belongs to the controller and is attached on connect,
- * so it does not run on the server.
+ * Keys, on a trigger: Up and Down Arrow move to the previous and the next
+ * trigger, and so do Left and Right, wrapping at the ends; Home and End go to
+ * the first and the last. Enter and Space open and close the section. Disabled
+ * sections are passed over.
  *
- * Each trigger sits inside a heading, level 3 unless `heading-level` says
- * otherwise, so the sections are in a screen reader's list of headings. Set the
- * level that fits the page's outline.
+ * Each trigger is a button with `aria-expanded` and `aria-controls`, inside a
+ * heading, level 3 unless `heading-level` says otherwise, so the sections are
+ * in a screen reader's list of headings. An open section is a region named by
+ * its trigger. Set the level that fits the page's outline.
  *
  * @since 0.1.0
  * @status stable

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

@@ -16,8 +16,9 @@ declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@
  *
  * The live region is its own part. When the announcement appears after the page
  * has loaded, the message is written into the region one frame later, so screen
- * readers read it reliably, and the region is emptied seven seconds later, so
- * the message is not in the page twice. When the announcement is in the served
+ * readers read it reliably, and the region is emptied seven seconds later.
+ * While the region holds the copy, the message itself is hidden from screen
+ * readers, so it is in the page once. When the announcement is in the served
  * HTML, the region stays empty and nothing is read out.
  *
  * The dismiss button fires `helix-dismiss`, and the announcement stays in the

package/dist/announcement/root/announcement-root.js

@@ -64,7 +64,9 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
     </slot>`;
     }
     render() {
-        return html `<div part="content"><slot @slotchange=${() => this.arrival.say()}></slot></div>
+        return html `<div aria-hidden=${this.arrival.said === '' ? nothing : 'true'} part="content"
+        ><slot @slotchange=${() => this.arrival.say()}></slot
+      ></div>
       <span part="live" role="status">${this.arrival.said}</span>
       <div part="actions"><slot name="actions" @slotchange=${() => this.markEmpty()}></slot></div>
       ${this.dismissible

package/dist/app-header/root/app-header-root.d.ts

@@ -22,8 +22,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The host is the page's `banner` landmark. Placed inside `main`, `article`,
  * `aside`, `nav` or `section`, it is a plain box instead, as a native
  * `<header>` is there, so a header inside a card or a pane does not add a
- * second banner. A server cannot see the ancestors, so it serves the banner and
- * the browser corrects it when the element connects.
+ * second banner. The ancestors are read as the accessibility tree reads them,
+ * through the slots that take the header in, so one slotted into a component
+ * that draws a `<nav>`, such as `Navigation`, is not a banner either. A server
+ * cannot see the ancestors, so it serves the banner and the browser corrects
+ * it when the element connects.
  *
  * @since 0.1.0
  * @status stable
@@ -105,6 +108,8 @@ export declare class HelixHeadlessAppHeader extends HelixElement {
     private readonly handleScroll;
     protected willUpdate(changed: PropertyValues): void;
     connectedCallback(): void;
+    /** Whether this header is the page's banner, read from where it sits. */
+    private readLandmark;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;

package/dist/app-header/root/app-header-root.js

@@ -47,9 +47,17 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.readLandmark();
+        setTimeout(() => {
+            if (this.isConnected) {
+                this.readLandmark();
+            }
+        });
+        this.listen();
+    }
+    readLandmark() {
         this.landmark = inSectioningContent(this) ? '' : 'banner';
         hostAria(this.internals, { role: this.landmark });
-        this.listen();
     }
     disconnectedCallback() {
         super.disconnectedCallback();

package/dist/app-header/sectioning.d.ts

@@ -1,6 +1,8 @@
 /**
  * Whether an element sits inside sectioning content, read across shadow
- * boundaries as the accessibility tree reads it.
+ * boundaries as the accessibility tree reads it: through the slot an element
+ * is assigned to, so a header slotted into a component that draws a `<nav>`
+ * around its slot, as `Navigation` does, is inside that `<nav>`.
  *
  * Client only: a server has no ancestors to read.
  */

package/dist/app-header/sectioning.js

@@ -11,15 +11,16 @@ const SECTIONING = [
     '[role="region"]',
 ].join(', ');
 export const inSectioningContent = (element) => {
-    let node = element.parentElement ?? hostOf(element);
+    let node = above(element);
     while (node) {
         if (node.matches(SECTIONING)) {
             return true;
         }
-        node = node.parentElement ?? hostOf(node);
+        node = above(node);
     }
     return false;
 };
+const above = (element) => element.assignedSlot ?? element.parentElement ?? hostOf(element);
 const hostOf = (element) => {
     const root = element.getRootNode();
     return root instanceof ShadowRoot ? root.host : null;

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

@@ -1,13 +1,13 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
- * The largest `max` a stylesheet can hide past.
+ * The largest `max` a stylesheet folds a server's markup at.
  *
- * The fold is `:host([max="N"]) ::slotted(:nth-child(n + N+1))`, one selector
+ * The rule is `:host([max="N"]) ::slotted(:nth-child(n + N+1))`, one selector
  * per value, because `An+B` takes a literal and no custom property can be read
- * into it. So the range is finite, and it is written down beside the count that
- * has to agree with it: a count that folds and a stylesheet that does not would
- * put a "+5" beside five avatars that are still on screen.
+ * into it. So the range a stylesheet covers is finite. The group folds any
+ * `max` itself once it runs, with the platform's `hidden`; past this one, a
+ * server's markup shows every avatar until the page hydrates.
  */
 export declare const FOLDS_UP_TO = 12;
 /**
@@ -21,9 +21,10 @@ export declare const FOLDS_UP_TO = 12;
  * hidden.
  *
  * Avatars past `max` stay in the DOM and are hidden. The group writes `hidden`
- * on each of them, so they are hidden on the headless tier as well, and the
- * count is read out as `overflow-label`, such as "3 more", so a screen reader
- * hears that there are more people than the ones it can reach.
+ * on each of them, so they are hidden on the headless tier as well, and at any
+ * `max`. The count is read out as `overflow-label`, such as "3 more: Grace
+ * Hopper, Alan Turing, Barbara Liskov", so a screen reader hears who is there
+ * past the ones it can reach.
  *
  * @since 0.1.0
  * @status stable
@@ -59,10 +60,11 @@ export declare class HelixHeadlessAvatarGroup extends HelixElement {
      */
     max?: number;
     /**
-     * What a screen reader is told the count is, with `{count}` for the number.
+     * What a screen reader is told the count is, with `{count}` for the number
+     * and `{names}` for the people it stands for, by each avatar's `name`.
      *
      * The count shows "+3", which reads as "plus three" and says nothing about
-     * what was counted.
+     * what was counted, nor who.
      */
     overflowLabel: string;
     /** The avatars this group hid, so it unhides only those. */
@@ -78,8 +80,6 @@ export declare class HelixHeadlessAvatarGroup extends HelixElement {
      * the attribute that hides the whole group.
      */
     get overflow(): number;
-    /** Said once per element, because a re-render is not a second mistake. */
-    private warned;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
@@ -89,10 +89,16 @@ export declare class HelixHeadlessAvatarGroup extends HelixElement {
      * **State in markup, so the headless tier folds too.** The fold was a styled
      * rule alone, and on the headless tier every avatar was drawn beside a "+3".
      * The styled rule stays, because it is what folds a server's markup before
-     * this runs. Written through `whenHydrated`, so an avatar's hydrating render
-     * is the server's, and undone only on the avatars this group hid.
+     * this runs, up to `FOLDS_UP_TO`, and this folds at any `max`. Written
+     * through `whenHydrated`, so an avatar's hydrating render is the server's,
+     * and undone only on the avatars this group hid.
      */
     private fold;
+    /**
+     * The names of the people past `max`, by each avatar's `name`, then its
+     * `aria-label`, in the order they are read.
+     */
+    private foldedNames;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/avatar/group/avatar-group.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, reportRuntime, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixElement, hostAria, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 export const FOLDS_UP_TO = 12;
@@ -12,17 +12,15 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
     constructor() {
         super(...arguments);
         this.label = '';
-        this.overflowLabel = '{count} more';
+        this.overflowLabel = '{count} more: {names}';
         this.folded = new WeakSet();
-        this.warned = false;
     }
     get avatars() {
         return this.knownChildren.filter((child) => child instanceof HTMLElement);
     }
     get overflow() {
         const limit = this.max ?? 0;
-        const limited = limit > 0 && limit <= FOLDS_UP_TO;
-        return limited ? Math.max(this.avatars.length - limit, 0) : 0;
+        return limit > 0 ? Math.max(this.avatars.length - limit, 0) : 0;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -35,23 +33,11 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
     updated(changed) {
         super.updated(changed);
         this.fold();
-        const limit = this.max ?? 0;
-        if (limit > FOLDS_UP_TO && this.avatars.length > limit && !this.warned) {
-            this.warned = true;
-            reportRuntime({
-                kind: 'max-past-fold',
-                message: `<${this.localName}> has max="${this.max}", past the ${FOLDS_UP_TO} the fold is written for, ` +
-                    'so every avatar is shown and none are counted. Lower `max`, or hand the group the ' +
-                    'avatars you want shown.',
-                tag: this.localName,
-            });
-        }
     }
     fold() {
         const limit = this.max ?? 0;
-        const limited = limit > 0 && limit <= FOLDS_UP_TO;
         for (const [index, avatar] of this.avatars.entries()) {
-            const past = limited && index >= limit;
+            const past = limit > 0 && index >= limit;
             if (past && !avatar.hidden) {
                 this.folded.add(avatar);
                 whenHydrated(avatar, () => {
@@ -66,6 +52,15 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
             }
         }
     }
+    foldedNames() {
+        const limit = this.max ?? 0;
+        return this.avatars
+            .slice(limit)
+            .map((avatar) => avatar.name ||
+            avatar.getAttribute('aria-label') ||
+            '')
+            .filter(Boolean);
+    }
     render() {
         const past = this.overflow;
         return html `<slot @slotchange=${() => this.requestUpdate()}></slot>
@@ -73,7 +68,10 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
             ? html `<span
               part="overflow"
               role="img"
-              aria-label=${this.overflowLabel.replace('{count}', String(past))}
+              aria-label=${fillTemplate(this.overflowLabel, {
+                count: String(past),
+                names: this.foldedNames().join(', '),
+            }).replace(/[\s:,]+$/, '')}
               >+${past}</span
             >`
             : ''}`;

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

@@ -44,7 +44,9 @@ export declare class HelixHeadlessBadge extends HelixElement {
     /**
      * The badge's name, read by screen readers.
      *
-     * Required for a dot, which has no text to read.
+     * Required for a dot, which has no text to read. `{count}` is replaced with
+     * what the badge shows, so `label="{count} unread"` reads "8 unread" and
+     * stays current as `value` changes, with no label of yours to keep in step.
      */
     label: string;
     /**

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement, fillTemplate, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
@@ -36,7 +36,7 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         data-blank=${blank ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
         role="status"
-        aria-label=${announced ? this.label || text : nothing}
+        aria-label=${announced ? fillTemplate(this.label, { count: text }) || text : nothing}
         >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }

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

@@ -176,6 +176,17 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * of any scale question the picture raises.
      */
     secondary?: string;
+    /**
+     * Stacks a category's columns into one, each series standing on the ones
+     * before it, so the column's height is the category's total.
+     *
+     * Absent stands them side by side, as it always did. A negative reading
+     * hangs below zero on the negatives before it, so neither direction hides
+     * the other. The scale fits the stacks. A series
+     * in `lines` is still a line, measured on its own reading; columns on the
+     * second scale stack among themselves.
+     */
+    stacked: boolean;
     /** 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. */
@@ -204,7 +215,8 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      *
      * The highest, because which category leads is the question a bar chart is
      * read for, and the table beside it has every other number. The reading is
-     * written the way the table writes it, such as `$128k` for `128000`.
+     * written the way the table writes it, such as `$128k` for `128000`. A
+     * series a legend hid is not drawn and is not said.
      */
     protected renderSummary(series: Series[]): TemplateResult;
     /**
@@ -214,6 +226,11 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * 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;
+    /**
+     * One category's columns stacked into one, each on the ones before it on
+     * its own scale, through the pure `stackSpans`.
+     */
+    private renderStack;
     /**
      * The numbers along one scale, drawn only where there are two of them.
      *

package/dist/bar-chart/root/bar-chart-root.js

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
+import { stackEnds, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
         this.highestLabel = 'Highest';
+        this.stacked = false;
     }
     get scaled() {
         return new Set(seriesNames(this.secondary));
@@ -39,8 +41,22 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const own = (one) => scaled.has(one.name.trim().toLowerCase());
         const shown = series.filter((one) => this.showsSeries(one.name));
         const values = shown.flatMap((one) => one.points.map((point) => point.value));
+        const lined = this.lined;
+        const readingsOf = (group) => {
+            if (!this.stacked) {
+                return group.flatMap((one) => one.points.map((point) => point.value));
+            }
+            const columns = group.filter((one) => !lined.has(one.name.trim().toLowerCase()));
+            const slots = columns.map((one) => byRow(one, categories.length));
+            return [
+                ...group
+                    .filter((one) => lined.has(one.name.trim().toLowerCase()))
+                    .flatMap((one) => one.points.map((point) => point.value)),
+                ...stackEnds(categories.map((_, at) => slots.map((one) => one[at]?.value))),
+            ];
+        };
         const on = (which) => {
-            const found = shown.filter(which).flatMap((one) => one.points.map((point) => point.value));
+            const found = readingsOf(shown.filter(which));
             return found.length > 0 ? found : values.length > 0 ? values : [0];
         };
         const [low, high] = extent(scaled.size === 0 ? on(() => true) : on((one) => !own(one)));
@@ -66,7 +82,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const columns = this.plottedColumns;
         const highest = series.flatMap((one, depth) => {
             const top = one.points.reduce((best, point) => (best === undefined || point.value > best.value ? point : best), undefined);
-            if (top === undefined) {
+            if (top === undefined || !this.showsSeries(one.name)) {
                 return [];
             }
             const text = rows[top.at]?.cells[columns[depth] ?? -1]?.text ?? String(top.value);
@@ -85,13 +101,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const columns = series
             .map((one, index) => ({ one, slots: byRow(one, categories.length), tone: index }))
             .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name));
-        const stride = (slot * 0.72) / Math.max(columns.length, 1);
-        const gap = columns.length > 1 ? stride * 0.08 : 0;
+        const abreast = this.stacked ? 1 : columns.length;
+        const stride = (slot * 0.72) / Math.max(abreast, 1);
+        const gap = abreast > 1 ? stride * 0.08 : 0;
         const thickness = stride - gap;
-        const bar = (value, index, depth, tone, scale) => {
+        const bar = (value, index, depth, tone, scale, from) => {
             const at = scale(value);
-            const along = Math.min(floor, at);
-            const size = Math.abs(floor - at);
+            const base = from === undefined ? floor : scale(from);
+            const along = Math.min(base, at);
+            const size = Math.abs(base - at);
             const across = index * slot + slot * 0.14 + depth * stride + gap / 2;
             return sideways
                 ? svg `<rect
@@ -151,12 +169,14 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
               data-active=${this.pointer.at === index ? '' : nothing}
               part="group${this.pointer.at === index ? ' group-active' : ''}"
             >
-              ${columns.map(({ slots, one, tone }, depth) => {
-            const point = slots[index];
-            return point === undefined
-                ? nothing
-                : bar(point.value, index, depth, tone, against(one));
-        })}
+              ${this.stacked
+            ? this.renderStack(columns, index, against, bar)
+            : columns.map(({ slots, one, tone }, depth) => {
+                const point = slots[index];
+                return point === undefined
+                    ? nothing
+                    : bar(point.value, index, depth, tone, against(one));
+            })}
             </g>`)}
         ${series.map((one) => lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name)
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
@@ -165,6 +185,17 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
       ${this.renderTooltip()}
     </div>`;
     }
+    renderStack(columns, index, against, bar) {
+        const scales = [...new Set(columns.map(({ one }) => against(one)))];
+        return scales.flatMap((scale) => {
+            const mine = columns.filter(({ one }) => against(one) === scale);
+            const spans = stackSpans(mine.map(({ slots }) => slots[index]?.value));
+            return mine.flatMap(({ tone }, place) => {
+                const span = spans[place];
+                return span === undefined ? [] : [bar(span[1], index, 0, tone, scale, span[0])];
+            });
+        });
+    }
     renderAxis(scale, domain, which, sideways, widest, tint) {
         const sizing = sideways ? undefined : `--bar-chart-axis: ${widest}ch`;
         return html `<div
@@ -234,10 +265,13 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             return drawTooltip(this.sourceRows, at, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         const shown = series.filter((one) => this.showsSeries(one.name));
-        const values = shown
+        const reached = shown
             .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined);
-        const all = shown.flatMap((one) => one.points.map((point) => point.value));
+        const values = this.stacked ? stackEnds([reached]) : reached;
+        const all = this.stacked
+            ? stackEnds(Array.from({ length: this.readings }, (_, row) => shown.map((one) => byRow(one, this.readings)[row]?.value)))
+            : shown.flatMap((one) => one.points.map((point) => point.value));
         const [low, high] = extent(all.length > 0 ? all : [0]);
         const domain = [Math.min(0, low), Math.max(0, high)];
         const sideways = this.orientation === 'horizontal';
@@ -268,6 +302,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessBarChart.prototype, "secondary", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessBarChart.prototype, "stacked", void 0);
 HelixHeadlessBarChart = __decorate([
     customElement('helix-headless-bar-chart')
 ], HelixHeadlessBarChart);

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

@@ -0,0 +1,15 @@
+/** Where a column starts and ends along the measure, in the data's own units. */
+export type Span = readonly [from: number, to: number];
+/**
+ * Each column's span in one category, in the order given: a positive reading
+ * stacks up from zero on the positives before it, and a negative one down
+ * from zero on the negatives before it, so neither hides the other. A blank
+ * has no span.
+ */
+export declare const stackSpans: (values: readonly (number | undefined)[]) => (Span | undefined)[];
+/**
+ * Every end a stack reaches across the categories, which is what its scale
+ * has to hold: the top of each stack of positives and the foot of each stack
+ * of negatives. `categories` holds each category's readings, one per column.
+ */
+export declare const stackEnds: (categories: readonly (readonly (number | undefined)[])[]) => number[];

package/dist/bar-chart/stack.js

@@ -0,0 +1,19 @@
+export const stackSpans = (values) => {
+    let up = 0;
+    let down = 0;
+    return values.map((value) => {
+        if (value === undefined) {
+            return undefined;
+        }
+        const from = value >= 0 ? up : down;
+        const to = from + value;
+        if (value >= 0) {
+            up = to;
+        }
+        else {
+            down = to;
+        }
+        return [from, to];
+    });
+};
+export const stackEnds = (categories) => categories.flatMap((values) => stackSpans(values).flatMap((span) => (span === undefined ? [] : [span[1]])));