@fusion.dev/helix-headless 0.138.0 → 0.140.0

package/dist/area-chart/root/area-chart-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CHART_PLOT, customElement, drawTooltip, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, reportRuntime, seriesIndex, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -58,10 +58,14 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
             return;
         }
         this.warnedAboutNegatives = true;
-        console.warn(`<${this.localName}> read a negative number and drew it as none. Its bands are parts of a ` +
-            'total, and a part cannot be less than nothing: a band drawn below its neighbor would say ' +
-            'the part took some of the one beneath it away. A series that crosses zero is a line, so ' +
-            'reach for the line chart in this tier instead.');
+        reportRuntime({
+            kind: 'negative-value',
+            message: `<${this.localName}> read a negative number and drew it as none. Its bands are parts of a ` +
+                'total, and a part cannot be less than nothing: a band drawn below its neighbor would say ' +
+                'the part took some of the one beneath it away. A series that crosses zero is a line, so ' +
+                'reach for the line chart in this tier instead.',
+            tag: this.localName,
+        });
     }
     render() {
         const rows = this.sourceRows;

package/dist/avatar/group/avatar-group.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, reportRuntime } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 export const FOLDS_UP_TO = 12;
@@ -35,9 +35,13 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
         const limit = this.max ?? 0;
         if (limit > FOLDS_UP_TO && this.avatars.length > limit && !this.warned) {
             this.warned = true;
-            console.warn(`<${this.localName}> has max="${this.max}", past the ${FOLDS_UP_TO} the fold is written for, ` +
-                'so every avatar is shown and none are counted. Lower `max`, or hand the group the ' +
-                'avatars you want shown.');
+            reportRuntime({
+                kind: 'max-past-fold',
+                message: `<${this.localName}> has max="${this.max}", past the ${FOLDS_UP_TO} the fold is written for, ` +
+                    'so every avatar is shown and none are counted. Lower `max`, or hand the group the ' +
+                    'avatars you want shown.',
+                tag: this.localName,
+            });
         }
     }
     render() {

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

@@ -41,6 +41,7 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * @csspart label - The label next to the box.
  * @csspart mark - The check mark, or the dash when the box is indeterminate.
  * @csspart mark-checked - Added to `mark` while the box is checked.
+ * @csspart mark-dash - Added to `mark` while the box is indeterminate, and kept until the box is checked, so a mark that animates out leaves as the dash it was.
  * @csspart mark-indeterminate - Added to `mark` while the box is indeterminate.
  *
  * @cssstate checked - While the box is checked.
@@ -61,6 +62,17 @@ export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
      * The value submitted when the box is checked.
      */
     value: string;
+    /**
+     * Whether the mark draws the dash: from the moment the box is indeterminate
+     * until it is checked.
+     *
+     * **Kept past indeterminate, so a mark leaving the box leaves as what it
+     * was.** A stylesheet that shrinks the mark away drew the tick in the dash's
+     * place for the whole exit, since the shape is a mask and a mask swaps at
+     * once. Measured on Data Table's select-all, deselecting the one row that
+     * was selected: 15 frames of a shrinking tick where the dash had been.
+     */
+    private dashed;
     /** Focus is delegated to the input, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     private readonly handleChange;

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

@@ -16,6 +16,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.clicks = new HostClickController(this, () => this.partNamed('control'));
         this.indeterminate = false;
         this.value = 'on';
+        this.dashed = false;
         this.handleChange = (event) => {
             const input = event.target;
             const next = input.checked;
@@ -45,6 +46,12 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
     willUpdate(changed) {
         super.willUpdate(changed);
         this.internals.ariaRequired = this.required ? 'true' : null;
+        if (this.indeterminate) {
+            this.dashed = true;
+        }
+        else if (this.checked) {
+            this.dashed = false;
+        }
     }
     updated(changed) {
         super.updated(changed);
@@ -79,7 +86,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
           @input=${this.stopInner}
         />
         <span
-          part="mark${this.checked ? ' mark-checked' : ''}${this.indeterminate ? ' mark-indeterminate' : ''}"
+          part="mark${this.checked ? ' mark-checked' : ''}${this.indeterminate ? ' mark-indeterminate' : ''}${this.dashed ? ' mark-dash' : ''}"
           aria-hidden="true"
         ></span>
       </span>

package/dist/data-table/root/data-table-root.d.ts

@@ -86,6 +86,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart checkbox-label - Forwarded from the checkbox. The label is read by screen readers only.
  * @csspart checkbox-mark - The check mark, or the dash while some rows are selected.
  * @csspart checkbox-mark-checked - Added to `checkbox-mark` while its box is checked.
+ * @csspart checkbox-mark-dash - Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
  * @csspart empty - Shown when there are no rows, because none arrived or the filter matches none. While rows are loading, the `loading` part is shown in its place.
  * @csspart footer - The region below the grid.

package/dist/data-table/root/data-table-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, fillTemplate, formatNumbers, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, reportRuntime, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -308,10 +308,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             return;
         }
         this.warnedAboutSize = true;
-        console.warn(`<${this.localName}> is drawing ${drawn} rows at once, which is past the ${HelixHeadlessDataTable_1.COMFORTABLE} ` +
-            'it stays responsive to: every row is rendered, so this costs roughly 37 microseconds each and ' +
-            'crosses an interaction budget around 2,700. Set `page-size` to paginate, or `mode="server"` ' +
-            'to hand it one page at a time with `total` describing the whole result.');
+        reportRuntime({
+            kind: 'too-many-rows',
+            message: `<${this.localName}> is drawing ${drawn} rows at once, which is past the ${HelixHeadlessDataTable_1.COMFORTABLE} ` +
+                'it stays responsive to: every row is rendered, so this costs roughly 37 microseconds each and ' +
+                'crosses an interaction budget around 2,700. Set `page-size` to paginate, or `mode="server"` ' +
+                'to hand it one page at a time with `total` describing the whole result.',
+            tag: this.localName,
+        });
     }
     get view() {
         if (this.mode === 'server') {
@@ -414,7 +418,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
         if (this.selectable && !this.warnedAboutKey && typeof window !== 'undefined') {
             this.warnedAboutKey = true;
-            console.warn(`<${this.localName} selectable> has no \`row-key\`, so it knows each row by its place in the result, and a sort, a filter or new data selects a different row than the one that was chosen. Set \`row-key\` to the field that identifies a row.`);
+            reportRuntime({
+                kind: 'missing-row-key',
+                message: `<${this.localName} selectable> has no \`row-key\`, so it knows each row by its place in the result, and a sort, a filter or new data selects a different row than the one that was chosen. Set \`row-key\` to the field that identifies a row.`,
+                tag: this.localName,
+            });
         }
         return String(place);
     }
@@ -591,7 +599,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
       part="checkbox"
       exportparts="box: checkbox-box, control: checkbox-control, feedback: checkbox-feedback,
         field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark,
-        mark-checked: checkbox-mark-checked, mark-indeterminate: checkbox-mark-indeterminate"
+        mark-checked: checkbox-mark-checked, mark-dash: checkbox-mark-dash,
+        mark-indeterminate: checkbox-mark-indeterminate"
       aria-label=${name}
       .checked=${checked}
       .indeterminate=${indeterminate}

package/dist/filter-input/field/filter-field.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { DEFAULT_FILTER_OPERATORS } from '../grammar.js';
@@ -21,7 +21,11 @@ let HelixHeadlessFilterField = class HelixHeadlessFilterField extends HelixEleme
     get defaultOperator() {
         const marked = this.operators.filter((operator) => operator.default);
         if (marked.length > 1) {
-            console.warn(`\`${this.name || 'A filter field'}\` names ${marked.length} default operators, and a chip can only leave one unwritten. Mark one.`);
+            reportRuntime({
+                kind: 'two-default-operators',
+                message: `\`${this.name || 'A filter field'}\` names ${marked.length} default operators, and a chip can only leave one unwritten. Mark one.`,
+                tag: this.localName,
+            });
         }
         return marked[0] ?? null;
     }

package/dist/rating/root/rating-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { valueAsNumber as asNumber, customElement, numberAsValue as fromNumber, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { valueAsNumber as asNumber, customElement, numberAsValue as fromNumber, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -169,9 +169,13 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.sync();
         if (this.floor !== this.min && !this.warned) {
             this.warned = true;
-            console.warn(`<${this.localName}> has min="${this.min}", which is not a score between 0 and its max of ` +
-                `${this.max}, so the lowest score it offers is ${this.floor}. Put min inside the marks, ` +
-                'or move max.');
+            reportRuntime({
+                kind: 'min-out-of-range',
+                message: `<${this.localName}> has min="${this.min}", which is not a score between 0 and its max of ` +
+                    `${this.max}, so the lowest score it offers is ${this.floor}. Put min inside the marks, ` +
+                    'or move max.',
+                tag: this.localName,
+            });
         }
     }
     willUpdate(changed) {

package/dist/tooltip/root/tooltip-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { anchorElement, customElement, elementById, HelixElement, hostAria, MixinControllerOpen, PopoverController, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, elementById, HelixElement, hostAria, MixinControllerOpen, PopoverController, reportRuntime, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const GENERIC = new Set(['div', 'p', 'section', 'span']);
@@ -175,17 +175,25 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         }
         this.audited = true;
         if (this.for === '') {
-            console.warn(`<${this.localName}> is wrapping its trigger rather than naming one, so its text ` +
-                "reaches no screen reader: a description in this element's shadow root cannot be " +
-                'referenced from a trigger in the light DOM. Give this tooltip an `id`, set `for` to ' +
-                'the trigger\'s id, and add `aria-describedby="<that id>"` to the trigger.');
+            reportRuntime({
+                kind: 'wrapped-trigger',
+                message: `<${this.localName}> is wrapping its trigger rather than naming one, so its text ` +
+                    "reaches no screen reader: a description in this element's shadow root cannot be " +
+                    'referenced from a trigger in the light DOM. Give this tooltip an `id`, set `for` to ' +
+                    'the trigger\'s id, and add `aria-describedby="<that id>"` to the trigger.',
+                tag: this.localName,
+            });
             return;
         }
         const trigger = this.named;
         if (!trigger) {
-            console.warn(`<${this.localName} for="${this.for}"> found no element with that id in its own tree, ` +
-                'so it has nothing to describe and nothing to point at. Ids resolve per tree: an ' +
-                'element inside another shadow root is not reachable from here.');
+            reportRuntime({
+                kind: 'missing-trigger',
+                message: `<${this.localName} for="${this.for}"> found no element with that id in its own tree, ` +
+                    'so it has nothing to describe and nothing to point at. Ids resolve per tree: an ' +
+                    'element inside another shadow root is not reachable from here.',
+                tag: this.localName,
+            });
             return;
         }
         const names = `${trigger.getAttribute('aria-describedby') ?? ''} ${trigger.getAttribute('aria-labelledby') ?? ''}`
@@ -194,10 +202,14 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         if (this.id !== '' && names.includes(this.id)) {
             return;
         }
-        console.warn(`<${this.localName} for="${this.for}"> is not read out with its trigger. The link is ` +
-            'written from the trigger, not from here: give this tooltip an `id` and add ' +
-            '`aria-describedby="<that id>"` to the element it names. Written in your own markup ' +
-            'it survives server rendering, which is why this element will not write it for you.');
+        reportRuntime({
+            kind: 'unlinked-trigger',
+            message: `<${this.localName} for="${this.for}"> is not read out with its trigger. The link is ` +
+                'written from the trigger, not from here: give this tooltip an `id` and add ' +
+                '`aria-describedby="<that id>"` to the element it names. Written in your own markup ' +
+                'it survives server rendering, which is why this element will not write it for you.',
+            tag: this.localName,
+        });
     }
     connectedCallback() {
         super.connectedCallback();

package/dist/video/root/video-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, fillTemplate, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, SKIP_SECONDS, sameCopies, showCaption, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, fillTemplate, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -378,7 +378,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             await video.requestPictureInPicture();
         }
         catch (error) {
-            console.warn(`<${this.localName}> could not enter picture in picture. A press has to come from the reader, and one window holds it at a time.`, error);
+            reportRuntime({
+                detail: error,
+                kind: 'picture-in-picture-refused',
+                message: `<${this.localName}> could not enter picture in picture. A press has to come from the reader, and one window holds it at a time.`,
+                tag: this.localName,
+            });
         }
     }
     willUpdate(changed) {