@fusion.dev/helix-headless 0.0.0-dev → 0.0.3

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

@@ -68,9 +68,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     constructor() {
         super(...arguments);
         /**
-         * Whether the tour is running.
+         * Label for the control that goes back, handed to every stop.
          */
-        this.open = false;
+        this.backLabel = '';
         /**
          * Stop to start on, where nothing declared one.
          */
@@ -78,29 +78,29 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         /** The stop being shown, whoever set it, and `undefined` until somebody has. */
         this.indexState = undefined;
         /**
-         * Accessible name for the run, such as "Getting started".
-         */
-        this.label = '';
-        /**
-         * Space left around the target when it is lit, in pixels.
+         * Label for the control that goes on from the last stop.
          */
-        this.spotlightPadding = 8;
+        this.doneLabel = '';
         /**
-         * Label for the control that goes back, handed to every stop.
+         * Accessible name for the run, such as "Getting started".
          */
-        this.backLabel = '';
+        this.label = '';
         /**
          * Label for the control that goes on.
          */
         this.nextLabel = '';
         /**
-         * Label for the control that goes on from the last stop.
+         * Whether the tour is running.
          */
-        this.doneLabel = '';
+        this.open = false;
         /**
          * Label for the control that leaves the tour.
          */
         this.skipLabel = '';
+        /**
+         * Space left around the target when it is lit, in pixels.
+         */
+        this.spotlightPadding = 8;
         this.handleAsk = (event) => {
             const what = event.detail?.what;
             if (what === 'next') {
@@ -128,18 +128,14 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     /**
      * Which stop the reader is on.
      *
-     * **It announced after it moved for two days, which made refusing it
-     * impossible.** `index` was a plain property the tour wrote to directly:
-     * `move` assigned it and *then* announced, so `preventDefault` on the change
-     * arrived after the move it was refusing. It goes through `requestChange`
-     * now, which announces first and applies only if nobody refused, and refusing
-     * is how a consumer takes the decision. See 294.
+     * **Moved through `requestChange`, never by assignment from `move`.** That
+     * announces first and applies only if nobody refused, and refusing is how a
+     * consumer takes the decision; writing the property and then announcing puts
+     * `preventDefault` after the move it is refusing.
      *
      * The shape is `Carousel`'s, which is the nearest thing in the library: a
      * `default-index` for markup that only seeds and a held state that is
      * `undefined` until somebody sets one.
-     *
-     *
      */
     get index() {
         return this.indexState ?? this.defaultIndex;
@@ -175,9 +171,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     /**
      * Leaves the run early, which is a close rather than a completion.
      *
-     * Announced before it is applied, and cancelable because of it. Both closes
-     * wrote `open` first and dispatched after, so a consumer calling
-     * `preventDefault` was refusing something that had already happened.
+     * Announced before it is applied, and cancelable because of it: writing
+     * `open` first and dispatching after leaves a consumer calling
+     * `preventDefault` refusing something that has already happened.
      */
     skip() {
         const event = new HelixBeforeCloseEvent();
@@ -196,10 +192,8 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.dispatchEvent(new HelixCompleteEvent({ value: String(this.index) }));
         this.open = false;
     }
-    /* The one audited path, which every stateful change in the library goes
-       through and this did not. It announces, then applies where nothing refused
-       and where the consumer has not taken the value over, and it audits a
-       controlled tour whose consumer never answers. */
+    /* The one path every stateful change in the library goes through: it
+       announces, then applies where nothing refused. */
     move(to) {
         requestChange({
             apply: (value) => {
@@ -233,10 +227,6 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        /* Only the first time, before anything reads it. A script assigning `index`
-           to a tour nobody owns would otherwise hand it to a consumer who never
-           asked, and the tour would stop moving itself from then on. See
-           `MixinControllerOpen`, which argues the whole decide-once rule. */
         hostAria(this.internals, { label: this.label, role: 'region' });
     }
     updated(changed) {
@@ -313,32 +303,32 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     }
 };
 __decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessTour.prototype, "open", void 0);
+    property({ attribute: 'back-label' })
+], HelixHeadlessTour.prototype, "backLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTour.prototype, "index", null);
 __decorate([
     property({ attribute: 'default-index', type: Number })
 ], HelixHeadlessTour.prototype, "defaultIndex", void 0);
+__decorate([
+    property({ attribute: 'done-label' })
+], HelixHeadlessTour.prototype, "doneLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTour.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'spotlight-padding', type: Number })
-], HelixHeadlessTour.prototype, "spotlightPadding", void 0);
-__decorate([
-    property({ attribute: 'back-label' })
-], HelixHeadlessTour.prototype, "backLabel", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessTour.prototype, "nextLabel", void 0);
 __decorate([
-    property({ attribute: 'done-label' })
-], HelixHeadlessTour.prototype, "doneLabel", void 0);
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTour.prototype, "open", void 0);
 __decorate([
     property({ attribute: 'skip-label' })
 ], HelixHeadlessTour.prototype, "skipLabel", void 0);
+__decorate([
+    property({ attribute: 'spotlight-padding', type: Number })
+], HelixHeadlessTour.prototype, "spotlightPadding", void 0);
 __decorate([
     queryAssignedElements({ flatten: true })
 ], HelixHeadlessTour.prototype, "assigned", void 0);

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

@@ -21,9 +21,8 @@ import '../../button/index.js';
  *
  * What it does not own is the heading, the paragraph, the picture and the
  * layout. Slot a `helix-card`, or a heading and a line of prose, or anything
- * else. This was written the other way first, with `title` and `body` parts and
- * a fixed arrangement, which is a component deciding what a tour is allowed to
- * say.
+ * else. Fixed `title` and `body` parts would be a component deciding what a
+ * tour is allowed to say.
  *
  * **The buttons are slot fallback, so the common case costs nothing and the
  * uncommon one is possible.** Write nothing and get Back, Next and Skip already
@@ -58,13 +57,9 @@ import '../../button/index.js';
  */
 export declare class HelixHeadlessTourStop extends HelixElement {
     /**
-     * The id of the element this stop is about.
-     */
-    for: string;
-    /**
-     * Which side of the target the panel prefers.
+     * Label for the control that goes back.
      */
-    placement: Placement;
+    backLabel: string;
     /**
      * Whether this is the stop the reader is on.
      *
@@ -76,25 +71,29 @@ export declare class HelixHeadlessTourStop extends HelixElement {
      */
     current: boolean;
     /**
-     * Whether this is the last stop, so the control says Done.
+     * Label for the control that goes on from the last stop.
      */
-    last: boolean;
+    doneLabel: string;
     /**
      * Whether this is the first stop, so there is nowhere back to.
      */
     first: boolean;
     /**
-     * Label for the control that goes back.
+     * The id of the element this stop is about.
      */
-    backLabel: string;
+    for: string;
+    /**
+     * Whether this is the last stop, so the control says Done.
+     */
+    last: boolean;
     /**
      * Label for the control that goes on.
      */
     nextLabel: string;
     /**
-     * Label for the control that goes on from the last stop.
+     * Which side of the target the panel prefers.
      */
-    doneLabel: string;
+    placement: Placement;
     /**
      * Label for the control that leaves the tour.
      */

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

@@ -28,9 +28,8 @@ import '../../button/index.js';
  *
  * What it does not own is the heading, the paragraph, the picture and the
  * layout. Slot a `helix-card`, or a heading and a line of prose, or anything
- * else. This was written the other way first, with `title` and `body` parts and
- * a fixed arrangement, which is a component deciding what a tour is allowed to
- * say.
+ * else. Fixed `title` and `body` parts would be a component deciding what a
+ * tour is allowed to say.
  *
  * **The buttons are slot fallback, so the common case costs nothing and the
  * uncommon one is possible.** Write nothing and get Back, Next and Skip already
@@ -67,13 +66,9 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
     constructor() {
         super(...arguments);
         /**
-         * The id of the element this stop is about.
-         */
-        this.for = '';
-        /**
-         * Which side of the target the panel prefers.
+         * Label for the control that goes back.
          */
-        this.placement = 'bottom';
+        this.backLabel = 'Back';
         /**
          * Whether this is the stop the reader is on.
          *
@@ -85,25 +80,29 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
          */
         this.current = false;
         /**
-         * Whether this is the last stop, so the control says Done.
+         * Label for the control that goes on from the last stop.
          */
-        this.last = false;
+        this.doneLabel = 'Done';
         /**
          * Whether this is the first stop, so there is nowhere back to.
          */
         this.first = false;
         /**
-         * Label for the control that goes back.
+         * The id of the element this stop is about.
          */
-        this.backLabel = 'Back';
+        this.for = '';
+        /**
+         * Whether this is the last stop, so the control says Done.
+         */
+        this.last = false;
         /**
          * Label for the control that goes on.
          */
         this.nextLabel = 'Next';
         /**
-         * Label for the control that goes on from the last stop.
+         * Which side of the target the panel prefers.
          */
-        this.doneLabel = 'Done';
+        this.placement = 'bottom';
         /**
          * Label for the control that leaves the tour.
          */
@@ -189,14 +188,12 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
     render() {
         return html `<div part="bubble" popover="manual" ?hidden=${!this.current}>
       ${
-        /* The one surface in this library that draws one, and the reason is
-           worth stating because everything else here deliberately does not.
-           An arrow says which thing a panel is describing, and a menu or a
-           select does not need one: it hangs off its trigger and adjacency says
-           it. A tour panel is anchored to something it did not open, on a page
-           full of other things, and it may be flipped to the far side of its
-           target by collision. Fusion's own taste is to leave arrows off, which
-           is a fact about the house style rather than about the system. */
+        /* The one surface in this library that draws an arrow, and every other
+           one deliberately does not. A menu or a select hangs off its trigger
+           and adjacency says what it belongs to; a tour panel is anchored to
+           something it did not open, on a page full of other things, and
+           collision may flip it to the far side of its target. Leaving arrows
+           off elsewhere is house style rather than a fact about the system. */
         ''}
       <div part="arrow" aria-hidden="true"></div>
       <div part="content"><slot></slot></div>
@@ -217,29 +214,29 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
     }
 };
 __decorate([
-    property()
-], HelixHeadlessTourStop.prototype, "for", void 0);
-__decorate([
-    property()
-], HelixHeadlessTourStop.prototype, "placement", void 0);
+    property({ attribute: 'back-label' })
+], HelixHeadlessTourStop.prototype, "backLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTourStop.prototype, "current", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessTourStop.prototype, "last", void 0);
+    property({ attribute: 'done-label' })
+], HelixHeadlessTourStop.prototype, "doneLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTourStop.prototype, "first", void 0);
 __decorate([
-    property({ attribute: 'back-label' })
-], HelixHeadlessTourStop.prototype, "backLabel", void 0);
+    property()
+], HelixHeadlessTourStop.prototype, "for", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTourStop.prototype, "last", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessTourStop.prototype, "nextLabel", void 0);
 __decorate([
-    property({ attribute: 'done-label' })
-], HelixHeadlessTourStop.prototype, "doneLabel", void 0);
+    property()
+], HelixHeadlessTourStop.prototype, "placement", void 0);
 __decorate([
     property({ attribute: 'skip-label' })
 ], HelixHeadlessTourStop.prototype, "skipLabel", void 0);

package/dist/tree/item/tree-item.d.ts

@@ -5,14 +5,12 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @summary One node in a tree.
  *
  * @description
- * **`open`, on `MixinControllerOpen`, where it was a bare `expanded` boolean.**
- * A branch showing its children is the same state a disclosure holds, and
- * `AccordionItem` has been on that mixin all along. Written here by hand it had
- * neither half of what the mixin gives: `this.expanded = !this.expanded`
- * announced nothing, so a consumer could not know a branch had opened, and
- * could not own the state either. `aria-expanded` is still what the row
- * renders, because that is the attribute a tree uses; the property is what
- * changed, not the semantics.
+ * **`open`, on `MixinControllerOpen`, rather than a bare boolean of its own.** A
+ * branch showing its children is the same state a disclosure holds, and
+ * `AccordionItem` is on that mixin too. A hand-written toggle announces nothing,
+ * so a consumer can neither know a branch opened nor own the state.
+ * `aria-expanded` is still what the row renders, because that is the attribute a
+ * tree uses; the property is what differs, not the semantics.
  *
  * An element rather than a slot because it owns state: whether it is open,
  * whether it is selected, and whether it is the one holding focus.
@@ -71,10 +69,6 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @cssproperty --tree-level - How deep this row sits, counting from zero, for the indent.
  */
 export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
-    /**
-     * Identifies the item to the consumer, carried in `helix-select`.
-     */
-    value: string;
     /**
      * Where this node goes, which makes its row a real link.
      *
@@ -84,9 +78,14 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      */
     href: string;
     /**
-     * Where the link opens, for the rare row that leaves the site.
+     * Depth from the root, set by the tree so indentation needs no CSS nesting.
+     *
+     * Not reflected. The tree assigns this after it upgrades, so an attribute
+     * here would be a change to markup the consumer rendered and hydration would
+     * report it. The indent it drives is written onto the row instead, inside the
+     * shadow root, which is not part of the tree React hydrates.
      */
-    target: string;
+    level?: number;
     /**
      * What the link declares about where it goes.
      *
@@ -101,25 +100,21 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      *
      * Not reflected, for the reason `level` below gives in full: the tree assigns
      * this after it upgrades, so the attribute would be a change to markup the
-     * consumer rendered and hydration would report it. It reflected, one line
-     * from the paragraph saying why it must not.
+     * consumer rendered and hydration would report it. Mirroring to
+     * `data-selected` on the host instead is the same fault under another name.
      *
-     * The stylesheet reads it from the row inside this shadow root, which is the
-     * answer `level` gives one paragraph down: the indent it drives is written
-     * onto the row rather than onto the host, because the row is not part of the
-     * tree React hydrates. Mirroring to `data-selected` on the host instead was
-     * the same fault with a different name, and React said so.
+     * The stylesheet reads it from the row inside this shadow root, because the
+     * row is not part of the tree React hydrates.
      */
     selected: boolean;
     /**
-     * Depth from the root, set by the tree so indentation needs no CSS nesting.
-     *
-     * Not reflected. The tree assigns this after it upgrades, so an attribute
-     * here would be a change to markup the consumer rendered and hydration would
-     * report it. The indent it drives is written onto the row instead, inside the
-     * shadow root, which is not part of the tree React hydrates.
+     * Where the link opens, for the rare row that leaves the site.
      */
-    level?: number;
+    target: string;
+    /**
+     * Identifies the item to the consumer, carried in `helix-select`.
+     */
+    value: string;
     /**
      * Whether this item holds the tree's single tab stop.
      */
@@ -152,9 +147,9 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      *
      * Selecting and following are two things and this is where they meet, so the
      * pointer and the keyboard take one path to the same end. The tree calls this
-     * rather than `select` for the keyboard, which is what fixes Enter: a nav
-     * tree whose rows are links could be walked with the arrows and not entered,
-     * because choosing announced a value and nothing listened for it.
+     * rather than `select` for the keyboard, or a nav tree whose rows are links
+     * could be walked with the arrows and never entered: choosing announces a
+     * value and nothing listens for it.
      */
     activate(): void;
     /**
@@ -185,9 +180,9 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *
-     * **A custom state and not the `selected` attribute it used to reflect.** The
-     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
-     * radio group answering for its set. Reflected, that put the element's own
+     * **A custom state, never a reflected `selected` attribute.** The parent
+     * writes this: a listbox choosing a row, a tab strip moving the tab, a radio
+     * group answering for its set. Reflected, that puts the element's own
      * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
      * which React reconciles and reports as a mismatch, and which a serialized
      * element pasted back declares as a choice nobody made. `ElementInternals`
@@ -195,7 +190,7 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      *
      * Reading `selected` is unaffected and so is writing it: the attribute still
      * seeds the property, which is what `<helix-tree-item selected>` in a consumer's
-     * markup means. What stops is the write back. See 302 and 304.
+     * markup means. What stops is the write back.
      */
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;