@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/scroll-area/root/scroll-area-root.js

@@ -4,14 +4,20 @@ 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 { capturePointer, customElement, DelayController, HelixElement, isRtl, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { hasScrollbar, offsetAt, scrollFraction, scrollPerPixel, showsScrollbar, thumbFraction, } from '../scrollbar.js';
 const EDGES = ['block-start', 'block-end', 'inline-start', 'inline-end'];
 let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement {
     constructor() {
         super(...arguments);
+        this.hideDelay = 600;
         this.label = '';
+        this.active = false;
+        this.hovered = false;
+        this.over = false;
+        this.hide = new DelayController(this, { renders: false });
         this.more = [];
         this.scrolls = false;
         this.measure = () => {
@@ -36,6 +42,56 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
             }
             this.more = found;
             this.scrolls = box.scrollHeight > box.clientHeight || box.scrollWidth > box.clientWidth;
+            if (this.scrollbars) {
+                this.readBars(box);
+            }
+        };
+        this.handleVerticalDown = (event) => {
+            this.grab(event, 'vertical');
+        };
+        this.handleHorizontalDown = (event) => {
+            this.grab(event, 'horizontal');
+        };
+        this.handleDragMove = (event) => {
+            const drag = this.drag;
+            const box = this.scroller;
+            if (!drag || !box) {
+                return;
+            }
+            const pointer = drag.axis === 'vertical' ? event.clientY : event.clientX;
+            this.scrollAlong(box, drag.axis, drag.from + (pointer - drag.pointer) * drag.sign * drag.perPixel);
+        };
+        this.handleDragEnd = () => {
+            if (!this.drag) {
+                return;
+            }
+            this.drag = undefined;
+            this.wake();
+            this.requestUpdate();
+        };
+        this.handleBarEnter = () => {
+            this.over = true;
+        };
+        this.handleBarLeave = () => {
+            this.over = false;
+            this.wake();
+        };
+        this.handleEnter = () => {
+            this.hovered = true;
+        };
+        this.handleLeave = () => {
+            this.hovered = false;
+            if (this.scrollbars === 'hover') {
+                this.wake();
+            }
+        };
+        this.handleScroll = (event) => {
+            this.measure();
+            this.wake();
+            this.relayNativeEvent(event);
+        };
+        this.handleScrollEnd = (event) => {
+            this.relayNativeEvent(event);
         };
         this.handleSlotChange = (event) => {
             const slot = event.target;
@@ -48,8 +104,84 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
     get scroller() {
         return this.partNamed('viewport');
     }
+    extent(box, axis) {
+        return axis === 'vertical'
+            ? { client: box.clientHeight, offset: box.scrollTop, scroll: box.scrollHeight }
+            : { client: box.clientWidth, offset: Math.abs(box.scrollLeft), scroll: box.scrollWidth };
+    }
+    readBars(box) {
+        const mode = this.scrollbars ?? 'auto';
+        const style = getComputedStyle(box);
+        const bar = (axis, overflow) => {
+            const extent = this.extent(box, axis);
+            return {
+                along: scrollFraction(extent),
+                drawn: hasScrollbar(mode, !['clip', 'hidden', 'visible'].includes(overflow), extent.offset > 1 || extent.client < extent.scroll - 1),
+                thumb: thumbFraction(extent),
+            };
+        };
+        const next = {
+            horizontal: bar('horizontal', style.overflowX),
+            vertical: bar('vertical', style.overflowY),
+        };
+        if (JSON.stringify(next) !== JSON.stringify(this.bars)) {
+            this.bars = next;
+        }
+    }
+    wake() {
+        if (this.scrollbars !== 'scroll' && this.scrollbars !== 'hover') {
+            return;
+        }
+        this.active = true;
+        this.hide.start(this.hideDelay, () => {
+            this.active = false;
+        });
+    }
+    scrollAlong(box, axis, offset) {
+        box.scrollTo(axis === 'vertical'
+            ? { behavior: 'instant', top: offset }
+            : { behavior: 'instant', left: isRtl(box) ? -offset : offset });
+    }
+    grab(event, axis) {
+        const box = this.scroller;
+        const bar = event.currentTarget;
+        const thumb = bar.querySelector('[part~="thumb"]');
+        if (event.button !== 0 || !box || !thumb) {
+            return;
+        }
+        event.preventDefault();
+        const vertical = axis === 'vertical';
+        const rtl = !vertical && isRtl(box);
+        const track = bar.getBoundingClientRect();
+        const held = thumb.getBoundingClientRect();
+        const length = vertical ? track.height : track.width;
+        const size = vertical ? held.height : held.width;
+        const extent = this.extent(box, axis);
+        const pointer = vertical ? event.clientY : event.clientX;
+        let from = extent.offset;
+        if (!thumb.contains(event.target)) {
+            const along = vertical
+                ? pointer - track.top
+                : rtl
+                    ? track.right - pointer
+                    : pointer - track.left;
+            from = offsetAt(extent, along, length, size);
+            this.scrollAlong(box, axis, from);
+        }
+        this.drag = {
+            axis,
+            from,
+            perPixel: scrollPerPixel(extent, length, size),
+            pointer,
+            sign: rtl ? -1 : 1,
+        };
+        capturePointer(bar, event.pointerId);
+        this.requestUpdate();
+    }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('pointerenter', this.handleEnter);
+        this.addEventListener('pointerleave', this.handleLeave);
         this.watcher = new ResizeObserver(this.measure);
         if (this.hasUpdated) {
             this.watchContent();
@@ -57,8 +189,14 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('pointerenter', this.handleEnter);
+        this.removeEventListener('pointerleave', this.handleLeave);
         this.watcher?.disconnect();
         this.watcher = undefined;
+        this.drag = undefined;
+        this.active = false;
+        this.hovered = false;
+        this.over = false;
     }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
@@ -79,11 +217,20 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
     }
     updated(changed) {
         super.updated?.(changed);
+        if (changed.has('scrollbars') && this.hasUpdated && this.scrollbars) {
+            const box = this.scroller;
+            if (box) {
+                this.readBars(box);
+            }
+        }
         this.toggleState('scrolls', this.scrolls);
         this.toggleState('more-block-start', this.more.includes('block-start'));
         this.toggleState('more-block-end', this.more.includes('block-end'));
         this.toggleState('more-inline-start', this.more.includes('inline-start'));
         this.toggleState('more-inline-end', this.more.includes('inline-end'));
+        const drawn = this.scrollbars ? this.bars : undefined;
+        this.toggleState('scrollbar-horizontal', drawn?.horizontal.drawn === true);
+        this.toggleState('scrollbar-vertical', drawn?.vertical.drawn === true);
     }
     render() {
         return html `<div
@@ -92,7 +239,8 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
       role=${this.label ? 'region' : nothing}
       aria-label=${this.label || nothing}
       tabindex=${this.scrolls ? '0' : nothing}
-      @scroll=${this.measure}
+      @scroll=${this.handleScroll}
+      @scrollend=${this.handleScrollEnd}
     >
       <slot @slotchange=${this.handleSlotChange}></slot>
     </div>
@@ -104,12 +252,79 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
     <div
       part="edges"
       aria-hidden="true"
-    ></div>`;
+    ></div>${this.scrollbars ? this.renderScrollbars(this.scrollbars) : nothing}`;
+    }
+    renderScrollbars(mode) {
+        const bars = this.bars;
+        const moment = {
+            active: this.active,
+            held: this.over || this.drag !== undefined,
+            hovered: this.hovered,
+        };
+        const shown = showsScrollbar(mode, moment);
+        const facts = (bar) => bar
+            ? `--scroll-area-thumb-fraction: ${bar.thumb}; --scroll-area-scroll-fraction: ${bar.along}`
+            : nothing;
+        const vertical = bars?.vertical.drawn === true;
+        const horizontal = bars?.horizontal.drawn === true;
+        return html `<div
+        part="scrollbar scrollbar-vertical${vertical && shown ? ' scrollbar-visible' : ''}"
+        aria-hidden="true"
+        ?hidden=${!vertical}
+        style=${facts(bars?.vertical)}
+        @pointerdown=${this.handleVerticalDown}
+        @pointermove=${this.handleDragMove}
+        @pointerup=${this.handleDragEnd}
+        @pointercancel=${this.handleDragEnd}
+        @lostpointercapture=${this.handleDragEnd}
+        @pointerenter=${this.handleBarEnter}
+        @pointerleave=${this.handleBarLeave}
+      >
+        <div part="thumb thumb-vertical"></div>
+      </div>
+      <div
+        part="scrollbar scrollbar-horizontal${horizontal && shown ? ' scrollbar-visible' : ''}"
+        aria-hidden="true"
+        ?hidden=${!horizontal}
+        style=${facts(bars?.horizontal)}
+        @pointerdown=${this.handleHorizontalDown}
+        @pointermove=${this.handleDragMove}
+        @pointerup=${this.handleDragEnd}
+        @pointercancel=${this.handleDragEnd}
+        @lostpointercapture=${this.handleDragEnd}
+        @pointerenter=${this.handleBarEnter}
+        @pointerleave=${this.handleBarLeave}
+      >
+        <div part="thumb thumb-horizontal"></div>
+      </div>
+      <div
+        part="corner"
+        aria-hidden="true"
+        ?hidden=${!(vertical && horizontal)}
+      ></div>`;
     }
 };
+__decorate([
+    property({ attribute: 'hide-delay', type: Number })
+], HelixHeadlessScrollArea.prototype, "hideDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessScrollArea.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessScrollArea.prototype, "scrollbars", void 0);
+__decorate([
+    state()
+], HelixHeadlessScrollArea.prototype, "bars", void 0);
+__decorate([
+    state()
+], HelixHeadlessScrollArea.prototype, "active", void 0);
+__decorate([
+    state()
+], HelixHeadlessScrollArea.prototype, "hovered", void 0);
+__decorate([
+    state()
+], HelixHeadlessScrollArea.prototype, "over", void 0);
 __decorate([
     state()
 ], HelixHeadlessScrollArea.prototype, "more", void 0);

package/dist/scroll-area/scrollbar.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The arithmetic behind the scrollbars a scroll area draws under `scrollbars`.
+ *
+ * Every length here is along one axis and counted from that axis' start, which
+ * is the right-hand edge on a right-to-left page for the horizontal one. The
+ * component turns a pointer and a `scrollLeft` into those counts, so nothing
+ * below has to know which way the line runs.
+ */
+/** Which scrollbars are drawn, and when. Absent keeps the browser's own. */
+export type Scrollbars = 'always' | 'auto' | 'hover' | 'scroll';
+/** One axis of the viewport, read off the box. */
+export interface Extent {
+    /** How much of the content the viewport shows, `clientHeight` or `clientWidth`. */
+    client: number;
+    /** How far from its start the axis is scrolled, never negative. */
+    offset: number;
+    /** The whole length of the content, `scrollHeight` or `scrollWidth`. */
+    scroll: number;
+}
+/**
+ * The share of the track the thumb covers, from 0 to 1: how much of the content
+ * is in view. A box with no content, or one that shows all of it, is 1.
+ */
+export declare const thumbFraction: ({ client, scroll }: Extent) => number;
+/**
+ * How far along the axis is scrolled, from 0 at the start to 1 at the end. An
+ * axis with nothing to scroll is 0.
+ */
+export declare const scrollFraction: ({ client, offset, scroll }: Extent) => number;
+/**
+ * How far the content moves for each pixel the thumb is dragged.
+ *
+ * The thumb travels the track less its own length, and the content travels
+ * its length less the view, so the ratio of the two is the gearing. Zero where
+ * the thumb fills the track and cannot move.
+ */
+export declare const scrollPerPixel: (extent: Extent, track: number, thumb: number) => number;
+/**
+ * The offset that puts the middle of the thumb under a press on the track.
+ *
+ * `along` is where the press landed, counted from the track's start. The thumb
+ * stops at either end of the track, so a press near an end scrolls to that end.
+ */
+export declare const offsetAt: (extent: Extent, along: number, track: number, thumb: number) => number;
+/**
+ * Whether an axis has a scrollbar at all: it can scroll, and under every value
+ * but `always` it has something to scroll.
+ *
+ * An axis whose `overflow` is `hidden` or `clip` cannot be scrolled by a reader,
+ * so it gets no scrollbar whatever `scrollbars` says. That is how a consumer
+ * keeps a horizontal bar off a list that only scrolls down.
+ */
+export declare const hasScrollbar: (mode: Scrollbars, scrollable: boolean, overflows: boolean) => boolean;
+/**
+ * Whether a scrollbar that exists is showing at this moment.
+ *
+ * `auto` and `always` show it the whole time. `scroll` shows it while the
+ * content is moving and for the hide delay after, and while the pointer holds
+ * it. `hover` adds the time the pointer is over the scroll area.
+ */
+export declare const showsScrollbar: (mode: Scrollbars, moment: {
+    active: boolean;
+    held: boolean;
+    hovered: boolean;
+}) => boolean;

package/dist/scroll-area/scrollbar.js

@@ -0,0 +1,24 @@
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+export const thumbFraction = ({ client, scroll }) => scroll <= 0 ? 1 : clamp(client / scroll, 0, 1);
+export const scrollFraction = ({ client, offset, scroll }) => {
+    const room = scroll - client;
+    return room <= 0 ? 0 : clamp(offset / room, 0, 1);
+};
+export const scrollPerPixel = (extent, track, thumb) => {
+    const run = track - thumb;
+    return run <= 0 ? 0 : Math.max(0, extent.scroll - extent.client) / run;
+};
+export const offsetAt = (extent, along, track, thumb) => {
+    const run = track - thumb;
+    if (run <= 0) {
+        return 0;
+    }
+    return clamp((along - thumb / 2) / run, 0, 1) * Math.max(0, extent.scroll - extent.client);
+};
+export const hasScrollbar = (mode, scrollable, overflows) => scrollable && (mode === 'always' || overflows);
+export const showsScrollbar = (mode, moment) => {
+    if (mode === 'auto' || mode === 'always') {
+        return true;
+    }
+    return moment.active || moment.held || (mode === 'hover' && moment.hovered);
+};

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

@@ -1,5 +1,6 @@
 import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import { type HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
 declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -17,6 +18,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * `Select` owns the value, passes it down to the listbox, and takes changes
  * back, so the value lives in one place.
  *
+ * Set `valueContent` to draw the trigger's content from the chosen options,
+ * and several chosen options are written as a list in the reader's language.
+ *
  * In the open list the arrow keys, Home, End, PageUp, PageDown and typed
  * letters move the highlight, and Enter, Space or a click chooses it and
  * closes the list. Tab closes the list and moves on. On the closed trigger,
@@ -103,6 +107,17 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Shown on the trigger while nothing is chosen.
      */
     placeholder: string;
+    /**
+     * What the trigger shows for the chosen options: a function given them, in
+     * the order they appear, that returns text, an element or a Lit template.
+     *
+     * For a trigger that shows more than the words, an avatar beside a name or a
+     * count of a long set, as React Aria's `SelectValue` takes children. The
+     * trigger is named by what this draws, so keep the words in it. Nothing
+     * chosen still shows `placeholder`. A property only, there being no way to
+     * write a function in markup.
+     */
+    valueContent?: ((chosen: readonly HelixHeadlessOption[]) => unknown) | undefined;
     /**
      * Which option is chosen, as an index, or `-1` where none is.
      *
@@ -168,6 +183,13 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * the commit creates the text node it needs.
      */
     private get display();
+    /** The chosen options, in the order they appear. None on a server or while hydrating. */
+    private get chosenOptions();
+    /**
+     * What the trigger shows, behind a seam: what `value-content` draws for the
+     * chosen options, or their words, or the placeholder.
+     */
+    protected renderValue(): unknown;
     /** Where the highlight goes when the list opens, set by the key that opened it. */
     private opening;
     /**
@@ -187,6 +209,8 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Made on connection, there being no `MutationObserver` on a server.
      */
     private watchers;
+    /** A link option, once followed, closes the panel as a choice does. */
+    private readonly handleLinkFollowed;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Opens the list with the highlight where the opening key says. */

package/dist/select/root/select-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 { AriaForwardController, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -43,6 +43,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.opening = 'selected';
         this.seen = new Set();
         this.watchers = [];
+        this.handleLinkFollowed = (event) => {
+            afterLinkFollowed(event, () => this.requestOpen(false));
+        };
         this.handleChange = (event) => {
             const next = event.detail.value;
             if (!this.requestValue(next)) {
@@ -105,16 +108,23 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     get display() {
         const chosen = new Set(this.value === '' ? [] : this.value.split(','));
-        const words = optionsAmong(this.knownChildren)
-            .filter((option) => chosen.has(option.value))
-            .map((option) => option.text);
+        const words = this.chosenOptions.map((option) => option.text);
         if (words.length > 0) {
-            return words.join(', ');
+            return new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(words);
         }
         return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
     }
+    get chosenOptions() {
+        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        return optionsAmong(this.knownChildren).filter((option) => chosen.has(option.value));
+    }
+    renderValue() {
+        const chosen = this.chosenOptions;
+        return this.valueContent && chosen.length > 0 ? this.valueContent(chosen) : this.display;
+    }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('helix-select', this.handleLinkFollowed);
         const words = new MutationObserver(() => this.requestUpdate());
         words.observe(this, {
             attributeFilter: ['label', 'value'],
@@ -128,6 +138,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleLinkFollowed);
         for (const watcher of this.watchers) {
             watcher.disconnect();
         }
@@ -211,7 +222,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       ?multiple=${this.multiple}
       ?filterable=${this.filterable}
       manual
-      aria-label=${this.label || nothing}
+      aria-label=${this.label || this.getAttribute('aria-label') || nothing}
       @keydown=${this.handleListKeydown}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
@@ -252,7 +263,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         @keydown=${this.handleTriggerKeydown}
       >
         <slot name="start"></slot>
-        <span part="value" id="value">${this.display}</span>
+        <span part="value" id="value">${this.renderValue()}</span>
         ${''}
         <slot name="end"></slot>
         ${''}
@@ -283,6 +294,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSelect.prototype, "valueContent", void 0);
 HelixHeadlessSelect = __decorate([
     customElement('helix-headless-select')
 ], HelixHeadlessSelect);

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

@@ -15,12 +15,22 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * There is no `shape` property. Whether a placeholder is a line, a block, or a
  * circle is presentation, which belongs to the styled tier.
  *
+ * **Put the real content inside and set `loading`, and the skeleton takes its
+ * size.** While `loading` is set the content is inert, the host is
+ * `aria-busy`, and the styled tier hides the content and paints the
+ * placeholder over its box, so nothing moves when the content arrives. Take
+ * `loading` off and the content is shown as it is. An empty skeleton is a
+ * placeholder of its own size, as before.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
  * @aliases Placeholder, Shimmer, Ghost
  * @documentation https://fusion.dev/helix/components/skeleton
  *
+ * @slot - The content the skeleton stands in for, which sizes it. Optional.
+ *
+ * @csspart content - The box around the content, inert while `loading`.
  * @csspart skeleton - The placeholder shape.
  */
 export declare class HelixHeadlessSkeleton extends HelixElement {
@@ -31,7 +41,22 @@ export declare class HelixHeadlessSkeleton extends HelixElement {
      * Absent hides the placeholder from screen readers.
      */
     label: string;
+    /**
+     * Whether the content inside is still loading, which keeps it inert and
+     * draws the placeholder over it.
+     *
+     * Absent shows the content. An empty skeleton is a placeholder whatever
+     * this says. Reflected, because the styled tier hides the content on it.
+     */
+    loading: boolean;
+    /**
+     * Whether the skeleton holds content, read off its children where they can
+     * be known. Not on a server, where an unlabeled skeleton is taken for an
+     * empty one until the page has its children.
+     */
+    private get wraps();
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/skeleton/root/skeleton-root.js

@@ -11,25 +11,40 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.loading = false;
+    }
+    get wraps() {
+        return (this.childrenKnown &&
+            [...this.childNodes].some((node) => node.nodeType === 1 || (node.textContent ?? '').trim() !== ''));
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.internals.ariaBusy = this.loading ? 'true' : null;
         if (this.label) {
             hostAria(this.internals, { label: this.label, role: 'progressbar' });
             this.internals.ariaHidden = null;
         }
         else {
             hostAria(this.internals, { label: '', role: '' });
-            this.internals.ariaHidden = 'true';
+            this.internals.ariaHidden = this.wraps ? null : 'true';
         }
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
-        return html `<span part="skeleton"></span>`;
+        return html `<span part="content" ?inert=${this.loading}
+        ><slot @slotchange=${() => this.requestUpdate()}></slot></span
+      ><span part="skeleton"></span>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessSkeleton.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSkeleton.prototype, "loading", void 0);
 HelixHeadlessSkeleton = __decorate([
     customElement('helix-headless-skeleton')
 ], HelixHeadlessSkeleton);

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

@@ -20,6 +20,13 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  *
  * A range with two thumbs is two inputs stacked on one track, because there is
  * no native two-thumb range. Each thumb keeps its own value.
+ * `min-steps-between-thumbs` keeps them that many steps apart.
+ *
+ * `format-options` writes the value with `Intl.NumberFormat` in `locale`, as a
+ * currency, a percent or a unit, and `formatter` writes it with a function of
+ * your own, such as words for a scale. Either one is what a screen reader
+ * hears, what the readout shows and what the marker labels say. `value-text`
+ * still wraps it in a sentence, with the formatted value in its place.
  *
  * `required` comes with the field mixin and cannot fail. A range is never
  * empty: the platform shows its midpoint when no value is set, and `willUpdate`
@@ -62,6 +69,27 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
+    /**
+     * `Intl.NumberFormat` options the value is written with: a currency, a
+     * percent, a unit, or a number of decimals. Written as JSON in the
+     * attribute.
+     *
+     * ```html
+     * <helix-slider format-options='{"style":"currency","currency":"USD"}'></helix-slider>
+     * ```
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Writes a value as text, in place of `format-options`: words for a scale,
+     * or anything `Intl.NumberFormat` cannot say. A property, since a function
+     * cannot be written in an attribute.
+     */
+    formatter?: (value: number) => string;
+    /**
+     * The locale `format-options` writes the value in, such as `de-DE`. Empty is
+     * the reader's own.
+     */
+    locale: string;
     /**
      * Shows the value at each mark.
      */
@@ -102,6 +130,11 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     min: number;
     /** The name of a range's lower thumb, read after the slider's label. */
     minimumLabel: string;
+    /**
+     * How many steps a range's two thumbs stay apart, as Zag's
+     * `minStepsBetweenThumbs`. A thumb pushed closer stops there.
+     */
+    minStepsBetweenThumbs: number;
     /**
      * The direction the track runs. `vertical` stands it on end.
      *
@@ -223,6 +256,12 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * step, or for a range, two of them in order.
      */
     private sanitize;
+    /** How far apart a range's thumbs stay, in the slider's own units. */
+    private get gap();
+    /** Whether the value is written by `formatter` or `format-options`. */
+    private get formats();
+    /** A value as the reader sees it: formatted where asked, the number otherwise. */
+    private said;
     /** What a screen reader says for one thumb, where `value-text` asks. */
     private spoken;
     protected updated(changed: PropertyValues): void;