@fusion.dev/helix-core 0.0.0-dev → 0.0.3

package/dist/controllers/floating-controller/floating-controller.js

@@ -1,4 +1,50 @@
 import { arrow, autoUpdate, computePosition, flip, offset, shift, size, } from '@floating-ui/dom';
+/**
+ * The panel's largest corner radius, which is how far its arrow has to stay
+ * from either end.
+ *
+ * **Without it the arrow is correctly aimed and looks wrong.** Floating UI
+ * centers the arrow on the anchor, and on a small trigger that center is inside
+ * the panel's own corner: the arrow's base meets the curve instead of a straight
+ * run and its outer flank is cut by it. Measured against a 4px radius and an 8px
+ * arrow, a 14px trigger put the arrow's near flank 1.5px from the panel's edge
+ * and a 20px trigger put it at 4.3px, so anything narrower than the arrow plus
+ * two radii is broken by construction. An icon beside a heading is the ordinary
+ * way to be under that.
+ *
+ * `padding` is what Floating UI's `arrow` middleware takes for exactly this, and
+ * its own guidance for a rounded surface is the border radius.
+ *
+ * **Measured rather than named**, so a family that rounds itself differently is
+ * right without telling this controller. Reading a token here would put a value
+ * from `helix/styles` into a tier that must not name one, and would still be
+ * wrong for any component that overrides its own radius. The four corners rather
+ * than one, because they can differ and the arrow travels along two of them; the
+ * largest clears all of them.
+ *
+ * A percentage is refused rather than guessed at: it resolves against the box,
+ * which is the thing being positioned.
+ */
+const corner = (floating) => {
+    const style = getComputedStyle(floating);
+    const corners = [
+        style.borderTopLeftRadius,
+        style.borderTopRightRadius,
+        style.borderBottomRightRadius,
+        style.borderBottomLeftRadius,
+    ];
+    let largest = 0;
+    for (const each of corners) {
+        if (!each.endsWith('px')) {
+            continue;
+        }
+        const value = Number.parseFloat(each);
+        if (Number.isFinite(value) && value > largest) {
+            largest = value;
+        }
+    }
+    return largest;
+};
 /**
  * Places one element against another, and keeps it there.
  *
@@ -21,9 +67,8 @@ import { arrow, autoUpdate, computePosition, flip, offset, shift, size, } from '
  * **The custom properties are declared here because this is what writes them.**
  * Each carries a measurement taken against the viewport that no stylesheet can
  * take for itself, and `core` ships no CSS, so there is no reader inside this
- * package and none of them is private. `check:hooks` pairs a `@cssproperty`
- * with a rule that reads one, in both directions, and the underscore these used
- * to carry was what exempted them from it.
+ * package and none of them is private. the `hooks` rule pairs a documented
+ * hook with a rule that reads one, in both directions.
  *
  * @cssproperty --floating-anchor-inline-size - How wide the anchor is, for a panel that matches it.
  * @cssproperty --floating-arrow-x - Where the pointer meets the anchor, along the inline axis.
@@ -36,11 +81,11 @@ export class FloatingController {
          * Which run of placements the results coming back belong to.
          *
          * `computePosition` is async, so a measurement started before `stop()` still
-         * resolves after it and wrote its result onto a surface that had just been
-         * taken down: the inline `position` and `translate` went back on, and so did
-         * `data-placed`, which is the attribute five families gate visibility on.
-         * Opening and closing inside one task is all it takes, since the write lands
-         * a microtask later.
+         * resolves after it and would write its result onto a surface that had just
+         * been taken down: the inline `position` and `translate` back on, and with
+         * them `data-placed`, which is the attribute five families gate visibility
+         * on. Opening and closing inside one task is all it takes, since the write
+         * lands a microtask later.
          *
          * A counter rather than an `AbortController`, because there is nothing to
          * abort: the work is already done by the time the answer arrives and the only
@@ -74,10 +119,9 @@ export class FloatingController {
                 middleware.push(size({
                     /* The height and not the width, which is asymmetric on purpose. A
                        panel that runs out of room grows a scrollbar downwards and every
-                       rule reading this asks for a `max-block-size`; nothing in the
-                       library has ever asked for the inline twin, so writing it was a
-                       `setProperty` on every reposition of every floating element for
-                       nobody. `check:hooks` is what says so out loud: declared and never
+                       rule reading this asks for a `max-block-size`; nothing asks for the
+                       inline twin, so writing it would be a `setProperty` on every
+                       reposition of every floating element for nobody. Declared and never
                        read is a promise on the API page with nothing behind it. It comes
                        back the day a rule wants it, together with that rule. */
                     apply: ({ availableHeight, elements, rects }) => {
@@ -95,7 +139,7 @@ export class FloatingController {
                 }));
             }
             if (pointer) {
-                middleware.push(arrow({ element: pointer }));
+                middleware.push(arrow({ element: pointer, padding: corner(floating) }));
             }
             computePosition(anchor, floating, {
                 middleware,
@@ -133,29 +177,17 @@ export class FloatingController {
                      *
                      * `computePosition` returns a position in the viewport and this element
                      * is `position: fixed`, so the two agree and the translate is the answer
-                     * unmodified.
-                     *
-                     * **A correction used to sit here and it was answering the wrong
-                     * question.** A chart's bubble was landing hundreds of pixels from its
-                     * anchor, which looked like an ancestor stealing the containing block:
-                     * `transform`, `filter` and `backdrop-filter` all do that to a `fixed`
-                     * descendant, and the page's cards are glass. Measured, the bubble with
-                     * a zeroed translate sat at (799, 439) rather than the origin, which
-                     * seemed to confirm it.
-                     *
-                     * It was not that. 799 is `(1728 - 130) / 2` and 439 is near
-                     * `(1003 - 73) / 2`: the bubble was centered in the viewport, which is
-                     * what the UA stylesheet does to a `popover` through `inset: 0` and
-                     * `margin: auto`. The chart was rendering the *headless* tooltip, which
-                     * ships no styles to overrule that; `Tooltip` sets `margin: 0` and the
-                     * controller writes the insets, so a styled one was never centered and
-                     * never needed correcting. Fixing the tier fixed the position, and the
-                     * correction then subtracted a real ancestor's origin from an already
-                     * correct number and threw every tooltip on the page off by it.
+                     * unmodified. **Never subtract an ancestor's origin from it.**
                      *
-                     * Recorded because the evidence for the wrong answer was a measurement,
-                     * not a guess, and the number that disproved it was arithmetic on the
-                     * viewport. */
+                     * A surface landing hundreds of pixels from its anchor looks like an
+                     * ancestor stealing the containing block, which `transform`, `filter`
+                     * and `backdrop-filter` all do to a `fixed` descendant. Check the tier
+                     * first: the UA stylesheet centers a `popover` through `inset: 0` and
+                     * `margin: auto`, and the headless tooltip ships no styles to overrule
+                     * it, so it sits mid-viewport with a zeroed translate while `Tooltip`,
+                     * which sets `margin: 0`, never does. A correction added for that
+                     * subtracts a real ancestor's origin from an already correct number and
+                     * throws every tooltip on the page off by it. */
                     translate: `${Math.round(x)}px ${Math.round(y)}px`,
                 });
                 floating.setAttribute('data-placement', placement);
@@ -168,9 +200,8 @@ export class FloatingController {
                    the first open, and looked correct on every open after, because the
                    inline styles from last time were still on it.
           
-                   A panel that wants to fade in on placement selects on this. Nothing has
-                   to: `data-placement` has been written here all along and this is its
-                   pair, so a component that ignores both is exactly as it was. */
+                   A panel that wants to fade in on placement selects on this. Nothing
+                   has to. */
                 floating.setAttribute('data-placed', '');
                 const point = middlewareData.arrow;
                 if (pointer && point) {

package/dist/controllers/focus-trap-controller/focus-trap-controller.js

@@ -34,11 +34,9 @@ export class FocusTrapController {
              * `focusableElements` returns hosts: a `helix-button` delegates focus, so
              * the list holds the component and `deepActiveElement` returns the
              * `<button>` in its shadow root. They are never equal, and the container
-             * never `contains` the second, so this read `active === first` as false on
-             * the first element and "outside the trap" on every element. Measured
-             * against the two branches below, that made shift-Tab jump to the last item
-             * from anywhere and forward Tab never wrap at all, which is a trap that
-             * leaks in one direction and cannot be walked backwards in the other.
+             * never `contains` the second, so an identity check reads "outside the
+             * trap" on every element: against the two branches below, shift-Tab jumps
+             * to the last item from anywhere and forward Tab never wraps at all.
              *
              * An index also gives the outside-entirely case for free: -1 wraps to
              * whichever end the reader was heading for. */
@@ -64,12 +62,11 @@ export class FocusTrapController {
         /* After render, so the container has something to focus, and *held*, so a
            release before the frame runs can cancel it.
          *
-           Unheld, an overlay opened and closed inside one frame pulled focus into
-           itself a frame after it had gone: the reader is looking at the page, the
+           Unheld, an overlay opened and closed inside one frame pulls focus into
+           itself a frame after it has gone: the reader is looking at the page, the
            surface is not on it, and their next key goes somewhere they cannot see.
-           That is not a contrived sequence. A menu that closes on the same
-           activation that opened it does exactly this, and so does any consumer
-           toggling `open` twice in one task. */
+           A menu that closes on the same activation that opened it does exactly
+           this, and so does any consumer toggling `open` twice in one task. */
         this.frame = requestAnimationFrame(() => {
             this.frame = undefined;
             const items = focusableElements(container);

package/dist/controllers/indicator-controller/indicator-controller.d.ts

@@ -20,28 +20,20 @@ export interface IndicatorOptions {
 /**
  * Measures the marked child and writes the geometry onto a traveling mark.
  *
- * **Four components had written this and the copies had diverged.** `Navigation`,
- * `Tabs`, `Toggle.Group` and `Outline` each measured an active child and wrote
- * a position onto an indicator, and two of them had bugs the others did not.
- * `Outline`'s own comment counted the repetition rather than resolving it, and
- * the audit found the same shape independently in all four.
- *
- * What the copies disagreed about, and what this settles:
+ * Serves `Navigation`, `Tabs`, `Toggle.Group` and `Outline`. The two things
+ * hand-written copies of this get wrong:
  *
  * **The inline axis is signed.** In a right-to-left document the distance is
  * measured from the surface's right edge and applied as a negative translation,
  * because the mark travels from the inline start and the inline start is on the
- * right. `Navigation` measured from the physical left and applied it from the
- * inline-start edge with an unsigned offset, so its marker went the wrong way
- * in RTL. That is the bug this extraction exists to stop repeating.
+ * right. Measuring from the physical left and applying an unsigned offset from
+ * the inline-start edge sends the mark the wrong way in RTL.
  *
  * **The border has to come off both axes.** `getBoundingClientRect` gives the
  * border box and the containing block is the padding box, so a surface with a
- * border of its own puts the mark one border-width out. `Tabs` and
- * `Toggle.Group` each did this arithmetic separately, `Outline` did the block
- * half with `clientTop`, and `Navigation` did neither. `clientLeft` and `clientTop`
- * are the border widths, already resolved, which is why they are used here
- * rather than parsing `borderLeftWidth`.
+ * border of its own puts the mark one border-width out. `clientLeft` and
+ * `clientTop` are the border widths, already resolved, which is why they are
+ * used here rather than parsing `borderLeftWidth`.
  *
  * **Nothing is written until there is something to measure.** A zero-width box
  * is a component whose children have not upgraded yet, and writing zeroes would
@@ -53,12 +45,10 @@ export interface IndicatorOptions {
  * is its own business, which is how one controller serves a bar under a tab, a
  * pill filling it, and a rule down the side of a contents page.
  *
- * **Declared here because this is what writes them.** They carry a measurement
- * no stylesheet can take, they are read by whoever draws the mark, and `core`
- * ships no CSS, so there is no reader inside this package and nothing about
- * them is private. `check:hooks` pairs a `@cssproperty` with a rule that reads
- * one, in both directions, and the underscore these used to carry was what
- * exempted them from it.
+ * **Declared here because this is what writes them.** `core` ships no CSS, so
+ * every reader is outside this package and none of these is private.
+ * the `hooks` rule pairs a documented hook with a rule that reads one, in both
+ * directions.
  *
  * @cssproperty --indicator-block-size - How tall the active item is, in pixels.
  * @cssproperty --indicator-inline-size - How wide the active item is, in pixels.
@@ -81,14 +71,12 @@ export declare class IndicatorController implements ReactiveController {
     /**
      * The listener currently waiting, so the next move can take it off first.
      *
-     * **Without this, a move inside a second orphans a listener.** Each placement
-     * built a fresh `settle` closure and then called `clearTimeout` on the timer
-     * belonging to the *previous* one, which is the only thing that would have
-     * removed it: the event itself never arrives under reduced motion, where
-     * there is no transition to end. So a reader changing tabs quickly, or any
-     * reader at all with motion reduced, left one dead listener per selection on
-     * an element that lives as long as the page. The people who asked for less
-     * work were the ones accumulating it.
+     * **Without this, a move inside a second orphans a listener.** Clearing the
+     * timer is not enough on its own: the `transitionend` that would remove the
+     * listener never arrives under reduced motion, where there is no transition
+     * to end, so a reader changing tabs quickly, or any reader at all with motion
+     * reduced, leaves one dead listener per selection on an element that lives as
+     * long as the page.
      */
     private waiting;
     place(): void;

package/dist/controllers/indicator-controller/indicator-controller.js

@@ -1,28 +1,20 @@
 /**
  * Measures the marked child and writes the geometry onto a traveling mark.
  *
- * **Four components had written this and the copies had diverged.** `Navigation`,
- * `Tabs`, `Toggle.Group` and `Outline` each measured an active child and wrote
- * a position onto an indicator, and two of them had bugs the others did not.
- * `Outline`'s own comment counted the repetition rather than resolving it, and
- * the audit found the same shape independently in all four.
- *
- * What the copies disagreed about, and what this settles:
+ * Serves `Navigation`, `Tabs`, `Toggle.Group` and `Outline`. The two things
+ * hand-written copies of this get wrong:
  *
  * **The inline axis is signed.** In a right-to-left document the distance is
  * measured from the surface's right edge and applied as a negative translation,
  * because the mark travels from the inline start and the inline start is on the
- * right. `Navigation` measured from the physical left and applied it from the
- * inline-start edge with an unsigned offset, so its marker went the wrong way
- * in RTL. That is the bug this extraction exists to stop repeating.
+ * right. Measuring from the physical left and applying an unsigned offset from
+ * the inline-start edge sends the mark the wrong way in RTL.
  *
  * **The border has to come off both axes.** `getBoundingClientRect` gives the
  * border box and the containing block is the padding box, so a surface with a
- * border of its own puts the mark one border-width out. `Tabs` and
- * `Toggle.Group` each did this arithmetic separately, `Outline` did the block
- * half with `clientTop`, and `Navigation` did neither. `clientLeft` and `clientTop`
- * are the border widths, already resolved, which is why they are used here
- * rather than parsing `borderLeftWidth`.
+ * border of its own puts the mark one border-width out. `clientLeft` and
+ * `clientTop` are the border widths, already resolved, which is why they are
+ * used here rather than parsing `borderLeftWidth`.
  *
  * **Nothing is written until there is something to measure.** A zero-width box
  * is a component whose children have not upgraded yet, and writing zeroes would
@@ -34,12 +26,10 @@
  * is its own business, which is how one controller serves a bar under a tab, a
  * pill filling it, and a rule down the side of a contents page.
  *
- * **Declared here because this is what writes them.** They carry a measurement
- * no stylesheet can take, they are read by whoever draws the mark, and `core`
- * ships no CSS, so there is no reader inside this package and nothing about
- * them is private. `check:hooks` pairs a `@cssproperty` with a rule that reads
- * one, in both directions, and the underscore these used to carry was what
- * exempted them from it.
+ * **Declared here because this is what writes them.** `core` ships no CSS, so
+ * every reader is outside this package and none of these is private.
+ * the `hooks` rule pairs a documented hook with a rule that reads one, in both
+ * directions.
  *
  * @cssproperty --indicator-block-size - How tall the active item is, in pixels.
  * @cssproperty --indicator-inline-size - How wide the active item is, in pixels.

package/dist/controllers/keyboard-navigation-controller/keyboard-navigation-controller.d.ts

@@ -85,19 +85,9 @@ export interface KeyboardNavigationOptions {
  * Disabled items are skipped rather than stopped at, so a set with a gap in it
  * still moves in one press.
  *
- * Written because `Radio.Group` and `Toggle.Group` had this twice, identically,
- * down to the order of the branches. The second copy is what makes it a
- * controller: one is a component's own business, two is a pattern, and the two
- * had not diverged only because nothing had touched them yet.
- *
- * **`Tabs` is the third, and it is what `origin` and `selects` are for.** It had
- * diverged, which is the case the paragraph above was worried about: it started
- * from focus rather than from the selection, and it moved without choosing when
- * `manual` was set. Both are real and neither is a tabs-only idea, so they are
- * options here rather than a reason to keep a fourth copy. What it does *not*
- * keep is its own key set: it bound the horizontal pair only, and both axes is
- * the house position, argued two paragraphs up. A reader on a tab who presses
- * Down now moves along the row instead of getting nothing.
+ * A set that starts from focus rather than from the selection, or that moves
+ * without choosing, says so through `origin` and `selects`. Neither is a reason
+ * to keep a hand-written copy, and neither exempts a set from both axes.
  */
 export declare class KeyboardNavigationController implements ReactiveController {
     private readonly host;

package/dist/controllers/keyboard-navigation-controller/keyboard-navigation-controller.js

@@ -18,19 +18,9 @@ const KEYS = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End',
  * Disabled items are skipped rather than stopped at, so a set with a gap in it
  * still moves in one press.
  *
- * Written because `Radio.Group` and `Toggle.Group` had this twice, identically,
- * down to the order of the branches. The second copy is what makes it a
- * controller: one is a component's own business, two is a pattern, and the two
- * had not diverged only because nothing had touched them yet.
- *
- * **`Tabs` is the third, and it is what `origin` and `selects` are for.** It had
- * diverged, which is the case the paragraph above was worried about: it started
- * from focus rather than from the selection, and it moved without choosing when
- * `manual` was set. Both are real and neither is a tabs-only idea, so they are
- * options here rather than a reason to keep a fourth copy. What it does *not*
- * keep is its own key set: it bound the horizontal pair only, and both axes is
- * the house position, argued two paragraphs up. A reader on a tab who presses
- * Down now moves along the row instead of getting nothing.
+ * A set that starts from focus rather than from the selection, or that moves
+ * without choosing, says so through `origin` and `selects`. Neither is a reason
+ * to keep a hand-written copy, and neither exempts a set from both axes.
  */
 export class KeyboardNavigationController {
     constructor(host, { items, origin = 'selection', reserved = () => [], selects = () => true, wrap = true, }) {
@@ -68,18 +58,15 @@ export class KeyboardNavigationController {
             else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
                 /* From nothing, backwards is the last, which the arithmetic did not give.
                  *
-                 * `(-1 - 1 + length) % length` is `length - 2`: the *second* to last. So a
-                 * reader arrowing backwards into an unanswered group landed one short of
-                 * the end, and the comment above says plainly that it lands on the end.
-                 * The wrapping form is right for every real index and wrong for the one
-                 * that is not an index.
+                 * `(-1 - 1 + length) % length` is `length - 2`: the *second* to last, so
+                 * a reader arrowing backwards into an unanswered group lands one short of
+                 * the end. The wrapping form is right for every real index and wrong for
+                 * the one that is not an index.
                  *
-                 * And the clamp is `Math.max` against the forward branch's `Math.min`,
-                 * which it was missing. Unclamped this is `-1` on the first item, and
-                 * `items[-1]` is undefined, so nothing was focused and nothing chosen on a
-                 * press that `preventDefault` had already swallowed. Holding Left on the
-                 * first star of a rating got silence, where holding Right on the last one
-                 * holds its ground. */
+                 * And the clamp is `Math.max` against the forward branch's `Math.min`.
+                 * Unclamped this is `-1` on the first item, and `items[-1]` is undefined,
+                 * so nothing is focused and nothing chosen on a press that
+                 * `preventDefault` has already swallowed. */
                 next =
                     current < 0
                         ? last

package/dist/controllers/popover-controller/popover-controller.d.ts

@@ -64,13 +64,8 @@ export interface PopoverOptions {
 /**
  * A surface that floats against something, in the top layer, until dismissed.
  *
- * Three things always travel together and were written out longhand three
- * times: the popover API, a `FloatingController` and a `DismissController`.
- * Individually each is small, which is exactly why the copies drifted rather
- * than being noticed. **`Select` never called `showPopover` at all**, so its
- * list was an ordinary positioned panel and any ancestor with `overflow:
- * hidden` clipped it, while a menu two folders away in the same position did
- * not. That is not a difference anyone chose.
+ * Bundles the three things that always travel together: the popover API, a
+ * `FloatingController` and a `DismissController`.
  *
  * **The top layer is the whole point.** A floating panel has to escape every
  * clipping ancestor between it and the page, and `position: fixed` does not do

package/dist/controllers/popover-controller/popover-controller.js

@@ -3,13 +3,8 @@ import { FloatingController } from '../floating-controller/floating-controller.j
 /**
  * A surface that floats against something, in the top layer, until dismissed.
  *
- * Three things always travel together and were written out longhand three
- * times: the popover API, a `FloatingController` and a `DismissController`.
- * Individually each is small, which is exactly why the copies drifted rather
- * than being noticed. **`Select` never called `showPopover` at all**, so its
- * list was an ordinary positioned panel and any ancestor with `overflow:
- * hidden` clipped it, while a menu two folders away in the same position did
- * not. That is not a difference anyone chose.
+ * Bundles the three things that always travel together: the popover API, a
+ * `FloatingController` and a `DismissController`.
  *
  * **The top layer is the whole point.** A floating panel has to escape every
  * clipping ancestor between it and the page, and `position: fixed` does not do
@@ -87,8 +82,7 @@ export class PopoverController {
                element with no `popover` attribute throws `NotSupportedError`, from
                inside the promise the host called this in, so it surfaces as an
                unhandled rejection naming a method rather than as the thing that is
-               actually wrong. Which is how `Select` looked for as long as it was
-               broken: no error at all, just a panel that could be clipped. */
+               actually wrong. */
             if (!surface.hasAttribute('popover')) {
                 throw new Error('PopoverController: the surface needs a `popover` attribute to reach the top layer');
             }

package/dist/controllers/source-controller/source-controller.d.ts

@@ -10,11 +10,8 @@ export interface SourceHost extends ReactiveControllerHost, HTMLElement {
 /**
  * Resolves the element a chart reads from, and follows it.
  *
- * **Three charts had written this out separately before it was one thing**, and
- * the drift had already started: two of them called the lookup `#table` and one
- * called it `#source`, for the same method with the same body. Every chart that
- * takes a `for` wants exactly this, and wants it to behave identically, so it is
- * a controller rather than a paragraph in each of them.
+ * Every chart that takes a `for` wants exactly this, and wants it to behave
+ * identically, so it is a controller rather than a paragraph in each of them.
  *
  * A controller and not a pure function, by the test the rules set: it reacts to
  * the host's lifecycle. It has to start watching when the host connects, stop

package/dist/controllers/source-controller/source-controller.js

@@ -2,11 +2,8 @@ import { readSeries } from '../../utils/read-series/read-series.js';
 /**
  * Resolves the element a chart reads from, and follows it.
  *
- * **Three charts had written this out separately before it was one thing**, and
- * the drift had already started: two of them called the lookup `#table` and one
- * called it `#source`, for the same method with the same body. Every chart that
- * takes a `for` wants exactly this, and wants it to behave identically, so it is
- * a controller rather than a paragraph in each of them.
+ * Every chart that takes a `for` wants exactly this, and wants it to behave
+ * identically, so it is a controller rather than a paragraph in each of them.
  *
  * A controller and not a pure function, by the test the rules set: it reacts to
  * the host's lifecycle. It has to start watching when the host connects, stop

package/dist/controllers/token-color-controller/token-color-controller.d.ts

@@ -12,10 +12,8 @@ export type TokenColor = [number, number, number];
  * white. Parsing that with a regular expression for numbers reads the three
  * channels as 100, 0 and 0, which divided by 255 is a dark red.
  *
- * That is not hypothetical. It shipped, and `--helix-color-foreground` arrived
- * as a dark red that painted a warm streak down a shader for an afternoon. It
- * survived review because a warm cast on a saturated gradient is also what a
- * screenshot's chroma subsampling produces, so the picture agreed with the bug.
+ * A screenshot cannot catch that: a warm cast on a saturated gradient is also
+ * what chroma subsampling produces, so the picture agrees with the bug.
  *
  * The conversion is therefore the browser's own: fill a pixel and read it back.
  * That holds for `lab()`, `oklch()`, `color-mix()` and whatever a token is

package/dist/controllers/token-color-controller/token-color-controller.js

@@ -9,10 +9,8 @@
  * white. Parsing that with a regular expression for numbers reads the three
  * channels as 100, 0 and 0, which divided by 255 is a dark red.
  *
- * That is not hypothetical. It shipped, and `--helix-color-foreground` arrived
- * as a dark red that painted a warm streak down a shader for an afternoon. It
- * survived review because a warm cast on a saturated gradient is also what a
- * screenshot's chroma subsampling produces, so the picture agreed with the bug.
+ * A screenshot cannot catch that: a warm cast on a saturated gradient is also
+ * what chroma subsampling produces, so the picture agrees with the bug.
  *
  * The conversion is therefore the browser's own: fill a pixel and read it back.
  * That holds for `lab()`, `oklch()`, `color-mix()` and whatever a token is

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -57,7 +57,7 @@ export interface Window {
  * and the note in the rules that objects and functions have that bug and are
  * not fixed).
  *
- * **A third is open, and this said otherwise until 21 Aug 2026.** Data as *text*
+ * **A third channel is open.** Data as *text*
  * in the markup, a `<script type="application/json">` child or an attribute, is
  * neither a property nor a node per row: React's hydration bug cannot touch text
  * it renders as a child, a server emits it, and the node count is one. The

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -1,11 +1,11 @@
 /**
  * How many times an update this asked for may change the answer again.
  *
- * **A measurement that its own render moves has no fixed point, and nothing
- * here could previously stop looking for one.** `clientHeight` is meant to be a
- * fact about the box, true of any real scroller, and false of a box with no
- * height: there it is a function of the rows just drawn, so `measure` renders,
- * the render changes the height, and the next measurement disagrees.
+ * **A measurement that its own render moves has no fixed point, so something
+ * has to stop looking for one.** `clientHeight` is meant to be a fact about the
+ * box, true of any real scroller, and false of a box with no height: there it
+ * is a function of the rows just drawn, so `measure` renders, the render
+ * changes the height, and the next measurement disagrees.
  *
  * It does not even diverge, which is what made it hard to see. Measured on the
  * headless tier with 500 rows and no height on the viewport, it converged
@@ -51,7 +51,7 @@ const UNSTABLE = 10;
  * and the note in the rules that objects and functions have that bug and are
  * not fixed).
  *
- * **A third is open, and this said otherwise until 21 Aug 2026.** Data as *text*
+ * **A third channel is open.** Data as *text*
  * in the markup, a `<script type="application/json">` child or an attribute, is
  * neither a property nor a node per row: React's hydration bug cannot touch text
  * it renders as a child, a server emits it, and the node count is one. The
@@ -103,15 +103,15 @@ export class VirtualizeController {
         /* Nothing is observed here, and that is deliberate. `hostConnected` runs
            before the first render, so the container query returns null and an
            observer attached to nothing observes nothing for the life of the
-           element. `CollapseController` shipped exactly that bug and it was
-           invisible: the first measurement was right, so the only symptom was a
-           window that never moved again. */
-        /* **The count is deliberately not cleared here, and clearing it was the
-           first attempt.** A resize looks like an outside cause and is not one when
-           the box has no height of its own: the render this controller asked for is
-           what changed the size, so the observer fires on every pass and resets the
-           very counter meant to notice that. Measured: the guard made no difference
-           at all, 7776 passes in twenty-five seconds, identical to having none.
+           element. It is an invisible failure: the first measurement is right, so
+           the only symptom is a window that never moves again. */
+        /* **The count is deliberately not cleared here**, which is the obvious
+           thing to do and does not work. A resize looks like an outside cause and
+           is not one when the box has no height of its own: the render this
+           controller asked for is what changed the size, so the observer fires on
+           every pass and resets the very counter meant to notice that. Measured:
+           the guard made no difference at all, 7776 passes in twenty-five seconds,
+           identical to having none.
     
            Nothing is lost by leaving it. A genuine resize changes the window once
            and the next measurement agrees, which clears the count through `same`. A

package/dist/events/element-events.js

@@ -8,11 +8,6 @@
  * That is the likelier mistake of the two, because it happens while writing a
  * *correct* event name.
  *
- * Measured 25 Aug 2026: `onhelix-resize` was written on `<helix-sandbox>` where
- * the dispatcher is the `<helix-sandbox-preview>` inside it. Nothing warned, the
- * handler never ran, and the page it was sizing sat at its floor looking exactly
- * like the fixed layout it replaced.
- *
  * **Registered rather than imported, because the direction of the tiers forbids
  * the other way round.** This lives in `core`, which is below the packages that
  * define elements and cannot name them. Each package ships a generated call