@fusion.dev/helix-headless 0.32.0 → 0.33.1

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.
@@ -103,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 {
@@ -34,6 +34,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
                 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'),
@@ -87,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()}
@@ -125,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.32.0",
+  "version": "0.33.1",
   "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.32.0",
-    "@fusion.dev/helix-icons": "0.32.0",
+    "@fusion.dev/helix-core": "0.33.1",
+    "@fusion.dev/helix-icons": "0.33.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.32.0",
-    "@fusion.dev/helix-testing": "0.32.0",
+    "@fusion.dev/helix-cem": "0.33.1",
+    "@fusion.dev/helix-testing": "0.33.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",