@fusion.dev/helix-core 0.170.0 → 0.172.0

package/custom-elements.json

@@ -983,12 +983,83 @@
               "readonly": true,
               "default": "options"
             },
+            {
+              "kind": "field",
+              "name": "invokers",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<Element>()",
+              "description": "The invokers this host tells whether it is open: each one that sent an\nopening command, unless it carried `aria-expanded` of its own before then."
+            },
+            {
+              "kind": "field",
+              "name": "theirs",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new WeakSet<Element>()",
+              "description": "Invokers that carried `aria-expanded` before a command, which stay the consumer's."
+            },
             {
               "kind": "field",
               "name": "handle",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "note",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "source",
+                  "type": {
+                    "text": "Element | null"
+                  }
+                }
+              ],
+              "description": "Takes the invoker on as one to tell, for a host that opens.\n\n**The platform says it for a native popover and not for this.** Chromium\nexposes a `popovertarget` button, or one with `command=\"toggle-popover\"`,\nas expanded or collapsed, and a custom command reaches a custom element\nwith nothing said. Measured before this: a `command=\"--toggle\"` button\nopened a Popover and its node had no expanded state. React Aria's trigger\nsays `aria-expanded` on every overlay it opens.\n\nFrom the first command on, so nothing is written onto markup a server\nsent until a reader presses. A plain invoker is also pointed at the host\nthrough `ariaControlsElements`, which writes no attribute."
+            },
+            {
+              "kind": "method",
+              "name": "tell",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Writes the host's state on each invoker it tells, forgetting one that has left."
+            },
+            {
+              "kind": "method",
+              "name": "write",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "invoker",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Says `open` on one invoker: a Helix control through its `expanded`\nproperty, which its own button carries and which puts nothing in the\nmarkup, and a plain element through `aria-expanded`."
+            },
             {
               "kind": "method",
               "name": "hostConnected",
@@ -998,6 +1069,15 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "hostDisconnected",
@@ -3923,7 +4003,7 @@
               },
               "privacy": "private",
               "readonly": true,
-              "default": "new FloatingController(host, { anchor: options.anchor, ...(options.arrow === undefined ? {} : { arrow: options.arrow }), floating: options.surface, ...(options.offset === undefined ? {} : { offset: options.offset }), ...(options.onPlace === undefined ? {} : { onPlace: options.onPlace }), ...(options.placement === undefined ? {} : { placement: options.placement }), ...(options.within === undefined ? {} : { within: options.within }), })"
+              "default": "new FloatingController(host, { anchor: options.anchor, ...(options.arrow === undefined ? {} : { arrow: options.arrow }), floating: options.surface, ...(options.offset === undefined ? {} : { offset: options.offset }), ...(options.crossOffset === undefined ? {} : { crossOffset: options.crossOffset }), ...(options.flip === undefined ? {} : { flip: options.flip }), ...(options.padding === undefined ? {} : { padding: options.padding }), ...(options.onPlace === undefined ? {} : { onPlace: options.onPlace }), ...(options.placement === undefined ? {} : { placement: options.placement }), ...(options.within === undefined ? {} : { within: options.within }), })"
             },
             {
               "kind": "field",
@@ -21133,7 +21213,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "The `feedback` line, or nothing while there is none."
+              "description": "The `feedback` line, or nothing while there is none.\n\n`role=\"alert\"`, as a field's feedback line has, so the message is\nannounced when it appears and the label and hint are not read with it."
             }
           ],
           "attributes": [
@@ -30178,11 +30258,41 @@
           "kind": "variable",
           "name": "UNITS",
           "type": {
-            "text": "Array<{ ms: number; unit: Intl.RelativeTimeFormatUnit }>"
+            "text": "Unit[]"
           },
           "default": "[ { ms: 1000, unit: 'second' }, { ms: 60_000, unit: 'minute' }, { ms: 3_600_000, unit: 'hour' }, { ms: 86_400_000, unit: 'day' }, { ms: 604_800_000, unit: 'week' }, { ms: 2_629_800_000, unit: 'month' }, { ms: 31_557_600_000, unit: 'year' }, ]",
           "description": "How long each unit lasts, in milliseconds, largest last. `elapsedTime`\nreads its minute, hour and day from here."
         },
+        {
+          "kind": "function",
+          "name": "roundedCount",
+          "return": {
+            "type": {
+              "text": "{ count: number; index: number; next: number }"
+            }
+          },
+          "parameters": [
+            {
+              "name": "size",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "units",
+              "type": {
+                "text": "readonly U[]"
+              }
+            },
+            {
+              "name": "growing",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ],
+          "description": "A size of time as a rounded count of one of `units`, and how long that\ncount holds while the size grows (`growing`, a moment gone) or shrinks (a\nmoment to come).\n\n**Rounded, as Shoelace's relative time rounds.** Truncated, a date 48 hours\nahead, measured a few milliseconds later, read \"tomorrow\", and 59 minutes\nread \"59 minutes\" while 61 read \"1 hour\". A count that rounds up to the next\nunit's size reads in that unit: 59.6 minutes is 1 hour, 6.6 days is 1 week.\n\n`units` run smallest first and the size is at least the first of them.\nExported for `elapsedTime`, which reads its minute, hour and day the same way."
+        },
         {
           "kind": "function",
           "name": "relativeTime",
@@ -30218,6 +30328,14 @@
             "module": "src/utils/relative-time/relative-time.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "roundedCount",
+          "declaration": {
+            "name": "roundedCount",
+            "module": "src/utils/relative-time/relative-time.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "relativeTime",
@@ -33673,7 +33791,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.170.0'",
+          "default": "'0.172.0'",
           "description": "The version of the package this file ships in.\n\n**Written by `fusion/scripts/version.mjs`** wherever it writes the package's\n`package.json`, and stamped back into the repository beside it after a\nrelease, so the two never disagree; a spec beside this holds them to it.\nNothing else in the running code knows which release it is."
         }
       ],
@@ -34233,6 +34351,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.170.0"
+    "version": "0.172.0"
   }
 }

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

@@ -40,6 +40,12 @@ export declare class HelixFallbackCommandEvent extends Event {
 export interface CommandOptions {
     /** Each command the host implements, keyed by the name a trigger writes. */
     commands: Record<string, (source: Element | null) => void>;
+    /**
+     * Whether the host is open, for a host a command opens and closes. Given,
+     * each invoker that has sent `--show` or `--toggle` says so with
+     * `aria-expanded`.
+     */
+    expanded?: () => boolean;
 }
 /**
  * Lets a control elsewhere on the page operate this one, declaratively.
@@ -75,7 +81,38 @@ export declare class CommandController implements ReactiveController {
     private readonly host;
     private readonly options;
     constructor(host: ReactiveControllerHost & HTMLElement, options: CommandOptions);
+    /**
+     * The invokers this host tells whether it is open: each one that sent an
+     * opening command, unless it carried `aria-expanded` of its own before then.
+     */
+    private readonly invokers;
+    /** Invokers that carried `aria-expanded` before a command, which stay the consumer's. */
+    private readonly theirs;
     private readonly handle;
+    /**
+     * Takes the invoker on as one to tell, for a host that opens.
+     *
+     * **The platform says it for a native popover and not for this.** Chromium
+     * exposes a `popovertarget` button, or one with `command="toggle-popover"`,
+     * as expanded or collapsed, and a custom command reaches a custom element
+     * with nothing said. Measured before this: a `command="--toggle"` button
+     * opened a Popover and its node had no expanded state. React Aria's trigger
+     * says `aria-expanded` on every overlay it opens.
+     *
+     * From the first command on, so nothing is written onto markup a server
+     * sent until a reader presses. A plain invoker is also pointed at the host
+     * through `ariaControlsElements`, which writes no attribute.
+     */
+    private note;
+    /** Writes the host's state on each invoker it tells, forgetting one that has left. */
+    private tell;
+    /**
+     * Says `open` on one invoker: a Helix control through its `expanded`
+     * property, which its own button carries and which puts nothing in the
+     * markup, and a plain element through `aria-expanded`.
+     */
+    private write;
     hostConnected(): void;
+    hostUpdated(): void;
     hostDisconnected(): void;
 }

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

@@ -6,24 +6,78 @@ export class HelixFallbackCommandEvent extends Event {
         this.source = source;
     }
 }
+const OPENING = new Set(['--show', '--toggle']);
 export class CommandController {
     constructor(host, options) {
+        this.invokers = new Set();
+        this.theirs = new WeakSet();
         this.handle = (event) => {
             const command = event.command;
             const run = this.options.commands[command];
             if (!run) {
                 return;
             }
-            run(event.source);
+            const source = event.source;
+            if (OPENING.has(command)) {
+                this.note(source);
+            }
+            run(source);
         };
         this.host = host;
         this.options = options;
         host.addController(this);
     }
+    note(source) {
+        if (!this.options.expanded || !source || this.invokers.has(source) || this.theirs.has(source)) {
+            return;
+        }
+        if (source.hasAttribute('aria-expanded')) {
+            this.theirs.add(source);
+            return;
+        }
+        this.invokers.add(source);
+        if (!source.localName.includes('-') && 'ariaControlsElements' in source) {
+            ;
+            source.ariaControlsElements = [
+                this.host,
+            ];
+        }
+        this.tell();
+    }
+    tell() {
+        const expanded = this.options.expanded;
+        if (!expanded) {
+            return;
+        }
+        const open = expanded();
+        for (const invoker of this.invokers) {
+            if (invoker.isConnected) {
+                this.write(invoker, open);
+            }
+            else {
+                this.invokers.delete(invoker);
+            }
+        }
+    }
+    write(invoker, open) {
+        if (invoker.localName.includes('-')) {
+            ;
+            invoker.expanded = open;
+        }
+        else if (invoker.getAttribute('aria-expanded') !== String(open)) {
+            invoker.setAttribute('aria-expanded', String(open));
+        }
+    }
     hostConnected() {
         this.host.addEventListener('command', this.handle);
     }
+    hostUpdated() {
+        this.tell();
+    }
     hostDisconnected() {
         this.host.removeEventListener('command', this.handle);
+        for (const invoker of this.invokers) {
+            this.write(invoker, false);
+        }
     }
 }

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

@@ -25,6 +25,13 @@ export type Placement = 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'lef
 export interface FloatingOptions {
     /** The element being pointed at. */
     anchor: () => HTMLElement | null | undefined;
+    /**
+     * How far to slide the floating element along the side it is placed on, in
+     * pixels: rightward on the top or the bottom, downward on the left or the
+     * right, and toward the end of the line where the placement names `-end`.
+     * Floating UI's `crossAxis` offset, React Aria's `crossOffset`.
+     */
+    crossOffset?: number | (() => number);
     /**
      * An element to point at the anchor, positioned against whichever side the
      * floating element landed on.
@@ -32,13 +39,20 @@ export interface FloatingOptions {
     arrow?: () => HTMLElement | null | undefined;
     /** The element being placed. */
     floating: () => HTMLElement | null | undefined;
+    /**
+     * How close to the window's edges the floating element may come, in
+     * pixels, when it slides or is capped to fit, and, where it is given, when
+     * it flips. Defaults to 8 for the first two and none for flipping. React
+     * Aria's `containerPadding`, Radix's `collisionPadding`.
+     */
+    padding?: number | (() => number | undefined);
     /**
      * Whether to try another side when the preferred one does not fit.
      *
      * On by default. A menu that opens off the bottom of the window is one the
      * reader cannot use.
      */
-    flip?: boolean;
+    flip?: boolean | (() => boolean);
     /**
      * Told the placement the element landed on, after every measurement, and
      * how wide the window leaves it room to be.

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

@@ -37,17 +37,24 @@ export class FloatingController {
             const preferred = typeof this.options.placement === 'function'
                 ? this.options.placement()
                 : this.options.placement;
-            const middleware = [offset(gap ?? 0)];
+            const cross = typeof this.options.crossOffset === 'function'
+                ? this.options.crossOffset()
+                : (this.options.crossOffset ?? 0);
+            const asked = typeof this.options.padding === 'function' ? this.options.padding() : this.options.padding;
+            const margin = asked ?? 8;
+            const edge = asked === undefined ? {} : { padding: asked };
+            const middleware = [offset({ crossAxis: cross, mainAxis: gap ?? 0 })];
             let room;
-            if (this.options.flip !== false) {
+            const flips = typeof this.options.flip === 'function' ? this.options.flip() : this.options.flip;
+            if (flips !== false) {
                 const side = (preferred ?? 'bottom-start').split('-')[0];
                 middleware.push(flip(side === 'left' || side === 'right'
-                    ? { crossAxis: 'alignment', fallbackAxisSideDirection: 'end' }
-                    : {}));
+                    ? { crossAxis: 'alignment', fallbackAxisSideDirection: 'end', ...edge }
+                    : edge));
             }
             if (this.options.shift !== false) {
                 const inside = this.options.within?.();
-                middleware.push(shift({ padding: 8, ...(inside ? { boundary: inside } : {}) }));
+                middleware.push(shift({ padding: margin, ...(inside ? { boundary: inside } : {}) }));
             }
             if (this.options.resize !== false) {
                 middleware.push(size({
@@ -56,7 +63,7 @@ export class FloatingController {
                         elements.floating.style.setProperty('--floating-available-block-size', `${Math.round(availableHeight)}px`);
                         elements.floating.style.setProperty('--floating-anchor-inline-size', `${matchedInlineSize(rects.reference.width, availableWidth)}px`);
                     },
-                    padding: 8,
+                    padding: margin,
                 }));
             }
             if (pointer) {

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

@@ -21,6 +21,12 @@ export interface PopoverOptions {
     boundary?: () => Element | readonly (Element | null | undefined)[] | null | undefined;
     /** Space between the anchor and the surface, in pixels. */
     offset?: number | (() => number);
+    /** Whether the surface may move to the other side to fit. On by default. See `FloatingController`. */
+    flip?: boolean | (() => boolean);
+    /** How far to slide the surface along its side, in pixels. See `FloatingController`. */
+    crossOffset?: number | (() => number);
+    /** How close to the window's edges the surface may come, in pixels. See `FloatingController`. */
+    padding?: number | (() => number | undefined);
     /**
      * A box to keep the surface inside, instead of the viewport.
      *

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

@@ -10,6 +10,9 @@ export class PopoverController {
             ...(options.arrow === undefined ? {} : { arrow: options.arrow }),
             floating: options.surface,
             ...(options.offset === undefined ? {} : { offset: options.offset }),
+            ...(options.crossOffset === undefined ? {} : { crossOffset: options.crossOffset }),
+            ...(options.flip === undefined ? {} : { flip: options.flip }),
+            ...(options.padding === undefined ? {} : { padding: options.padding }),
             ...(options.onPlace === undefined ? {} : { onPlace: options.onPlace }),
             ...(options.placement === undefined ? {} : { placement: options.placement }),
             ...(options.within === undefined ? {} : { within: options.within }),

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

@@ -142,6 +142,10 @@ export const MixinField = (Base) => {
             this.refreshFeedback();
         }
         copyValidity(control) {
+            if (!control.willValidate) {
+                this.internals.setValidity({});
+                return;
+            }
             const message = control.validity.valueMissing && this.valueMissingMessage
                 ? this.valueMissingMessage
                 : control.validationMessage;

package/dist/mixins/mixin-picker-feedback/mixin-picker-feedback.js

@@ -57,7 +57,7 @@ export const MixinPickerFeedback = (Base) => {
         renderPickerFeedback() {
             return this.feedback === ''
                 ? nothing
-                : html `<p part="feedback" id="feedback">${this.feedback}</p>`;
+                : html `<p part="feedback" id="feedback" role="alert">${this.feedback}</p>`;
         }
     }
     __decorate([

package/dist/utils/elapsed-time/elapsed-time.js

@@ -1,4 +1,4 @@
-import { UNITS as TIME_UNITS } from '../relative-time/relative-time.js';
+import { roundedCount, UNITS as TIME_UNITS } from '../relative-time/relative-time.js';
 const held = new Map();
 const dated = new Map();
 const UNITS = TIME_UNITS.slice(1, 4);
@@ -44,15 +44,9 @@ export const elapsedTime = (locale) => {
             const format = sameYear ? dates[0] : dates[1];
             return { next: Number.POSITIVE_INFINITY, text: format.format(from) };
         }
-        let index = 0;
-        for (let at = 0; at < UNITS.length; at += 1) {
-            if (size >= UNITS[at].ms) {
-                index = at;
-            }
-        }
-        const chosen = UNITS[index];
-        const count = Math.trunc(size / chosen.ms);
-        const remaining = Math.min(chosen.ms - (size % chosen.ms), HORIZON - size);
+        const growing = elapsed > 0;
+        const { count, index, next } = roundedCount(size, UNITS, growing);
+        const remaining = growing ? Math.min(next, HORIZON - size) : next;
         return {
             next: Math.max(1000, Math.min(remaining, 3_600_000)),
             text: short[index].format(count),

package/dist/utils/relative-time/relative-time.d.ts

@@ -2,10 +2,32 @@
  * How long each unit lasts, in milliseconds, largest last. `elapsedTime`
  * reads its minute, hour and day from here.
  */
-export declare const UNITS: Array<{
+export declare const UNITS: Unit[];
+/** One unit of `UNITS`. */
+type Unit = {
     ms: number;
     unit: Intl.RelativeTimeFormatUnit;
-}>;
+};
+/**
+ * A size of time as a rounded count of one of `units`, and how long that
+ * count holds while the size grows (`growing`, a moment gone) or shrinks (a
+ * moment to come).
+ *
+ * **Rounded, as Shoelace's relative time rounds.** Truncated, a date 48 hours
+ * ahead, measured a few milliseconds later, read "tomorrow", and 59 minutes
+ * read "59 minutes" while 61 read "1 hour". A count that rounds up to the next
+ * unit's size reads in that unit: 59.6 minutes is 1 hour, 6.6 days is 1 week.
+ *
+ * `units` run smallest first and the size is at least the first of them.
+ * Exported for `elapsedTime`, which reads its minute, hour and day the same way.
+ */
+export declare const roundedCount: <U extends {
+    ms: number;
+}>(size: number, units: readonly U[], growing: boolean) => {
+    count: number;
+    index: number;
+    next: number;
+};
 /** What one timestamp reads as, and when that stops being true. */
 export interface Relative {
     /**
@@ -42,3 +64,4 @@ export interface RelativeOptions {
  * says aloud and what every caller wanted before Format Date offered the rest.
  */
 export declare const relativeTime: (locale: string, options?: RelativeOptions) => ((from: Date, now: Date) => Relative);
+export {};

package/dist/utils/relative-time/relative-time.js

@@ -8,6 +8,32 @@ export const UNITS = [
     { ms: 2_629_800_000, unit: 'month' },
     { ms: 31_557_600_000, unit: 'year' },
 ];
+export const roundedCount = (size, units, growing) => {
+    let index = 0;
+    for (let at = 1; at < units.length; at += 1) {
+        if (size >= units[at].ms) {
+            index = at;
+        }
+    }
+    const ms = (at) => units[at].ms;
+    let count = Math.round(size / ms(index));
+    while (index + 1 < units.length && count * ms(index) >= ms(index + 1)) {
+        index += 1;
+        count = Math.round(size / ms(index));
+    }
+    if (growing) {
+        return { count, index, next: (count + 0.5) * ms(index) - size };
+    }
+    const below = [(count - 0.5) * ms(index)];
+    if (size >= ms(index)) {
+        below.push(ms(index));
+    }
+    if (index > 0) {
+        below.push((Math.ceil(ms(index) / ms(index - 1)) - 0.5) * ms(index - 1));
+    }
+    const floor = Math.max(...below.filter((at) => at <= size));
+    return { count, index, next: size - floor + 1 };
+};
 export const relativeTime = (locale, options = {}) => {
     const numeric = options.numeric ?? 'auto';
     const style = options.style ?? 'long';
@@ -30,17 +56,11 @@ export const relativeTime = (locale, options = {}) => {
                 text: found.format(elapsed > 0 ? 0 : -0, 'second'),
             };
         }
-        let chosen = UNITS[1];
-        for (const unit of UNITS) {
-            if (size >= unit.ms) {
-                chosen = unit;
-            }
-        }
-        const count = Math.trunc(elapsed / chosen.ms);
-        const remaining = chosen.ms - (size % chosen.ms);
+        const { count, index, next } = roundedCount(size, UNITS.slice(1), elapsed < 0);
+        const chosen = UNITS[index + 1];
         return {
-            next: Math.max(1000, Math.min(remaining, 3_600_000)),
-            text: found.format(count, chosen.unit),
+            next: Math.max(1000, Math.min(next, 3_600_000)),
+            text: found.format(elapsed < 0 ? -count : count, chosen.unit),
         };
     };
 };

package/dist/utils/report-runtime/report-runtime.d.ts

@@ -34,6 +34,8 @@ export type RuntimeKind =
  | 'misread-direction'
 /** A React handler prop names an event the element never dispatches itself. Development builds only. */
  | 'misplaced-handler'
+/** A Chat was given turns both as children and as `turns`, which it draws as two runs. */
+ | 'mixed-turns'
 /** An Image has no `alt`, so a screen reader announces its file name. */
  | 'missing-alt'
 /** The three.js driver could not load its layout, so the notes stay where they started. */

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.170.0";
+export declare const VERSION = "0.172.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.170.0';
+export const VERSION = '0.172.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.170.0",
+  "version": "0.172.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -62,11 +62,11 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.170.0"
+    "@fusion.dev/helix-icons": "0.172.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.170.0",
-    "@fusion.dev/helix-testing": "0.170.0",
+    "@fusion.dev/helix-cem": "0.172.0",
+    "@fusion.dev/helix-testing": "0.172.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },