@fusion.dev/helix-headless 0.172.0 → 0.173.0

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

@@ -40,6 +40,22 @@ import { type Branch } from '../levels.js';
  * headings are far apart, none is in the band and no section is marked, and
  * when they are close together, several are in the band at once.
  *
+ * **Several sections at once.** `marks="visible"` marks the link of every
+ * section with part of it on screen, from the reading line to the bottom of
+ * what the sections scroll in, as Zag's table of contents marks its active
+ * ids. The mark then runs from the first of those links to the last, and
+ * `marked` lists their ids in page order.
+ *
+ * **Going to a section from code.** `scrollToSection(id)` scrolls to the
+ * section as a press on its link does, with `behavior`, and marks its link at
+ * once.
+ *
+ * **Styling a link by its state.** Each link the outline finds carries
+ * `data-depth`, its depth in the outline from `1`, nested lists and
+ * `data-level` alike, and `aria-current="location"` while its section is
+ * marked, so `a[aria-current]` and `a[data-depth="2"]` are the hooks for a
+ * rule of yours.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -109,6 +125,12 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * slot names it in place of this.
      */
     label: string;
+    /**
+     * Which links are marked. `reading` marks the one section being read, the
+     * last whose heading has passed the reading line. `visible` marks every
+     * section with part of it on screen, and the mark runs across their links.
+     */
+    marks: 'reading' | 'visible';
     /**
      * How far below the top of the scroll container a heading counts as reached,
      * in pixels. The scroll container is the window or the panel the sections
@@ -130,6 +152,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * than saying it in a sentence nobody reads.
      */
     get current(): string;
+    /**
+     * The ids of the sections whose links are marked, in page order: the one
+     * `current` names, or under `marks="visible"` every section on screen.
+     * Read-only, for the reason `current` gives.
+     */
+    get marked(): string[];
+    /** What `marked` reports, which only `markTo` writes. */
+    private markedIds;
     /**
      * What `current` reports, which only `mark` writes.
      *
@@ -183,6 +213,12 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * wherever the page says the top of the readable area is.
      */
     private mark;
+    /**
+     * The sections with part of them on screen, under `marks="visible"`: each
+     * runs from its own target to the next one's, and the last to the end of the
+     * page.
+     */
+    private onScreen;
     /** Where the destination is set, whether measured or asked for. */
     private markTo;
     /**
@@ -293,6 +329,18 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * handled is not ours, and `auto` is the whole point of `auto`.
      */
     private readonly handleClick;
+    /**
+     * Scrolls to the section with this id, as a press on its link does, with
+     * `behavior`, and marks its link at once. The address and focus stay where
+     * they are. Returns whether the outline has a link to that section.
+     */
+    scrollToSection(id: string): boolean;
+    /**
+     * Marks the section a reader asked for, and holds the mark there until the
+     * page stops moving. Scrolls to it where `scroll` says this element does
+     * the scrolling, and returns whether it did.
+     */
+    private travel;
     /**
      * Watches every section, and re-marks whenever any of them crosses anything.
      *
@@ -312,6 +360,15 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * life of the page.
      */
     private readonly handleSlotChange;
+    /**
+     * Writes each link's depth in the outline, from 1, as `data-depth`: the
+     * list items around it inside the outline, or for a flat run, its place in
+     * the lists `data-level` makes of it.
+     *
+     * On the consumer's links, as `aria-current` is, and only after the first
+     * render, where a framework has hydrated them.
+     */
+    private writeDepths;
     disconnectedCallback(): void;
     /**
      * Stops waiting for a scroll to land, both halves of the wait.

package/dist/outline/root/outline-root.js

@@ -17,11 +17,14 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             active: () => this.links.find((link) => link.hasAttribute('aria-current')),
             indicator: () => this.partNamed('indicator'),
             surface: () => this.partNamed('nav'),
+            through: () => this.links.findLast((link) => link.hasAttribute('aria-current')),
         });
         this.behavior = 'auto';
         this.follow = false;
         this.label = 'On this page';
+        this.marks = 'reading';
         this.offset = 0;
+        this.markedIds = [];
         this.reading = '';
         this.frame = 0;
         this.handleScroll = () => {
@@ -42,34 +45,18 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             if (!section) {
                 return;
             }
-            this.landing = section;
-            this.markTo(section);
-            this.unland();
-            const arrive = () => {
-                this.unland();
-                this.landing = undefined;
-                this.mark();
-            };
-            this.arrive = arrive;
-            document.addEventListener('scrollend', arrive, { capture: true, once: true });
-            this.landed = setTimeout(arrive, 1200);
-            if (this.behavior === 'auto') {
-                return;
-            }
-            event.preventDefault();
-            const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
-            section.target.scrollIntoView({
-                behavior: reduced && this.behavior === 'smooth' ? 'instant' : this.behavior,
-                block: 'start',
-            });
-            globalThis.history?.pushState(null, '', link?.getAttribute('href') ?? '');
-            const target = section.target;
-            if (!target.hasAttribute('tabindex')) {
-                target.setAttribute('tabindex', '-1');
+            if (this.travel(section, this.behavior !== 'auto')) {
+                event.preventDefault();
+                globalThis.history?.pushState(null, '', link?.getAttribute('href') ?? '');
+                const target = section.target;
+                if (!target.hasAttribute('tabindex')) {
+                    target.setAttribute('tabindex', '-1');
+                }
+                target.focus({ preventScroll: true });
             }
-            target.focus({ preventScroll: true });
         };
         this.handleSlotChange = () => {
+            this.writeDepths();
             this.watch();
             this.indicator.place();
         };
@@ -87,6 +74,9 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     get current() {
         return this.reading;
     }
+    get marked() {
+        return [...this.markedIds];
+    }
     get links() {
         const slots = [
             ...(this.renderRoot?.querySelectorAll?.('slot[data-link], nav > slot:not([role])') ?? []),
@@ -127,20 +117,34 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const origin = page ? 0 : scroller.getBoundingClientRect().top;
         const passed = sections.filter(({ target }) => target.getBoundingClientRect().top - origin - this.offset <= 1);
         const active = this.atEnd ? sections.at(-1) : (passed.at(-1) ?? sections[0]);
-        this.markTo(active);
+        const shown = this.marks === 'visible' ? this.onScreen(sections, origin, scroller) : [];
+        this.markTo(shown.length > 0 ? shown : active ? [active] : []);
     }
-    markTo(active) {
+    onScreen(sections, origin, scroller) {
+        const line = origin + this.offset;
+        const bottom = origin + (scroller === this.page ? this.page.clientHeight : scroller.clientHeight);
+        const tops = sections.map(({ target }) => target.getBoundingClientRect().top);
+        return sections.filter((_, at) => {
+            const end = tops[at + 1] ?? Number.POSITIVE_INFINITY;
+            return (tops[at] ?? 0) < bottom - 1 && end > line + 1;
+        });
+    }
+    markTo(marked) {
+        const on = new Set(marked.map(({ target }) => target));
         for (const { link, target } of this.sections) {
-            if (target === active?.target) {
+            if (on.has(target)) {
                 link.setAttribute('aria-current', 'location');
             }
             else {
                 link.removeAttribute('aria-current');
             }
         }
+        const active = marked[0];
         const next = active?.target.id ?? '';
-        if (next !== this.reading) {
+        const ids = marked.map(({ target }) => target.id);
+        if (next !== this.reading || ids.join(' ') !== this.markedIds.join(' ')) {
             this.reading = next;
+            this.markedIds = ids;
             this.indicator.place();
             if (this.follow && active) {
                 this.reveal(active.link);
@@ -173,6 +177,36 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             element.style.scrollMarginBlockStart = this.offset > 0 ? `${this.offset}px` : '';
         }
     }
+    scrollToSection(id) {
+        const section = this.sections.find(({ target }) => target.id === id);
+        if (!section) {
+            return false;
+        }
+        this.travel(section, true);
+        return true;
+    }
+    travel(section, scroll) {
+        this.landing = section;
+        this.markTo([section]);
+        this.unland();
+        const arrive = () => {
+            this.unland();
+            this.landing = undefined;
+            this.mark();
+        };
+        this.arrive = arrive;
+        document.addEventListener('scrollend', arrive, { capture: true, once: true });
+        this.landed = setTimeout(arrive, 1200);
+        if (!scroll) {
+            return false;
+        }
+        const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+        section.target.scrollIntoView({
+            behavior: reduced && this.behavior === 'smooth' ? 'instant' : this.behavior,
+            block: 'start',
+        });
+        return true;
+    }
     watch() {
         this.observer?.disconnect();
         if (this.sections.length === 0) {
@@ -188,6 +222,35 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         this.reach();
         this.mark();
     }
+    writeDepths() {
+        const links = this.links;
+        const items = new Map();
+        for (const link of links) {
+            let count = 0;
+            for (let node = link.parentElement; node && node !== this; node = node.parentElement) {
+                count += node.localName === 'li' ? 1 : 0;
+            }
+            items.set(link, count);
+        }
+        const flat = links.filter((link) => items.get(link) === 0);
+        const depth = new Map();
+        const walk = (branches, at) => {
+            for (const branch of branches) {
+                const link = flat[branch.index];
+                if (link) {
+                    depth.set(link, at);
+                }
+                walk(branch.children, at + 1);
+            }
+        };
+        walk(nest(flat.map((link) => levelOf(link.getAttribute('data-level')))), 1);
+        for (const link of links) {
+            const at = String(depth.get(link) ?? items.get(link) ?? 1);
+            if (link.getAttribute('data-depth') !== at) {
+                link.setAttribute('data-depth', at);
+            }
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.childWatch?.disconnect();
@@ -258,9 +321,12 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     updated(changed) {
         super.updated(changed);
         this.assign();
+        this.writeDepths();
         this.nameByHeading();
         if (changed.has('offset')) {
             this.reach();
+        }
+        if (changed.has('offset') || changed.has('marks')) {
             this.mark();
         }
         if (!this.observer) {
@@ -295,6 +361,9 @@ __decorate([
     words,
     property()
 ], HelixHeadlessOutline.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessOutline.prototype, "marks", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessOutline.prototype, "offset", void 0);

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -200,8 +200,22 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * attribute the consumer's server never sent is a mismatch whether or not it
      * moves afterwards, measured in both load orders, and a trigger that says it
      * is expanded is already saying it has something to expand.
+     *
+     * **A plain trigger once a reader has reached it.** A `<button>` of yours has
+     * no shadow root, so it takes `aria-haspopup="menu"` and `aria-expanded` as
+     * attributes, written only once focus or a pointer has reached it. That is
+     * after hydration, which is the only time React compares them. A trigger
+     * that carries either attribute itself is yours to keep up to date.
      */
     private announce;
+    /** The plain trigger this dial has written its state on, so it can be taken back. */
+    private toldPlain;
+    /** Whether a reader has reached the trigger, by focus or a pointer, which is after hydration. */
+    private reached;
+    /** Takes the state off a plain trigger that is no longer this dial's. */
+    private untellPlain;
+    /** A reader reaching the trigger, which lets a plain one be told its state. */
+    private readonly handleReach;
     /** The control the dial has described, so the description can be taken back. */
     private described;
     /**

package/dist/speed-dial/root/speed-dial-root.js

@@ -139,6 +139,13 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             this.close();
             event.preventDefault();
         };
+        this.reached = false;
+        this.handleReach = (event) => {
+            if (!this.reached && event.composedPath().includes(this.trigger)) {
+                this.reached = true;
+                this.announce();
+            }
+        };
         this.handleTriggerFocusIn = () => {
             if (this.pressHeld) {
                 this.describeTrigger(true);
@@ -186,6 +193,8 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.addEventListener('click', this.handleHeldClick, true);
         this.addEventListener('pointerenter', this.handlePointerEnter);
         this.addEventListener('pointerleave', this.handlePointerLeave);
+        this.addEventListener('focusin', this.handleReach);
+        this.addEventListener('pointerover', this.handleReach);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -199,14 +208,37 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.removeEventListener('click', this.handleHeldClick, true);
         this.removeEventListener('pointerenter', this.handlePointerEnter);
         this.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.removeEventListener('focusin', this.handleReach);
+        this.removeEventListener('pointerover', this.handleReach);
         this.stay();
     }
     announce() {
         const trigger = this.trigger;
-        if (trigger === this.partNamed('trigger')) {
+        if (trigger === this.partNamed('trigger') || trigger === this) {
+            return;
+        }
+        if (trigger !== this.toldPlain) {
+            this.untellPlain();
+        }
+        if (trigger.localName.includes('-')) {
+            tellDisclosure(trigger, this.open, 'menu');
             return;
         }
-        tellDisclosure(trigger, this.open, 'menu');
+        if (trigger !== this.toldPlain) {
+            if (!this.reached ||
+                trigger.hasAttribute('aria-expanded') ||
+                trigger.hasAttribute('aria-haspopup')) {
+                return;
+            }
+            this.toldPlain = trigger;
+        }
+        trigger.setAttribute('aria-haspopup', 'menu');
+        trigger.setAttribute('aria-expanded', String(this.open));
+    }
+    untellPlain() {
+        this.toldPlain?.removeAttribute('aria-haspopup');
+        this.toldPlain?.removeAttribute('aria-expanded');
+        this.toldPlain = undefined;
     }
     describeTrigger(light = false) {
         const trigger = this.trigger;

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

@@ -28,7 +28,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * back to the position where the collapsing gesture began. A drag records that position
  * on press, and every other way of collapsing records it in `settle`.
  * `collapsed-size` keeps a sliver of the pane visible, such as a tab strip.
- * Collapsing overrides `min` and `max`.
+ * Collapsing overrides `min` and `max`. `collapsible` says which panes can be
+ * collapsed at all, as Zag's panels each say.
+ *
+ * `min` is the least the start pane keeps and `end-min` the least the end pane
+ * keeps, each a percentage or a CSS length such as `16rem`.
  *
  * Set `primary` to the pane that keeps its size when the splitter's own size
  * changes, such as a sidebar beside a window being resized. The other pane
@@ -49,7 +53,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * | Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |
  * | Up, Down | Moves a stacked divider by `step`. |
  * | Home, End | Moves the divider to its bounds. |
- * | Enter | Collapses the start pane, and opens it again. |
+ * | Enter | Collapses the start pane, or the end pane where `collapsible="end"`, and opens it again. |
  * | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |
  *
  * @since 0.1.0
@@ -119,6 +123,15 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * consumer's to set.
      */
     collapsedSize: number;
+    /**
+     * Which panes can be collapsed, as Zag's panels each take `collapsible`:
+     * `start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
+     * at the edge without shutting. `Enter` collapses the end pane where only
+     * the end pane can be collapsed, and the start pane otherwise.
+     *
+     * Unset is `both`, and the attribute stays absent until you write it.
+     */
+    collapsible?: 'both' | 'end' | 'none' | 'start';
     /**
      * The name of the handle where two dividers cross, read by screen readers.
      */
@@ -141,6 +154,14 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * Where the divider starts, when `position` is not set.
      */
     defaultPosition: number;
+    /**
+     * The least the end pane keeps, in the units `min` takes: a percentage, or
+     * a CSS length such as `16rem` resolved against the splitter's box. The
+     * divider stops that far from the end, whatever `max` allows, so `min` and
+     * `end-min` hold a minimum for each pane, as Zag's panels each take
+     * `minSize`.
+     */
+    endMin: number | string;
     /**
      * The divider's name, read by screen readers.
      *
@@ -403,6 +424,8 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * latches on any drag that runs off the end.
      */
     private shutAt;
+    /** Whether `collapsible` lets this pane be collapsed. */
+    private canCollapse;
     /** Pulled between the bounds, which are the ends unless a consumer moved them. */
     private clamp;
     /**

package/dist/splitter/root/splitter-root.js

@@ -55,7 +55,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         return this.toPercent(this.min, 0);
     }
     get maxPercent() {
-        return this.toPercent(this.max, 100);
+        return Math.min(this.toPercent(this.max, 100), 100 - this.toPercent(this.endMin, 0));
     }
     get position() {
         const shut = this.collapsed;
@@ -141,10 +141,14 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     }
     shutAt(position) {
         const size = this.sliver;
-        if (position <= size) {
+        if (position <= size && this.canCollapse('start')) {
             return 'start';
         }
-        return position >= 100 - size ? 'end' : undefined;
+        return position >= 100 - size && this.canCollapse('end') ? 'end' : undefined;
+    }
+    canCollapse(pane) {
+        const collapsible = this.collapsible ?? 'both';
+        return collapsible === 'both' || collapsible === pane;
     }
     clamp(next) {
         const min = Math.max(0, Math.min(100, this.minPercent));
@@ -250,6 +254,10 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     }
     toggleCollapse() {
         const shut = this.collapsed;
+        const pane = this.collapsible === 'end' ? 'end' : 'start';
+        if (!shut && !this.canCollapse(pane)) {
+            return;
+        }
         const opened = shut ? undefined : this.position;
         requestChange({
             apply: (value) => {
@@ -266,7 +274,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
             },
             event: (value) => new HelixBeforeCollapseEvent({ value }),
             host: this,
-            next: shut ? '' : 'start',
+            next: shut ? '' : pane,
         });
     }
     reset() {
@@ -280,6 +288,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.cornerLabel = 'Resize both';
         this.cornerValueLabel = '{across} across, {down} down';
         this.defaultPosition = 50;
+        this.endMin = 0;
         this.label = 'Resize panes';
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -665,6 +674,9 @@ __decorate([
 __decorate([
     property({ attribute: 'collapsed-size', type: Number })
 ], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "collapsible", void 0);
 __decorate([
     words,
     property({ attribute: 'corner-label' })
@@ -679,6 +691,9 @@ __decorate([
 __decorate([
     property({ attribute: 'default-position', type: Number })
 ], HelixHeadlessSplitter.prototype, "defaultPosition", void 0);
+__decorate([
+    property({ attribute: 'end-min' })
+], HelixHeadlessSplitter.prototype, "endMin", void 0);
 __decorate([
     words,
     property()

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

@@ -22,7 +22,8 @@ export type TagSelectionMode = SelectionMode;
  * not disabled. `selection-behavior="replace"` selects the tag a reader
  * presses or moves to alone, as a file list does, and Control or Command
  * with a press or Space adds or takes out one tag. `disallow-empty-selection`
- * keeps one tag selected once one is. `value` holds the
+ * keeps one tag selected once one is, and Escape lets go of the selection
+ * otherwise. `value` holds the
  * selected tags' values, separated by commas, and a change asks with
  * `helix-before-change` and tells with `change`. Enter on a tag with an
  * `href` follows its link. A `disabled` tag is passed over. A selected tag
@@ -40,6 +41,12 @@ export type TagSelectionMode = SelectionMode;
  * Where only disabled tags are left, the first of them holds the tab stop and
  * takes focus, so the reader stays in the set.
  *
+ * **Typing new tags.** A field where people type tags and press Enter to add
+ * each one is Combobox with `multiple` and `allows-custom-value`, or
+ * `creatable` to ask first with `helix-create`. It draws each value as a tag,
+ * Backspace on the empty field removes the last one, and the arrow keys move
+ * between them.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Tag list, Chip group, Token list

package/dist/tag/group/tag-group.js

@@ -46,6 +46,14 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             if (event.ctrlKey || event.metaKey) {
                 return;
             }
+            if (event.key === 'Escape') {
+                if (this.selectionMode && this.written !== '' && !this.disallowEmptySelection) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.ask('');
+                }
+                return;
+            }
             if (MOVES.has(event.key)) {
                 const to = this.last;
                 if (multiple && event.shiftKey && to && to !== tag) {

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

@@ -28,6 +28,12 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * selected. Its remove button leaves the tab order there, Delete and Backspace
  * doing its job from the row.
  *
+ * **Styling a tag by what is happening to it.** `:state(selected)` while it is
+ * selected, `:state(focus-visible)` while its cell shows keyboard focus,
+ * `[disabled]` while it is out of reach, and the host's own `:hover` and
+ * `:active` under the pointer, as React Aria's `data-hovered` and
+ * `data-pressed` are.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -47,6 +53,7 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * @csspart link - The link around the label, under `href`.
  * @csspart start - The category before the label.
  *
+ * @cssstate focus-visible - The tag's cell has keyboard focus that the browser shows, in a `Tag.Group`.
  * @cssstate selected - The tag is selected in a `Tag.Group` that selects.
  */
 export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
@@ -131,6 +138,11 @@ export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
      */
     private get removeName();
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Says whether the cell shows keyboard focus, as `:focus-visible` does, so a
+     * sheet outside can draw the ring on the tag by the host.
+     */
+    private readonly handleCellFocus;
     protected render(): TemplateResult;
     /** The label, inside a link under `href`, behind a seam a tier can move. */
     protected renderLabel(): TemplateResult;

package/dist/tag/root/tag-root.js

@@ -15,6 +15,16 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         this.dismissTabStop = true;
         this.href = '';
         this.value = '';
+        this.handleCellFocus = (event) => {
+            const cell = event.currentTarget;
+            let shown = false;
+            try {
+                shown = event.type === 'focus' && cell.matches(':focus-visible');
+            }
+            catch {
+            }
+            this.toggleState('focus-visible', shown);
+        };
     }
     static { this.words = 'helix-tag'; }
     get words() {
@@ -66,6 +76,8 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
           part="cell"
           role="gridcell"
           tabindex=${this.focusable ? '0' : '-1'}
+          @focus=${this.handleCellFocus}
+          @blur=${this.handleCellFocus}
           >${content}</span
         >`
             : content;

package/dist/time-picker/root/time-picker-root.d.ts

@@ -469,6 +469,20 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * The validation message for a time that `step` skips.
      */
     stepMismatchMessage: string;
+    /**
+     * What each time in the list shows: a function given the time as `HH:mm`,
+     * or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
+     * returns text, an element or a Lit template.
+     *
+     * For the seats left at a time, or a caption under it, as React Aria's
+     * `ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
+     * or `slot="description"` goes to that slot of the row, and a description
+     * is read after the time. The row is still named by the written time, and
+     * typeahead still finds it by that. Return the written time with your
+     * content where it should still show. A property only, there being no way
+     * to write a function in markup. The wheels draw their own figures.
+     */
+    timeContent?: ((time: string, written: string) => unknown) | undefined;
     /**
      * The validation message for a time that `disable-times` bars.
      */

package/dist/time-picker/root/time-picker-root.js

@@ -480,6 +480,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       ${this.times.map((seconds) => {
             const at = this.valueFor(seconds);
             const between = this.between(at);
+            const written = writeClock(at, this.clock, this.seconds);
+            const drawn = this.timeContent;
             return html `<${this.tag('option')}
           part="option${between ? ' option-between' : ''}"
           exportparts="description: option-description, item: option-item,
@@ -489,7 +491,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
           ?disabled=${this.barred(at)}
           ?selected=${this.held.includes(at)}
           data-between=${between ? '' : nothing}
-          >${writeClock(at, this.clock, this.seconds)}</${this.tag('option')}
+          aria-label=${drawn ? written : nothing}
+          text-value=${drawn ? written : nothing}
+          >${drawn ? drawn(at, written) : written}</${this.tag('option')}
         >`;
         })}
       <slot name="empty" slot="empty">${this.emptyText}</slot>
@@ -600,6 +604,9 @@ __decorate([
     words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessTimePicker.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTimePicker.prototype, "timeContent", void 0);
 __decorate([
     words,
     property({ attribute: 'unavailable-message' })