@fusion.dev/helix-headless 0.2.0 → 0.4.0

package/dist/popover/root/popover-root.js

@@ -7,79 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { anchorElement, CommandController, customElement, deepActiveElement, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-/**
- * @summary A panel that opens against a trigger and holds anything.
- *
- * @description
- * The general case the specific overlays are versions of. `Menu` holds
- * commands, `Select` holds options, `Tooltip` holds a description; this holds
- * whatever the consumer puts in it, which is why it has no keyboard of its own
- * and no opinion about what is inside.
- *
- * **The trigger is slotted and stays the consumer's own element.** Nothing is
- * written onto it: no `aria-expanded`, no `id`, no `tabindex`. A component that
- * decorates a consumer's markup after upgrading is a component whose output a
- * React consumer's hydration disagrees with, and the attribute they would care
- * about most is the one that changes on every open.
- *
- * **The panel is in the top layer**, through the popover API, so it clears any
- * ancestor with `overflow: hidden` without a `z-index` fight. `position: fixed`
- * does not do that: it is still clipped by `overflow`, and re-anchored entirely
- * by an ancestor carrying `transform`, `filter` or `contain`.
- *
- * **It opens on click, and from a command.** `command="--show"` and its
- * siblings work here the way they do on `Dialog` and `Drawer`, so a trigger
- * elsewhere on the page can open it without a line of script and without being
- * slotted into it.
- *
- * @since 0.1.0
- * @status stable
- * @category overlays
- * @aliases Popper, Flyout, Overlay
- * @documentation https://helix.fusion.dev/components/popover
- *
- * @slot - The contents of the panel.
- * @slot trigger - What opens it.
- *
- * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
- * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
- *
- * @csspart content - The scrolling region inside the panel.
- * @csspart popover - The panel.
- */
 let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
-        /**
-         * Accessible name for the panel.
-         */
         this.label = 'Popover';
-        /**
-         * Space between the trigger and the panel, in pixels.
-         */
         this.offset = 4;
-        /**
-         * Preferred side.
-         *
-         * It moves if that side does not fit.
-         */
         this.placement = 'bottom-start';
-        /* The panel, plus everything that has to happen around it.
-         *
-         * Called `panel` rather than `popover`, because `HTMLElement.popover` is the
-         * popover API's own IDL attribute and a field of that name shadows it with
-         * something of a different type. TypeScript objects; what it would have done
-         * at runtime is break the API this is built on. */
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
-            /* The host *and* whatever invoked it, never the panel alone. An outside
-               press is measured against this, and the styled host is
-               `display: contents` with no box of its own, so a boundary of the panel
-               alone would close on the very press that opened it. A `--toggle` button
-               outside the host is part of the control by any reading a reader would
-               give it: pressing it while the panel is open should close it once, not
-               close it on `pointerdown` and reopen it on the `click` that follows. */
             boundary: () => [this, this.invoker],
             offset: () => this.offset,
             onDismiss: () => this.hide(),
@@ -113,72 +48,34 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
             }
         };
     }
-    /** The element the panel opens against. */
     get trigger() {
-        /* The invoker first, where there is one: a command names the element the
-           reader actually pressed, and it is a better anchor than a slotted trigger
-           the consumer may not have provided at all. */
         return (this.invoker ??
             anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this));
     }
-    /** Opens the panel. */
     show() {
         if (this.open || !this.requestOpen(true)) {
             return;
         }
-        // The raising happens in `updated()`, which `requestOpen` has just
-        // scheduled: one path for both the imperative and the declarative case.
     }
-    /** Closes the panel and puts focus back on the trigger. */
     hide() {
         if (!this.open || !this.requestOpen(false)) {
             return;
         }
         this.panel.hide();
-        /* Only when focus is inside the panel that is going away. A popover
-           dismissed by a press somewhere else has not taken focus with it, and
-           pulling focus back to the trigger would move a reader who was already
-           somewhere else on purpose. */
-        /* `deepActiveElement`, which walks into shadow roots. `document.activeElement`
-           stops at the outermost host, so a popover living inside another
-           component's shadow root never saw its own focus and never gave it back to
-           the trigger. The util exists for this. */
         if (this.contains(deepActiveElement())) {
             this.trigger.focus();
         }
     }
-    /** Tells a slotted trigger the disclosure state, by property. See `tellDisclosure`. */
     tellTrigger() {
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
         tellDisclosure(slot?.assignedElements({ flatten: false })[0], this.open);
     }
-    /**
-     * Puts the panel where `open` says it should be, however it got there.
-     *
-     * Driven from the resolved state rather than from `show()` and `hide()`,
-     * which is what makes the imperative and the declarative paths one path. Left
-     * to the two methods, a panel opened by *declaring* `open` (or `default-open`,
-     * or a consumer assigning the property) renders visible while never reaching
-     * the top layer and never being anchored: clipped by the first ancestor with
-     * `overflow`, and positioned wherever normal flow left it. The controller
-     * ignores a `show()` on something already raised, so this costs nothing when
-     * the methods did the work.
-     */
     updated(changed) {
         super.updated(changed);
-        /* Every update, not only the ones that move `open`: a trigger slotted after
-           the first render has to be told too, and a slot change is not a property
-           change. Idempotent, so saying it twice costs an assignment Lit compares
-           and discards. */
         this.tellTrigger();
         if (!changed.has('open')) {
             return;
         }
-        /* Raised here rather than a microtask later, and `updated()` is what makes
-           that safe: the render has already been written, so the panel is no longer
-           `display: none` and `showPopover` will not throw on it. Anything raising
-           it before the render has to wait for `updateComplete`; from here there is
-           nothing left to wait for. */
         if (this.open) {
             this.panel.show();
         }

package/dist/progress/root/progress-root.js

@@ -7,139 +7,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-/**
- * @summary Shows how far along a task is, when that is known.
- *
- * @description
- * Determinate by default, and `indeterminate` for a task whose total is not
- * known yet. `Loader` is still the right answer where the wait is short or has
- * no place of its own on the page; a bar earns its width where the work is the
- * subject of the region it sits in.
- *
- * A bar that fills at a made-up rate would be a bar that lies, so the
- * indeterminate one does not fill: it runs a segment across the track, which
- * says work is happening and claims no proportion at all. `aria-valuenow` is
- * omitted with it, which is the platform's own signal for the same thing.
- *
- * **The fill is a fraction of the track, written as a custom property.**
- * `--progress-fraction` is derived from `value` and `max` rather than measured,
- * so it renders on a server with no layout and needs nothing after upgrade. That
- * is what keeps it out of the class of geometry this library writes only on the
- * client. A consumer never sets it: it carries a number this element computed
- * and CSS cannot, which is what lets a stylesheet draw the thing without
- * measuring anything itself.
- *
- * **`value` is clamped, and out-of-range input is not an error.** A count that
- * runs past its own total is ordinary in real applications, and a bar that
- * overflows its track or reports `aria-valuenow` above `aria-valuemax` is worse
- * than one that reads as finished.
- *
- * Semantics are on the host through `ElementInternals`, the same as everywhere
- * else: a `role` in the shadow root announces correctly and leaves the host
- * anonymous to anything walking the light DOM, and a `role` written onto the
- * host as an attribute is one a server's markup never had.
- *
- * @since 0.1.0
- * @status stable
- * @category feedback
- * @aliases Progress bar, Loading bar
- * @documentation https://helix.fusion.dev/components/progress
- *
- * @csspart groove - The unfilled circle, under the ring's own sweep.
- * @csspart indicator - The part of it that is done.
- * @csspart track - The full length the work is measured against.
- * @csspart value - The reading beside the bar, under `show-value`.
- *
- * @cssproperty --progress-fraction - The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
- */
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Whether the work has a knowable end.
-         *
-         * On the headless tier rather than as a treatment, because it is
-         * semantics before it is a picture: a progressbar with no `aria-valuenow` is
-         * how the platform says "running, and nobody knows how far", and a reader on
-         * a screen reader is told that rather than being read a number that means
-         * nothing. `value` and `max` are ignored while it is set.
-         *
-         * Not `Loader`, which is the other thing this could be. A loader says the
-         * page is busy; a bar says a named piece of work is running, and keeps its
-         * place in the layout when the answer arrives and it becomes determinate.
-         */
         this.indeterminate = false;
-        /**
-         * Accessible name for what is in progress.
-         */
         this.label = 'Progress';
-        /**
-         * The total the work is measured against.
-         */
         this.max = 100;
-        /**
-         * Whether the reading is shown beside the bar.
-         *
-         * The same name and shape `Slider` uses, because it is the same question:
-         * a control that holds a number can either show it or leave it to whatever is
-         * around it. Off by default, since most bars sit under a label that already
-         * says what is happening and a second number is noise.
-         *
-         * Nothing under `indeterminate`, where there is no reading to show: a percent
-         * that does not move is worse than none, and `valueText` is the property for
-         * saying "uploading" while the bar runs.
-         */
         this.showValue = false;
-        /**
-         * What has been done so far, in the same units as `max`.
-         *
-         * Clamped between zero and `max` for both the fill and the announcement, so
-         * the two can never disagree about what is on screen.
-         */
         this.value = 0;
-        /**
-         * A reading for the value, where the number alone does not say enough.
-         *
-         * "3 of 8 files" rather than "37". Announced instead of the percentage, and
-         * never instead of the value itself: `aria-valuenow` still carries the
-         * number, because assistive technology that ignores the text still has to
-         * report progress.
-         */
         this.valueText = '';
     }
-    /** What is done, as a fraction of the whole, between 0 and 1. */
     get fraction() {
         const max = this.max > 0 ? this.max : 100;
-        /* `|| 0` catches the value that is not a number.
-         *
-         * `undefined / 100` is `NaN`, `Math.min(Math.max(NaN, 0), 1)` is `NaN`, and
-         * `NaN` reached CSS as `scale: NaN`, which is an invalid value the
-         * declaration is dropped for: the bar fell back to its unscaled width and
-         * painted COMPLETE for a value nobody had given. `aria-valuenow` announced
-         * the string "NaN" beside it. Empty means nothing done, which is the only
-         * reading that is not a claim. */
         return Math.min(Math.max(this.value / max, 0), 1) || 0;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'progressbar' });
-        /* The clamped value, not the given one, so what is announced is what is
-           drawn. Written as strings because that is what `ElementInternals` takes;
-           a number assigned here is stringified anyway and reads as though the
-           type were checked. */
         this.internals.ariaValueMin = '0';
         this.internals.ariaValueMax = String(this.max > 0 ? this.max : 100);
-        /* Absent while indeterminate, not zero. An omitted `aria-valuenow` is the
-         * platform's own signal for indeterminate, and it is the only one:
-         * `aria-busy` says the element is being updated, which is a different claim.
-         * Reporting 0 would announce "0 percent" for work that is running, which is
-         * worse than saying nothing because it is wrong rather than unknown.
-         *
-         * Otherwise the clamped value itself, never the fraction multiplied back up.
-         * Dividing by `max` and then multiplying by it is a round trip through a
-         * float, and for roughly one integer pair in sixteen it does not come back:
-         * `1/3*3` is `0.9999999999999998`, which is what the accessibility tree
-         * carried and what a screen reader read out. */
         const ceiling = this.max > 0 ? this.max : 100;
         this.internals.ariaValueNow = this.indeterminate
             ? null
@@ -147,20 +33,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.internals.ariaValueText = this.valueText || null;
     }
     render() {
-        /* A custom property rather than a width, so the styled tier decides what
-           the number means: a bar fills along it, and a ring would sweep. */
         const fraction = this.indeterminate ? 1 : this.fraction;
-        /* Two circles and `pathLength`, which is what makes the arithmetic go away.
-         *
-         * Declaring the path 100 units long lets `stroke-dasharray` be written as
-         * the percentage itself, so nothing here or in the stylesheet needs the
-         * circumference, the radius or pi. The geometry is CSS as well: `r` and the
-         * stroke both read the ring's own custom properties, so a consumer changing
-         * the thickness moves the circle that carries it without the component
-         * recalculating anything.
-         *
-         * `aria-hidden`, because the host is the `progressbar` and carries the
-         * value. The drawing is a picture of what it already says. */
         const ring = html `<svg part="track" aria-hidden="true">
       <circle part="groove" />
       <circle part="indicator" pathLength="100" style="--progress-fraction: ${fraction}" />
@@ -170,12 +43,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
             : html `<div part="track">
             <div part="indicator" style="--progress-fraction: ${fraction}"></div>
           </div>`}
-      ${
-        /* `aria-hidden`, because the bar already reports this. The host carries
-           `role="progressbar"` with `aria-valuenow` and `aria-valuetext`, so a
-           readable copy of the same number is a second announcement of one
-           fact. It is here to be looked at, not to be read out. */
-        this.showValue && !this.indeterminate
+      ${this.showValue && !this.indeterminate
             ? html `<span part="value" aria-hidden="true"
               >${this.valueText || `${Math.round(this.fraction * 100)}%`}</span
             >`

package/dist/qr-code/root/qr-code-root.js

@@ -8,26 +8,10 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
-/** Whether a module is one of the three finder squares, or their separators. */
 const isFinder = (x, y, size) => {
     const near = (a, b) => a < 8 && b < 8;
     return near(x, y) || near(size - 1 - x, y) || near(x, size - 1 - y);
 };
-/**
- * The dark modules of a matrix, as one path.
- *
- * One `<path>` rather than a rect per module. A modest code is 33 by 33, so a
- * rect apiece is a thousand elements the browser lays out and the accessibility
- * tree walks, and every one of them is a one-unit square.
- *
- * **`square` joins runs and the other styles cannot.** A row of eight square
- * modules is one `h8`; a row of eight *rounded* ones is eight shapes, because
- * the corners are what is being drawn and a joined run has none in the middle.
- *
- * `only` splits the drawing in two without walking the matrix twice: the finder
- * squares are structural, at three known corners, so a caller can ask for them
- * alone and get a second path to paint differently.
- */
 const pathFor = (matrix, style, only = 'all') => {
     const size = matrix.length;
     const wanted = (x, y) => {
@@ -56,10 +40,6 @@ const pathFor = (matrix, style, only = 'all') => {
         }
         return parts.join('');
     }
-    /* A circle for `dots` and a squircle for `rounded`, both drawn as arcs on a
-       one-unit square. The radius is a little under half so neighboring dots do
-       not touch, which is what makes a dotted code read as dots rather than as a
-       square one with soft edges. */
     const r = style === 'dots' ? 0.45 : 0.28;
     for (let y = 0; y < size; y += 1) {
         for (let x = 0; x < size; x += 1) {
@@ -79,77 +59,14 @@ const pathFor = (matrix, style, only = 'all') => {
     }
     return parts.join('');
 };
-/**
- * @summary Encodes a short piece of text as a scannable square.
- *
- * @description
- * **The picture is one `<path>`, not a grid of squares.** A code of any useful
- * length is a thousand modules, and drawing each as its own rect is a thousand
- * nodes for one image. Runs of adjacent dark modules are joined, so a row of
- * eight is one horizontal move rather than eight squares.
- *
- * **It is an image and says so.** `role="img"` with a name, because what a
- * reader with a screen reader needs is what the code is *for*, and no amount of
- * describing the pattern gives them that. Where nothing is passed the value
- * itself is the name, which is right far more often than it looks: most codes
- * hold a URL, and a URL read aloud is the destination.
- *
- * **The quiet zone is part of the code.** Four modules of margin are required
- * by the specification, not a design choice, and a scanner will refuse a code
- * that is cropped to its edge. It is drawn inside the `viewBox` so it survives
- * any size the component is given, including one set in CSS.
- *
- * `correction` is what buys the middle slot. A code at `H` can lose thirty
- * percent of itself and still read, which is what makes covering the center
- * with a mark safe; at `L` the same mark makes the code unscannable. That is
- * why the slot exists on the same element as the property, and why the default
- * moves when the slot is filled.
- *
- * @since 0.1.0
- * @status stable
- * @category media
- * @aliases QR, Barcode, Scan code
- * @documentation https://helix.fusion.dev/components/qr-code
- *
- * @slot logo - A mark for the center, which only reads at a high correction.
- *
- * @csspart code - The square itself.
- * @csspart finders - The three corner squares, which can take their own color.
- * @csspart logo - The box holding the center mark.
- * @csspart modules - Everything but the three corner squares.
- */
 let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * What the image is called.
-         *
-         * Falling back to the value is deliberate: a code almost always holds a URL,
-         * and a URL is a better name than "QR code" for a reader who cannot see it.
-         */
         this.label = '';
-        /**
-         * How the modules are drawn.
-         *
-         * `square` is the default and the only one that joins runs of adjacent
-         * modules into a single subpath, which is what keeps a thousand modules to a
-         * handful of nodes. `rounded` and `dots` draw each module on its own, because
-         * the corners are the thing being drawn and a joined run has none in the
-         * middle. That cost is paid only by a code that asks for them.
-         *
-         * A scanner reads contrast between cells, not their shape, so all three
-         * scan. `dots` sits a little under half a module so neighbors do not touch,
-         * which is what makes it read as dots rather than as a softened square code.
-         */
         this.shape = 'square';
-        /**
-         * What the code encodes, which is usually a URL.
-         */
         this.value = '';
-        /** Whether anything is slotted into the middle. */
         this.logo = false;
     }
-    /** The level actually used, which the slot can raise. */
     get level() {
         return this.correction ?? (this.logo ? 'H' : 'M');
     }
@@ -157,23 +74,10 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         if (this.value === '') {
             return nothing;
         }
-        /* Regenerated on every render rather than cached. It is a pure function of
-           two properties, Lit only renders when one of them moved, and a cache here
-           would be a second place for them to disagree. */
         const result = encode(this.value, { border: 0, ecc: this.level });
         const size = result.size;
-        /* The quiet zone, in the `viewBox` rather than in a wrapper's padding. Four
-           modules is what the specification requires and what a scanner looks for,
-           so it has to scale with the code and not with whatever box the component
-           was given. */
         const quiet = 4;
         const box = size + quiet * 2;
-        /* The three corner squares as their own path, so they can take their own
-           color. Their positions are structural rather than guessed: seven by
-           seven at each of three corners, plus the separator ring, which is what
-           `isFinder` describes. Drawn square whatever the body's style is, because
-           they are what a scanner locks onto first and rounding them costs
-           reliability for decoration. */
         const finders = pathFor(result.data, 'square', 'finders');
         return svg `<svg
       part="code"

package/dist/quote/root/quote-root.js

@@ -7,34 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-/**
- * @summary A short quotation, set inline with the text around it.
- *
- * @description
- * Renders a real `<q>`, which is what supplies the quotation marks: the browser
- * inserts the right ones for the document's language, and nests them correctly
- * when one quotation sits inside another. Typing the marks into the content
- * instead gets both of those wrong in every language but one.
- *
- * A passage set off from the prose rather than run inside it is a blockquote,
- * which is a different element for a different job.
- *
- * @since 0.1.0
- * @status stable
- * @category typography
- * @aliases Q, InlineQuote
- * @documentation https://helix.fusion.dev/components/quote
- *
- * @slot - The quoted text.
- *
- * @csspart quote - The quotation.
- */
 let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * URL identifying where the quotation came from.
-         */
         this.cite = '';
     }
     render() {

package/dist/radio/group/radio-group.js

@@ -8,70 +8,13 @@ import { customElement, DisabledCascadeController, HelixFormElement, hostAria, K
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
-/**
- * @summary A set of choices where exactly one is the answer.
- *
- * @description
- * **The group is the control, and the radios are its options.** This is the
- * asymmetry with checkboxes and it comes from what a form submits: a set of
- * checkboxes is several answers and each box submits its own, while a set of
- * radios is one answer, so the group owns the `name`, the `value` and the
- * validity, and a lone radio outside a group is not a control at all.
- *
- * Which is also why `MixinField` lands here and not on `Radio`: the label, the
- * hint and the message are about the question, and the question is the set.
- *
- * Selection travels up and state travels down. An item announces that it was
- * chosen, the group decides whether that stands, and the group writes
- * `selected` onto every item. Nothing sets itself, so there is one answer to
- * "which one is on" rather than one per item.
- *
- * `value` and `defaultValue` are separate for the reason `checked` and
- * `defaultChecked` are: `value` is the answer now, `defaultValue` is what the
- * markup asked for, which is where a reset returns and is gone the moment
- * anything is chosen.
- *
- * @since 0.1.0
- * @status experimental
- * @aliases RadioButtons, Choice group
- * @documentation https://helix.fusion.dev/components/radio-group
- *
- * @slot - The radios.
- * @slot hint - Richer than a string.
- * @slot label - Richer than a string, where the question is more than one.
- *
- * @event {Event} change - Announced once the value has moved.
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the answer changes, and cancelable.
- * @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 choices, which is what `orientation` lays out.
- * @csspart label - The question, over the set.
- */
 let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
-        /* Moving and choosing are one act, which is the radio group pattern and is
-           what this controller exists to stop being written per component. */
-        /* Registered rather than held. A controller adds itself to the host, so there
-           is no reference to keep, and nothing here talks to it after construction.
-           `protected` rather than `private` because a private field nothing reads is
-           an unused one, and the subclass tier is where a consumer would reach for
-           it. */
         this.keys = new KeyboardNavigationController(this, { items: () => this.items });
-        /* Stated once, and the group never thinks about it again. Hand calls from
-           each method that could disable an item reach different paths per
-           component; the controller is what stops that being written per group. */
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
-        /**
-         * Announces before it applies, so a listener can refuse the change.
-         *
-         * The item has not moved by the time this runs, unlike a native input, so
-         * refusing is simply not writing the value: there is nothing to put back.
-         */
         this.handleSelection = (event) => {
             event.stopPropagation();
             const next = event.detail.value;
@@ -81,25 +24,14 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
             this.requestValue(next);
         };
     }
-    /** The radios, in light-DOM order. Client only: the server has no tree. */
     get items() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessRadio);
     }
-    /** Writes the answer onto the items, and nothing onto the host. */
     place() {
         const items = this.items;
         for (const item of items) {
             item.selected = item.value === this.value;
         }
-        /* Nothing chosen yet, so the first item is the tab stop. A group where
-           every item is `tabindex="-1"` is a group the keyboard cannot enter, and
-           an answered group that keeps the entry stop carries two, so tabbing
-           through a form stops twice on one question and the first stop is on an
-           item that is not the answer.
-    
-           `entered` rather than a bare toggle, because this also runs when the
-           group is answered and the attribute has to go whether or not this call is
-           the one that put it there. */
         const entered = this.value === '' && items.length > 0 ? items[0] : undefined;
         for (const item of items) {
             if (item === entered) {
@@ -110,7 +42,6 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
             }
         }
     }
-    /** Reports the answer and the verdict on it. */
     sync() {
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired(this.value === '', 'Choose one to continue.', 'items');
@@ -125,16 +56,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        // Through internals, so nothing lands on the host as an attribute a React
-        // consumer's server markup never had.
-        /* 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: 'radiogroup' });
-        /* `required` reflects, sets validity and paints the asterisk the field
-           sheet draws, and tells the accessibility tree nothing on its own. Without
-           this a reader meets a mark beside the label they cannot see, and no
-           announcement of why the form would refuse the group. */
         this.internals.ariaRequired = this.required ? 'true' : null;
     }
     updated(changed) {
@@ -144,9 +66,6 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
         this.linkHost();
     }
     render() {
-        /* The choices sit in an element of their own, because `orientation` lays
-           out whatever is in the flex container and on the host that would be the
-           label and the hint as well. */
         return html `${this.renderGroupLabel()}
       <div part="items">
         <slot @slotchange=${() => this.place()}></slot>