@fusion.dev/helix-headless 0.31.0 → 0.33.0

package/dist/table/row/table-row.d.ts

@@ -17,6 +17,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The row's cells.
  */
 export declare class HelixHeadlessTableRow extends HelixElement {
+    /**
+     * @internal Read by the table to find its rows among its children, the way it
+     * finds its columns. Not a consumer's to read or set.
+     */
+    readonly isTableRow = true;
+    /** The table's rules this row holds, so the next ones replace them rather than pile up. */
+    private columnRules;
+    /**
+     * @internal Takes the rules the table wrote to line each cell up under its
+     * heading, called by that table. Not a consumer's to call: the rules are the
+     * table's, and they say which column a cell is in by counting, which only the
+     * table that holds the columns can do.
+     */
+    alignCells(rules: CSSStyleSheet): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/table/row/table-row.js

@@ -7,6 +7,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.isTableRow = true;
+        this.columnRules = undefined;
+    }
+    alignCells(rules) {
+        const root = this.renderRoot;
+        if (rules === this.columnRules || !(root instanceof ShadowRoot)) {
+            return;
+        }
+        root.adoptedStyleSheets = [
+            ...root.adoptedStyleSheets.filter((sheet) => sheet !== this.columnRules),
+            rules,
+        ];
+        this.columnRules = rules;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });

package/dist/toolbar/root/toolbar-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 { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, inlineStep } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
@@ -41,21 +41,22 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            const forward = this.axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-            const back = this.axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
             if (!KEYS.has(event.key) || claimed(event)) {
                 return;
             }
+            const along = inlineStep(this, event.key);
+            const forward = this.axis === 'horizontal' ? along === 1 : event.key === 'ArrowDown';
+            const back = this.axis === 'horizontal' ? along === -1 : event.key === 'ArrowUp';
             const controls = this.controls;
             const current = controls.findIndex((entry) => entry.contains(event.target));
             if (current === -1) {
                 return;
             }
             let next = current;
-            if (event.key === forward) {
+            if (forward) {
                 next = (current + 1) % controls.length;
             }
-            else if (event.key === back) {
+            else if (back) {
                 next = (current - 1 + controls.length) % controls.length;
             }
             else if (event.key === 'Home') {

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

@@ -52,9 +52,21 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
  *
  * @csspart arrow - The point, resting against the trigger.
+ * @csspart arrow-bottom - The point while the bubble is below its trigger, so on the bubble's top edge, beside `arrow`.
+ * @csspart arrow-left - The point while the bubble is left of its trigger, so on the bubble's right edge, beside `arrow`.
+ * @csspart arrow-right - The point while the bubble is right of its trigger, so on the bubble's left edge, beside `arrow`.
+ * @csspart arrow-top - The point while the bubble is above its trigger, so on the bubble's bottom edge, beside `arrow`.
  * @csspart tooltip - The bubble.
+ * @csspart tooltip-bottom - The bubble while it is below its trigger, beside `tooltip`.
+ * @csspart tooltip-left - The bubble while it is left of its trigger, beside `tooltip`.
+ * @csspart tooltip-right - The bubble while it is right of its trigger, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above its trigger, beside `tooltip`.
  *
  * @cssstate open - While the tooltip shows.
+ * @cssstate placed-bottom - While the bubble sits below its trigger.
+ * @cssstate placed-left - While the bubble sits to the left of its trigger.
+ * @cssstate placed-right - While the bubble sits to the right of its trigger.
+ * @cssstate placed-top - While the bubble sits above its trigger.
  */
 export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
     /**
@@ -150,6 +162,14 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * `FloatingController` for what happens if it is applied to the rest.
      */
     within: string;
+    /**
+     * The side of its trigger the bubble last landed on, which is not always
+     * `placement`: a bubble with no room there is moved.
+     *
+     * Undefined until the first placement, which the server never makes, so a
+     * part name it adds is never markup the server did not send.
+     */
+    private side?;
     private timer;
     /**
      * What is currently keeping the bubble up.

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { anchorElement, customElement, HelixElement, hostAria, MixinControllerOpen, PopoverController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 const GENERIC = new Set(['div', 'p', 'section', 'span']);
 let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpen(HelixElement) {
     constructor() {
@@ -33,6 +33,14 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
                 this.holds.clear();
                 this.hide();
             },
+            onPlace: (placement) => {
+                const side = placement.split('-')[0];
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-left', side === 'left');
+                this.toggleState('placed-right', side === 'right');
+                this.toggleState('placed-top', side === 'top');
+                this.side = side;
+            },
             placement: () => this.placement,
             surface: () => this.partNamed('tooltip'),
             within: () => this.enclosure,
@@ -235,9 +243,16 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         });
     }
     render() {
+        const side = this.side;
         return html `<slot></slot>
-      <div part="tooltip" popover="manual" role="tooltip">
-        <span part="arrow"></span>
+      <div
+        part="tooltip${side ? { bottom: ' tooltip-bottom', left: ' tooltip-left', right: ' tooltip-right', top: ' tooltip-top' }[side] : ''}"
+        popover="manual"
+        role="tooltip"
+      >
+        <span
+          part="arrow${side ? { bottom: ' arrow-bottom', left: ' arrow-left', right: ' arrow-right', top: ' arrow-top' }[side] : ''}"
+        ></span>
         <slot name="content" @slotchange=${this.handleContentChange}
           >${this.content}</slot
         >
@@ -271,6 +286,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTooltip.prototype, "within", void 0);
+__decorate([
+    state()
+], HelixHeadlessTooltip.prototype, "side", void 0);
 HelixHeadlessTooltip = __decorate([
     customElement('helix-headless-tooltip')
 ], HelixHeadlessTooltip);

package/dist/tour/root/tour-root.js

@@ -192,7 +192,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
             : html `<div
             part="spotlight"
             aria-hidden="true"
-            style=${`inset-block-start: ${spot.top}px; inset-inline-start: ${spot.left}px; block-size: ${spot.height}px; inline-size: ${spot.width}px`}
+            style=${`left: ${spot.left}px; top: ${spot.top}px; block-size: ${spot.height}px; inline-size: ${spot.width}px`}
           ></div>`}
       <slot></slot>`;
     }

package/dist/tour/stop/tour-stop.d.ts

@@ -46,6 +46,10 @@ import '../../button/index.js';
  *
  * @csspart actions - The row the controls sit in.
  * @csspart arrow - The point, which the floating pass places against the target.
+ * @csspart arrow-bottom - The point while the panel is below its target, so on the panel's top edge, beside `arrow`.
+ * @csspart arrow-left - The point while the panel is left of its target, so on the panel's right edge, beside `arrow`.
+ * @csspart arrow-right - The point while the panel is right of its target, so on the panel's left edge, beside `arrow`.
+ * @csspart arrow-top - The point while the panel is above its target, so on the panel's bottom edge, beside `arrow`.
  * @csspart back - The control that goes to the previous stop.
  * @csspart back-button - The inner control.
  * @csspart bubble - The panel that points at the target.
@@ -54,6 +58,11 @@ import '../../button/index.js';
  * @csspart next-button - The inner control.
  * @csspart skip - The control that leaves the tour.
  * @csspart skip-button - The inner control.
+ *
+ * @cssstate placed-bottom - While the panel sits below its target.
+ * @cssstate placed-left - While the panel sits to the left of its target.
+ * @cssstate placed-right - While the panel sits to the right of its target.
+ * @cssstate placed-top - While the panel sits above its target.
  */
 export declare class HelixHeadlessTourStop extends HelixElement {
     /**
@@ -98,6 +107,12 @@ export declare class HelixHeadlessTourStop extends HelixElement {
      * Label for the control that leaves the tour.
      */
     skipLabel: string;
+    /**
+     * The side of its target the panel last landed on, which names the arrow's
+     * second part. Undefined until the first placement, which the server never
+     * makes.
+     */
+    private side?;
     /** The element this stop is about, or null where the id resolves to nothing. */
     get target(): HTMLElement | null;
     private readonly floating;

package/dist/tour/stop/tour-stop.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, HelixTourAskEvent, hostAria, PopoverController, } from '@fusion.dev/helix-core';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
 let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
@@ -28,6 +28,14 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
                 return ((tour?.spotlightPadding ?? 0) + (this.partNamed('arrow')?.offsetWidth ?? 0) / Math.SQRT2);
             },
             onDismiss: () => { },
+            onPlace: (placement) => {
+                const side = placement.split('-')[0];
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-left', side === 'left');
+                this.toggleState('placed-right', side === 'right');
+                this.toggleState('placed-top', side === 'top');
+                this.side = side;
+            },
             placement: () => this.placement,
             surface: () => this.partNamed('bubble'),
         });
@@ -80,7 +88,10 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
     render() {
         return html `<div part="bubble" popover="manual" ?hidden=${!this.current}>
       ${''}
-      <div part="arrow" aria-hidden="true"></div>
+      <div
+        part="arrow${this.side ? { bottom: ' arrow-bottom', left: ' arrow-left', right: ' arrow-right', top: ' arrow-top' }[this.side] : ''}"
+        aria-hidden="true"
+      ></div>
       <div part="content"><slot></slot></div>
       <div part="actions">
         ${this.renderActions()}
@@ -118,6 +129,9 @@ __decorate([
 __decorate([
     property({ attribute: 'skip-label' })
 ], HelixHeadlessTourStop.prototype, "skipLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTourStop.prototype, "side", void 0);
 HelixHeadlessTourStop = __decorate([
     customElement('helix-headless-tour-stop')
 ], HelixHeadlessTourStop);

package/dist/tree/root/tree-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 { closestInstance, customElement, HelixElement, MixinCollection, MixinControllerActive, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { closestInstance, customElement, HelixElement, inlineStep, MixinCollection, MixinControllerActive, scrollItemIntoView, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
@@ -31,6 +31,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             if (!current || !this.items.includes(current) || !KEYS.has(event.key)) {
                 return;
             }
+            const along = inlineStep(this, event.key);
             if (event.key === 'ArrowDown') {
                 this.move(current, 1);
             }
@@ -43,7 +44,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             else if (event.key === 'End') {
                 this.focusOn(this.visibleItems.at(-1));
             }
-            else if (event.key === 'ArrowRight') {
+            else if (along === 1) {
                 if (current.isBranch && !current.open) {
                     current.requestOpen(true);
                     this.syncItems();
@@ -52,7 +53,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                     this.move(current, 1);
                 }
             }
-            else if (event.key === 'ArrowLeft') {
+            else if (along === -1) {
                 if (current.isBranch && current.open) {
                     current.requestOpen(false);
                     this.syncItems();

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

@@ -689,8 +689,15 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         ${drawIcon(this.playing ? pause : play)}
       </button>
       <span part="time">${clock(this.position)} / ${clock(this.knownDuration)}</span>
+      <!-- Left to right on every page. A player's timeline is a tape running
+           one way rather than a line of text, which is why its skip glyphs are
+           not mirrored and the left arrow rewinds whatever the script. Allowed
+           to follow the page, a range turns round on a right-to-left one, and
+           the arrows on the scrubber moved through time the other way to the
+           same arrows pressed on the video. -->
       <input
         part="scrubber"
+        dir="ltr"
         type="range"
         min="0"
         max=${Number.isFinite(this.knownDuration) && this.knownDuration > 0 ? this.knownDuration : 0}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.31.0",
-    "@fusion.dev/helix-icons": "0.31.0",
+    "@fusion.dev/helix-core": "0.33.0",
+    "@fusion.dev/helix-icons": "0.33.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.31.0",
-    "@fusion.dev/helix-testing": "0.31.0",
+    "@fusion.dev/helix-cem": "0.33.0",
+    "@fusion.dev/helix-testing": "0.33.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",