@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -4,12 +4,14 @@ 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 { capturePointer, customElement, fillTemplate, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, wordsConverter, } from '@fusion.dev/helix-core';
+import { assignSlots, capturePointer, customElement, fillTemplate, formatNumbers, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
+import { EdgePan } from '../edge-pan.js';
 import { HelixHeadlessCanvasNode } from '../node/canvas-node.js';
-import { colorOf, connector, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
+import { snapBox, snapTo, stepTo } from '../snap.js';
+import { colorOf, connector, distanceTo, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 const MARGIN = 32;
 const ARROW = 'canvas-arrow';
@@ -20,6 +22,7 @@ const ZOOM_MIN = 0.1;
 const ZOOM_MAX = 8;
 const ruling = (zoom) => zoom >= 0.5 ? zoom : zoom * 2 ** Math.ceil(Math.log2(0.5 / zoom));
 const SLOP = 3;
+const REACH = 20;
 const heads = (edge) => ({
     end: (edge.toEnd ?? 'arrow') === 'arrow',
     start: edge.fromEnd === 'arrow',
@@ -44,11 +47,16 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.label = '';
         this.labelEditorLabel = 'Label for {name}';
         this.leadsToLabel = 'leads to {cards}';
+        this.movedLabel = '{name} moved to {x}, {y}';
         this.readOnly = false;
         this.reconnectingLabel = 'Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop.';
+        this.resizedLabel = '{name} resized to {width} by {height}';
         this.selected = '';
+        this.selectedLabel = 'selected';
+        this.selectionLabel = '{count} selected';
         this.stoppedLabel = 'Stopped connecting.';
         this.toneLabels = {};
+        this.zoomedLabel = 'Zoom {zoom}';
         this.said = '';
         this.at = { x: 0, y: 0, zoom: 1 };
         this.direct = false;
@@ -62,6 +70,11 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.fingers = new Map();
         this.keying = undefined;
         this.edgeKeys = new WeakMap();
+        this.edgePan = new EdgePan(() => this.partNamed('viewport')?.getBoundingClientRect(), (by) => this.panCarrying(by), () => {
+            if (!this.dragging) {
+                this.direct = false;
+            }
+        });
         this.handlePointerDown = (event) => {
             if (!this.gestureAllowed(event)) {
                 return;
@@ -212,17 +225,19 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             const sizing = this.sizing;
             if (sizing && (sizing.held || sizing.pointer === event.pointerId)) {
-                const box = this.resized(sizing.start, sizing.corner, (event.clientX - sizing.from.x) / this.at.zoom, (event.clientY - sizing.from.y) / this.at.zoom);
+                const box = snapBox(this.resized(sizing.start, sizing.corner, (event.clientX - sizing.from.x) / this.at.zoom, (event.clientY - sizing.from.y) / this.at.zoom), sizing.start, sizing.corner, this.snap, { height: MIN_HEIGHT, width: MIN_WIDTH });
                 const detail = { nodes: [{ name: sizing.card.name, ...box }] };
                 this.touched = true;
                 sizing.asked = true;
                 if (this.requestMove(detail)) {
                     sizing.moved = detail;
                 }
+                this.carryOn(event);
                 return;
             }
             if (this.marquee?.pointer === event.pointerId) {
                 this.marquee = { ...this.marquee, to: this.toDocument(event) };
+                this.carryOn(event);
                 return;
             }
             if (this.linking && (this.linking.held || this.linking.pointer === event.pointerId)) {
@@ -234,7 +249,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     capturePointer(this, event.pointerId);
                 }
                 const at = this.toDocument(event);
-                const over = this.cardAt(at);
+                const over = this.cardAt(at, REACH / this.at.zoom);
                 const to = this.arrival(over?.id);
                 this.linking = {
                     ...this.linking,
@@ -244,6 +259,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     to,
                     toSide: to !== undefined && over ? sideNear(over, at) : undefined,
                 };
+                this.carryOn(event);
                 return;
             }
             const carry = this.carrying;
@@ -258,17 +274,22 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 }
                 carry.started = true;
                 this.touched = true;
+                const lead = carry.cards.find(({ card }) => card.name === carry.pressed) ?? carry.cards[0];
+                const shift = (from, by) => from === undefined ? by : snapTo(from + by, this.snap) - from;
+                const right = shift(lead?.x, across / this.at.zoom);
+                const lower = shift(lead?.y, down / this.at.zoom);
                 const detail = {
                     nodes: carry.cards.map(({ card, x, y }) => ({
                         name: card.name,
-                        x: Math.round(x + across / this.at.zoom),
-                        y: Math.round(y + down / this.at.zoom),
+                        x: Math.round(x + right),
+                        y: Math.round(y + lower),
                     })),
                 };
                 carry.asked = true;
                 if (this.requestMove(detail)) {
                     carry.moved = detail;
                 }
+                this.carryOn(event);
                 return;
             }
             const drag = this.dragging;
@@ -303,6 +324,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (finger && !owner && this.fingers.size > 0) {
                 return;
             }
+            this.edgePan.stop();
+            this.carryPointer = undefined;
             this.pressing = false;
             const pointing = this.pointing;
             this.pointing = false;
@@ -322,7 +345,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (marquee?.pointer === event.pointerId) {
                 this.marquee = undefined;
                 if (event.type !== 'pointercancel') {
-                    this.choose([...marquee.base, ...this.within(marquee)]);
+                    this.choose([...marquee.base, ...this.within(marquee)], true);
                 }
                 return;
             }
@@ -433,15 +456,23 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 if (this.fixed(card)) {
                     return;
                 }
+                const step = this.snap;
+                const right = step ? stepTo(card.x, along, step) - card.x : along * NUDGE;
+                const lower = step ? stepTo(card.y, down, step) - card.y : down * NUDGE;
                 const detail = {
                     nodes: this.carriedAll(card).map((one) => ({
                         name: one.name,
-                        x: one.x + along * NUDGE,
-                        y: one.y + down * NUDGE,
+                        x: one.x + right,
+                        y: one.y + lower,
                     })),
                 };
                 if (this.requestMove(detail)) {
                     this.dispatchEvent(new HelixMoveEvent(detail));
+                    this.say(fillTemplate(this.movedLabel, {
+                        name: this.nameOf(card.name),
+                        x: this.numbers(card.x),
+                        y: this.numbers(card.y),
+                    }));
                 }
                 void this.updateComplete.then(() => this.reveal(card.name));
                 return;
@@ -451,10 +482,17 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 if (this.fixed(card)) {
                     return;
                 }
-                const box = this.resized({ height: card.height, width: card.width, x: card.x, y: card.y }, 'bottom-right', along * NUDGE, down * NUDGE);
+                const step = this.snap;
+                const edge = { x: card.x + card.width, y: card.y + card.height };
+                const box = this.resized({ height: card.height, width: card.width, x: card.x, y: card.y }, 'bottom-right', step ? stepTo(edge.x, along, step) - edge.x : along * NUDGE, step ? stepTo(edge.y, down, step) - edge.y : down * NUDGE);
                 const detail = { nodes: [{ name: card.name, ...box }] };
                 if (this.requestMove(detail)) {
                     this.dispatchEvent(new HelixMoveEvent(detail));
+                    this.say(fillTemplate(this.resizedLabel, {
+                        height: this.numbers(box.height),
+                        name: this.nameOf(card.name),
+                        width: this.numbers(box.width),
+                    }));
                 }
                 return;
             }
@@ -465,7 +503,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             if ((event.metaKey || event.ctrlKey) && (event.key === 'a' || event.key === 'A')) {
                 event.preventDefault();
-                this.choose(this.walk.map((one) => one.key));
+                this.choose(this.walk.map((one) => one.key), true);
                 return;
             }
             if (event.key === 'Escape') {
@@ -477,7 +515,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     this.focusStop(back);
                     return;
                 }
-                this.choose(undefined);
+                this.choose(undefined, true);
                 this.partNamed('region')?.focus();
                 return;
             }
@@ -593,7 +631,28 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (key !== undefined) {
                 event.preventDefault();
                 this.editStop(key);
+                return;
+            }
+            const viewport = this.partNamed('viewport');
+            if (!viewport || !this.gestureAllowed(event)) {
+                return;
+            }
+            const box = viewport.getBoundingClientRect();
+            const inside = event.clientX >= box.left &&
+                event.clientX <= box.right &&
+                event.clientY >= box.top &&
+                event.clientY <= box.bottom;
+            const onControls = path.some((one) => one instanceof Element && (one.getAttribute('part') ?? '').split(' ').includes('controls'));
+            if (!inside || onControls) {
+                return;
             }
+            event.preventDefault();
+            this.touched = true;
+            this.direct = false;
+            this.zoomAbout(event.shiftKey ? 1 / 2 : 2, {
+                x: event.clientX - box.left,
+                y: event.clientY - box.top,
+            });
         };
         this.handleEditorKeydown = (event) => {
             event.stopPropagation();
@@ -614,6 +673,12 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    say(words) {
+        this.said = words !== '' && words === this.said ? `${words}\u00a0` : words;
+    }
+    get numbers() {
+        return formatNumbers(this.closest('[lang]')?.getAttribute('lang') ?? '');
+    }
     get box() {
         const viewport = this.renderRoot?.querySelector('[part="viewport"]');
         return {
@@ -752,6 +817,10 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.direct = false;
         this.touched = true;
         this.zoomAbout(by > 0 ? 1.25 : 1 / 1.25, { x: this.box.width / 2, y: this.box.height / 2 });
+        const lang = this.closest('[lang]')?.getAttribute('lang') || undefined;
+        this.say(fillTemplate(this.zoomedLabel, {
+            zoom: new Intl.NumberFormat(lang, { maximumFractionDigits: 0, style: 'percent' }).format(this.at.zoom),
+        }));
         super.zoom(by);
     }
     show(name) {
@@ -815,13 +884,20 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             y: origin.y + (event.clientY - (box?.top ?? 0) - this.at.y) / this.at.zoom,
         };
     }
-    cardAt(point) {
-        return this.nodes
+    cardAt(point, reach = 0) {
+        const under = this.nodes
             .filter((one) => point.x >= one.x &&
             point.x <= one.x + one.width &&
             point.y >= one.y &&
             point.y <= one.y + one.height)
             .sort((a, b) => a.width * a.height - b.width * b.height)[0];
+        if (under || reach <= 0) {
+            return under;
+        }
+        return this.nodes
+            .map((one) => ({ away: distanceTo(one, point), one }))
+            .filter(({ away }) => away <= reach)
+            .sort((a, b) => a.away - b.away)[0]?.one;
     }
     nameOf(id) {
         const node = this.byId.get(id);
@@ -1099,7 +1175,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             .map((one) => this.keyNamed(one.trim()))
             .filter((one) => one !== undefined));
     }
-    choose(keys) {
+    choose(keys, said = false) {
         const list = keys === undefined ? [] : typeof keys === 'string' ? [keys] : [...new Set(keys)];
         const value = list.map((one) => this.publicName(one)).join(',');
         if (value === this.selected) {
@@ -1107,11 +1183,14 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         }
         if (this.dispatchEvent(new HelixSelectEvent({ value }))) {
             this.selected = value;
+            if (said) {
+                this.say(fillTemplate(this.selectionLabel, { count: this.numbers(list.length) }));
+            }
         }
     }
     toggle(key) {
         const picked = this.picked;
-        this.choose(picked.includes(key) ? picked.filter((one) => one !== key) : [...picked, key]);
+        this.choose(picked.includes(key) ? picked.filter((one) => one !== key) : [...picked, key], true);
     }
     get pickedCards() {
         const picked = new Set(this.picked);
@@ -1138,6 +1217,26 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.requestUpdate();
         return true;
     }
+    panCarrying(by) {
+        const last = this.carryPointer;
+        if (!last) {
+            this.edgePan.stop();
+            return;
+        }
+        this.touched = true;
+        this.direct = true;
+        this.at = { ...this.at, x: this.at.x - by.x, y: this.at.y - by.y };
+        for (const gesture of [this.carrying, this.sizing]) {
+            if (gesture) {
+                gesture.from = { x: gesture.from.x - by.x, y: gesture.from.y - by.y };
+            }
+        }
+        this.handlePointerMove(last);
+    }
+    carryOn(event) {
+        this.carryPointer = event;
+        this.edgePan.follow({ x: event.clientX, y: event.clientY });
+    }
     picksUp(gesture, event, from) {
         if (gesture.held || this.putting || event.type === 'pointercancel') {
             return false;
@@ -1200,6 +1299,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.letGo();
     }
     letGo() {
+        this.edgePan.stop();
+        this.carryPointer = undefined;
         this.holding = false;
         this.toggleState('holding', false);
         document.removeEventListener('keydown', this.handleHeldKey, true);
@@ -1655,6 +1756,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         if (this.held) {
             this.putBack();
         }
+        this.edgePan.stop();
+        this.carryPointer = undefined;
         this.sizes?.disconnect();
         this.watched = undefined;
         this.words?.disconnect();
@@ -1719,6 +1822,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             card.meaning = card.tone ? (this.toneLabels[card.tone] ?? '') : '';
             card.current = card.name === stop;
             card.selected = picked.has(card.name);
+            card.status = card.selected ? this.selectedLabel : '';
             card.resizable = alone === card.name && !this.fixed(card);
             card.movable = picked.has(card.name) && !this.fixed(card);
             card.connectable = !this.fixed(card);
@@ -1807,7 +1911,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         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-description=${[pickedKeys.has(key) ? this.selectedLabel : undefined, 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}
@@ -1855,25 +1959,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             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);
-            }
-        }
+        assignSlots(this.renderRoot, this.knownChildren, (child) => placed.get(child));
     }
     renderLabels(origin) {
         return this.edges.map((edge) => {
@@ -2021,6 +2107,9 @@ __decorate([
 __decorate([
     property({ attribute: 'leads-to-label' })
 ], HelixHeadlessCanvas.prototype, "leadsToLabel", void 0);
+__decorate([
+    property({ attribute: 'moved-label' })
+], HelixHeadlessCanvas.prototype, "movedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCanvas.prototype, "order", void 0);
@@ -2033,9 +2122,21 @@ __decorate([
 __decorate([
     property({ attribute: 'reconnecting-label' })
 ], HelixHeadlessCanvas.prototype, "reconnectingLabel", void 0);
+__decorate([
+    property({ attribute: 'resized-label' })
+], HelixHeadlessCanvas.prototype, "resizedLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessCanvas.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: 'selection-label' })
+], HelixHeadlessCanvas.prototype, "selectionLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessCanvas.prototype, "snap", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "editing", void 0);
@@ -2045,6 +2146,9 @@ __decorate([
 __decorate([
     property({ attribute: 'tone-labels', converter: wordsConverter })
 ], HelixHeadlessCanvas.prototype, "toneLabels", void 0);
+__decorate([
+    property({ attribute: 'zoomed-label' })
+], HelixHeadlessCanvas.prototype, "zoomedLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "stop", void 0);

package/dist/canvas/snap.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Where a card lands on a board that snaps: the arithmetic of a ruling, kept
+ * apart from the board that applies it.
+ *
+ * Every value is in the document's own units, and a step of nothing, zero or
+ * less is no snapping at all, so a board without `snap` moves exactly as it
+ * did before there was one.
+ */
+/** A box on the board, in the document's own units. */
+export interface SnapBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * A value at the nearest multiple of `step`, or the value as it is where there
+ * is no step. A drag lets go wherever the hand is, and lands on the line
+ * nearest it.
+ */
+export declare const snapTo: (value: number, step: number | undefined) => number;
+/**
+ * The next multiple of `step` from `value`, the way a key points: `way` is `1`
+ * or `-1`.
+ *
+ * **On to the next line, and never back onto the same one.** A card sitting
+ * between two lines goes to the line ahead of it, and one on a line goes a
+ * whole step, so every press moves the card and every press lands on a line.
+ */
+export declare const stepTo: (value: number, way: number, step: number) => number;
+/**
+ * A box resized from a corner, with the edges that corner moves snapped, and
+ * held to a least size.
+ *
+ * Only the moving edges: the corner opposite the one in hand stays where it
+ * was, as it does without a ruling. Where the line nearest is inside the least
+ * size, the box stays at the least size rather than turning inside out.
+ */
+export declare const snapBox: (box: SnapBox, start: SnapBox, corner: string, step: number | undefined, least: {
+    width: number;
+    height: number;
+}) => SnapBox;

package/dist/canvas/snap.js

@@ -0,0 +1,32 @@
+const snaps = (step) => step !== undefined && Number.isFinite(step) && step > 0;
+export const snapTo = (value, step) => snaps(step) ? Math.round(value / step) * step : value;
+export const stepTo = (value, way, step) => {
+    if (way === 0) {
+        return value;
+    }
+    const at = value / step;
+    const near = Math.round(at);
+    const on = Math.abs(at - near) < 1e-9 ? near : at;
+    return (way > 0 ? Math.floor(on) + 1 : Math.ceil(on) - 1) * step;
+};
+export const snapBox = (box, start, corner, step, least) => {
+    if (!snaps(step)) {
+        return box;
+    }
+    const left = corner.endsWith('left');
+    const top = corner.startsWith('top');
+    const right = start.x + start.width;
+    const bottom = start.y + start.height;
+    const width = left
+        ? Math.max(least.width, right - snapTo(box.x, step))
+        : Math.max(least.width, snapTo(box.x + box.width, step) - start.x);
+    const height = top
+        ? Math.max(least.height, bottom - snapTo(box.y, step))
+        : Math.max(least.height, snapTo(box.y + box.height, step) - start.y);
+    return {
+        height,
+        width,
+        x: left ? right - width : start.x,
+        y: top ? bottom - height : start.y,
+    };
+};

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

@@ -31,6 +31,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * 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.
  *
+ * **The card says which regions it holds**, as `:state(has-media)`,
+ * `:state(has-header)` and `:state(has-footer)`, so a sheet can draw a card
+ * with a header differently, as Web Awesome's `with-header` does, with no
+ * attribute written onto the card. Read in the browser, so a served card
+ * carries none until the script runs.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -52,6 +58,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart header-actions - The slot the header's controls arrive through, drawing no box, as `body` does.
  * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
  * @csspart media - The slot the media arrives through, drawing no box, as `body` does.
+ *
+ * @cssstate has-footer - Something is slotted into `footer` or `footer-actions`.
+ * @cssstate has-header - Something is slotted into `header` or `header-actions`.
+ * @cssstate has-media - Something is slotted into `media`.
  */
 export declare class HelixHeadlessCard extends HelixElement {
     /**
@@ -92,7 +102,8 @@ export declare class HelixHeadlessCard extends HelixElement {
     private headerActions;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    private readonly readActions;
+    protected firstUpdated(changed: PropertyValues): void;
+    private readonly readRegions;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -15,10 +15,13 @@ let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
         this.namedBy = null;
         this.footerActions = false;
         this.headerActions = false;
-        this.readActions = () => {
+        this.readRegions = () => {
             const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
             this.headerActions = filled('header-actions');
             this.footerActions = filled('footer-actions');
+            this.toggleState('has-media', filled('media'));
+            this.toggleState('has-header', this.headerActions || filled('header'));
+            this.toggleState('has-footer', this.footerActions || filled('footer'));
         };
     }
     willUpdate(changed) {
@@ -28,20 +31,24 @@ let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
-        this.readActions();
+        this.readRegions();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', this.readRegions);
     }
     render() {
         const header = html `<slot name="header" part="header"></slot
       ><slot
         name="header-actions"
         part="header-actions"
-        @slotchange=${this.readActions}
+        @slotchange=${this.readRegions}
       ></slot>`;
         const footer = html `<slot name="footer" part="footer"></slot
       ><slot
         name="footer-actions"
         part="footer-actions"
-        @slotchange=${this.readActions}
+        @slotchange=${this.readRegions}
       ></slot>`;
         return html `
       <slot name="media" part="media"></slot>

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary Shows one slide of several, with controls to move between them.
@@ -727,9 +727,10 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * that changes an assignment is this component calling `assign`, so a slide
      * appended by a consumer would reach no slot, render nowhere and be counted by
      * nothing. A default slot needs no watcher, taking whatever is there; a manual
-     * one does. `Chat` watches for the same reason.
+     * one does. `Chat` watches for the same reason, through the same core
+     * controller.
      */
-    private watcher;
+    protected readonly childWatch: ChildrenController;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Pauses without forgetting that the reader wanted it running. */

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 { capturePointer, customElement, fillTemplate, HelixActivateEvent, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { ChildrenController, 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';
@@ -185,7 +185,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         };
         this.scrollFrame = 0;
         this.stopped = false;
-        this.watcher = undefined;
+        this.childWatch = new ChildrenController(this);
         this.pause = () => {
             if (!this.stopped) {
                 this.rotating = false;
@@ -388,8 +388,6 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         super.connectedCallback();
         this.addEventListener('focusin', this.pause);
         this.addEventListener('pointerenter', this.pause);
-        this.watcher = new MutationObserver(() => this.requestUpdate());
-        this.watcher.observe(this, { childList: true });
         this.watchPane();
         if (this.hasUpdated) {
             this.runTimer();
@@ -403,8 +401,6 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         this.removeEventListener('focusin', this.pause);
         this.removeEventListener('pointerenter', this.pause);
-        this.watcher?.disconnect();
-        this.watcher = undefined;
         this.sizes?.disconnect();
         this.sizes = undefined;
         this.watched = undefined;