@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/canvas/root/canvas-root.js

@@ -610,6 +610,10 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.requestUpdate();
         };
     }
+    static { this.shadowRootOptions = {
+        ...HelixElement.shadowRootOptions,
+        slotAssignment: 'manual',
+    }; }
     get box() {
         const viewport = this.renderRoot?.querySelector('[part="viewport"]');
         return {
@@ -1530,6 +1534,12 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     updated(changed) {
         this.keying = undefined;
         super.updated(changed);
+        this.assign();
+        const edge = this.focusedEdge;
+        this.focusedEdge = undefined;
+        if (edge && (!edge.target.isConnected || edge.target.getAttribute('data-edge') !== edge.key)) {
+            this.focusStop(edge.key);
+        }
         if (this.holding && !this.held) {
             this.letGo();
         }
@@ -1661,6 +1671,11 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     willUpdate(changed) {
         this.keying = this.keyAll();
         super.willUpdate(changed);
+        const focused = this.ownerDocument?.activeElement === this
+            ? this.renderRoot.activeElement
+            : undefined;
+        const key = focused?.getAttribute?.('data-edge');
+        this.focusedEdge = focused && key ? { key, target: focused } : undefined;
         const drawn = extent(this.nodes);
         const origin = { x: drawn.x - MARGIN, y: drawn.y - MARGIN };
         if (this.origin && (origin.x !== this.origin.x || origin.y !== this.origin.y)) {
@@ -1732,9 +1747,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         });
     }
     renderEdges(origin, box) {
-        const elements = new Map(this.edgeElements.map((child) => [this.keyOfElement(child), child]));
-        const stop = this.stop !== undefined && this.keyNamed(this.stop) === this.stop ? this.stop : undefined;
-        const pickedKeys = new Set(this.picked);
         return html `<svg
       part="edges"
       role="none"
@@ -1755,46 +1767,114 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
           <path part="arrow" d="M0 0 L8 4 L0 8 z" />
         </marker>
       </defs>
-      ${this.edges.map((edge) => {
-            const key = this.keyOf(edge);
-            const element = elements.get(key);
-            const drawn = this.geometryOf(edge, origin);
-            const lifted = this.linking?.edge === key && !this.linking.pressed;
-            if (!drawn || (lifted && this.linking?.pointer !== undefined)) {
-                return nothing;
-            }
-            const { from, to } = drawn;
-            const ends = heads(edge);
-            return svg `<path
-            part="edge-target"
-            aria-description=${[element?.tone ? this.toneLabels[element.tone] : undefined, edge.label].filter(Boolean).join(', ') || nothing}
-            aria-label=${fillTemplate(this.connectionLabel, { from: this.textOf(from), to: this.textOf(to) })}
-            d=${drawn.d}
-            data-edge=${key}
-            fill="none"
-            aria-keyshortcuts="Enter F2 C Delete"
-            role="button"
-            tabindex=${key === stop ? '0' : '-1'}
-          />
-          ${lifted
-                ? nothing
-                : svg `<path
-            part="edge"
-            aria-hidden="true"
-            d=${drawn.d}
-            data-selected=${pickedKeys.has(key) ? '' : nothing}
-            data-tone=${element?.tone ?? nothing}
-            data-variant=${element?.variant ?? nothing}
-            fill="none"
-            marker-end=${ends.end ? `url(#${ARROW})` : nothing}
-            marker-start=${ends.start ? `url(#${ARROW})` : nothing}
-            style=${custom(element, '--canvas-edge-color') ? `--_canvas-edge-color: ${custom(element, '--canvas-edge-color')}` : nothing}
-          />`}
-`;
-        })}
       ${this.renderDraft(origin)}
     </svg>`;
     }
+    renderStops(origin, box) {
+        const elements = new Map(this.edgeElements.map((child) => [this.keyOfElement(child), child]));
+        const stop = this.stop !== undefined && this.keyNamed(this.stop) === this.stop ? this.stop : undefined;
+        const picked = new Set(this.picked);
+        const groups = [];
+        for (const one of this.walk) {
+            if (one.kind === 'node') {
+                groups.push({ edges: [], key: one.key });
+            }
+            else {
+                groups.at(-1)?.edges.push(one.edge);
+            }
+        }
+        return groups.map(({ edges }, at) => html `<slot name=${`card-${at}`}></slot>${edges.length === 0
+            ? nothing
+            : html `<svg
+                part="edges"
+                role="none"
+                viewBox=${`0 0 ${box.width} ${box.height}`}
+                width=${box.width}
+                height=${box.height}
+              >
+                ${edges.map((edge) => this.renderEdge(edge, origin, elements, stop, picked))}
+              </svg>`}`);
+    }
+    renderEdge(edge, origin, elements, stop, pickedKeys) {
+        const key = this.keyOf(edge);
+        const element = elements.get(key);
+        const drawn = this.geometryOf(edge, origin);
+        const lifted = this.linking?.edge === key && !this.linking.pressed;
+        if (!drawn || (lifted && this.linking?.pointer !== undefined)) {
+            return nothing;
+        }
+        const { from, to } = drawn;
+        const ends = heads(edge);
+        return svg `<path
+        part="edge-target"
+        aria-description=${[element?.tone ? this.toneLabels[element.tone] : undefined, edge.label].filter(Boolean).join(', ') || nothing}
+        aria-label=${fillTemplate(this.connectionLabel, { from: this.textOf(from), to: this.textOf(to) })}
+        d=${drawn.d}
+        data-edge=${key}
+        fill="none"
+        aria-keyshortcuts="Enter F2 C Delete"
+        role="button"
+        tabindex=${key === stop ? '0' : '-1'}
+      />
+      ${lifted
+            ? nothing
+            : svg `<path
+        part="edge"
+        aria-hidden="true"
+        d=${drawn.d}
+        data-selected=${pickedKeys.has(key) ? '' : nothing}
+        data-tone=${element?.tone ?? nothing}
+        data-variant=${element?.variant ?? nothing}
+        fill="none"
+        marker-end=${ends.end ? `url(#${ARROW})` : nothing}
+        marker-start=${ends.start ? `url(#${ARROW})` : nothing}
+        style=${custom(element, '--canvas-edge-color') ? `--_canvas-edge-color: ${custom(element, '--canvas-edge-color')}` : nothing}
+      />`}
+`;
+    }
+    assign() {
+        if (!this.childrenKnown) {
+            return;
+        }
+        const cards = new Map();
+        for (const card of this.cards) {
+            if (!cards.has(card.name)) {
+                cards.set(card.name, card);
+            }
+        }
+        const placed = new Map();
+        for (const [at, one] of this.walk.filter((stop) => stop.kind === 'node').entries()) {
+            const card = cards.get(one.key);
+            if (card) {
+                placed.set(card, `card-${at}`);
+            }
+        }
+        if (this.assignsByName) {
+            for (const card of this.cards) {
+                this.route(card, placed.get(card));
+            }
+            return;
+        }
+        const root = this.renderRoot;
+        const rest = [];
+        const named = new Map();
+        for (const child of this.knownChildren) {
+            const name = placed.get(child) ?? child.getAttribute('slot') ?? undefined;
+            if (name === undefined) {
+                rest.push(child);
+            }
+            else {
+                named.set(name, [...(named.get(name) ?? []), child]);
+            }
+        }
+        for (const slot of root?.querySelectorAll?.('slot') ?? []) {
+            const wanted = slot.name === '' ? rest : (named.get(slot.name) ?? []);
+            const had = slot.assignedNodes();
+            if (had.length !== wanted.length || had.some((one, at) => one !== wanted[at])) {
+                slot.assign?.(...wanted);
+            }
+        }
+    }
     renderLabels(origin) {
         return this.edges.map((edge) => {
             const lifted = this.linking?.edge === this.keyOf(edge) && !this.linking.pressed;
@@ -1903,6 +1983,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
           @focusin=${this.handleFocusIn}
         >
           ${this.renderEdges(origin, box)} ${this.renderLabels(origin)}
+          ${this.renderStops(origin, box)}
           <slot @slotchange=${this.handleSlotChange}></slot>
           ${this.renderEnds(origin)}
           ${this.renderEditor(origin)}

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

@@ -14,7 +14,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * Name the card with `aria-label` or `aria-labelledby`. These are the only
  * names that work with server rendering, because reading a title from the light
- * DOM needs a DOM, and the server has none.
+ * DOM needs a DOM, and the server has none. **A named card is a group**, so a
+ * reader entering it hears its name; an unnamed one has no role, since a group
+ * with no name only adds "group" to what a reader says.
+ *
+ * `header-actions` and `footer-actions` hold controls at the end of the
+ * header's and the footer's line, as Web Awesome's card does. While one holds
+ * something, its line is a `header-row` or `footer-row` part; otherwise there
+ * is no wrapper and every region is a bare slot. A server cannot see slotted
+ * content, so served actions sit on their own line until the script runs.
  *
  * @since 0.1.0
  * @status stable
@@ -24,8 +32,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The card's main content.
  * @slot footer - Actions that conclude the card.
+ * @slot footer-actions - Controls at the end of the footer's line, with the footer at its start.
  * @slot header - Title and any actions for the whole card.
+ * @slot header-actions - Controls for the whole card at the end of the header's line, such as a menu.
  * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
+ *
+ * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
  */
 export declare class HelixHeadlessCard extends HelixElement {
     /**
@@ -42,7 +55,23 @@ export declare class HelixHeadlessCard extends HelixElement {
      * with no attribute on it and the stylesheet only describes the departure.
      */
     mediaPlacement?: 'end';
+    /**
+     * @internal The host's `aria-labelledby`, observed so the card becomes a
+     * group once it is named. Not reflected: the attribute is the consumer's.
+     */
+    protected labelledBy: string | null;
+    /**
+     * @internal The host's `aria-label`, observed for the same reason as
+     * `labelledBy`. Not reflected: the attribute is the consumer's.
+     */
+    protected namedBy: string | null;
+    /** Whether `footer-actions` holds something, read from the slot. */
+    private footerActions;
+    /** Whether `header-actions` holds something, read from the slot. */
+    private headerActions;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private readonly readActions;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/card/root/card-root.js

@@ -4,26 +4,59 @@ 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, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slotFilled } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.labelledBy = null;
+        this.namedBy = null;
+        this.footerActions = false;
+        this.headerActions = false;
+        this.readActions = () => {
+            const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
+            this.headerActions = filled('header-actions');
+            this.footerActions = filled('footer-actions');
+        };
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: 'group' });
+        const named = Boolean(this.namedBy?.trim() || this.labelledBy?.trim());
+        hostAria(this.internals, { role: named ? 'group' : '' });
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.readActions();
     }
     render() {
+        const header = html `<slot name="header"></slot
+      ><slot name="header-actions" @slotchange=${this.readActions}></slot>`;
+        const footer = html `<slot name="footer"></slot
+      ><slot name="footer-actions" @slotchange=${this.readActions}></slot>`;
         return html `
       <slot name="media"></slot>
-      <slot name="header"></slot>
+      ${this.headerActions ? html `<div part="header-row">${header}</div>` : header}
       <slot></slot>
-      <slot name="footer"></slot>
+      ${this.footerActions ? html `<div part="footer-row">${footer}</div>` : footer}
     `;
     }
 };
 __decorate([
     property({ attribute: 'media-placement', reflect: true })
 ], HelixHeadlessCard.prototype, "mediaPlacement", void 0);
+__decorate([
+    property({ attribute: 'aria-labelledby' })
+], HelixHeadlessCard.prototype, "labelledBy", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], HelixHeadlessCard.prototype, "namedBy", void 0);
+__decorate([
+    state()
+], HelixHeadlessCard.prototype, "footerActions", void 0);
+__decorate([
+    state()
+], HelixHeadlessCard.prototype, "headerActions", void 0);
 HelixHeadlessCard = __decorate([
     customElement('helix-headless-card')
 ], HelixHeadlessCard);

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

@@ -29,6 +29,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * and the last. Without `loop`, Previous on the first slide and Next on the
  * last are marked `aria-disabled`.
  *
+ * **`mouse-drag` lets a mouse drag the track**, which otherwise only a touch
+ * screen, a trackpad, or the scroll wheel moves. The drag follows the pointer
+ * with snapping off and settles on the nearest slide when it is let go, and
+ * that move is announced and refusable like a press of Next. A link in a slide
+ * is not followed at the end of a drag.
+ *
+ * The glyphs on Previous and Next can be replaced by slotting an icon of your
+ * own into `previous-icon` and `next-icon`.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -36,6 +45,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/carousel
  *
  * @slot - The slides.
+ * @slot next-icon - The glyph on the control that moves to the next slide. Defaults to a caret.
+ * @slot previous-icon - The glyph on the control that moves to the previous slide. Defaults to a caret.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the slide in view changes, with the new index as a string in `detail.value`.
  * @event {HelixSelectEvent} helix-select - Fired before the slide in view changes, with the requested index. Cancelable: cancel it to keep the current slide. Nothing moves, and a drag returns to the slide the index still holds. See `handleScroll`.
@@ -59,6 +70,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --carousel-per-view - How many slides go across. The component writes it onto the track, so your stylesheet divides the track by the same number the component counts positions from. Read this property to follow `per-view`, because attribute selectors cannot cover every possible count. Under `per-view="auto"` the component writes nothing and your stylesheet declares it, so the same name works in both modes. See `perView`.
  * @cssproperty --carousel-run-end - How far short of a whole pixel the run ends, set on the last slide only. Your stylesheet applies it as `margin-inline-end`. See `runEnd`.
  * @cssproperty --carousel-slide-min - The narrowest a slide may be. `per-view="auto"` uses it to fit slides into the track. It must be a length, because the stylesheet divides by it. When unset, it is the whole track, which shows one slide across.
+ *
+ * @cssstate dragging - While a mouse drags the track, under `mouse-drag`.
  */
 export declare class HelixHeadlessCarousel extends HelixElement {
     /**
@@ -154,6 +167,14 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * Whether moving past either end wraps to the other.
      */
     loop: boolean;
+    /**
+     * Whether a mouse can drag the track from slide to slide.
+     *
+     * Off unless asked for, because a press on a slide is then the start of a
+     * drag, and text in a slide can no longer be selected with the mouse. A drag
+     * of a few pixels or less is still a press.
+     */
+    mouseDrag: boolean;
     /**
      * The name of the control that moves to the next slide.
      */
@@ -246,6 +267,12 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * The name of the control that moves to the previous slide.
      */
     previousLabel: string;
+    /**
+     * The word screen readers announce in place of the carousel's role, set as
+     * `aria-roledescription`. Translate it with the rest of your text, or empty
+     * it to leave the role as `group`.
+     */
+    roleLabel: string;
     /**
      * The name of each slide, with `{index}` and `{count}` filled in.
      */
@@ -386,6 +413,25 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * in exactly as the inline one did.
      */
     private handed;
+    /**
+     * The track's inline style: the count above, and snapping off while a mouse
+     * drags it.
+     *
+     * **Inline, because the drag does not work without it.** A track that snaps
+     * puts every scroll the drag asks for back on the nearest slide, so the
+     * slides jump from one to the next under the pointer. A stylesheet cannot be
+     * relied on to turn snapping off, since the headless tier has none, so the
+     * component says it for the length of the drag and no longer.
+     *
+     * **And `!important`, because a document rule beats a shadow root's inline
+     * style.** The style attribute is in the shadow tree's context, and a
+     * consumer's `::part(track)` rule is in the document's, which wins every
+     * normal declaration. Measured in Chromium on a headless track snapping from
+     * the document: the inline `none` was there and the computed value stayed
+     * `x mandatory`, and the drag never moved the track. An important
+     * declaration sorts the other way, the inner context first.
+     */
+    private trackStyle;
     /** What the box resolved to, and `undefined` until it has been laid out. */
     private fitted;
     /** Watches the pane a fitted track laid out, while `auto` is what was asked. */
@@ -425,6 +471,8 @@ export declare class HelixHeadlessCarousel extends HelixElement {
     private get panes();
     /** The slides, in light-DOM order. Empty on the server, which has no tree. */
     get slides(): HTMLElement[];
+    /** What a consumer slotted into one of the arrows' glyph slots. */
+    private iconsFor;
     /**
      * The arrows move between indicators, which is the tablist pattern.
      *
@@ -509,6 +557,38 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      */
     private settling;
     private readonly handleTake;
+    /** Whether a mouse is dragging the track. */
+    private dragging;
+    /** A mouse pressed on the track under `mouse-drag`, from where it pressed. */
+    private pull;
+    /** Takes the press, and under `mouse-drag` the start of a drag. */
+    private readonly handlePress;
+    /**
+     * Moves the track with the pointer.
+     *
+     * Not until the pointer has moved a few pixels, so a press on a link or a
+     * button in a slide stays a press. Instant scrolls, since a smooth one would
+     * trail the pointer.
+     */
+    private readonly handlePull;
+    /**
+     * Lets go of the track, and settles on the slide nearest to where it was let
+     * go.
+     *
+     * Through the same request as a press of Next, so the move is refusable,
+     * sends `helix-activate`, and is announced. A refusal, or a drag that ends on
+     * the slide it began on, goes back to that slide once snapping is on again.
+     */
+    private readonly handleLetGo;
+    /**
+     * Keeps the click that ends a drag from following a link in the slide.
+     *
+     * Once, in capture on the track, and given up a moment later where no click
+     * comes, which is a drag let go off the track.
+     */
+    private swallowClick;
+    /** Keeps a mouse drag from picking up a link or an image under `mouse-drag`. */
+    private readonly handleDragStart;
     /**
      * Stops rotation for good.
      *
@@ -705,6 +785,16 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * server, which knows no slides and so no ends.
      */
     private atEnd;
+    /**
+     * The glyph on Previous: the `previous-icon` slot, holding a caret until
+     * something is slotted. A tier above overrides this to draw its own caret.
+     */
+    protected renderPreviousMark(): TemplateResult;
+    /**
+     * The glyph on Next: the `next-icon` slot, holding a caret until something
+     * is slotted. A tier above overrides this to draw its own caret.
+     */
+    protected renderNextMark(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {