@fusion.dev/helix-headless 0.50.0 → 0.52.0

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

@@ -9,6 +9,15 @@ 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';
+const COUNT_OR_AUTO = {
+    fromAttribute: (value) => {
+        if (value === null) {
+            return undefined;
+        }
+        return value === 'auto' ? 'auto' : Number(value);
+    },
+    toAttribute: (value) => value === undefined ? null : String(value),
+};
 let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     constructor() {
         super(...arguments);
@@ -20,6 +29,16 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.label = 'Carousel';
         this.loop = false;
         this.rotating = false;
+        this.readFit = () => {
+            const fitted = this.measure();
+            if (fitted === undefined || fitted === this.fitted) {
+                return;
+            }
+            this.fitted = fitted;
+            if (this.index > this.positions - 1) {
+                this.goTo(this.positions - 1);
+            }
+        };
         this.handleIndicatorKeydown = (event) => {
             const step = inlineStep(this, event.key);
             if (step === 0) {
@@ -95,12 +114,55 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.indexState = next;
         this.requestUpdate('index', previous);
     }
-    get across() {
+    get clamped() {
         const asked = this.perView ?? 1;
-        return Number.isFinite(asked) ? Math.max(1, Math.floor(asked)) : 1;
+        return typeof asked === 'number' && Number.isFinite(asked) ? Math.max(1, Math.floor(asked)) : 1;
+    }
+    get fits() {
+        return this.perView === 'auto' && this.orientation !== 'vertical';
+    }
+    get across() {
+        return this.fits ? this.fitted : this.clamped;
     }
     get positions() {
-        return Math.max(1, this.slides.length - this.across + 1);
+        return Math.max(1, this.slides.length - (this.across ?? 1) + 1);
+    }
+    measure() {
+        const track = this.partNamed('track');
+        const pane = this.panes[0]?.getBoundingClientRect().width;
+        if (!track || pane === undefined) {
+            return undefined;
+        }
+        const asked = Number.parseFloat(getComputedStyle(track).columnGap);
+        const gap = Number.isNaN(asked) ? 0 : asked;
+        const room = track.clientWidth - 2 * this.bleed(track);
+        if (pane <= 0 || room <= 0) {
+            return undefined;
+        }
+        return Math.max(1, Math.round((room + gap) / (pane + gap)));
+    }
+    handed() {
+        return this.fits ? nothing : `--carousel-per-view: ${this.clamped}`;
+    }
+    watchPane() {
+        if (!this.fits || typeof ResizeObserver === 'undefined') {
+            this.sizes?.disconnect();
+            this.sizes = undefined;
+            this.watched = undefined;
+            return;
+        }
+        this.sizes ??= new ResizeObserver(this.readFit);
+        const pane = this.panes[0];
+        if (pane === this.watched) {
+            return;
+        }
+        if (this.watched) {
+            this.sizes.unobserve(this.watched);
+        }
+        this.watched = pane;
+        if (pane) {
+            this.sizes.observe(pane);
+        }
     }
     get panes() {
         return [...(this.renderRoot?.querySelectorAll?.('[part="slide"]') ?? [])];
@@ -196,6 +258,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.addEventListener('pointerenter', this.pause);
         this.watcher = new MutationObserver(() => this.requestUpdate());
         this.watcher.observe(this, { childList: true });
+        this.watchPane();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -207,6 +270,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.removeEventListener('pointerenter', this.pause);
         this.watcher?.disconnect();
         this.watcher = undefined;
+        this.sizes?.disconnect();
+        this.sizes = undefined;
+        this.watched = undefined;
         clearInterval(this.timer);
         this.timer = undefined;
     }
@@ -218,25 +284,29 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         if (changed.has('index')) {
             this.showing = undefined;
         }
+        if (changed.has('perView')) {
+            this.fitted = undefined;
+        }
         hostAria(this.internals, { label: this.label, role: 'group' });
         this.internals.ariaRoleDescription = 'carousel';
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.watchPane();
         this.finishHydration();
     }
     updated(changed) {
         super.updated(changed);
-        const count = this.slides.length;
         const drawn = this.renderRoot.querySelectorAll('[part="slide"]').length;
         if (changed.has('index') || (this.scrolledFor === 0 && drawn > 0)) {
             this.scrollToIndex();
         }
         this.scrolledFor = drawn;
         this.runTimer();
-        if (count > 0 && this.index > count - 1) {
-            this.goTo(count - 1);
+        if (this.slides.length > 0 && this.index > this.positions - 1) {
+            this.goTo(this.positions - 1);
         }
+        this.watchPane();
         this.assign();
     }
     assign() {
@@ -308,7 +378,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
       <div
         data-scroller
         part="track"
-        style=${`--carousel-per-view: ${this.across}`}
+        style=${this.handed()}
         @scroll=${this.handleTrackScroll}
         @scrollend=${this.handleScroll}
         @pointerdown=${this.handleTake}
@@ -328,7 +398,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             ></slot>
           </div>`)}
       </div>
-      ${this.slides.length > 1
+      ${this.slides.length > 1 && this.across !== undefined
             ? html `<div part="indicators" role="group" aria-label=${`${this.label} slides`}>
               ${''}
               ${Array.from({ length: this.positions }).map((_place, at) => {
@@ -376,8 +446,11 @@ __decorate([
     state()
 ], HelixHeadlessCarousel.prototype, "rotating", void 0);
 __decorate([
-    property({ attribute: 'per-view', reflect: true, type: Number })
+    property({ attribute: 'per-view', converter: COUNT_OR_AUTO, reflect: true })
 ], HelixHeadlessCarousel.prototype, "perView", void 0);
+__decorate([
+    state()
+], HelixHeadlessCarousel.prototype, "fitted", void 0);
 __decorate([
     state()
 ], HelixHeadlessCarousel.prototype, "showing", void 0);

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

@@ -27,13 +27,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * **A pane can be shut, and that is not the same as a divider at the edge.**
  * The geometry is identical and the knowledge is not: only a shut pane knows
  * where to open back to. So `collapsed` is a second state rather than a reading
- * of the position, and the position it opens to is the one collapsing never
- * overwrote. `collapsed-size` keeps a sliver showing where a pane has a tab
- * strip worth leaving, and collapse overrides `min` and `max`, which is what
- * those are for.
+ * of the position, and the position it opens to is where the gesture that shut
+ * it began, whichever gesture that was: a drag takes its reading on the press,
+ * and every other door takes it in `settle`, nothing having been applied there
+ * yet. `collapsed-size` keeps a sliver showing where a pane has a tab strip
+ * worth leaving, and collapse overrides `min` and `max`, which is what those
+ * are for.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category layout
  * @aliases SplitPane, Resizable, SplitView
  * @documentation https://fusion.dev/helix/components/splitter
@@ -41,8 +43,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot end - The pane after it.
  * @slot start - The pane before the divider.
  *
- * @event {HelixBeforeCollapseEvent} helix-before-collapse - Fired before a pane shuts or reopens, and only where the position it is derived from stood. Cancelable: refusing it leaves the pane as it was and the divider where the gesture put it.
- * @event {HelixBeforeResizeEvent} helix-before-resize - Fired before the divider settles, and only where the gesture moved it: a press that moved nothing, a drag that came back, an arrow with nowhere left to go and a corner that moved the other divider are all silent on this one. Cancelable: refusing it takes the whole of where the gesture ended, so no collapse follows from it either. A drag has already drawn itself by then and holds where it was dropped until the consumer assigns their own.
+ * @event {HelixBeforeCollapseEvent} helix-before-collapse - Fired before a pane shuts or reopens, whether or not the resize that reached it was allowed, and carrying its own position: a shut pane sits at `collapsed-size` rather than at the number the resize named. Cancelable: refusing it leaves the pane as it was and the divider where the gesture put it.
+ * @event {HelixBeforeResizeEvent} helix-before-resize - Fired before the divider settles, and only where the gesture moved it: a press that moved nothing, a drag that came back, an arrow with nowhere left to go and a corner that moved the other divider are all silent on this one. Cancelable: refusing it takes the position and leaves the rest of the gesture, so a collapse the gesture reached is still announced and still yours to refuse. A drag has already drawn itself by then and holds where it was dropped until the consumer assigns their own.
  *
  * @csspart corner - The handle where two dividers cross, added on the client.
  * @csspart end - The box holding the second.
@@ -181,6 +183,14 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * the edge the number it started from is gone. Taken once, on the press, and
      * written back if the gesture ends shut, so the pane opens to where it was
      * rather than to the edge it was dragged against.
+     *
+     * **A pointer gesture only, because it is the only one that loses it**, and
+     * `settle` answers for the rest from `began`: a key and a double click apply
+     * nothing before they settle, so where the divider is at the top of that
+     * method is where it was. Read once and cleared there, exactly as `began` is,
+     * and for the second reason as well as the first. Left standing it measured
+     * the next gesture against the last one's press, so a collapse pressed from
+     * 20 reopened at the 60 a drag had started from an hour earlier.
      */
     private opened;
     /**
@@ -331,21 +341,48 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * Through the audited path, so a consumer who owns `position` is told what was
      * asked for and decides, and one who does not has already had it applied.
      *
-     * **The second announcement is conditional on the first, because it is derived
-     * from it.** `shutAt` reads the position the gesture ended on, so a refused
-     * `helix-before-resize` leaves a collapse computed from a number that was
-     * refused. Announced anyway, the refusal produced the outcome it was refusing:
-     * measured on a divider at 40 with a listener calling `preventDefault`, Home
-     * left `position` reporting 0 and `collapsed` reporting `start`, because the
-     * collapse applied and `position` reads the sliver once a pane is shut. The
-     * return of the first request is what says so, and it was being dropped: a
-     * cancelable event dispatched as a bare statement with nothing reading the
-     * answer, which is the shape the navigation cohort named on `Outline` and left.
+     * **A refused resize ends the resize and not the gesture.** `shutAt` reads the
+     * position the gesture ended on, so the collapse is computed from a number the
+     * consumer may have declined, and the reading this replaces was that the two
+     * are therefore one decision: refuse the first and the second cannot stand.
+     * That is a reasonable thing to believe about a splitter nobody else owns, and
+     * it takes "no" to mean the gesture is over. What it misses is that a consumer
+     * who owns the position refuses in order to *take* the decision, not to end
+     * it. The sandbox two folders away refuses every `helix-before-resize` from
+     * the splitter inside it, re-announces the same move in its own vocabulary and
+     * writes the answer back through `position`, which is what makes it the single
+     * decision point; returning on its refusal left `panel-collapsed-size` inert
+     * there, the shipped `with-a-panel` example measuring a 0px panel against the
+     * 36 it asks for. So the collapse is reached either way and is refused, or
+     * not, on its own.
+     *
+     * **Which is honest because the collapse carries its own position.** A shut
+     * pane sits at `collapsed-size`, which is where `position` reads it from once
+     * `collapsed` is set, and never at the number the resize named: refuse a drag
+     * to 100 on a splitter with `collapsed-size="10"`, allow the collapse, and the
+     * divider is at 90. Nothing writes the refused number either, `requestChange`
+     * applying nothing when it is refused and the collapse below writing the open
+     * position back over whatever a drag had already drawn, so a consumer who says
+     * no to the position and yes to the collapse gets the pane shut and keeps the
+     * number they had to reopen to. The two coincide only where `collapsed-size`
+     * is zero, and the states differ even there: a shut pane knows where to open
+     * back to and a divider parked at the edge does not.
      *
      * Refusing the collapse alone still leaves the resize, which is the other way
      * round and is coherent: the divider goes where the drag put it and the pane
-     * is not declared shut. What a consumer cannot have is a pane that collapses
-     * out from under a position they said no to.
+     * is not declared shut.
+     *
+     * **The open position is taken here for every door but the pointer's, which
+     * is the same split `began` makes and for the same reason.** A drag has
+     * overwritten the position on the way to the edge, so it reads it on the
+     * press; a key, a double click and `moveTo` apply nothing until the request
+     * below, so where the divider is at the top of this method is where it was.
+     * Captured on the press alone, the class docstring's promise that a shut pane
+     * knows where to open back to held for a drag and for nothing else: measured
+     * 17 Sep 2026, `Home` on a splitter resting at 60 shut the start pane and
+     * reopened it at 0, the resize above having written the edge and the collapse
+     * having nothing to put back. Stale, it was worse than absent, `opened` never
+     * being cleared: a press at 60, then a key collapse from 20, reopened at 60.
      *
      * **A gesture that moved nothing announces nothing, and this is the one place
      * that can say so.** A change carrying the position the divider already had

package/dist/splitter/root/splitter-root.js

@@ -302,10 +302,12 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         const shut = this.shutAt(wanted);
         const began = this.began ?? this.position;
         this.began = undefined;
+        const opened = this.opened ?? (this.collapsed ? undefined : began);
+        this.opened = undefined;
         if (wanted === began && shut === this.collapsed) {
             return;
         }
-        const moved = requestChange({
+        requestChange({
             apply: (value) => {
                 const previous = this.position;
                 this.positionState = value;
@@ -315,15 +317,12 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             host: this,
             next: wanted,
         });
-        if (!moved) {
-            return;
-        }
         if (shut !== this.collapsed) {
             requestChange({
                 apply: (value) => {
                     const previous = this.collapsed;
-                    if (value !== '' && this.opened !== undefined) {
-                        this.positionState = this.opened;
+                    if (value !== '' && opened !== undefined) {
+                        this.positionState = opened;
                     }
                     this.collapsedState = value === '' ? 'none' : value;
                     this.requestUpdate('collapsed', previous);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.50.0",
-    "@fusion.dev/helix-icons": "0.50.0",
+    "@fusion.dev/helix-core": "0.52.0",
+    "@fusion.dev/helix-icons": "0.52.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.50.0",
-    "@fusion.dev/helix-testing": "0.50.0",
+    "@fusion.dev/helix-cem": "0.52.0",
+    "@fusion.dev/helix-testing": "0.52.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",