@fusion.dev/helix-core 0.210.0 → 0.211.1

package/dist/controllers/aria-forward-controller/aria-forward-controller.js

@@ -3,6 +3,7 @@ import { elementById } from '../../utils/element-by-id/element-by-id.js';
 import { labelsOf } from '../../utils/labels-of/labels-of.js';
 import { nameText } from '../../utils/name-text/name-text.js';
 const RELATIONSHIPS = [
+    ['aria-controls', 'ariaControlsElements'],
     ['aria-describedby', 'ariaDescribedByElements'],
     ['aria-labelledby', 'ariaLabelledByElements'],
 ];
@@ -10,7 +11,6 @@ const STATES = [
     'aria-current',
     'aria-expanded',
     'aria-haspopup',
-    'aria-controls',
     'aria-invalid',
     'aria-pressed',
     'aria-required',

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

@@ -68,6 +68,15 @@ export declare class Heights {
      * one of them back at the estimate at the moment the reader is looking at them.
      */
     shift(by: number): void;
+    /**
+     * Adds `by` to every height that has been seen, for a gap that changed.
+     *
+     * Each item counts the gap after it as part of its own height, so a gap that
+     * grows by twelve pixels grows every measured item by twelve, the ones no
+     * longer drawn included. The unmeasured ones follow the estimate, which
+     * carries the gap already.
+     */
+    pad(by: number): void;
     /**
      * Drops everything, for a set that is no longer the same set.
      *

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

@@ -70,6 +70,16 @@ export class Heights {
         this.dirty = 0;
         this.changes += 1;
     }
+    pad(by) {
+        if (by === 0 || this.seen.size === 0) {
+            return;
+        }
+        for (const [index, size] of this.seen) {
+            this.seen.set(index, Math.max(1, Math.round((size + by) * 64) / 64));
+        }
+        this.dirty = 0;
+        this.changes += 1;
+    }
     forget() {
         this.seen.clear();
         this.dirty = 0;

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

@@ -172,12 +172,18 @@ export declare class VirtualizeController implements ReactiveController {
     /** Room `shift` added above the window, owed to the scroll offset once drawn. */
     private owed;
     /**
-     * The drawn rows' height on the straight line, read once per estimate.
+     * The drawn rows' own height on the straight line, read once per estimate,
+     * and without the gap, which `line` adds as it is now.
      *
      * Undefined until a host that offers `rows` has drawn some on the uniform
      * path, and again after `forget`.
      */
     private sample;
+    /**
+     * The gap the heights and the line were last squared with, which `line`
+     * reads, so the gap the host has now is taken up in `respace` alone.
+     */
+    private spaced;
     /** The length of the set when `endInSight` last answered true. */
     private askedAt;
     /**
@@ -317,6 +323,24 @@ export declare class VirtualizeController implements ReactiveController {
      * Reading the drawn rows once corrects the slope, and it is still a line.
      */
     private line;
+    /** How tall one item's own row is on the straight line, without the gap. */
+    private row;
+    /**
+     * Moves everything to a gap that changed, and keeps the reader on the item
+     * they were on.
+     *
+     * **Each item counts the gap after it as part of its own height**, so a gap
+     * that changes changes every item. The straight line reads the gap as it is
+     * now, and every height measured with the old one moves by the difference,
+     * drawn or not. Left alone, both kept the old gap while the rows drawn
+     * between the spacers took the new one, so the set grew or shrank as the
+     * window did: in WebKit, End on 1,000 rows whose gap went from 0 to 12 left
+     * the last row 72 pixels below the box once the window lost six rows.
+     *
+     * The reader's place is owed to the scroll offset and written after the
+     * render, as `shift` does, because a gap that grows has no room for it yet.
+     */
+    private respace;
     /** The space the host draws between two items, which each item counts. */
     private gap;
     /**

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

@@ -154,6 +154,7 @@ export class VirtualizeController {
         this.watch();
         const box = this.options.container();
         const total = Math.max(0, this.options.count());
+        this.respace(box, total);
         const size = this.line();
         if (!box) {
             return;
@@ -196,8 +197,35 @@ export class VirtualizeController {
         return { after: Math.max(0, (total - last) * size), before: first * size, first, last };
     }
     line() {
+        return this.row() + (this.spaced ?? this.gap());
+    }
+    row() {
         const estimate = Math.max(1, this.options.estimate());
-        return this.sample?.estimate === estimate ? this.sample.size : estimate + this.gap();
+        return this.sample?.estimate === estimate ? this.sample.size : estimate;
+    }
+    respace(box, total) {
+        const gap = this.gap();
+        const was = this.spaced;
+        if (was === undefined) {
+            this.spaced = gap;
+            return;
+        }
+        if (was === gap) {
+            return;
+        }
+        const top = box ? this.offset(box) : 0;
+        const anchor = this.measuring() ? (this.target ?? this.indexAt(top, total)) : 0;
+        const from = this.measuring() ? this.startOf(anchor, total) : this.line();
+        this.heights.pad(gap - was);
+        this.spaced = gap;
+        const moved = this.measuring()
+            ? this.startOf(anchor, total) - from
+            : (top / from) * this.line() - top;
+        this.settling = 0;
+        if (box && top > 0 && moved !== 0 && (this.options.anchor?.() ?? true)) {
+            this.owed += moved;
+            this.host.requestUpdate();
+        }
     }
     gap() {
         return Math.max(0, this.options.gap?.() ?? 0);
@@ -215,8 +243,11 @@ export class VirtualizeController {
         const uneven = Math.max(...seen) - Math.min(...seen) > 1;
         if (this.sample?.estimate !== estimate) {
             const was = this.line();
-            const size = Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length) + this.gap();
-            this.sample = { estimate, size };
+            this.sample = {
+                estimate,
+                size: Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length),
+            };
+            const size = this.line();
             if (Math.abs(size - was) >= 0.5) {
                 const box = this.options.container();
                 if (box && this.scrolled(box) > 0) {
@@ -337,6 +368,7 @@ export class VirtualizeController {
         this.settle();
     }
     settle() {
+        this.respace(this.options.container(), Math.max(0, this.options.count()));
         if (!this.measuring()) {
             this.sampleRows();
             return;

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixi
 export { MixinSegmentedField, type MixinSegmentedFieldInterface, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
 export { MixinSelectableItem, type MixinSelectableItemInterface, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
 export { MixinTokens, type MixinTokensInterface } from './mixins/mixin-tokens/mixin-tokens.js';
-export { MixinViewport, type ViewportControlsPlacement, type ViewportElement, type ViewportGestureLabels, type ViewportGestureMode, type ViewportGestures, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
+export { MixinViewport, type ViewportControlAxes, type ViewportControlsPlacement, type ViewportElement, type ViewportGestureLabels, type ViewportGestureMode, type ViewportGestures, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
 export { assignSlot, assignSlots } from './utils/assign-slots/assign-slots.js';

package/dist/mixins/mixin-viewport/mixin-viewport.d.ts

@@ -1,4 +1,5 @@
 import { nothing, type TemplateResult } from 'lit';
+import { type StaticValue } from 'lit/static-html.js';
 import { FullscreenController } from '../../controllers/fullscreen-controller/fullscreen-controller.js';
 import { IdleController } from '../../controllers/idle-controller/idle-controller.js';
 import type { ViewportPanDetail, ViewportZoomDetail } from '../../events/events.js';
@@ -8,6 +9,15 @@ type Constructor<T> = new (...args: any[]) => T;
 export type ViewportWay = 'up' | 'down' | 'start' | 'end';
 /** Where the controls sit, in the corner words the rest of the library uses. */
 export type ViewportControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * The styled axes a surface's controls are drawn with, which the styled tier
+ * says and the headless tier leaves unset, having nothing to paint: `raised`,
+ * since the controls float over the drawing, and the `material` under them.
+ */
+export interface ViewportControlAxes {
+    material?: 'frosted' | 'glass' | 'transparent' | undefined;
+    raised: boolean;
+}
 /** Which gestures a surface takes from the page. */
 export type ViewportGestures = 'activate' | 'always' | 'cooperative';
 /**
@@ -112,6 +122,14 @@ export declare class ViewportElement {
     protected drawsControls(group: string): boolean;
     /** More buttons for the group of controls, after zoom, for a family that adds its own. */
     protected renderMoreControls(): TemplateResult | typeof nothing;
+    /**
+     * The element each control is drawn as: the family's own Icon Button, which
+     * the family names with `this.tag('icon-button')` so its source says what it
+     * renders and its imports register it.
+     */
+    protected get controlTag(): StaticValue;
+    /** The styled axes each control is drawn with, unset on the headless tier. */
+    protected get controlAxes(): ViewportControlAxes;
     /** Answers a key the family adds, and says whether it did. */
     protected handleMoreKeys(event: KeyboardEvent): boolean;
     /** What one pan control is called, for a family that draws its own. */

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { html as staticHtml } from 'lit/static-html.js';
 import { FullscreenController } from '../../controllers/fullscreen-controller/fullscreen-controller.js';
 import { IdleController } from '../../controllers/idle-controller/idle-controller.js';
 import { ToolbarController } from '../../controllers/toolbar-controller/toolbar-controller.js';
@@ -8,6 +9,7 @@ import { inlineStep } from '../../utils/inline-step/inline-step.js';
 import { isRtl } from '../../utils/is-rtl/is-rtl.js';
 import { numberConverter, timeConverter } from '../../utils/number-converter/number-converter.js';
 import { formatWords, words } from '../../words/words.js';
+const stopPress = (event) => event.stopPropagation();
 const HINT_SHOWS = 1600;
 export const MixinViewport = (Base) => {
     class Viewport extends Base {
@@ -260,6 +262,12 @@ export const MixinViewport = (Base) => {
                         ? this.panLeftLabel
                         : this.panRightLabel;
         }
+        get controlTag() {
+            return this.tag('icon-button');
+        }
+        get controlAxes() {
+            return { raised: false };
+        }
         panGlyph(way) {
             return { down: '↓', left: '←', right: '→', up: '↑' }[this.sideOf(way)] ?? '';
         }
@@ -283,40 +291,94 @@ export const MixinViewport = (Base) => {
                 return nothing;
             }
             const [up, start, end, down] = ['up', 'start', 'end', 'down'].map((way) => this.panGlyph(way));
-            return html `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
+            const button = this.controlTag;
+            const { material, raised } = this.controlAxes;
+            const ground = material ?? nothing;
+            return staticHtml `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
         ${pan
-                ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
+                ? staticHtml `<${button}
+                  part="pan-up"
+                  exportparts="button: pan-up-button, live: pan-up-live, spinner: pan-up-spinner, text: pan-up-text"
+                  label=${this.panLabel('up')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('up')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-up-icon">${up}</slot>
-                </button>
-                <button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
+                </${button}>
+                <${button}
+                  part="pan-start"
+                  exportparts="button: pan-start-button, live: pan-start-live, spinner: pan-start-spinner, text: pan-start-text"
+                  label=${this.panLabel('start')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('start')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-start-icon">${start}</slot>
-                </button>
-                <button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
+                </${button}>
+                <${button}
+                  part="pan-end"
+                  exportparts="button: pan-end-button, live: pan-end-live, spinner: pan-end-spinner, text: pan-end-text"
+                  label=${this.panLabel('end')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('end')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-end-icon">${end}</slot>
-                </button>
-                <button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
+                </${button}>
+                <${button}
+                  part="pan-down"
+                  exportparts="button: pan-down-button, live: pan-down-live, spinner: pan-down-spinner, text: pan-down-text"
+                  label=${this.panLabel('down')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('down')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-down-icon">${down}</slot>
-                </button>`
+                </${button}>`
                 : nothing}
         ${zoom
-                ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
+                ? staticHtml `<${button}
+                  part="zoom-in"
+                  exportparts="button: zoom-in-button, live: zoom-in-live, spinner: zoom-in-spinner, text: zoom-in-text"
+                  label=${this.zoomInLabel}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.zoom(1)}
+                  @helix-press=${stopPress}
+                >
                   <slot name="zoom-in-icon">+</slot>
-                </button>
-                <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
+                </${button}>
+                <${button}
+                  part="zoom-out"
+                  exportparts="button: zoom-out-button, live: zoom-out-live, spinner: zoom-out-spinner, text: zoom-out-text"
+                  label=${this.zoomOutLabel}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.zoom(-1)}
+                  @helix-press=${stopPress}
+                >
                   <slot name="zoom-out-icon">−</slot>
-                </button>`
+                </${button}>`
                 : nothing}
         ${more}
         ${fullscreen
-                ? html `<button
+                ? staticHtml `<${button}
                 part="fullscreen"
-                aria-label=${this.fullscreenLabel}
+                exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
                 aria-pressed=${this.filled ? 'true' : 'false'}
-                type="button"
+                label=${this.fullscreenLabel}
+                material=${ground}
+                ?raised=${raised}
                 @click=${this.toggleFullscreen}
+                @helix-press=${stopPress}
               >
                 <slot name="fullscreen-icon">⤢</slot>
-              </button>`
+              </${button}>`
                 : nothing}
       </div>`;
         }

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.210.0";
+export declare const VERSION = "0.211.1";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.210.0';
+export const VERSION = '0.211.1';

package/package.json

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