@fusion.dev/helix-headless 0.0.0-dev

package/dist/checkbox/root/checkbox-root.js

@@ -0,0 +1,207 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, MixinControllerChecked, MixinField, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary A box that is ticked, or not, or neither.
+ *
+ * @description
+ * Renders a real `<input type="checkbox">`, so the space key, the focus ring,
+ * and the indeterminate glyph come from the platform. `delegatesFocus` puts
+ * focus on it, and it serializes into the server's markup, so the control is
+ * reachable before any script loads.
+ *
+ * **The input inside a shadow root submits nothing**, because the form is on
+ * the other side of the boundary. The host is form-associated instead and
+ * reports its own value through `ElementInternals`, which is also what carries
+ * validity and what answers a form reset.
+ *
+ * A checked box submits its `value`, and an unchecked one submits nothing at
+ * all. That is what a native checkbox does, and a form built around one reads
+ * the absence rather than a `false`.
+ *
+ * `indeterminate` is presentation and nothing else. It is neither checked nor
+ * unchecked to a reader, it never submits, and the first click resolves it: a
+ * third state that survives interaction is a control nobody can finish.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Tickbox, Toggle
+ * @documentation https://helix.fusion.dev/components/checkbox
+ *
+ * @slot - The label.
+ *
+ * @event {Event} change - Relayed from the input once the state has changed.
+ * @event {HelixBeforeToggleEvent} helix-before-toggle - Fired before the state changes, and cancelable.
+ * @event {Event} input - Announced once the state has moved.
+ *
+ * @csspart box - The frame the input is painted as, and the mark sits over.
+ * @csspart control - The input.
+ * @csspart feedback - What is wrong with it.
+ * @csspart field - The row the box and its label share, and the surface the card appearance draws.
+ * @csspart hint - Help under the control, while nothing is wrong.
+ * @csspart label - The label beside it.
+ * @csspart mark - The tick, or the dash when the box is indeterminate.
+ */
+let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerChecked(MixinField(HelixFormElement)) {
+    constructor() {
+        super(...arguments);
+        /* A consumer's `aria-describedby` names ids in their own tree and the control
+           is in this shadow root, so the reference has to be carried down as an
+           element rather than copied as an id. See `AriaForwardController`: measured
+           in Chrome's own tree, the host held the description and the control the
+           reader is actually on was exposed without it. */
+        this.aria = new AriaForwardController(this, {
+            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+        });
+        /**
+         * Value submitted when the box is checked.
+         */
+        this.value = 'on';
+        /**
+         * Whether the box shows as neither checked nor unchecked.
+         *
+         * Presentation only. It never submits, and the first change resolves it.
+         */
+        this.indeterminate = false;
+        this.handleChange = (event) => {
+            const input = event.target;
+            // The input has already flipped itself. Where the change is refused, or the
+            // element is controlled, it is put back to whatever the element resolves
+            // to, so the box never shows a state the element does not hold.
+            const next = input.checked;
+            /* The dash goes only where the change is taken.
+             *
+             * It was cleared first and unconditionally, so a consumer calling
+             * `preventDefault()` on the change kept the checked state and lost the
+             * third one: the box came back neither ticked nor dashed, which is a state
+             * nobody asked for and the element did not hold. Refusing a change should
+             * leave everything as it was, which is the argument the line below already
+             * makes for `checked`. */
+            if (this.requestChecked(next)) {
+                this.indeterminate = false;
+            }
+            input.checked = this.checked;
+            this.relayNativeEvent(event);
+        };
+        /**
+         * Whether there is a label to leave room for, written to the host.
+         *
+         * The row is a flex line with a gap in it, so a label span rendered empty is
+         * still a box and still takes that gap: an unlabelled box came out with eight
+         * pixels of nothing after it. The input answers this by not rendering the
+         * element, which cannot work here, because a checkbox is named by its own
+         * content and the property is only that slot's fallback. Gating on the
+         * property would unlabel every `<helix-checkbox>Text</helix-checkbox>` ever
+         * written.
+         *
+         * So the slot is asked instead, the same way `Tooltip` asks its own: with
+         * `flatten`, because here the fallback counts, being where the property
+         * renders. Client only, so a server-rendered unlabelled checkbox carries the
+         * gap for one frame. That is a control with no accessible name, which has a
+         * worse problem than its spacing.
+         */
+        this.handleLabelChange = () => {
+            this.syncLabelPresence();
+        };
+    }
+    /** Focus is delegated to the input, so the host is never the focus target. */
+    static { this.shadowRootOptions = {
+        ...HelixFormElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    /** Reports the value and the validity the host stands behind. */
+    sync() {
+        this.internals.setFormValue(this.checked ? this.value : null);
+        this.reportRequired(!this.checked, 'Tick this box to continue.', 'control');
+    }
+    /** Returns the box to the state its markup declared. */
+    formResetCallback() {
+        this.indeterminate = false;
+        // `resetChecked` drops both halves now, the consumer's and the element's,
+        // so there is nothing to clear before it.
+        this.resetChecked();
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.internals.ariaRequired = this.required ? 'true' : null;
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.sync();
+        this.syncLabelPresence();
+    }
+    /**
+     * Asks the slot, and records the answer as a state.
+     *
+     * Called on `slotchange` and after every update, and the second is not
+     * belt-and-braces: **`slotchange` does not fire when nothing is assigned.**
+     * So a checkbox labeled only by its property, which is most of them, never
+     * heard about its own label and rendered without one. Caught by the spec that
+     * asks a labeled row to be wider than a bare one.
+     *
+     * **`:state(has-label)` and not `data-has-label`, since 27 Aug 2026.** This
+     * one could never have been in server output whatever it was called, the
+     * answer coming from `assignedNodes` and a server having no tree to ask, so
+     * it was an attribute that appeared on every labeled checkbox the instant it
+     * upgraded and on none that any server sent. See `HelixElement.toggleState`.
+     */
+    syncLabelPresence() {
+        const slot = this.renderRoot.querySelector('[part="label"] slot');
+        const filled = (slot?.assignedNodes({ flatten: true }) ?? []).some((node) => node.textContent?.trim() !== '' || node.nodeType === Node.ELEMENT_NODE);
+        this.toggleState('has-label', filled);
+        /* And `hidden` on the region itself, because the state is on the host and
+           this tier has no sheet to turn one into the other: a checkbox with no
+           label kept an empty label box beside it. The styled rule stays, since it
+           hides through a descendant selector this cannot replace. */
+        this.renderRoot.querySelector('[part="label"]')?.toggleAttribute('hidden', !filled);
+    }
+    render() {
+        /* A real `<label>` around both, which is the whole of what makes the text a
+           target. It was a `<span>` beside the input, so pressing the words did
+           nothing: the styled tier's own description claimed the pair behaved like
+           a native label wrapping a checkbox, and nothing was doing that work.
+    
+           Labeling is behavior, which is what earns an element here rather than a
+           bare slot: the wrapper is not decoration and there is no other way to get
+           it. The browser handles the forwarding, so there is no click handler to
+           write and none to get wrong.
+     
+           The one line of description goes under that row, which is where a field
+           puts it too. */
+        return html `<label part="field">
+      <span part="box">
+        <input
+          part="control"
+          type="checkbox"
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.isDisabled}
+          ?required=${this.required}
+          aria-describedby=${this.describedBy ?? nothing}
+          @change=${this.handleChange}
+          @input=${this.stopInner}
+        />
+        <span part="mark" aria-hidden="true"></span>
+      </span>
+      <span part="label"><slot @slotchange=${this.handleLabelChange}>${this.label}</slot></span>
+    </label>
+    ${this.renderHint()}${this.renderFeedback()}`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCheckbox.prototype, "indeterminate", void 0);
+HelixHeadlessCheckbox = __decorate([
+    customElement('helix-headless-checkbox')
+], HelixHeadlessCheckbox);
+export { HelixHeadlessCheckbox };

package/dist/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export * from './root/checkbox-group-root.js';

package/dist/checkbox-group/index.js

@@ -0,0 +1 @@
+export * from './root/checkbox-group-root.js';

package/dist/checkbox-group/root/checkbox-group-root.d.ts

@@ -0,0 +1,155 @@
+import { DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
+declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+/**
+ * @summary Groups related checkboxes, and reports them as one set.
+ *
+ * @description
+ * The host is the group, so `role="group"` sits on it through internals and
+ * `label` names it. A run of checkboxes with no name is announced as separate
+ * controls, which is what the grouping exists to say it is not.
+ *
+ * **Each checkbox still submits itself.** They are form-associated already and
+ * a native group is several inputs sharing a name, so this adds no form value
+ * of its own: it would submit the same answers twice. What it adds is the
+ * grouping, a shared `name` so it is written once, and one place to read and
+ * write the whole set.
+ *
+ * `value` is the checked values, comma separated, in the order the boxes are
+ * written. Setting it ticks exactly those and unticks the rest.
+ *
+ * **Its message is always given, never derived.** Every form-related member of
+ * `ElementInternals` throws on an element that is not form-associated, and this
+ * one is not, on purpose: the boxes submit themselves. So `feedback` is what
+ * shows here, and the browser has nothing to say about a set it does not know
+ * is a set.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Checkbox list, Multi-select
+ * @documentation https://helix.fusion.dev/components/checkbox-group
+ *
+ * @slot - The checkboxes.
+ * @slot hint - Richer than a string.
+ * @slot label - Richer than a string, where the label is more than one.
+ *
+ * @event {Event} change - Announced once the value has moved.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before any box changes, with the whole set. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} input - Announced once the value has moved.
+ *
+ * @csspart feedback - What is wrong with it.
+ * @csspart hint - Help under the set.
+ * @csspart items - The list itself, which is what `orientation` lays out.
+ * @csspart label - The group's name, over the set.
+ */
+export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGroup_base {
+    /**
+     * The checked values, comma separated.
+     */
+    value: string;
+    protected readonly cascade: DisabledCascadeController;
+    /** The boxes, in light-DOM order. Client only: the server has no tree. */
+    get boxes(): HelixHeadlessCheckbox[];
+    /**
+     * Pushes the group's name and value onto the boxes.
+     *
+     * As properties rather than attributes. A `name` written onto a box is a
+     * change to markup the consumer rendered, which a React consumer's hydration
+     * reports and does not patch up. A box that names itself keeps its own.
+     */
+    private sync;
+    /**
+     * Reads the boxes' own state into `value`, once, before anything is pushed.
+     *
+     * `sync` used to refuse to write anything while `value` was empty, and the
+     * guard was there for this: a group written with no `value` and boxes that
+     * declare their own `checked` would have had them all cleared on the first
+     * update. What it also did was make `group.value = ''` do nothing at all, so
+     * the obvious way to clear a group silently did not, and the last box could
+     * not be unticked through the group either.
+     *
+     * Seeding is the honest version of the same intent. The markup decides the
+     * starting set, exactly as before, and from then on `value` is what the boxes
+     * follow, including when it is empty. The group's `value` is a derived read
+     * of the boxes rather than state it owns, so reading it out of them at the
+     * start is what it already means.
+     */
+    private seed;
+    /**
+     * Reads a box's requested change into `value`, and says so once.
+     *
+     * The box is found from the event's target, which does two things. It tells
+     * the group which box asked, where the detail carries only the shared name.
+     * And it ignores the group's own dispatch, which lands on this same listener
+     * because the group is what it is dispatched from: without the guard the
+     * group answers itself until the stack gives out.
+     *
+     * The requested state comes from the event rather than from the box. Driving
+     * the boxes from `value` makes them controlled, so a controlled box applies
+     * nothing on its own and reports what it was asked for. Reading `checked`
+     * here would read the state it still holds and nothing would ever change.
+     */
+    private readonly handleToggle;
+    /**
+     * Stops a box's own announcement, for the reason the request above is stopped.
+     *
+     * **The split gave the requests two names and left the notifications sharing
+     * one.** A box announces `input` and `change` from its own host now, which is
+     * what makes `onChange` work on a checkbox, and both bubble up through this
+     * group: measured, one click produced `change` from the group and `input` and
+     * `change` from the box, all three at a consumer listening here, two of them
+     * describing one box rather than the set. That is exactly the collision the
+     * comment on `handleToggle` describes, arriving by the other route.
+     *
+     * `stopImmediatePropagation` and not `stopPropagation`, and for the same
+     * reason it gives: the box's event and this group's own carry one name from
+     * what a consumer sees as one element, so stopping propagation alone still
+     * leaves every other listener on this host receiving both.
+     *
+     * A listener on the box itself is unaffected, which is where per-box handling
+     * belongs. Each box is form-associated and submits itself; what this stops is
+     * one box answering a question asked of the set.
+     */
+    private readonly handleMemberNative;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Refuses an empty set where one was required, which nothing did.
+     *
+     * `required` arrives with `MixinField`, reflects, and paints the asterisk
+     * through the composed field sheet, and enforced nothing at all: no validity,
+     * no message, and nothing cascading to the boxes. A group marked required
+     * submitted empty.
+     *
+     * **The group is form-associated, and submits nothing.** It was not, on the
+     * reasoning that its boxes are the controls and each submits itself, which is
+     * still true: nothing here calls `setFormValue`, so the set that reaches the
+     * server is exactly the boxes it always was. What form association buys is the
+     * other half of participation, validity, and there is no other mechanism for
+     * it: `setValidity` throws `NotSupportedError` on an element the platform does
+     * not know is a control.
+     *
+     * So the fix that was written for "a group marked required submitted empty"
+     * threw on every update in a real browser, and happy-dom's shim does not
+     * throw, so the specs passed and the behavior never worked. Eleven of them
+     * failed the moment they were run in Chromium. It is also what makes the rest
+     * work: the form now refuses to submit, which fires `invalid`, which is what
+     * marks the field touched and puts the message on screen.
+     *
+     * Anchored on the list, because the browser needs somewhere to point the
+     * bubble.
+     */
+    private validate;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-checkbox-group': HelixHeadlessCheckboxGroup;
+    }
+}
+export {};

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -0,0 +1,293 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
+/**
+ * @summary Groups related checkboxes, and reports them as one set.
+ *
+ * @description
+ * The host is the group, so `role="group"` sits on it through internals and
+ * `label` names it. A run of checkboxes with no name is announced as separate
+ * controls, which is what the grouping exists to say it is not.
+ *
+ * **Each checkbox still submits itself.** They are form-associated already and
+ * a native group is several inputs sharing a name, so this adds no form value
+ * of its own: it would submit the same answers twice. What it adds is the
+ * grouping, a shared `name` so it is written once, and one place to read and
+ * write the whole set.
+ *
+ * `value` is the checked values, comma separated, in the order the boxes are
+ * written. Setting it ticks exactly those and unticks the rest.
+ *
+ * **Its message is always given, never derived.** Every form-related member of
+ * `ElementInternals` throws on an element that is not form-associated, and this
+ * one is not, on purpose: the boxes submit themselves. So `feedback` is what
+ * shows here, and the browser has nothing to say about a set it does not know
+ * is a set.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Checkbox list, Multi-select
+ * @documentation https://helix.fusion.dev/components/checkbox-group
+ *
+ * @slot - The checkboxes.
+ * @slot hint - Richer than a string.
+ * @slot label - Richer than a string, where the label is more than one.
+ *
+ * @event {Event} change - Announced once the value has moved.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before any box changes, with the whole set. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} input - Announced once the value has moved.
+ *
+ * @csspart feedback - What is wrong with it.
+ * @csspart hint - Help under the set.
+ * @csspart items - The list itself, which is what `orientation` lays out.
+ * @csspart label - The group's name, over the set.
+ */
+let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
+    constructor() {
+        /* `name` is inherited. It arrives with `HelixFormElement` reflected and with
+           the converter that makes an empty one absent rather than `name=""`, which
+           the copy declared here had neither of. What it means differs slightly and
+           the property does not: the group submits nothing under it, and hands it to
+           every box that has none. */
+        super(...arguments);
+        /**
+         * The checked values, comma separated.
+         */
+        this.value = '';
+        /* Stated once, and the group never thinks about it again. See the
+           controller: the cascade was four hand calls from four different
+           methods, so which paths reached it differed by component and a fifth
+           group would have got none at all. */
+        this.cascade = new DisabledCascadeController(this, {
+            items: () => this.boxes,
+        });
+        /**
+         * Reads a box's requested change into `value`, and says so once.
+         *
+         * The box is found from the event's target, which does two things. It tells
+         * the group which box asked, where the detail carries only the shared name.
+         * And it ignores the group's own dispatch, which lands on this same listener
+         * because the group is what it is dispatched from: without the guard the
+         * group answers itself until the stack gives out.
+         *
+         * The requested state comes from the event rather than from the box. Driving
+         * the boxes from `value` makes them controlled, so a controlled box applies
+         * nothing on its own and reports what it was asked for. Reading `checked`
+         * here would read the state it still holds and nothing would ever change.
+         */
+        this.handleToggle = (event) => {
+            const target = event.target;
+            const changed = this.boxes.find((box) => box === target);
+            if (!changed) {
+                return;
+            }
+            /* Still stopped, though the names no longer collide. A box's `helix-toggle`
+               bubbles, and the group is the single voice for the set: a consumer
+               listening here wants the whole answer, not one box's half of it. Before
+               the split this had to be `stopImmediatePropagation` rather than
+               `stopPropagation`, because the box's event and the group's own carried
+               the same name from the same host and the other listeners on it would have
+               received both. */
+            event.stopImmediatePropagation();
+            const wanted = event.detail.checked;
+            /* Announced before it is written, which is the way round it was not: the
+               group set its value and then dispatched, so `preventDefault()` refused a
+               set that had already changed.
+        
+               Hand-rolled rather than through `MixinControllerValue`, and that is the
+               decision rather than an omission. The group is deliberately not
+               form-associated: its boxes are the form controls and each submits itself,
+               so the mixin, which is constrained to `HelixFormElement`, does not apply
+               to it. Its `value` is a derived read of the boxes rather than state it
+               owns, which is also why it is not controllable and why that is written
+               down rather than fixed.
+        
+               The boxes have already moved either way. Each answered the reader before
+               this ran, so refusing here stops the group's value from following, and
+               the honest limit of that is recorded with the decision. */
+            const next = this.boxes
+                .filter((box) => (box === changed ? wanted : box.checked))
+                .map((box) => box.value)
+                .join(',');
+            if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next }))) {
+                return;
+            }
+            this.value = next;
+            /* Under the platform's own name, after the value has moved, so a consumer
+               binding `onChange` reads the group's new value off the target.
+        
+               `input` beside it, because this is a discrete control and that is the
+               pair a native `<select>` sends and the pair every other discrete control
+               here sends through `MixinControllerValue`. The group had only `change`,
+               so a consumer binding `onInput` on the set heard the boxes and never the
+               group. */
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+        };
+        /**
+         * Stops a box's own announcement, for the reason the request above is stopped.
+         *
+         * **The split gave the requests two names and left the notifications sharing
+         * one.** A box announces `input` and `change` from its own host now, which is
+         * what makes `onChange` work on a checkbox, and both bubble up through this
+         * group: measured, one click produced `change` from the group and `input` and
+         * `change` from the box, all three at a consumer listening here, two of them
+         * describing one box rather than the set. That is exactly the collision the
+         * comment on `handleToggle` describes, arriving by the other route.
+         *
+         * `stopImmediatePropagation` and not `stopPropagation`, and for the same
+         * reason it gives: the box's event and this group's own carry one name from
+         * what a consumer sees as one element, so stopping propagation alone still
+         * leaves every other listener on this host receiving both.
+         *
+         * A listener on the box itself is unaffected, which is where per-box handling
+         * belongs. Each box is form-associated and submits itself; what this stops is
+         * one box answering a question asked of the set.
+         */
+        this.handleMemberNative = (event) => {
+            if (event.target !== this) {
+                event.stopImmediatePropagation();
+            }
+        };
+    }
+    /** The boxes, in light-DOM order. Client only: the server has no tree. */
+    get boxes() {
+        return [...this.children].filter((child) => child instanceof HelixHeadlessCheckbox);
+    }
+    /**
+     * Pushes the group's name and value onto the boxes.
+     *
+     * As properties rather than attributes. A `name` written onto a box is a
+     * change to markup the consumer rendered, which a React consumer's hydration
+     * reports and does not patch up. A box that names itself keeps its own.
+     */
+    sync() {
+        const wanted = new Set(this.value
+            .split(',')
+            .map((entry) => entry.trim())
+            .filter(Boolean));
+        for (const box of this.boxes) {
+            if (this.name !== '' && box.name === '') {
+                box.name = this.name;
+            }
+            box.checked = wanted.has(box.value);
+        }
+    }
+    /**
+     * Reads the boxes' own state into `value`, once, before anything is pushed.
+     *
+     * `sync` used to refuse to write anything while `value` was empty, and the
+     * guard was there for this: a group written with no `value` and boxes that
+     * declare their own `checked` would have had them all cleared on the first
+     * update. What it also did was make `group.value = ''` do nothing at all, so
+     * the obvious way to clear a group silently did not, and the last box could
+     * not be unticked through the group either.
+     *
+     * Seeding is the honest version of the same intent. The markup decides the
+     * starting set, exactly as before, and from then on `value` is what the boxes
+     * follow, including when it is empty. The group's `value` is a derived read
+     * of the boxes rather than state it owns, so reading it out of them at the
+     * start is what it already means.
+     */
+    seed() {
+        const checked = this.boxes.filter((box) => box.checked).map((box) => box.value);
+        if (checked.length > 0) {
+            this.value = checked.join(',');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('helix-before-toggle', this.handleToggle);
+        this.addEventListener('change', this.handleMemberNative);
+        this.addEventListener('input', this.handleMemberNative);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-before-toggle', this.handleToggle);
+        this.removeEventListener('change', this.handleMemberNative);
+        this.removeEventListener('input', this.handleMemberNative);
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        /* The string half, which is what a server can write. `linkHost` adds the
+           element references on the client, and those win where a consumer slotted
+           a label richer than a string. */
+        hostAria(this.internals, { label: this.label, role: 'group' });
+        this.internals.ariaRequired = this.required ? 'true' : null;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        /* Before the first `sync`, and only ever once: after this the group's value
+           is what the boxes follow. Client only, the server having no boxes to
+           read. */
+        if (this.value === '') {
+            this.seed();
+        }
+    }
+    /**
+     * Refuses an empty set where one was required, which nothing did.
+     *
+     * `required` arrives with `MixinField`, reflects, and paints the asterisk
+     * through the composed field sheet, and enforced nothing at all: no validity,
+     * no message, and nothing cascading to the boxes. A group marked required
+     * submitted empty.
+     *
+     * **The group is form-associated, and submits nothing.** It was not, on the
+     * reasoning that its boxes are the controls and each submits itself, which is
+     * still true: nothing here calls `setFormValue`, so the set that reaches the
+     * server is exactly the boxes it always was. What form association buys is the
+     * other half of participation, validity, and there is no other mechanism for
+     * it: `setValidity` throws `NotSupportedError` on an element the platform does
+     * not know is a control.
+     *
+     * So the fix that was written for "a group marked required submitted empty"
+     * threw on every update in a real browser, and happy-dom's shim does not
+     * throw, so the specs passed and the behavior never worked. Eleven of them
+     * failed the moment they were run in Chromium. It is also what makes the rest
+     * work: the form now refuses to submit, which fires `invalid`, which is what
+     * marks the field touched and puts the message on screen.
+     *
+     * Anchored on the list, because the browser needs somewhere to point the
+     * bubble.
+     */
+    validate() {
+        this.reportRequired(this.value === '', 'Choose at least one to continue.', 'items');
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.validate();
+        this.sync();
+        this.linkHost();
+    }
+    render() {
+        /* The list is an element of its own, because the label and the hint are the
+           host's children too and `orientation` lays out whatever is in the flex
+           container. On the host, a horizontal group would have put its own label
+           in the row beside the first box. */
+        return html `${this.renderGroupLabel()}
+      <div part="items">
+        ${
+        /* A box arriving after first render got neither the shared name nor
+           the value's checked state, because nothing was listening: both
+           sibling groups wire this and this one did not. */
+        ''}
+        <slot @slotchange=${() => this.requestUpdate()}></slot>
+      </div>
+      ${this.renderHint()}${this.renderFeedback()}`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessCheckboxGroup.prototype, "value", void 0);
+HelixHeadlessCheckboxGroup = __decorate([
+    customElement('helix-headless-checkbox-group')
+], HelixHeadlessCheckboxGroup);
+export { HelixHeadlessCheckboxGroup };

package/dist/code/index.d.ts

@@ -0,0 +1 @@
+export * from './root/code-root.js';

package/dist/code/index.js

@@ -0,0 +1 @@
+export * from './root/code-root.js';