@fusion.dev/helix-headless 0.144.0 → 0.146.0

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

@@ -24,10 +24,39 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * polite live region. While the carousel rotates the region is off, so a
  * screen reader is not interrupted every few seconds.
  *
- * The indicators are one tab stop. The arrow keys along the track move between
- * them, Up and Down on a vertical carousel, and Home and End go to the first
- * and the last. Without `loop`, Previous on the first slide and Next on the
- * last are marked `aria-disabled`.
+ * **Keyboard.** The indicators are one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves through the rotation control, Previous, Next, the slides' own links and buttons, and the indicators, in that order. |
+ * | Enter, Space | Presses the control or the indicator that has focus. |
+ * | Right, Left | On an indicator, moves to the next or the previous slide and its indicator. Left moves on, on a right-to-left page. |
+ * | Down, Up | The same, on a vertical carousel. |
+ * | Home, End | On an indicator, moves to the first or the last slide. |
+ *
+ * Without `loop`, Previous on the first slide and Next on the last are marked
+ * `aria-disabled`, and keep focus.
+ *
+ * **What a screen reader hears.** The carousel is a group named by `label`,
+ * announced as `role-label` ("carousel"). Each slide is a group announced as
+ * `slide-role-label` ("slide") and named by `slide-label` ("2 of 5"). After a
+ * move by a control, an indicator, a key, or a drag, the `live` part says the
+ * slide's name politely. While the carousel rotates the region is off.
+ *
+ * **`slides-per-move` moves several slides at a time.** With `per-view="3"`
+ * and `slides-per-move="3"`, Next shows the next three, there is one
+ * indicator for each stop, and the track snaps only at the stops. The last
+ * stop is always the end of the run, so a run that does not divide evenly
+ * ends on its last slides. Unset moves one slide.
+ *
+ * **`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
@@ -36,6 +65,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 +90,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 +187,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 +287,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.
      */
@@ -255,6 +302,12 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * `aria-roledescription`. Translate it with the rest of your text.
      */
     slideRoleLabel: string;
+    /**
+     * How many slides Previous, Next, the indicators, rotation, and a drag move
+     * at a time. Unset moves one. The track stops at every `slides-per-move`th
+     * position from the first, and at the last.
+     */
+    slidesPerMove?: number;
     /**
      * The name of the rotation control while rotation is stopped.
      */
@@ -323,6 +376,8 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * withheld rather than counted from it. See `across`.
      */
     get positions(): number;
+    /** The positions the track stops at, `slides-per-move` apart, and the last. See `stopsOf`. */
+    private get stops();
     /**
      * How many slides the box turned out to hold, from the pane it laid out.
      *
@@ -386,6 +441,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 +499,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.
      *
@@ -446,6 +522,11 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * sends neither, being a correction rather than a move anybody asked for.
      */
     private applyIndex;
+    /**
+     * The position one stop forward or back lands on, wrapping where `loop`
+     * says so.
+     */
+    private move;
     /** Moves to a slide. It wraps past either end only when `loop` is set. */
     goTo(index: number): void;
     /**
@@ -509,6 +590,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 +818,22 @@ 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;
+    /**
+     * A pane's own declarations: the last pane's `runEnd`, and no snap point on
+     * a pane the track does not stop at under `slides-per-move`, so a swipe
+     * settles on a stop as the controls do.
+     */
+    private paneStyle;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/carousel/root/carousel-root.js

@@ -4,11 +4,12 @@ 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, fillTemplate, HelixActivateEvent, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { capturePointer, customElement, fillTemplate, HelixActivateEvent, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, play, stop } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { stepStop, stopFor, stopsOf } from '../stops.js';
 const COUNT_OR_AUTO = {
     fromAttribute: (value) => {
         if (value === null) {
@@ -18,6 +19,8 @@ const COUNT_OR_AUTO = {
     },
     toAttribute: (value) => value === undefined ? null : String(value),
 };
+const ICON_SLOTS = ['previous-icon', 'next-icon'];
+const DRAG_SLOP = 4;
 let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     constructor() {
         super(...arguments);
@@ -31,9 +34,11 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.said = '';
         this.label = 'Carousel';
         this.loop = false;
+        this.mouseDrag = false;
         this.nextLabel = 'Next slide';
         this.rotating = false;
         this.previousLabel = 'Previous slide';
+        this.roleLabel = 'carousel';
         this.slideLabel = '{index} of {count}';
         this.slideRoleLabel = 'slide';
         this.startLabel = 'Start slide rotation';
@@ -55,7 +60,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                         ? -1
                         : 0
                 : inlineStep(this, event.key);
-            let to = this.index + step;
+            let to;
             if (event.key === 'Home') {
                 to = 0;
             }
@@ -65,6 +70,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             else if (step === 0) {
                 return;
             }
+            else {
+                to = this.move(step);
+            }
             event.preventDefault();
             this.goTo(to);
             this.updateComplete.then(() => {
@@ -75,6 +83,68 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.handleTake = () => {
             this.settling = false;
         };
+        this.dragging = false;
+        this.handlePress = (event) => {
+            this.handleTake();
+            const track = this.partNamed('track');
+            if (!this.mouseDrag || event.pointerType !== 'mouse' || event.button !== 0 || !track) {
+                return;
+            }
+            this.pull = { left: track.scrollLeft, top: track.scrollTop, x: event.clientX, y: event.clientY };
+        };
+        this.handlePull = (event) => {
+            const pull = this.pull;
+            const track = this.partNamed('track');
+            if (!pull || !track) {
+                return;
+            }
+            if ((event.buttons & 1) === 0) {
+                this.pull = undefined;
+                return;
+            }
+            const across = event.clientX - pull.x;
+            const down = event.clientY - pull.y;
+            if (!this.dragging) {
+                if (Math.hypot(across, down) < DRAG_SLOP) {
+                    return;
+                }
+                this.dragging = true;
+                track.style.setProperty('scroll-snap-type', 'none', 'important');
+                capturePointer(track, event.pointerId);
+            }
+            track.scrollTo(this.orientation === 'vertical'
+                ? { behavior: 'instant', top: pull.top - down }
+                : { behavior: 'instant', left: pull.left - across });
+        };
+        this.handleLetGo = () => {
+            if (!this.pull) {
+                return;
+            }
+            this.pull = undefined;
+            if (!this.dragging) {
+                return;
+            }
+            this.swallowClick();
+            const nearest = this.nearest();
+            this.dragging = false;
+            this.showing = undefined;
+            const moved = nearest !== undefined &&
+                nearest !== this.index &&
+                requestChange({
+                    apply: (value) => this.applyIndex(value),
+                    event: (value) => new HelixSelectEvent({ value: String(value) }),
+                    host: this,
+                    next: nearest,
+                });
+            if (!moved) {
+                this.updateComplete.then(() => this.scrollToIndex());
+            }
+        };
+        this.handleDragStart = (event) => {
+            if (this.mouseDrag) {
+                event.preventDefault();
+            }
+        };
         this.handleTrackScroll = () => {
             if (this.settling || this.scrollFrame) {
                 return;
@@ -92,6 +162,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                 this.settling = false;
                 return;
             }
+            if (this.dragging) {
+                return;
+            }
             this.showing = undefined;
             const nearest = this.nearest();
             if (nearest === undefined) {
@@ -144,6 +217,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     get positions() {
         return Math.max(1, this.slides.length - (this.across ?? 1) + 1);
     }
+    get stops() {
+        return stopsOf(this.positions, this.slidesPerMove);
+    }
     measure() {
         const track = this.partNamed('track');
         const pane = this.panes[0]?.getBoundingClientRect().width;
@@ -169,6 +245,14 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     handed() {
         return this.fits ? nothing : `--carousel-per-view: ${this.clamped}`;
     }
+    trackStyle() {
+        const handed = this.handed();
+        if (!this.dragging) {
+            return handed;
+        }
+        const off = 'scroll-snap-type: none !important';
+        return handed === nothing ? off : `${handed}; ${off}`;
+    }
     watchPane() {
         if (!this.fits || typeof ResizeObserver === 'undefined') {
             this.sizes?.disconnect();
@@ -193,7 +277,10 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         return [...(this.renderRoot?.querySelectorAll?.('[part="slide"]') ?? [])];
     }
     get slides() {
-        return this.knownChildren.filter((child) => child instanceof HTMLElement);
+        return this.knownChildren.filter((child) => child instanceof HTMLElement && !ICON_SLOTS.includes(child.slot));
+    }
+    iconsFor(name) {
+        return this.knownChildren.filter((child) => child.slot === name);
     }
     applyIndex(value) {
         const previous = this.index;
@@ -201,6 +288,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.requestUpdate('index', previous);
         this.dispatchEvent(new HelixActivateEvent({ value: String(value) }));
     }
+    move(step) {
+        return stepStop(this.stops, this.index, step < 0 ? -1 : 1, this.loop);
+    }
     goTo(index) {
         if (this.slides.length === 0) {
             return;
@@ -251,6 +341,18 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.settling = true;
         track.scrollTo({ behavior: still ? 'instant' : 'smooth', ...at });
     }
+    swallowClick() {
+        const track = this.partNamed('track');
+        if (!track) {
+            return;
+        }
+        const swallow = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        track.addEventListener('click', swallow, { capture: true, once: true });
+        setTimeout(() => track.removeEventListener('click', swallow, { capture: true }));
+    }
     stop() {
         this.stopped = true;
         this.rotating = false;
@@ -265,7 +367,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         if (!this.rotating || this.slides.length < 2) {
             return;
         }
-        this.timer = setInterval(() => this.goTo(this.index >= this.positions - 1 ? 0 : this.index + 1), this.interval);
+        this.timer = setInterval(() => this.goTo(this.index >= this.positions - 1 ? 0 : this.move(1)), this.interval);
     }
     nearest() {
         const track = this.partNamed('track');
@@ -274,8 +376,11 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         const bleed = this.bleed(track);
         const at = this.orientation === 'vertical' ? track.scrollTop : track.scrollLeft;
-        return this.panes.slice(0, this.positions).reduce((best, slide, index) => {
-            const distance = Math.abs(this.edgeOf(slide, track, bleed) - at);
+        return this.stops.reduce((best, index) => {
+            const slide = this.panes[index];
+            const distance = slide
+                ? Math.abs(this.edgeOf(slide, track, bleed) - at)
+                : Number.POSITIVE_INFINITY;
             return distance < best.distance ? { distance, index } : best;
         }, { distance: Number.POSITIVE_INFINITY, index: this.index }).index;
     }
@@ -324,7 +429,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             this.fitted = undefined;
         }
         hostAria(this.internals, { label: this.label, role: 'group' });
-        this.internals.ariaRoleDescription = 'carousel';
+        this.internals.ariaRoleDescription = this.roleLabel || null;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -342,6 +447,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.holdIndex();
         this.watchPane();
         this.assign();
+        this.toggleState('dragging', this.dragging);
     }
     assign() {
         if (this.assignsByName) {
@@ -350,6 +456,11 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             });
             return;
         }
+        for (const name of ICON_SLOTS) {
+            this.renderRoot
+                ?.querySelector?.(`slot[name="${name}"]`)
+                ?.assign?.(...this.iconsFor(name));
+        }
         const panes = this.renderRoot?.querySelectorAll?.('[part="slide"] slot');
         if (!panes) {
             return;
@@ -372,9 +483,35 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         return side === 'start' ? this.index <= 0 : this.index >= this.positions - 1;
     }
+    renderPreviousMark() {
+        return html `<slot name="previous-icon"
+      ><svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+        ${unsafeSVG(caretLeft.content)}
+      </svg></slot
+    >`;
+    }
+    renderNextMark() {
+        return html `<slot name="next-icon"
+      ><svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+        ${unsafeSVG(caretRight.content)}
+      </svg></slot
+    >`;
+    }
+    paneStyle(index, last, stops) {
+        const declared = [
+            index === last ? this.runEnd() : nothing,
+            (this.slidesPerMove ?? 1) > 1 && !stops.includes(index)
+                ? 'scroll-snap-align: none !important'
+                : nothing,
+        ].filter((one) => one !== nothing);
+        return declared.length > 0 ? declared.join('; ') : nothing;
+    }
     render() {
         const rotating = this.rotating;
         const last = this.slides.length - 1;
+        const stops = this.stops;
+        const place = stopFor(stops, this.index);
+        const showing = stopFor(stops, this.showing ?? this.index);
         return html `<div part="controls">
         ${this.autoplay
             ? html `<button
@@ -399,40 +536,41 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   type="button"
                   aria-label=${this.previousLabel}
                   aria-disabled=${this.atEnd('start') ? 'true' : nothing}
-                  @click=${() => this.goTo(this.index - 1)}
+                  @click=${() => this.goTo(this.move(-1))}
                 >
-                  <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-                    ${unsafeSVG(caretLeft.content)}
-                  </svg>
+                  ${this.renderPreviousMark()}
                 </button>
                 <button
                   part="next"
                   type="button"
                   aria-label=${this.nextLabel}
                   aria-disabled=${this.atEnd('end') ? 'true' : nothing}
-                  @click=${() => this.goTo(this.index + 1)}
+                  @click=${() => this.goTo(this.move(1))}
                 >
-                  <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
-                    ${unsafeSVG(caretRight.content)}
-                  </svg>
+                  ${this.renderNextMark()}
                 </button>`}
       </div>
       <div
         data-scroller
         part="track"
-        style=${this.handed()}
+        style=${this.trackStyle()}
         @scroll=${this.handleTrackScroll}
         @scrollend=${this.handleScroll}
-        @pointerdown=${this.handleTake}
+        @pointerdown=${this.handlePress}
+        @pointermove=${this.handlePull}
+        @pointerup=${this.handleLetGo}
+        @pointercancel=${this.handleLetGo}
+        @lostpointercapture=${this.handleLetGo}
+        @dragstart=${this.handleDragStart}
         @touchstart=${this.handleTake}
         @wheel=${this.handleTake}
       >
         ${this.slides.map((_, index) => html `<div
             part="slide"
             role="group"
-            aria-roledescription=${this.slideRoleLabel}
+            aria-roledescription=${this.slideRoleLabel || nothing}
             aria-label=${fillTemplate(this.slideLabel, { count: this.slides.length, index: index + 1 })}
-            style=${index === last ? this.runEnd() : nothing}
+            style=${this.paneStyle(index, last, stops)}
           >
             <slot
               name=${this.assignsByName ? `slide-${index + 1}` : nothing}
@@ -444,17 +582,17 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
       ${this.slides.length > 1 && this.across !== undefined
             ? html `<div part="indicators" role="group" aria-label=${fillTemplate(this.indicatorsLabel, { label: this.label })}>
               ${''}
-              ${Array.from({ length: this.positions }).map((_place, at) => {
-                const current = at === (this.showing ?? this.index);
+              ${stops.map((stop, at) => {
+                const current = at === showing;
                 return html `<button
                   part="indicator${current ? ' indicator-current' : ''}"
                   type="button"
                   aria-label=${fillTemplate(this.indicatorLabel, { index: at + 1 })}
-                  aria-current=${at === this.index ? 'true' : nothing}
-                  tabindex=${at === this.index ? '0' : '-1'}
+                  aria-current=${at === place ? 'true' : nothing}
+                  tabindex=${at === place ? '0' : '-1'}
                   ?data-current=${current}
                   @keydown=${this.handleIndicatorKeydown}
-                  @click=${() => this.goTo(at)}
+                  @click=${() => this.goTo(stop)}
                 ></button>`;
             })}
             </div>`
@@ -488,6 +626,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCarousel.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'mouse-drag', reflect: true, type: Boolean })
+], HelixHeadlessCarousel.prototype, "mouseDrag", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessCarousel.prototype, "nextLabel", void 0);
@@ -503,12 +644,18 @@ __decorate([
 __decorate([
     property({ attribute: 'previous-label' })
 ], HelixHeadlessCarousel.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'role-label' })
+], HelixHeadlessCarousel.prototype, "roleLabel", void 0);
 __decorate([
     property({ attribute: 'slide-label' })
 ], HelixHeadlessCarousel.prototype, "slideLabel", void 0);
 __decorate([
     property({ attribute: 'slide-role-label' })
 ], HelixHeadlessCarousel.prototype, "slideRoleLabel", void 0);
+__decorate([
+    property({ attribute: 'slides-per-move', type: Number })
+], HelixHeadlessCarousel.prototype, "slidesPerMove", void 0);
 __decorate([
     property({ attribute: 'start-label' })
 ], HelixHeadlessCarousel.prototype, "startLabel", void 0);
@@ -518,6 +665,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCarousel.prototype, "fitted", void 0);
+__decorate([
+    state()
+], HelixHeadlessCarousel.prototype, "dragging", void 0);
 __decorate([
     state()
 ], HelixHeadlessCarousel.prototype, "showing", void 0);

package/dist/carousel/stops.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Where a carousel's track stops when it moves several slides at a time, as
+ * arithmetic over its positions.
+ *
+ * A position is a slide the track can start at: six slides four across have
+ * three, 0, 1 and 2. Moving `perMove` slides at a time stops at every
+ * `perMove`th of them from the first, and always at the last, so the end of
+ * the run is reachable whatever the count.
+ */
+/** The positions the track stops at, in order: every `perMove`th from 0, and the last. */
+export declare const stopsOf: (positions: number, perMove?: number) => number[];
+/** Which stop a position is at or past: the last stop at or before it, as an index into `stops`. */
+export declare const stopFor: (stops: readonly number[], position: number) => number;
+/**
+ * The position a move of one stop forward (`1`) or back (`-1`) lands on.
+ *
+ * From a position between two stops, back goes to the stop before it. Past
+ * either end it wraps where `loop` says so, and stays at the end otherwise.
+ */
+export declare const stepStop: (stops: readonly number[], position: number, step: -1 | 1, loop: boolean) => number;

package/dist/carousel/stops.js

@@ -0,0 +1,30 @@
+export const stopsOf = (positions, perMove = 1) => {
+    const step = Number.isFinite(perMove) ? Math.max(1, Math.floor(perMove)) : 1;
+    const last = Math.max(0, positions - 1);
+    const stops = [];
+    for (let at = 0; at < last; at += step) {
+        stops.push(at);
+    }
+    stops.push(last);
+    return stops;
+};
+export const stopFor = (stops, position) => {
+    let found = 0;
+    stops.forEach((stop, at) => {
+        if (stop <= position) {
+            found = at;
+        }
+    });
+    return found;
+};
+export const stepStop = (stops, position, step, loop) => {
+    const at = stopFor(stops, position);
+    let next = step < 0 && stops[at] !== position ? at : at + step;
+    if (loop) {
+        next = (next + stops.length) % stops.length;
+    }
+    else {
+        next = Math.min(Math.max(next, 0), stops.length - 1);
+    }
+    return stops[next] ?? 0;
+};