@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/tour/wait.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Calls `then` once `ready` answers yes: at once if it already does, and
+ * otherwise on the first change to the tree under `root` after which it does.
+ *
+ * What a tour's `wait` stop rests on: the tour waits for the element the stop
+ * names to be on the page, such as a menu the reader has to open, and moves on
+ * by itself. Returns a function that stops waiting.
+ */
+export declare const waitFor: (root: Node, ready: () => boolean, then: () => void) => (() => void);
+/** Whether an element is on the page and draws something a reader can see. */
+export declare const onPage: (element: Element | null | undefined) => boolean;

package/dist/tour/wait.js

@@ -0,0 +1,19 @@
+export const waitFor = (root, ready, then) => {
+    if (ready()) {
+        then();
+        return () => { };
+    }
+    if (typeof MutationObserver === 'undefined') {
+        return () => { };
+    }
+    const watcher = new MutationObserver(() => {
+        if (ready()) {
+            watcher.disconnect();
+            then();
+        }
+    });
+    watcher.observe(root, { attributes: true, childList: true, subtree: true });
+    return () => watcher.disconnect();
+};
+export const onPage = (element) => element?.isConnected === true &&
+    (typeof element.getClientRects !== 'function' || element.getClientRects().length > 0);

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

@@ -30,6 +30,7 @@ import { type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/trend
  *
  * @slot - The metric that moved.
+ * @slot icon - Replaces the arrow, such as with a glyph of your own set. Slot the one for the current direction.
  * @slot label - The period the metric moved over.
  *
  * @csspart direction - The direction as a word, for people who cannot see the arrow.
@@ -77,6 +78,18 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * The word read out after the direction when the move is a setback.
      */
     worseLabel: string;
+    /**
+     * The arrow for the direction, as the fallback of the `icon` slot.
+     *
+     * Slot fallback, so the page replaces it by slotting a glyph of its own and
+     * a trend with none draws the arrow it always did; and a method, so the tier
+     * above replaces it by overriding. The word beside it still says the
+     * direction either way.
+     */
+    protected renderIcon(icon: {
+        content: string;
+        viewBox: string;
+    }): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/trend/root/trend-root.js

@@ -24,20 +24,25 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         this.upLabel = 'Up';
         this.worseLabel = 'worse';
     }
-    render() {
-        const direction = readDirection(this.direction);
-        const judgment = this.good && this.direction && this.direction !== 'neutral'
-            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
-            : '';
-        return html `<svg
+    renderIcon(icon) {
+        return html `<slot name="icon"
+      ><svg
         aria-hidden="true"
         data-glyph
         fill="currentColor"
         part="icon"
-        viewBox=${direction.icon.viewBox}
+        viewBox=${icon.viewBox}
       >
-        ${unsafeSVG(direction.icon.content)}
-      </svg>
+        ${unsafeSVG(icon.content)}
+      </svg></slot
+    >`;
+    }
+    render() {
+        const direction = readDirection(this.direction);
+        const judgment = this.good && this.direction && this.direction !== 'neutral'
+            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
+            : '';
+        return html `${this.renderIcon(direction.icon)}
       <span part="direction">${`${this[direction.word]}${judgment}`}</span>
       <slot></slot>
       <slot name="label"></slot>`;