@fusion.dev/helix-headless 0.31.0 → 0.33.0

package/dist/area-chart/root/area-chart-root.d.ts

@@ -75,9 +75,17 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  */
 export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base {

package/dist/area-chart/root/area-chart-root.js

@@ -84,6 +84,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         const order = stack.layers.map((_, depth) => depth).reverse();
         return html `<div aria-hidden="true" id="helix-chart-plot" part="plot">
       <svg part="svg"
+        data-mirror
         preserveAspectRatio="none"
         viewBox="0 0 ${WIDTH} ${HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -52,9 +52,17 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  *
  * @cssproperty --bar-chart-axis - The color of a single-series axis, taken from that series.

package/dist/bar-chart/root/bar-chart-root.js

@@ -107,6 +107,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
       part="plot"
     >
       <svg part="svg"
+        data-mirror
         preserveAspectRatio="none"
         viewBox="0 0 100 ${HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"
@@ -219,7 +220,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const slot = 100 / this.readings;
         const across = at * slot + slot / 2;
         return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
-            placement: sideways ? 'right' : 'top',
+            placement: sideways ? (this.pointer.mirrored ? 'left' : 'right') : 'top',
             x: sideways ? `${far}%` : `${across}%`,
             y: sideways ? `${across}%` : `${far}%`,
         });

package/dist/breadcrumbs/breadcrumb/breadcrumb.js

@@ -23,7 +23,7 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
     }
     renderSeparator() {
         return html `<slot name="separator"
-      ><svg part="separator-mark" fill="currentColor" viewBox=${caretRight.viewBox}>
+      ><svg part="separator-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox}>
         ${unsafeSVG(caretRight.content)}
       </svg></slot
     >`;

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

@@ -191,6 +191,9 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * changes the slide, because an indicator that could be focused without
      * selecting would leave the highlight and the slide disagreeing with nothing
      * on screen saying which is which.
+     *
+     * Along the line, so on a right-to-left page, where the first indicator is on
+     * the right, the left arrow is the one that moves on.
      */
     private readonly handleIndicatorKeydown;
     /** Moves to a slide, wrapping only where `loop` says to. */
@@ -224,6 +227,15 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * to index 0 put its edge back on the clip edge. Measured on the insights
      * carousel: `scrollLeft` resting at 4 against a 4px bleed, the first card
      * shaved, and no scrolling done to cause it.
+     *
+     * **On a right-to-left track the leading edge is the right one**, and
+     * `scrollLeft` counts down from zero as the track moves on. Measured from the
+     * left, a carousel showing one slide at a time happened to come out right,
+     * each slide a whole track to the left of the one before it; one showing
+     * three put every one of the first few slides at a positive offset the
+     * scroller cannot reach, so it clamped to zero and the next arrow moved the
+     * dots and not the slides. Measured in Chromium on the several-across
+     * example: three presses of next, `index` at 2 and `scrollLeft` still at 0.
      */
     private edgeOf;
     private scrollToIndex;

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, HelixElement, HelixSelectEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSelectEvent, hostAria, inlineStep, 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';
@@ -21,7 +21,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.loop = false;
         this.rotating = false;
         this.handleIndicatorKeydown = (event) => {
-            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            const step = inlineStep(this, event.key);
             if (step === 0) {
                 return;
             }
@@ -121,9 +121,13 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         return Number.isNaN(read) ? 0 : read;
     }
     edgeOf(slide, track, bleed) {
-        return this.orientation === 'vertical'
-            ? slide.offsetTop - track.offsetTop - bleed
-            : slide.offsetLeft - track.offsetLeft - bleed;
+        if (this.orientation === 'vertical') {
+            return slide.offsetTop - track.offsetTop - bleed;
+        }
+        if (getComputedStyle(track).direction === 'rtl') {
+            return slide.offsetLeft + slide.offsetWidth - (track.offsetLeft + track.offsetWidth) + bleed;
+        }
+        return slide.offsetLeft - track.offsetLeft - bleed;
     }
     scrollToIndex() {
         const slide = this.panes[this.index];
@@ -133,15 +137,17 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         const vertical = this.orientation === 'vertical';
         const target = this.edgeOf(slide, track, this.bleed(track));
+        const at = vertical ? { top: target } : { left: target };
         if (Math.abs(target - (vertical ? track.scrollTop : track.scrollLeft)) < 1) {
+            if (this.settling) {
+                track.scrollTo({ behavior: 'instant', ...at });
+                this.settling = false;
+            }
             return;
         }
         const still = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
         this.settling = true;
-        track.scrollTo({
-            behavior: still ? 'instant' : 'smooth',
-            ...(vertical ? { top: target } : { left: target }),
-        });
+        track.scrollTo({ behavior: still ? 'instant' : 'smooth', ...at });
     }
     stop() {
         this.stopped = true;
@@ -262,7 +268,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   aria-label="Previous slide"
                   @click=${() => this.goTo(this.index - 1)}
                 >
-                  <svg part="previous-mark" fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+                  <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
                     ${unsafeSVG(caretLeft.content)}
                   </svg>
                 </button>
@@ -272,7 +278,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   aria-label="Next slide"
                   @click=${() => this.goTo(this.index + 1)}
                 >
-                  <svg part="next-mark" fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+                  <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
                     ${unsafeSVG(caretRight.content)}
                   </svg>
                 </button>`}

package/dist/chat/composer/chat-composer.d.ts

@@ -110,6 +110,10 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
      * and the key are one affordance and should look like it. `send-label` is the
      * accessible name rather than a visible one, so a screen reader still hears
      * the word.
+     *
+     * **Not mirrored on a right-to-left page**, where every caret meaning next
+     * is. It pictures a key rather than a way to go, like the arrows `Kbd`
+     * draws, and a picture of a key is not turned round with the text.
      */
     protected renderSend(): TemplateResult;
     /**

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

@@ -59,6 +59,15 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * too long to hold as elements: it is drawn a window at a time, measured as it
  * goes, and the log needs a block size of its own for that to mean anything.
  *
+ * **A fed turn is styled through this element, not its own.** Its message is
+ * drawn in this shadow root, where `[author="me"]` cannot reach it, so every
+ * fed turn's parts are forwarded as `message-*`, and the ones that change with
+ * the turn a second time while it holds: `-mine` for a turn by `me`, and
+ * `message-meta-failed`, `message-content-sending` and
+ * `message-content-streaming` for its state. Every other author has the plain
+ * names only, so a conversation styling each participant apart passes its
+ * turns as children.
+ *
  * @since 0.1.0
  * @status experimental
  * @category feedback
@@ -89,11 +98,19 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart message - A turn fed as data: the message drawn for it, forwarded whole.
  * @csspart message-actions - The controls offered on a fed turn, beside its time.
  * @csspart message-avatar - A fed turn's leading slot's box.
+ * @csspart message-avatar-mine - The leading slot's box on a fed turn by `me`.
  * @csspart message-body - What a fed turn said, and the line under it.
+ * @csspart message-body-mine - What a fed turn by `me` said, and the line under it.
  * @csspart message-content - A fed turn's text.
+ * @csspart message-content-mine - The text of a fed turn by `me`.
+ * @csspart message-content-sending - A fed turn's text while it is `sending`.
+ * @csspart message-content-streaming - A fed turn's text while it is `streaming`.
  * @csspart message-indicator - A fed turn's default wait.
  * @csspart message-mark - The status glyph beside a fed turn's failure.
  * @csspart message-meta - The line under a fed turn: its time, its state, and its controls.
+ * @csspart message-meta-failed - The line under a fed turn that `failed`, which says so.
+ * @csspart message-meta-mine - The line under a fed turn by `me`.
+ * @csspart message-mine - A fed turn by `me`: the message drawn for it.
  * @csspart message-retry - The control offered on a fed turn that failed.
  * @csspart message-sources - What a fed turn was drawn from.
  * @csspart message-state - What has happened to a fed turn, where that is worth saying.

package/dist/chat/root/chat-root.js

@@ -13,6 +13,17 @@ import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import { FAILED_LABEL } from '../message/chat-message.js';
 const REGIONS = ['header', 'actions', 'resume', 'status', 'composer'];
+const SECOND_NAMES = {
+    author: {
+        me: 'avatar: message-avatar-mine, body: message-body-mine, content: message-content-mine, message: message-mine, meta: message-meta-mine',
+    },
+    state: {
+        failed: 'meta: message-meta-failed',
+        sending: 'content: message-content-sending',
+        streaming: 'content: message-content-streaming',
+    },
+};
+const secondNames = (table, key) => key !== undefined && Object.hasOwn(table, key) ? `, ${table[key]}` : '';
 const settled = (turn) => turn.state !== 'sending' && turn.state !== 'streaming';
 const newsworthy = (turn) => turn.author !== 'me' || turn.state === 'failed';
 const spoken = (message) => [...message.childNodes]
@@ -394,7 +405,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
               exportparts="actions: message-actions, avatar: message-avatar, body: message-body,
                 content: message-content, indicator: message-indicator, mark: message-mark, message,
                 meta: message-meta, retry: message-retry, sources: message-sources,
-                state: message-state, time: message-time"
+                state: message-state, time: message-time${secondNames(SECOND_NAMES.author, turn.author)}${secondNames(SECOND_NAMES.state, turn.state)}"
               author=${turn.author ?? nothing}
               at=${turn.at ?? nothing}
               state=${turn.state ?? nothing}

package/dist/code-block/root/code-block-root.d.ts

@@ -58,6 +58,14 @@ import '../../copy-button/index.js';
  * @csspart copy-mark - The clipboard glyph, and the confirmation that replaces it.
  * @csspart copy-tooltip - The bubble, forwarded from the tooltip inside.
  * @csspart copy-tooltip-arrow - The point, resting against the trigger.
+ * @csspart copy-tooltip-arrow-bottom - The point while the bubble is below the copy button, so on its top edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-arrow-left - The point while the bubble is left of the copy button, so on its right edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-arrow-right - The point while the bubble is right of the copy button, so on its left edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-arrow-top - The point while the bubble is above the copy button, so on its bottom edge, beside `copy-tooltip-arrow`.
+ * @csspart copy-tooltip-bottom - The bubble while it is below the copy button, beside `copy-tooltip`.
+ * @csspart copy-tooltip-left - The bubble while it is left of the copy button, beside `copy-tooltip`.
+ * @csspart copy-tooltip-right - The bubble while it is right of the copy button, beside `copy-tooltip`.
+ * @csspart copy-tooltip-top - The bubble while it is above the copy button, beside `copy-tooltip`.
  * @csspart file - In a diff, one file's header and block.
  * @csspart filler - In a split diff, the empty row opposite a line the other side does not have.
  * @csspart frame - The code and the copy button beside it.

package/dist/code-block/root/code-block-root.js

@@ -57,7 +57,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         return html `<${this.tag('copy-button')}
       part="copy"
       exportparts="button: copy-button, mark: copy-mark, tooltip: copy-tooltip,
-        tooltip-arrow: copy-tooltip-arrow"
+        tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
+        tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
+        tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
+        tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       label="Copy code"
       .value=${value}
     ></${this.tag('copy-button')}>`;

package/dist/color-picker/root/color-picker-root.js

@@ -87,7 +87,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             if (box.width === 0 || box.height === 0) {
                 return;
             }
-            const across = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
+            const fromLeft = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
+            const across = getComputedStyle(grid).direction === 'rtl' ? 1 - fromLeft : fromLeft;
             const down = Math.min(1, Math.max(0, (event.clientY - box.top) / box.height));
             this.move({ brightness: Math.round((1 - down) * 100), saturation: Math.round(across * 100) });
         };

package/dist/copy-button/root/copy-button-root.d.ts

@@ -31,6 +31,14 @@ import '../../tooltip/index.js';
  * @csspart mark - The clipboard glyph, and the confirmation that replaces it.
  * @csspart tooltip - The bubble, forwarded from the tooltip inside.
  * @csspart tooltip-arrow - The point, resting against the trigger.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the button, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the button, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the button, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the button, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the button, beside `tooltip`.
+ * @csspart tooltip-left - The bubble while it is left of the button, beside `tooltip`.
+ * @csspart tooltip-right - The bubble while it is right of the button, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the button, beside `tooltip`.
  */
 export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     /**

package/dist/copy-button/root/copy-button-root.js

@@ -61,7 +61,10 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
     }
     renderTooltip(control) {
         return html `<${this.tag('tooltip')} content=${this.says} persist
-    exportparts="arrow: tooltip-arrow, tooltip">
+    exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom,
+      arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right,
+      arrow-top: tooltip-arrow-top, tooltip, tooltip-bottom, tooltip-left, tooltip-right,
+      tooltip-top">
       ${control}
     </${this.tag('tooltip')}>`;
     }

package/dist/data-table/root/data-table-root.d.ts

@@ -371,6 +371,16 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * where it was written: it has nothing to be named by.
      */
     get orderedColumns(): HelixHeadlessTableColumn[];
+    /**
+     * The columns drawn: the arranged ones less any that are hidden.
+     *
+     * **A hidden column takes no track and draws no cells.** Left in, its
+     * heading went and its track and its cell in every row stayed, so the header
+     * row came up a heading short, the first cell filled the gap, and every row
+     * after it began a column late. It keeps its place in `order` and in the
+     * sort, which are by field, so showing it again puts it back where it was.
+     */
+    private get shownColumns();
     /** The fields in the order on screen. */
     private get fields();
     /** The columns reduced to what the ordering needs. */
@@ -474,16 +484,25 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private readonly toggleRow;
     /** Selects every row, or clears them all where every one already was. */
     private readonly toggleAll;
-    /** Moves a column by some places among the ones that move. */
+    /**
+     * Moves a column by some places among the ones that move and are drawn.
+     *
+     * Counted among the drawn ones, so a key moves the heading past one a reader
+     * can see: counted among all of them, a step past a hidden column changed the
+     * order and nothing on screen. A hidden column keeps its place among the rest.
+     */
     private moveColumn;
+    /** Every field in order, with one taken out and put back beside another. */
+    private placed;
     /**
      * The result as CSV: every row the filter lets through, in the order on
      * screen, in the columns on screen, headed by their headings.
      *
      * **Values, not cells.** A cell may be a template, a badge or a link, so each
      * column gives its field's value, which is what a spreadsheet wants anyway.
-     * A column with no field has no value and is left out. In `server` mode this
-     * is the page it holds, which is all it can know.
+     * A column with no field has no value and is left out, and so is a hidden
+     * one, which is not on screen. In `server` mode this is the page it holds,
+     * which is all it can know.
      *
      * **A text value that a spreadsheet would run is quoted as text.** A cell
      * opening with `=`, `+`, `-` or `@` is a formula to a spreadsheet, and a

package/dist/data-table/root/data-table-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, MixinCollection, requestChange, slotFilled, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, MixinCollection, requestChange, slotFilled, VirtualizeController, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -99,8 +99,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 return;
             }
             const column = this.columnFrom(event);
-            const forward = getComputedStyle(this).direction === 'rtl' ? -1 : 1;
-            const by = event.key === 'ArrowRight' ? forward : event.key === 'ArrowLeft' ? -forward : 0;
+            const by = inlineStep(this, event.key);
             if (column && by !== 0) {
                 event.preventDefault();
                 this.moveColumn(column.field, by);
@@ -126,7 +125,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 return;
             }
             const rtl = getComputedStyle(this).direction === 'rtl';
-            const others = this.orderedColumns.filter((column) => column.field !== '' && column.field !== dragging.field);
+            const others = this.shownColumns.filter((column) => column.field !== '' && column.field !== dragging.field);
             const place = others.filter((column) => {
                 const box = column.shadowRoot?.querySelector('[part="column"]')?.getBoundingClientRect();
                 if (!box) {
@@ -135,8 +134,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 const middle = box.left + box.width / 2;
                 return rtl ? event.clientX < middle : event.clientX > middle;
             }).length;
-            const next = others.map((column) => column.field);
-            next.splice(place, 0, dragging.field);
+            const beside = others[place - 1] ?? others[0];
+            if (!beside) {
+                return;
+            }
+            const next = this.placed(dragging.field, beside.field, place > 0);
             if (next.join(' ') !== this.dragOrder.join(' ')) {
                 this.dragOrder = next;
             }
@@ -272,6 +274,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         let next = 0;
         return columns.map((column) => (column.field === '' ? column : (moving[next++] ?? column)));
     }
+    get shownColumns() {
+        return this.orderedColumns.filter((column) => column.shown);
+    }
     get fields() {
         return this.orderedColumns.filter((column) => column.field !== '').map((column) => column.field);
     }
@@ -281,7 +286,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             .map((column) => ({ field: column.field, order: (row) => column.order(row) }));
     }
     get template() {
-        const declared = this.orderedColumns;
+        const declared = this.shownColumns;
         if (declared.length === 0) {
             return '';
         }
@@ -408,17 +413,21 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return rows.map((row, place) => this.keyOf(row, place));
     }
     moveColumn(field, by) {
-        const fields = this.fields;
-        const from = fields.indexOf(field);
-        const to = from + by;
-        if (from < 0 || to < 0 || to >= fields.length) {
+        const drawn = this.shownColumns.filter((column) => column.field !== '');
+        const from = drawn.findIndex((column) => column.field === field);
+        const past = drawn[from + by];
+        if (from < 0 || !past) {
             return false;
         }
-        fields.splice(to, 0, ...fields.splice(from, 1));
-        return this.requestOrder(fields);
+        return this.requestOrder(this.placed(field, past.field, by > 0));
+    }
+    placed(field, beside, after) {
+        const fields = this.fields.filter((one) => one !== field);
+        fields.splice(fields.indexOf(beside) + (after ? 1 : 0), 0, field);
+        return fields;
     }
     csv() {
-        const columns = this.orderedColumns.filter((column) => column.field !== '');
+        const columns = this.shownColumns.filter((column) => column.field !== '');
         const rows = this.mode === 'server' ? this.rows : this.arrange().rows;
         const quote = (value) => {
             if (value === undefined || value === null) {
@@ -559,7 +568,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     ></${checkbox}>`;
     }
     renderRows(rows) {
-        const columns = this.orderedColumns;
+        const columns = this.shownColumns;
         const field = this.rowKey;
         const start = this.windowStart;
         const chosen = this.selectable ? this.chosen : undefined;
@@ -611,7 +620,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     render() {
         const { available, matched, rows } = this.view;
         const template = this.template;
-        const columns = this.tableColumns;
+        const columns = this.shownColumns;
         const pagination = this.tag('pagination');
         return html `<div part="toolbar"><slot name="toolbar"></slot></div>
       <div

package/dist/date-input/root/date-input-root.d.ts

@@ -145,9 +145,42 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      *
      * Worth more than one mainly for a range, where picking a start in March and
      * an end in April otherwise means paging between them and losing sight of the
-     * first. The panel is sized by its content, so this widens it.
+     * first. The panel is sized by its content, so this widens it, and where the
+     * window has no room for that width it shows one month until there is.
      */
     months: number;
+    /**
+     * How many months the panel is showing, where that is fewer than `months`.
+     *
+     * **One month rather than a squeezed two**, and decided here rather than in a
+     * stylesheet because what changes is markup. Two months measure 600 pixels
+     * across, measured 15 Sep 2026, and in a 390 window that ran past both
+     * edges. A rule could only clip them, which hides the next-month control with
+     * the month it sits on, or stack them, which makes a panel taller than most
+     * of a phone. The count is behavior, as a carousel's per-view is.
+     */
+    private fitted;
+    /**
+     * How wide the panel was the last time it held every month, in pixels.
+     *
+     * Measured rather than estimated, because a month's width is its locale's:
+     * the weekday names set it. Remembered, so a panel showing one month knows
+     * what it would take to show them all, and the answer cannot flip back and
+     * forth between two measurements of different things.
+     */
+    private wide;
+    /**
+     * Shows one month where the window has no room for them all, and all of them
+     * again once it does.
+     *
+     * Called after every placement, with the room the floating pass measured,
+     * which is the window less a margin on each side. The panel hangs in the top
+     * layer, so the window is its box, the argument Dialog makes for reading the
+     * viewport. The surface's own width is read, since it is sized by its content
+     * and never capped.
+     */
+    protected placed(room: number | undefined): void;
+    protected willUpdate(changed: PropertyValues): void;
     /**
      * What the field says before a date is in it.
      */

package/dist/date-input/root/date-input-root.js

@@ -33,6 +33,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         this.max = '';
         this.min = '';
         this.months = 1;
+        this.fitted = undefined;
+        this.wide = undefined;
         this.placeholder = 'YYYY-MM-DD';
         this.step = 1;
         this.draft = '';
@@ -82,6 +84,27 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         };
         this.triggerLabel = 'Choose a date';
     }
+    placed(room) {
+        const all = Math.max(1, Math.floor(this.months) || 1);
+        const surface = this.partNamed('surface');
+        if (room === undefined || all === 1 || !surface) {
+            return;
+        }
+        if (this.fitted === undefined) {
+            this.wide = surface.offsetWidth;
+        }
+        const next = this.wide === undefined || this.wide <= room ? undefined : 1;
+        if (next !== this.fitted) {
+            this.fitted = next;
+        }
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has('months') || changed.has('locale')) {
+            this.fitted = undefined;
+            this.wide = undefined;
+        }
+    }
     get picked() {
         const held = dates(this.value);
         return held.length > 0 && held.every(isIso) ? held.join(',') : '';
@@ -153,7 +176,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         week: picker-week, weekday: picker-weekday"
       ?invalid=${this.resolvedFeedback !== ''}
       mode=${this.mode ?? nothing}
-      months=${this.months}
+      months=${this.fitted ?? this.months}
       .value=${this.picked}
       disable-dates=${this.disableDates || nothing}
       disable-days=${this.disableDays || nothing}
@@ -274,6 +297,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDateInput.prototype, "months", void 0);
+__decorate([
+    state()
+], HelixHeadlessDateInput.prototype, "fitted", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "placeholder", void 0);

package/dist/date-picker/root/date-picker-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 { valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, MixinControllerValue, requestChange, } from '@fusion.dev/helix-core';
+import { valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, MixinControllerValue, requestChange, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -75,14 +75,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 return;
             }
             const from = this.anchor;
+            const along = inlineStep(this, event.key);
             if (event.key === 'Enter' || event.key === ' ') {
                 this.select(from);
             }
-            else if (event.key === 'ArrowLeft') {
-                this.moveTo(addDays(from, -1));
-            }
-            else if (event.key === 'ArrowRight') {
-                this.moveTo(addDays(from, 1));
+            else if (along !== 0) {
+                this.moveTo(addDays(from, along));
             }
             else if (event.key === 'ArrowUp') {
                 this.moveTo(addDays(from, -7));
@@ -296,14 +294,14 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     }
     renderPreviousMark() {
         return html `<slot name="previous-icon">
-      <svg part="previous-mark" fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+      <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" fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+      <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
         ${unsafeSVG(caretRight.content)}
       </svg>
     </slot>`;