@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/option/root/option-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, followLink, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 export const optionsAmong = (elements) => {
@@ -18,8 +18,13 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.alternate = '';
         this.alternateLabel = '';
         this.disabled = false;
+        this.download = false;
+        this.href = '';
         this.label = '';
+        this.rel = '';
         this.selected = false;
+        this.target = '';
+        this.textValue = '';
         this.value = '';
     }
     get defaultSelected() {
@@ -29,31 +34,41 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.toggleAttribute('selected', next);
     }
     get text() {
+        if (this.textValue !== '') {
+            return this.textValue;
+        }
         return ([...this.childNodes]
             .filter((node) => node.nodeType === Node.TEXT_NODE || (node instanceof Element && node.slot === ''))
             .map((node) => node.textContent ?? '')
             .join('')
             .trim() || this.label);
     }
-    select() {
+    select(modifiers) {
         if (this.disabled) {
             return;
         }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+        if (this.href === '') {
+            this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+            return;
+        }
+        if (this.dispatchEvent(new HelixSelectEvent({ href: this.href, value: this.value }))) {
+            followLink(this.ownerDocument, this, modifiers);
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        this.toggleState('active', this.active);
     }
     render() {
         this.internals.role = 'option';
-        this.internals.ariaSelected = String(this.selected);
+        this.internals.ariaSelected = this.href === '' ? String(this.selected) : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.internals.ariaDescription =
             this.alternate !== '' && this.alternateLabel !== '' ? this.alternateLabel : null;
         return html `<div
       part="item${this.selected ? ' item-selected' : ''}${this.active ? ' item-active' : ''}"
-      @click=${() => this.select()}
+      @click=${(event) => this.select(event)}
     >
       <slot name="start"></slot>
       <span part="text">
@@ -79,12 +94,27 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessOption.prototype, "download", void 0);
+__decorate([
+    property()
+], HelixHeadlessOption.prototype, "href", void 0);
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessOption.prototype, "rel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessOption.prototype, "selected", void 0);
+__decorate([
+    property()
+], HelixHeadlessOption.prototype, "target", void 0);
+__decorate([
+    property({ attribute: 'text-value' })
+], HelixHeadlessOption.prototype, "textValue", void 0);
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "value", void 0);

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

@@ -11,6 +11,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * render one inside the outline's shadow root, and the hrefs are fragments on
  * the same page.
  *
+ * Write the anchors flat, with `data-level` for their depth, or nested in
+ * lists, `<ul><li><a>`. A screen reader hears a nested list's levels; it hears
+ * `data-level` as a flat run of links.
+ *
  * The current section is decided by the headings' positions. An
  * `IntersectionObserver` with a band near the top fails both ways: when
  * headings are far apart, none is in the band and no section is marked, and
@@ -22,7 +26,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Table of contents, On this page, Outline
  * @documentation https://fusion.dev/helix/components/outline
  *
- * @slot - The links, as anchors with fragment hrefs.
+ * @slot - The links, as anchors with fragment hrefs, or lists holding them.
  *
  * @event {HelixActivateEvent} helix-activate - Fired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented.
  *
@@ -88,7 +92,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     private reading;
     private observer;
-    /** The links, in document order. Empty on the server, which has no tree. */
+    /**
+     * The links, in document order. Empty on the server, which has no tree.
+     *
+     * **Anchors inside what is slotted count too.** A contents list is written
+     * `<ul><li><a>` more often than as a run of anchors, and reading only the
+     * anchors assigned to the slot found no sections in it: nothing was marked,
+     * nothing was announced, and nothing said why.
+     */
     private get links();
     /**
      * What each link points at, paired with the link, skipping anything missing.

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

@@ -78,8 +78,10 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     get links() {
         const slot = this.renderRoot?.querySelector('slot');
-        return (slot?.assignedElements({ flatten: true }) ?? []).filter((element) => element instanceof HTMLAnchorElement &&
-            element.getAttribute('href')?.startsWith('#') === true);
+        const fragment = (element) => element instanceof HTMLAnchorElement && element.getAttribute('href')?.startsWith('#') === true;
+        return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((element) => fragment(element)
+            ? [element]
+            : [...element.querySelectorAll('a[href^="#"]')].filter(fragment));
     }
     get sections() {
         return this.links.flatMap((link) => {

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

@@ -39,7 +39,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot next-icon - The glyph on the forward-one-page control, usually a caret.
  * @slot previous-icon - The glyph on the back-one-page control, usually a caret.
  *
- * @event {HelixNavigateEvent} helix-navigate - Fired before the page changes, and cancelable. Canceling it is the only way to stop a page change.
+ * @event {HelixActivateEvent} helix-activate - Fired after the page changes, with the new page as a string in `detail.value`. In `href` mode it comes a task after the click, once the page has moved.
+ * @event {HelixNavigateEvent} helix-navigate - Fired before the page changes, and cancelable. Canceling it is the only way to stop a page change. `detail.page` is the page asked for, as a number, and `detail.value` is the same page as a string.
  *
  * @csspart first - The control that jumps to the first page, under `ends`.
  * @csspart gap - The control in place of hidden pages, which jumps into them.
@@ -218,6 +219,11 @@ export declare class HelixHeadlessPagination extends HelixElement {
     private announced;
     /** The page on show, whoever set it, and `undefined` until somebody has. */
     private pageState;
+    /**
+     * The control a reader just used, while it held focus, and whether it was a
+     * gap. Read once by the update that follows, which decides where focus goes.
+     */
+    private used;
     /** Held across every component asking for the same locale. */
     private get numbers();
     /**
@@ -263,6 +269,18 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * for both shapes rather than two that have to stay in step.
      */
     private readonly go;
+    private applyPage;
+    /**
+     * Puts focus back in the row after the control a reader used has gone.
+     *
+     * A page keeps its own control across a move, because the run is keyed by
+     * page, so focus stays on the page that was chosen. A gap points somewhere
+     * new once the run moves, and a step control is disabled at the end it
+     * reached, so after either of those focus goes to the current page, or in
+     * `compact` to the first step control that can still be used. Left alone,
+     * focus fell to the top of the document.
+     */
+    private restoreFocus;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * Says where the reader now is, once they have moved.

package/dist/pagination/root/pagination-root.js

@@ -4,10 +4,11 @@ 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, fillTemplate, formatNumbers, HelixElement, HelixNavigateEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixNavigateEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
 import { caretDoubleLeft, caretDoubleRight, caretLeft, caretRight, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const fill = (template, page, pages, format = String) => fillTemplate(template, { page: format(page), pages: format(pages) });
 let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement {
@@ -34,9 +35,15 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         this.announcement = '';
         this.announced = undefined;
         this.pageState = undefined;
-        this.go = (next, event) => {
+        this.used = undefined;
+        this.go = (next, event, gap = false) => {
+            const control = event.currentTarget;
             if (!this.request(next)) {
                 event.preventDefault();
+                return;
+            }
+            if (control && deepActiveElement() === control) {
+                this.used = { control, gap };
             }
         };
     }
@@ -104,15 +111,43 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         }
         return requestChange({
             apply: (page) => {
-                const previous = this.page;
-                this.pageState = page;
-                this.requestUpdate('page', previous);
+                if (this.href) {
+                    setTimeout(() => this.applyPage(page));
+                    return;
+                }
+                this.applyPage(page);
             },
-            event: (page) => new HelixNavigateEvent({ value: String(page) }),
+            event: (page) => new HelixNavigateEvent({ page, value: String(page) }),
             host: this,
             next,
         });
     }
+    applyPage(page) {
+        const previous = this.page;
+        this.pageState = page;
+        this.requestUpdate('page', previous);
+        this.dispatchEvent(new HelixActivateEvent({ value: String(page) }));
+    }
+    restoreFocus() {
+        const used = this.used;
+        this.used = undefined;
+        if (!used) {
+            return;
+        }
+        const { control, gap } = used;
+        const usable = (element) => element instanceof HTMLElement &&
+            element.isConnected &&
+            !element.disabled &&
+            element.getAttribute('aria-disabled') !== 'true';
+        if (!gap && usable(control)) {
+            return;
+        }
+        const target = [
+            this.renderRoot.querySelector('[part~="page-current"]'),
+            ...['previous', 'next', 'first', 'last'].map((name) => this.renderRoot.querySelector(`[part="${name}"]`)),
+        ].find(usable);
+        target?.focus();
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'navigation' });
@@ -120,6 +155,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
     }
     updated(changed) {
         super.updated(changed);
+        this.restoreFocus();
         if (this.announced === undefined) {
             this.announced = this.page;
             return;
@@ -163,14 +199,14 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
               part="gap"
               href=${fill(this.href, to, this.count)}
               aria-label=${name}
-              @click=${(event) => this.go(to, event)}
+              @click=${(event) => this.go(to, event, true)}
               >&hellip;</a
             >`
             : html `<button
               part="gap"
               type="button"
               aria-label=${name}
-              @click=${(event) => this.go(to, event)}
+              @click=${(event) => this.go(to, event, true)}
             >
               &hellip;
             </button>`}
@@ -253,7 +289,11 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         }
         return html `${this.ends ? this.renderFirst() : nothing}${this.renderPrevious()}
       <ol part="list" role="list">
-        ${this.slots.map((slot) => typeof slot === 'number' ? this.renderPage(slot) : this.renderGap(slot))}
+        ${repeat(this.slots, (slot) => typeof slot === 'number'
+            ? slot
+            : slot.from < this.current
+                ? 'gap-before'
+                : 'gap-after', (slot) => (typeof slot === 'number' ? this.renderPage(slot) : this.renderGap(slot)))}
       </ol>
       ${this.renderNext()}${this.ends ? this.renderLast() : nothing}${this.renderLive()}`;
     }

package/dist/pagination/size/pagination-size.d.ts

@@ -23,16 +23,19 @@ import '../../select/index.js';
  * `ElementInternals.states`.
  *
  * `value` is the current size, and `default-value` is the size from the markup.
- * Changing it dispatches `helix-before-change`. Re-querying and returning to
- * page one is up to you, because only you know whether the current position
- * should be kept.
+ * Changing it dispatches `helix-before-change`, and then `input` and `change`
+ * once the size has moved, as a native `<select>` sends them together.
+ * Re-querying and returning to page one is up to you, because only you know
+ * whether the current position should be kept.
  *
  * @since 0.1.0
  * @status stable
  * @aliases Page size, Rows per page
  * @documentation https://fusion.dev/helix/components/pagination
  *
+ * @event {Event} change - Fired after the size changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the size changes, and cancelable. Canceling it is the only way to stop a size change.
+ * @event {Event} input - Fired after the size changes, with `change`.
  *
  * @csspart control - The select.
  * @csspart control-feedback - The message that says what is wrong with the value.
@@ -105,6 +108,13 @@ export declare class HelixHeadlessPaginationSize extends HelixElement {
     /** The one in force, which is the first offered where nothing named one. */
     private get current();
     private readonly handleChange;
+    /**
+     * The select's own `input` and `change`, stopped so this element is the one
+     * voice for a size. `input` is composed, so left alone it crossed this
+     * shadow boundary and arrived looking like this element's, with no `change`
+     * after it, and a refused size still sent it.
+     */
+    private readonly stopNative;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The control itself, which is the whole of this part, behind a seam the styled tier can move.

package/dist/pagination/size/pagination-size.js

@@ -29,6 +29,8 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
                     const previous = this.value;
                     this.valueState = size;
                     this.requestUpdate('value', previous);
+                    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                    this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
                 },
                 event: (size) => new HelixBeforeChangeEvent({ value: String(size) }),
                 host: this,
@@ -41,6 +43,9 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
                 }
             });
         };
+        this.stopNative = (event) => {
+            event.stopPropagation();
+        };
     }
     get value() {
         return this.valueState ?? this.defaultValue;
@@ -83,6 +88,8 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
       label=${this.label}
       .value=${String(this.current)}
       @helix-before-change=${this.handleChange}
+      @input=${this.stopNative}
+      @change=${this.stopNative}
     >
       ${this.options.map((size) => html `<${option}
             part="option"

package/dist/pin-input/format.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Where a `format` puts separators in a row of boxes: for each box, the text
+ * drawn after it, or nothing. `#` and `*` stand for a box and anything else is
+ * drawn, so `###-###` puts a dash after the third box. Web Awesome's OTP input
+ * takes the same shape.
+ */
+export declare const separatorsAfter: (format: string, count: number) => string[];

package/dist/pin-input/format.js

@@ -0,0 +1,16 @@
+export const separatorsAfter = (format, count) => {
+    const after = Array.from({ length: count }, () => '');
+    let box = -1;
+    for (const character of format) {
+        if (character === '#' || character === '*') {
+            box += 1;
+            if (box >= count) {
+                break;
+            }
+        }
+        else if (box >= 0 && box < count - 1) {
+            after[box] += character;
+        }
+    }
+    return after;
+};

package/dist/pin-input/root/pin-input-root.d.ts

@@ -22,6 +22,12 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * Only the first cell has `autocomplete="one-time-code"`, because the hint
  * applies to the whole field.
  *
+ * `autosubmit` submits the form once the last box is filled, through the form's
+ * default button where there is one. `format` draws separators between the
+ * boxes, such as the dash in `###-###`, as text a screen reader skips. Delete
+ * removes the character in the focused box and pulls the rest of the code
+ * back, as Backspace removes the one before it.
+ *
  * The row of cells always runs left to right, with `dir="ltr"`, including in
  * Arabic and Hebrew. The first box is the leftmost, a paste fills to the right,
  * and the right arrow moves to the next box. The label, hint, and feedback
@@ -33,6 +39,10 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @aliases PinField, OTP, One-time code, Verification code, InputPin
  * @documentation https://fusion.dev/helix/components/pin-input
  *
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
+ *
  * @event {Event} change - The code was filled, or an edited code lost focus.
  * @event {HelixBeforeChangeEvent} helix-before-change - The code is about to change. Cancelable.
  * @event {HelixCompleteEvent} helix-complete - The last box was filled.
@@ -43,11 +53,14 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @csspart field - The row of boxes, ordered left to right in every language.
  * @csspart hint - The help under the boxes, shown while there is no feedback.
  * @csspart label - The label above the boxes.
+ * @csspart separator - The text `format` draws between two boxes.
  *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
     protected readonly aria: AriaForwardController;
+    /** @internal The element a missing name is checked on: the row of cells, so the name of one cell does not count as the name of the field. */
+    protected get namedControl(): HTMLElement | null;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
     /**
@@ -59,10 +72,22 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * the same code is one offer made six times.
      */
     autocomplete: string;
+    /**
+     * Whether the form is submitted once the last box is filled, as Web
+     * Awesome's `autosubmit` and Radix's `autoSubmit`. Only for a code the field
+     * took: a refused last character submits nothing.
+     */
+    autosubmit: boolean;
     /**
      * Accessible name for one box, with `{index}` and `{length}` filled in.
      */
     cellLabel: string;
+    /**
+     * Separators drawn between the boxes: `#` or `*` for a box and anything
+     * else as it is written, so `###-###` draws a dash after the third. The
+     * separators are hidden from screen readers and are not part of the value.
+     */
+    format: string;
     /**
      * How many characters the code has.
      */
@@ -150,6 +175,9 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * Backspace in an empty box goes back and clears the one it lands in, which
      * is what makes a code correctable without the reader hunting for the box
      * they meant. In a full box it does what it always does and is left alone.
+     *
+     * Home goes to the first box and End to the end of the code, the box after
+     * its last character, which is where the caret goes in a single text field.
      */
     private readonly handleKeydown;
     /**
@@ -272,6 +300,15 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
     clear(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Enter submits the form, as it does in a native text field.
+     *
+     * On `keypress`, where the platform runs its own implicit submission, so a
+     * consumer who prevents the `keydown` for Enter stops this too.
+     */
+    private readonly handleKeypress;
+    /** @internal A single line of text counts against implicit submission. */
+    protected get blocksImplicitSubmission(): boolean;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/pin-input/root/pin-input-root.js

@@ -7,15 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { AriaForwardController, customElement, fillTemplate, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { separatorsAfter } from '../format.js';
 let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.partNamed('cell'),
+            target: () => this.partNamed('field'),
         });
         this.announcesInput = true;
         this.autocomplete = 'one-time-code';
+        this.autosubmit = false;
         this.cellLabel = 'Character {index} of {length}';
+        this.format = '';
         this.length = 6;
         this.mask = false;
         this.placeholder = '';
@@ -44,7 +47,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.handlePaste = (event) => {
             const cell = event.target;
             const at = this.cells.indexOf(cell);
-            if (at === -1) {
+            if (at === -1 || this.isDisabled || this.readOnly) {
                 return;
             }
             event.preventDefault();
@@ -56,8 +59,22 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             if (at === -1 || this.isDisabled || this.readOnly) {
                 return;
             }
-            const to = at + (event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0);
-            if (event.key === 'Backspace' && cell.value === '' && at > 0) {
+            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            const to = event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? Math.min(this.value.length, this.count - 1)
+                    : at + step;
+            if (event.key === 'Delete' && at < this.value.length) {
+                const characters = this.characters;
+                characters.splice(at, 1);
+                this.requestValue(characters.join('').replace(/\s+$/, ''));
+                this.updateComplete.then(() => {
+                    this.paint();
+                    this.cells[at]?.focus();
+                });
+            }
+            else if (event.key === 'Backspace' && cell.value === '' && at > 0) {
                 const characters = this.characters;
                 characters[at - 1] = '';
                 this.requestValue(characters.join('').replace(/\s+$/, ''));
@@ -95,6 +112,14 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             this.within = false;
             this.commit();
         };
+        this.handleKeypress = (event) => {
+            if (event.key === 'Enter' && !event.defaultPrevented) {
+                this.submitImplicitly();
+            }
+        };
+    }
+    get namedControl() {
+        return this.partNamed('field');
     }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
@@ -131,14 +156,17 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         }
         const next = characters.join('');
         const filled = Math.min(this.count - 1, start + cleaned.length);
-        this.requestValue(next);
+        const applied = this.requestValue(next);
         this.updateComplete.then(() => {
             this.paint();
             this.cells[filled]?.focus();
             this.cells[filled]?.select();
-            if (next.length === this.count) {
+            if (applied && this.value === next && next.length === this.count) {
                 this.dispatchEvent(new HelixCompleteEvent({ value: next }));
                 this.commit();
+                if (this.autosubmit) {
+                    this.submitImplicitly();
+                }
             }
         });
     }
@@ -198,8 +226,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.paint();
         this.sync();
     }
+    get blocksImplicitSubmission() {
+        return true;
+    }
     render() {
         const characters = this.characters;
+        const separators = separatorsAfter(this.format, this.count);
         return html `${this.renderGroupLabel()}
       <div
         dir="ltr"
@@ -224,8 +256,11 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             @focus=${this.handleFocus}
             @input=${this.handleInput}
             @keydown=${this.handleKeydown}
+            @keypress=${this.handleKeypress}
             @paste=${this.handlePaste}
-          />`)}
+          />${separators[at]
+            ? html `<span part="separator" aria-hidden="true">${separators[at]}</span>`
+            : nothing}`)}
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -233,9 +268,15 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
 __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessPinInput.prototype, "autosubmit", void 0);
 __decorate([
     property({ attribute: 'cell-label' })
 ], HelixHeadlessPinInput.prototype, "cellLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessPinInput.prototype, "format", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPinInput.prototype, "length", void 0);