@fusion.dev/helix-headless 0.144.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/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 {

package/dist/carousel/root/carousel-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 { 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';
@@ -18,6 +18,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 +33,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';
@@ -75,6 +79,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 +158,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) {
@@ -169,6 +238,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 +270,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;
@@ -251,6 +331,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;
@@ -324,7 +416,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 +434,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.holdIndex();
         this.watchPane();
         this.assign();
+        this.toggleState('dragging', this.dragging);
     }
     assign() {
         if (this.assignsByName) {
@@ -350,6 +443,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,6 +470,20 @@ 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
+    >`;
+    }
     render() {
         const rotating = this.rotating;
         const last = this.slides.length - 1;
@@ -401,9 +513,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   aria-disabled=${this.atEnd('start') ? 'true' : nothing}
                   @click=${() => this.goTo(this.index - 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"
@@ -412,25 +522,28 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   aria-disabled=${this.atEnd('end') ? 'true' : nothing}
                   @click=${() => this.goTo(this.index + 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}
           >
@@ -488,6 +601,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,6 +619,9 @@ __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);
@@ -518,6 +637,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCarousel.prototype, "fitted", void 0);
+__decorate([
+    state()
+], HelixHeadlessCarousel.prototype, "dragging", void 0);
 __decorate([
     state()
 ], HelixHeadlessCarousel.prototype, "showing", void 0);