@fusion.dev/helix-core 0.142.0 → 0.143.0

package/dist/helix-form-element/helix-form-element.d.ts

@@ -11,8 +11,17 @@ import { HelixElement } from '../helix-element/helix-element.js';
  * `internals` comes from `HelixElement`, which attaches it for every component.
  * `attachInternals()` throws on a second call, so only one class attaches it.
  *
- * The class carries only what every form participant needs. `value`, validity,
- * and the reset and restore callbacks are added with the first input component.
+ * The class carries only what every form participant needs. `value` and the
+ * reset and restore callbacks are added with the first input component.
+ *
+ * **The validity API is the platform's, read through `internals`**, so
+ * `checkValidity()`, `reportValidity()` and `setCustomValidity()` work on the
+ * host as they do on a native control. A custom message is laid over whatever
+ * the control itself reports, which is why `setValidity` is wrapped below.
+ *
+ * **Focus goes to the control's first tab stop**, for `focus()` and for a
+ * press on a `<label>` that names the host. A host is not focusable itself, so
+ * without this a label press focused nothing on half the controls.
  *
  * @since 0.1.0
  * @status experimental
@@ -109,6 +118,16 @@ export declare class HelixFormElement extends HelixElement {
      * middle of removing.
      */
     formDisabledCallback(disabled: boolean): void;
+    /**
+     * Whether an ancestor `<fieldset disabled>` holds the control, outside its
+     * first `<legend>`, read from the tree.
+     *
+     * For the one case the callback cannot report: a control disabled itself and
+     * by a fieldset, whose own `disabled` is then removed. The effective state does
+     * not change, so the platform does not call, and the fieldset's hold has to
+     * be read.
+     */
+    private get heldByFieldset();
     /**
      * Called by the browser when the form is reset. It does nothing here, and
      * every override calls it.
@@ -158,6 +177,116 @@ export declare class HelixFormElement extends HelixElement {
      * Here rather than on each control.
      */
     name: string;
+    constructor();
+    /** The platform's own `setValidity`, which the wrapper above calls. */
+    private readonly reportValidityTo;
+    /** What the control last reported, before any custom error is laid over it. */
+    private reported;
+    /** The message `setCustomValidity` was given. */
+    private customValidity;
+    /** The `validityFeedback` the platform was last told about. */
+    private appliedFeedback;
+    /**
+     * @internal A message that marks the control invalid, from a layer above this
+     * one. `MixinField` answers with `feedback`, so a field showing what is wrong
+     * does not submit.
+     */
+    protected get validityFeedback(): string;
+    /**
+     * Hands the platform the control's own verdict with any custom error on top,
+     * anchored where focus can go.
+     */
+    private applyValidity;
+    /**
+     * Where the browser points its bubble: the anchor a control gave if focus
+     * can go there, and its first tab stop otherwise.
+     *
+     * A group anchors on a part that holds its members and cannot take focus,
+     * and the platform then refuses the submission, logs that the control is
+     * not focusable, and leaves the reader on the submit button.
+     */
+    protected validationAnchor(anchor?: HTMLElement): HTMLElement | undefined;
+    /**
+     * Whether the control meets its constraints, and why not.
+     *
+     * @reference https://developer.mozilla.org/docs/Web/API/ElementInternals/validity ElementInternals.validity
+     */
+    get validity(): ValidityState;
+    /** The message the browser would show for the control, or an empty string. */
+    get validationMessage(): string;
+    /** Whether the control is checked when its form is submitted. */
+    get willValidate(): boolean;
+    /**
+     * Returns whether the control is valid, and fires `invalid` on it when it is
+     * not.
+     */
+    checkValidity(): boolean;
+    /**
+     * Returns whether the control is valid, and when it is not, fires `invalid`
+     * and shows the browser's message at the control.
+     */
+    reportValidity(): boolean;
+    /**
+     * Marks the control invalid with `message`, or clears that with an empty
+     * string, as on a native control. The form does not submit while it is set.
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * The element focus goes to: the control's first tab stop, or `null` where
+     * there is none.
+     *
+     * Read through shadow roots and slots, so a group lands on the member that
+     * holds its tab stop, which is the chosen radio in a radio group.
+     */
+    protected get focusTarget(): HTMLElement | null;
+    /** Moves focus to the control, as focusing a native control does. */
+    focus(options?: FocusOptions): void;
+    /**
+     * Focuses the control when its `<label>` is pressed.
+     *
+     * The label sends the host a click of the browser's own after trying to
+     * focus it, and a host that is not focusable takes nothing from that try.
+     * Only a click that starts at the host and that the browser sent: one from
+     * inside has landed where it meant to, and `click()` from a script does not
+     * focus a native control either.
+     */
+    private readonly focusFromLabel;
+    /**
+     * Re-anchors the verdict as the form checks it, because the control's
+     * members may have rendered since it last reported, and the anchor read then
+     * was the best there was.
+     */
+    private readonly refreshAnchor;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * @internal Whether this control is a field that counts against implicit
+     * submission: a single line of text, as `<input type="text">` is.
+     */
+    protected get blocksImplicitSubmission(): boolean;
+    /** @internal Whether this control submits its form, for finding the form's default button. */
+    protected get submitsForm(): boolean;
+    /** @internal Activates the control as its form's default button. */
+    protected activate(): void;
+    /**
+     * Submits the form the way pressing Enter in a native text field does.
+     *
+     * The control's own input is in a shadow root and has no form owner, so the
+     * platform never runs implicit submission for it. This runs it: the form's
+     * default button is activated, the first submit button in it, a Helix one
+     * included. With none, the form is submitted when it holds no more than one
+     * field that counts against implicit submission, and nothing happens
+     * otherwise.
+     *
+     * @reference https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission implicit submission
+     */
+    protected submitImplicitly(): void;
+    /** The form's default button, the first submit button in it, native or Helix. */
+    protected static defaultButton(form: HTMLFormElement): Element | undefined;
+    /** Whether `target` is a native field of `form` that Enter submits it from. */
+    protected static submitsOnEnter(target: EventTarget | undefined, form: HTMLFormElement): boolean;
+    /** Whether `element` is a submit button, native or Helix. */
+    protected static submits(element: Element): boolean;
     /**
      * The form the control belongs to, or `null`.
      *

package/dist/helix-form-element/helix-form-element.js

@@ -6,13 +6,55 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { property, state } from 'lit/decorators.js';
 import { HelixElement } from '../helix-element/helix-element.js';
-export class HelixFormElement extends HelixElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.formDisabled = false;
-        this.name = '';
+const VALIDITY_FLAGS = [
+    'badInput',
+    'customError',
+    'patternMismatch',
+    'rangeOverflow',
+    'rangeUnderflow',
+    'stepMismatch',
+    'tooLong',
+    'tooShort',
+    'typeMismatch',
+    'valueMissing',
+];
+const BLOCKING_TYPES = new Set([
+    'date',
+    'datetime-local',
+    'email',
+    'month',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week',
+]);
+const takesFocus = (element) => (element.tabIndex >= 0 || element.hasAttribute('tabindex')) &&
+    !element.disabled &&
+    (typeof element.checkVisibility !== 'function' || element.checkVisibility());
+const isTabStop = (element) => element instanceof HTMLElement &&
+    element.tabIndex >= 0 &&
+    !element.disabled &&
+    !element.hidden &&
+    !element.inert &&
+    (typeof element.checkVisibility !== 'function' || element.checkVisibility());
+const firstTabStop = (node) => {
+    const children = node instanceof HTMLSlotElement ? node.assignedElements({ flatten: true }) : [...node.children];
+    for (const child of children) {
+        if (isTabStop(child)) {
+            return child;
+        }
+        const found = (child.shadowRoot ? firstTabStop(child.shadowRoot) : null) ?? firstTabStop(child);
+        if (found) {
+            return found;
+        }
     }
+    return null;
+};
+export class HelixFormElement extends HelixElement {
     static { this.formAssociated = true; }
     get isDisabled() {
         return this.disabled || this.formDisabled;
@@ -20,10 +62,27 @@ export class HelixFormElement extends HelixElement {
     formDisabledCallback(disabled) {
         this.formDisabled = disabled && !this.disabled;
     }
+    get heldByFieldset() {
+        let fieldset = this.parentElement?.closest('fieldset[disabled]') ?? null;
+        while (fieldset) {
+            const legend = fieldset.querySelector(':scope > legend');
+            if (!legend?.contains(this)) {
+                return true;
+            }
+            fieldset = fieldset.parentElement?.closest('fieldset[disabled]') ?? null;
+        }
+        return false;
+    }
     formResetCallback() { }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (changed.get('disabled') === true && !this.disabled && this.isConnected) {
+            this.formDisabled = this.heldByFieldset;
+        }
         this.internals.ariaDisabled = this.isDisabled ? 'true' : null;
+        if (this.validityFeedback !== this.appliedFeedback) {
+            this.applyValidity();
+        }
     }
     announceInput() {
         this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
@@ -31,6 +90,157 @@ export class HelixFormElement extends HelixElement {
     announceChange() {
         this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
     }
+    constructor() {
+        super();
+        this.disabled = false;
+        this.formDisabled = false;
+        this.name = '';
+        this.reported = { anchor: undefined, flags: {}, message: '' };
+        this.customValidity = '';
+        this.appliedFeedback = '';
+        this.focusFromLabel = (event) => {
+            if (!event.isTrusted || event.composedPath()[0] !== this || this.isDisabled) {
+                return;
+            }
+            if (!this.matches(':focus-within')) {
+                this.focus();
+            }
+        };
+        this.refreshAnchor = () => {
+            if (!this.internals.validity.valid) {
+                this.applyValidity();
+            }
+        };
+        const internals = this.internals;
+        const report = internals.setValidity.bind(internals);
+        this.reportValidityTo = report;
+        internals.setValidity = (flags, message, anchor) => {
+            this.reported = { anchor, flags: flags ?? {}, message: message ?? '' };
+            this.applyValidity();
+        };
+    }
+    get validityFeedback() {
+        return '';
+    }
+    applyValidity() {
+        const feedback = this.validityFeedback;
+        this.appliedFeedback = feedback;
+        const custom = this.customValidity || feedback;
+        const flags = {};
+        for (const flag of VALIDITY_FLAGS) {
+            if (this.reported.flags[flag] === true) {
+                flags[flag] = true;
+            }
+        }
+        if (custom !== '') {
+            flags.customError = true;
+        }
+        if (Object.keys(flags).length === 0) {
+            this.reportValidityTo({});
+            return;
+        }
+        this.reportValidityTo(flags, custom || this.reported.message, this.validationAnchor(this.reported.anchor));
+    }
+    validationAnchor(anchor) {
+        if (anchor && takesFocus(anchor)) {
+            return anchor;
+        }
+        return this.focusTarget ?? anchor;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        this.applyValidity();
+        return this.internals.reportValidity();
+    }
+    setCustomValidity(message) {
+        this.customValidity = message;
+        this.applyValidity();
+        this.requestUpdate();
+    }
+    get focusTarget() {
+        const root = this.shadowRoot;
+        return root ? firstTabStop(root) : null;
+    }
+    focus(options) {
+        const target = this.focusTarget;
+        if (target) {
+            target.focus(options);
+            return;
+        }
+        super.focus(options);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.focusFromLabel);
+        this.addEventListener('invalid', this.refreshAnchor);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.focusFromLabel);
+        this.removeEventListener('invalid', this.refreshAnchor);
+    }
+    get blocksImplicitSubmission() {
+        return false;
+    }
+    get submitsForm() {
+        return false;
+    }
+    activate() {
+        this.click();
+    }
+    submitImplicitly() {
+        const { form } = this;
+        if (!form) {
+            return;
+        }
+        const elements = [...form.elements];
+        const button = HelixFormElement.defaultButton(form);
+        if (button) {
+            if (button.matches(':disabled')) {
+                return;
+            }
+            if (button instanceof HelixFormElement) {
+                button.activate();
+            }
+            else {
+                ;
+                button.click();
+            }
+            return;
+        }
+        const blocking = elements.filter((element) => element instanceof HelixFormElement
+            ? element.blocksImplicitSubmission
+            : element instanceof HTMLInputElement && BLOCKING_TYPES.has(element.type));
+        if (blocking.length <= 1) {
+            form.requestSubmit();
+        }
+    }
+    static defaultButton(form) {
+        return [...form.elements].find((element) => HelixFormElement.submits(element));
+    }
+    static submitsOnEnter(target, form) {
+        return (target instanceof HTMLInputElement && target.form === form && BLOCKING_TYPES.has(target.type));
+    }
+    static submits(element) {
+        if (element instanceof HelixFormElement) {
+            return element.submitsForm;
+        }
+        if (element instanceof HTMLButtonElement) {
+            return element.type === 'submit';
+        }
+        return (element instanceof HTMLInputElement && (element.type === 'submit' || element.type === 'image'));
+    }
     get form() {
         return this.internals.form;
     }

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export { FullscreenController } from './controllers/fullscreen-controller/fullsc
 export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
 export { IdleController } from './controllers/idle-controller/idle-controller.js';
 export { IndicatorController, type IndicatorOptions, } from './controllers/indicator-controller/indicator-controller.js';
-export { KeyboardNavigationController, type KeyboardNavigationOptions, type NavigableItem, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
+export { KeyboardNavigationController, type KeyboardNavigationOptions, type NavigableItem, Typeahead, typesCharacter, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
 export { MediaSessionController, type SessionHandlers, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
 export { MAX_FRAME_STEP, PaintGateController, type PaintGateOptions, } from './controllers/paint-gate-controller/paint-gate-controller.js';
 export { PlacementController } from './controllers/placement-controller/placement-controller.js';
@@ -22,7 +22,7 @@ export { SourceController, type SourceHost, } from './controllers/source-control
 export { type TokenColor, TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
+export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -61,7 +61,7 @@ export { markRegion, type RegionOptions } from './utils/mark-region/mark-region.
 export { copiesOf, type MediaCopy, sameCopies, } from './utils/media-copy/media-copy.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { type ColorBytes, readColor } from './utils/read-color/read-color.js';
-export { type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, } from './utils/read-series/read-series.js';
+export { byRow, type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, unbroken, } from './utils/read-series/read-series.js';
 export { type Relative, relativeTime, } from './utils/relative-time/relative-time.js';
 export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
 export { RUNTIME_LOG, RUNTIME_SLOT, type RuntimeEvent, type RuntimeKind, reportRuntime, } from './utils/report-runtime/report-runtime.js';
@@ -73,6 +73,7 @@ export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js'
 export { extent, linear, type Scale } from './utils/scale/scale.js';
 export { ticks } from './utils/scale/ticks.js';
 export { type ScrollItemOptions, scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
+export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scroll-lock.js';
 export { slotFilled } from './utils/slot-filled/slot-filled.js';
 export { slottedWords } from './utils/slotted-words/slotted-words.js';
 export { splitValues } from './utils/split-values/split-values.js';

package/dist/index.js

@@ -12,7 +12,7 @@ export { FullscreenController } from './controllers/fullscreen-controller/fullsc
 export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
 export { IdleController } from './controllers/idle-controller/idle-controller.js';
 export { IndicatorController, } from './controllers/indicator-controller/indicator-controller.js';
-export { KeyboardNavigationController, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
+export { KeyboardNavigationController, Typeahead, typesCharacter, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
 export { MediaSessionController, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
 export { MAX_FRAME_STEP, PaintGateController, } from './controllers/paint-gate-controller/paint-gate-controller.js';
 export { PlacementController } from './controllers/placement-controller/placement-controller.js';
@@ -22,7 +22,7 @@ export { SourceController, } from './controllers/source-controller/source-contro
 export { TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, } from './events/events.js';
+export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -61,7 +61,7 @@ export { markRegion } from './utils/mark-region/mark-region.js';
 export { copiesOf, sameCopies, } from './utils/media-copy/media-copy.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { readColor } from './utils/read-color/read-color.js';
-export { readRows, readSeries, } from './utils/read-series/read-series.js';
+export { byRow, readRows, readSeries, unbroken, } from './utils/read-series/read-series.js';
 export { relativeTime, } from './utils/relative-time/relative-time.js';
 export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
 export { RUNTIME_LOG, RUNTIME_SLOT, reportRuntime, } from './utils/report-runtime/report-runtime.js';
@@ -73,6 +73,7 @@ export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js'
 export { extent, linear } from './utils/scale/scale.js';
 export { ticks } from './utils/scale/ticks.js';
 export { scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
+export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scroll-lock.js';
 export { slotFilled } from './utils/slot-filled/slot-filled.js';
 export { slottedWords } from './utils/slotted-words/slotted-words.js';
 export { splitValues } from './utils/split-values/split-values.js';

package/dist/mixins/mixin-chart-source/mixin-chart-source.d.ts

@@ -128,6 +128,14 @@ export declare class MixinChartSourceInterface {
      * words and is already written.
      */
     label: string;
+    /**
+     * The locale the chart's own numbers are written in: its axis, its
+     * percentages and its totals, such as `de` for `1.240` and `32 %`.
+     *
+     * Absent uses the runtime's own. The table's cells are shown as the table
+     * writes them, whatever this says.
+     */
+    locale: string;
     /**
      * The table's columns, one series each. Empty when there is no table.
      */

package/dist/mixins/mixin-chart-source/mixin-chart-source.js

@@ -21,6 +21,7 @@ export const MixinChartSource = (Base) => {
             this.pointer = new ChartPointerController(this);
             this.for = '';
             this.label = '';
+            this.locale = '';
         }
         willUpdate(changed) {
             super.willUpdate(changed);
@@ -56,5 +57,8 @@ export const MixinChartSource = (Base) => {
     __decorate([
         property()
     ], ChartSourceElement.prototype, "label", void 0);
+    __decorate([
+        property()
+    ], ChartSourceElement.prototype, "locale", void 0);
     return ChartSourceElement;
 };

package/dist/mixins/mixin-collection/mixin-collection.d.ts

@@ -16,9 +16,11 @@ export declare class CollectionElement {
     /**
      * The status line, or nothing where the collection has content to show.
      *
-     * Rendered by the component wherever its rows would be.
+     * Rendered by the component wherever its rows would be. `cell` makes the line
+     * a row holding one cell of that role, for a table or a grid, whose children
+     * may only be rows.
      */
-    protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
+    protected renderStatus(hasContent: boolean, cell?: 'cell' | 'gridcell'): TemplateResult | typeof nothing;
     /**
      * The same words for a screen reader, in a region that is always there.
      *

package/dist/mixins/mixin-collection/mixin-collection.js

@@ -42,14 +42,16 @@ export const MixinCollection = (Base) => {
             super.firstUpdated(changed);
             this.finishHydration();
         }
-        renderStatus(hasContent) {
-            if (this.loading) {
-                return html `<p part="loading">${this.loadingText}</p>`;
-            }
-            if (hasContent) {
+        renderStatus(hasContent, cell) {
+            if (!this.loading && hasContent) {
                 return nothing;
             }
-            return html `<p part="empty">${this.emptyText}</p>`;
+            const text = this.loading ? this.loadingText : this.emptyText;
+            const words = cell ? html `<span role=${cell}>${text}</span>` : text;
+            const row = cell ? 'row' : nothing;
+            return this.loading
+                ? html `<p part="loading" role=${row}>${words}</p>`
+                : html `<p part="empty" role=${row}>${words}</p>`;
         }
         renderLive(hasContent) {
             const said = this.loading ? this.loadingText : hasContent ? this.announced : this.emptyText;

package/dist/mixins/mixin-controller-open/mixin-controller-open.js

@@ -13,6 +13,7 @@ export const MixinControllerOpen = (Base) => {
             super(...arguments);
             this.defaultOpen = false;
             this.openState = undefined;
+            this.announcedOpen = undefined;
         }
         get open() {
             return this.openState ?? this.defaultOpen;
@@ -26,6 +27,15 @@ export const MixinControllerOpen = (Base) => {
             super.willUpdate(changed);
             this.toggleState('open', this.open);
         }
+        updated(changed) {
+            super.updated(changed);
+            if (this.announcedOpen === undefined) {
+                this.announcedOpen = this.open;
+            }
+            else if (this.announcedOpen !== this.open) {
+                this.announceToggle(this.open);
+            }
+        }
         requestOpen(next) {
             if (this.open === next) {
                 return true;
@@ -46,11 +56,17 @@ export const MixinControllerOpen = (Base) => {
             return applied;
         }
         announceToggle(open) {
-            const event = new Event('toggle', { bubbles: false, cancelable: false, composed: false });
-            Object.assign(event, {
+            this.announcedOpen = open;
+            const states = {
                 newState: open ? 'open' : 'closed',
                 oldState: open ? 'closed' : 'open',
-            });
+            };
+            if (typeof ToggleEvent === 'function') {
+                this.dispatchEvent(new ToggleEvent('toggle', states));
+                return;
+            }
+            const event = new Event('toggle', { bubbles: false, cancelable: false, composed: false });
+            Object.assign(event, states);
             this.dispatchEvent(event);
         }
         toggleOpen() {

package/dist/mixins/mixin-dismissible/mixin-dismissible.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { property } from 'lit/decorators.js';
 import { HelixDismissEvent } from '../../events/events.js';
+import { deepActiveElement, deepContains, } from '../../utils/focusable-elements/focusable-elements.js';
 export const MixinDismissible = (Base) => {
     class Dismissible extends Base {
         constructor() {
@@ -21,10 +22,48 @@ export const MixinDismissible = (Base) => {
             return new HelixDismissEvent({ label: own.trim() });
         }
         dismiss() {
+            const neighbors = deepContains(this, deepActiveElement()) ? this.neighbors() : [];
             const event = this.dismissEvent();
             this.dispatchEvent(event);
+            if (neighbors.length > 0 && !event.defaultPrevented) {
+                this.keepFocus(neighbors);
+            }
             return !event.defaultPrevented;
         }
+        neighbors() {
+            const same = (node) => node instanceof HTMLElement && node.localName === this.localName;
+            const after = [];
+            for (let node = this.nextElementSibling; node; node = node.nextElementSibling) {
+                if (same(node)) {
+                    after.push(node);
+                }
+            }
+            const before = [];
+            for (let node = this.previousElementSibling; node; node = node.previousElementSibling) {
+                if (same(node)) {
+                    before.push(node);
+                }
+            }
+            return [...after, ...before];
+        }
+        keepFocus(neighbors) {
+            const settle = () => {
+                const active = document.activeElement;
+                if (this.isConnected || (active !== null && active !== document.body)) {
+                    return;
+                }
+                for (const neighbor of neighbors) {
+                    const control = neighbor.isConnected &&
+                        neighbor.shadowRoot?.querySelector('[part~="dismiss"]');
+                    if (control) {
+                        control.focus();
+                        return;
+                    }
+                }
+            };
+            settle();
+            requestAnimationFrame(settle);
+        }
     }
     __decorate([
         property({ reflect: true, type: Boolean })