@fusion.dev/helix-core 0.147.0 → 0.149.0

package/dist/utils/data-options/data-options.d.ts

@@ -0,0 +1,60 @@
+/** One option of a list fed as data, as the list reads and marks it. */
+export interface DataOption {
+    /** Whether the keyboard is on it. The list writes this. */
+    active: boolean;
+    /** Whether it can be chosen. */
+    disabled: boolean;
+    /** Whether a filter hides it. The list writes this. */
+    hidden: boolean;
+    /** Whether it is chosen. The list writes this. */
+    selected: boolean;
+    /** The words a reader sees, which the filter and the typeahead match. */
+    text: string;
+    /** What choosing it puts in the value. */
+    value: string;
+}
+/**
+ * An option as a page hands it over: its value alone, which is also its words,
+ * or a record with a `value`, the `label` a reader sees (the value where it is
+ * left out) and `disabled`.
+ */
+export type DataOptionItem = number | string | {
+    disabled?: boolean;
+    label?: string;
+    value: number | string;
+};
+/**
+ * The options a page handed over as data, as a list reads them, built once per
+ * array.
+ *
+ * Values and words are strings, as an option element's are, so a number and
+ * its digits choose the same option.
+ */
+export declare const dataOptions: (items: readonly DataOptionItem[]) => DataOption[];
+/**
+ * The positions a window draws, in order, with `kept` added where it lies
+ * outside the window: before it where it comes first, after it where it comes
+ * later. `-1` keeps nothing. Positions past `count` are left out.
+ *
+ * `kept` is the option the keyboard is on. **It has to be drawn wherever it
+ * is**, because `aria-activedescendant` points at an element, and an option
+ * that is not drawn is one a screen reader cannot be told about.
+ * `VirtualizeController.spacers(kept)` takes its room out of the spacer on its
+ * side, so the scrollbar still measures the set.
+ */
+export declare const windowOf: (first: number, last: number, count: number, kept: number) => number[];
+/**
+ * Draws `rows[index]` for each of `at` into `box`, as elements named `tag`,
+ * and returns them in order.
+ *
+ * **Reused by position.** A scroll moves the window by a row or two at a time,
+ * so the elements already drawn take the next rows' words and state rather than
+ * being thrown away: a list of ten thousand keeps the twenty or so elements a
+ * screen holds.
+ *
+ * Each element carries its place in the whole set, `aria-posinset` and
+ * `aria-setsize`, so a reader on the four-thousandth of ten thousand hears
+ * that, and not its place in what happens to be drawn. `disabled` holds every
+ * row down, for a list that is disabled itself.
+ */
+export declare const drawOptions: (box: Element, tag: string, rows: readonly DataOption[], at: readonly number[], disabled: boolean) => HTMLElement[];

package/dist/utils/data-options/data-options.js

@@ -0,0 +1,46 @@
+export const dataOptions = (items) => items.map((item) => {
+    const record = typeof item === 'object' ? item : { value: item };
+    return {
+        active: false,
+        disabled: Boolean(record.disabled),
+        hidden: false,
+        selected: false,
+        text: String(record.label ?? record.value),
+        value: String(record.value),
+    };
+});
+export const windowOf = (first, last, count, kept) => {
+    const at = [];
+    for (let index = first; index < Math.min(last, count); index += 1) {
+        at.push(index);
+    }
+    if (kept >= 0 && kept < count && !at.includes(kept)) {
+        kept < first ? at.unshift(kept) : at.push(kept);
+    }
+    return at;
+};
+export const drawOptions = (box, tag, rows, at, disabled) => {
+    const drawn = [...box.children];
+    while (drawn.length > at.length) {
+        drawn.pop()?.remove();
+    }
+    while (drawn.length < at.length) {
+        drawn.push(box.appendChild(box.ownerDocument.createElement(tag)));
+    }
+    at.forEach((index, i) => {
+        const row = rows[index];
+        const element = drawn[i];
+        Object.assign(element, {
+            active: row.active,
+            disabled: row.disabled || disabled,
+            selected: row.selected,
+            value: row.value,
+        });
+        if (element.textContent !== row.text) {
+            element.textContent = row.text;
+        }
+        element.setAttribute('aria-posinset', String(index + 1));
+        element.setAttribute('aria-setsize', String(rows.length));
+    });
+    return drawn;
+};

package/dist/utils/date-segments/date-segments.d.ts

@@ -26,7 +26,8 @@ export interface SegmentOptions {
  * between them, read off `Intl`'s own rendering of a sample.
  *
  * `en-US` is month, day, year with slashes; `de-DE` day, month, year with
- * dots; `ja-JP` year, month, day. A time follows the clock: a twelve hour
+ * dots; `ja-JP` year, month, day; the `iso8601` calendar year, month, day
+ * with hyphens. A time follows the clock: a twelve hour
  * locale ends with the half of the day.
  */
 export declare const segmentLayout: (kind: SegmentedKind, locale: string, options?: SegmentOptions) => SegmentSlot[];

package/dist/utils/date-segments/date-segments.js

@@ -14,6 +14,16 @@ export const segmentLayout = (kind, locale, options = {}) => {
             ...(options.seconds ? { second: '2-digit' } : {}),
             ...(options.hourCycle ? { hourCycle: options.hourCycle } : {}),
         });
+    if (kind === 'date' &&
+        (/-ca-iso8601/i.test(locale) || format.resolvedOptions().calendar === 'iso8601')) {
+        return [
+            { kind: 'year' },
+            { literal: '-' },
+            { kind: 'month' },
+            { literal: '-' },
+            { kind: 'day' },
+        ];
+    }
     const known = new Set(['day', 'dayPeriod', 'hour', 'minute', 'month', 'second', 'year']);
     const slots = [];
     for (const part of format.formatToParts(SAMPLE)) {

package/dist/utils/draw-tooltip/draw-tooltip.d.ts

@@ -44,9 +44,14 @@ export interface TooltipAt {
 /**
  * What the keyboard is reading, which `drawTooltip` says aloud and marks.
  *
- * The chart's `pointer` is one, and is what every chart passes.
+ * The chart's `pointer` is one, and is what every chart passes. A chart whose
+ * readings can be chosen passes one with `state` as well, a word such as
+ * "selected" said after where the reading stands.
  */
-export type ReadingCursor = Pick<ChartPointerController, 'column' | 'keyed'> & Partial<Pick<ChartPointerController, 'position' | 'shows'>>;
+export type ReadingCursor = Pick<ChartPointerController, 'column' | 'keyed'> & Partial<Pick<ChartPointerController, 'position' | 'shows'>> & {
+    /** A word said after the reading's position, such as "selected", or nothing. */
+    state?: string;
+};
 /**
  * What a pointer resting on a reading shows, as `Tooltip` pointed at a mark.
  *

package/dist/utils/draw-tooltip/draw-tooltip.js

@@ -11,7 +11,7 @@ export const drawTooltip = (rows, at, tag, where, slotOf, reading) => {
     const live = reading === undefined || rows.length === 0
         ? nothing
         : html `<span aria-live="polite" part="live" role="status">${reading.keyed && row
-            ? spokenReading(row, reading.column, (cell) => reading.shows?.(cell) !== false, reading.position)
+            ? spokenReading(row, reading.column, (cell) => reading.shows?.(cell) !== false, reading.position, reading.state)
             : ''}</span>`;
     if (!row || rows.length === 0) {
         return live;

package/dist/utils/draw-tooltip/spoken-reading.d.ts

@@ -9,6 +9,7 @@ import type { Row } from '../read-series/read-series.js';
  * false for, which is a series a legend hid.
  *
  * `position` follows in brackets, such as "2 of 12", where the chart gives
- * one: last, so the reading is heard before where it stands.
+ * one: last, so the reading is heard before where it stands. `state`, a word
+ * such as "selected", follows it in the same brackets, "2 of 12, selected".
  */
-export declare const spokenReading: (row: Row, column?: number, shows?: (cell: number) => boolean, position?: string) => string;
+export declare const spokenReading: (row: Row, column?: number, shows?: (cell: number) => boolean, position?: string, state?: string) => string;

package/dist/utils/draw-tooltip/spoken-reading.js

@@ -1,5 +1,6 @@
-export const spokenReading = (row, column, shows = () => true, position = '') => {
-    const after = position === '' ? '' : ` (${position})`;
+export const spokenReading = (row, column, shows = () => true, position = '', state = '') => {
+    const bracket = [position, state].filter((word) => word !== '').join(', ');
+    const after = bracket === '' ? '' : ` (${bracket})`;
     const cell = column === undefined ? undefined : row.cells[column];
     if (cell) {
         return `${`${row.label}, ${cell.name} ${cell.text}`.trim()}${after}`;

package/dist/utils/export-parts/export-parts.d.ts

@@ -0,0 +1,14 @@
+/**
+ * An `exportparts` list that forwards each of an inner component's parts under
+ * a prefix: `exportParts(['button', 'text'], 'copy')` is
+ * `button: copy-button, text: copy-text`.
+ *
+ * **One list per inner component, written once beside it**, so the next part
+ * Button gains reaches every family that renders a Button. Ten lists written
+ * out by hand each had to be found and edited when Button gained `spinner`.
+ *
+ * The inner component's parts are its own declared list, never ones read from
+ * a rendered element: the attribute is written on the server too, before
+ * anything has rendered.
+ */
+export declare const exportParts: (parts: readonly string[], prefix: string) => string;

package/dist/utils/export-parts/export-parts.js

@@ -0,0 +1 @@
+export const exportParts = (parts, prefix) => parts.map((part) => `${part}: ${prefix}-${part}`).join(', ');

package/dist/utils/fill-template/fill-template.d.ts

@@ -11,3 +11,12 @@
  * shows up on the page as the mistake it is.
  */
 export declare const fillTemplate: (template: string, values: Record<string, string | number>) => string;
+/**
+ * A name made from a template and the words of what it acts on: `{key}` in
+ * the template filled with the words, or the words after the template where it
+ * has no `{key}`.
+ *
+ * The shape of every "Remove {label}" a page can override: written either way,
+ * "Remove" alone still names which one, as "Remove Draft".
+ */
+export declare const labelWith: (template: string, key: string, words: string) => string;

package/dist/utils/fill-template/fill-template.js

@@ -1 +1,4 @@
 export const fillTemplate = (template, values) => Object.entries(values).reduce((out, [key, value]) => out.replaceAll(`{${key}}`, () => String(value)), template);
+export const labelWith = (template, key, words) => template.includes(`{${key}}`)
+    ? fillTemplate(template, { [key]: words })
+    : `${template} ${words}`.trim();

package/dist/utils/filter-marks/filter-marks.d.ts

@@ -0,0 +1,36 @@
+/** What the marks are called in `CSS.highlights`, and in `base.css`. */
+export declare const FILTER_MARK = "helix-filter-match";
+/**
+ * Where a needle sits inside an element, as a range over its text nodes, or
+ * nothing where it does not.
+ *
+ * Walked rather than measured off `textContent`, because the words may be split
+ * across several nodes and wrapped in elements of the consumer's, and a match
+ * can begin in one node and end in another. The offsets are mapped back onto
+ * the nodes they came from, so the range covers the real text either way.
+ * Matched without regard to case, as a filter matches.
+ */
+export declare const rangeOf: (root: Element, needle: string) => Range[];
+/**
+ * Marks where `needle` matches in each of `elements`, for `owner`, without
+ * touching the elements. An empty needle takes the owner's marks away, which
+ * is also what an owner leaving the page calls.
+ *
+ * **The Custom Highlight API paints a range, and nothing is inserted.** The
+ * words are usually the consumer's own light DOM, slotted through as many as
+ * two shadow roots, and wrapping the matched part in a `<mark>` would mean
+ * rewriting their content: markup they wrote would come back changed. So an
+ * option holding a link or an icon is marked as readily as one holding a bare
+ * word. Listbox marks what its filter matched this way, and so every family
+ * that filters through one: Select, Combobox, Command and Time Picker.
+ *
+ * **The rule that paints it lives in `base.css`**, as
+ * `::highlight(helix-filter-match)`, rather than in a component's styles. A
+ * highlight is styled from the tree its text lives in, and that text lives in
+ * the consumer's document.
+ *
+ * Nothing at all where the API is missing, as on a server, in a test
+ * environment or in an older browser: the text nodes are not walked for an
+ * answer nothing can paint.
+ */
+export declare const markMatches: (owner: Element, elements: Iterable<Element>, needle: string) => void;

package/dist/utils/filter-marks/filter-marks.js

@@ -0,0 +1,41 @@
+export const FILTER_MARK = 'helix-filter-match';
+const matched = new Map();
+export const rangeOf = (root, needle) => {
+    const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    let whole = '';
+    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+        nodes.push([node, whole.length]);
+        whole += node.nodeValue;
+    }
+    const at = whole.toLowerCase().indexOf(needle.toLowerCase());
+    if (at < 0 || needle === '') {
+        return [];
+    }
+    const range = root.ownerDocument.createRange();
+    const [start, before] = nodes.findLast(([, from]) => from <= at);
+    range.setStart(start, at - before);
+    const end = at + needle.length;
+    const [last, under] = nodes.findLast(([, from]) => from < end);
+    range.setEnd(last, end - under);
+    return [range];
+};
+export const markMatches = (owner, elements, needle) => {
+    const registry = globalThis.CSS?.highlights;
+    if (registry === undefined) {
+        return;
+    }
+    if (needle === '') {
+        matched.delete(owner);
+    }
+    else {
+        matched.set(owner, [...elements].flatMap((element) => rangeOf(element, needle)));
+    }
+    const all = [...matched.values()].flat();
+    if (all.length === 0) {
+        registry.delete(FILTER_MARK);
+    }
+    else {
+        registry.set(FILTER_MARK, new Highlight(...all));
+    }
+};

package/dist/utils/focus-target/focus-target.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The element focus lands on when a trigger is focused: the trigger itself,
+ * or, for a component that delegates focus, the control inside its shadow root,
+ * followed down through any component nested there.
+ *
+ * **What a description or a name has to be written on**, since a reader hears
+ * the element that has focus: a tooltip describing a Helix button describes
+ * the `<button>` inside it, and a badge counting on an icon button counts on
+ * the same one. Read from outside through `shadowRoot`, so it works for any
+ * component with an open root and names none.
+ */
+export declare const focusTarget: (trigger: Element) => Element;

package/dist/utils/focus-target/focus-target.js

@@ -0,0 +1,9 @@
+const CONTROL = 'a[href], button, input, select, textarea, [contenteditable], [tabindex]:not([tabindex="-1"])';
+export const focusTarget = (trigger) => {
+    const root = trigger.shadowRoot;
+    if (!root?.delegatesFocus) {
+        return trigger;
+    }
+    const inner = root.querySelector(CONTROL);
+    return inner ? focusTarget(inner) : trigger;
+};

package/dist/utils/focusable-elements/focusable-elements.d.ts

@@ -1,3 +1,20 @@
+/**
+ * What takes a press of its own inside a row or an item that is pressable as a
+ * whole: a link, a control, a label, a disclosure's summary, or anything a page
+ * gave a `tabindex`.
+ */
+export declare const PRESSABLE = "a[href], button, input, label, select, summary, textarea, [tabindex]";
+/**
+ * Whether a press landed on a control of the item's own, before `boundary` in
+ * its path, so the item leaves the press to that control.
+ *
+ * **The composed path, so a control inside a component counts**: the `<button>`
+ * in a slotted Helix button's shadow root is on the path and matches, where the
+ * event's retargeted `target` is only the host. The boundary itself and
+ * everything past it is not asked, so a row that is a `[tabindex]` stop does
+ * not count as its own control.
+ */
+export declare const pressedOwnControl: (event: Event, boundary: EventTarget, pressable?: string) => boolean;
 /**
  * Everything inside `root` the reader can reach with Tab, in document order.
  *

package/dist/utils/focusable-elements/focusable-elements.js

@@ -7,6 +7,14 @@ const NATIVE_FOCUSABLE = [
     '[contenteditable]:not([contenteditable="false"])',
     '[tabindex]:not([tabindex="-1"])',
 ].join(',');
+export const PRESSABLE = 'a[href], button, input, label, select, summary, textarea, [tabindex]';
+export const pressedOwnControl = (event, boundary, pressable = PRESSABLE) => {
+    const path = event.composedPath();
+    const end = path.indexOf(boundary);
+    return path
+        .slice(0, end < 0 ? 0 : end)
+        .some((node) => node instanceof Element && node.matches(pressable));
+};
 export const focusableElements = (root) => [...root.querySelectorAll('*')].filter((node) => (node.matches(NATIVE_FOCUSABLE) || node.shadowRoot?.delegatesFocus === true) &&
     node.getClientRects().length > 0);
 export const deepActiveElement = () => {

package/dist/utils/grid-move/grid-move.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Where a key moves focus in a table read as a grid, as arithmetic over places.
+ *
+ * Pure, so a spec holds the keyboard map without a page, and in core because
+ * Table's `grid` and Data Table both read it: each finds its cells and focuses
+ * them, and this says which place a key reaches from which.
+ */
+/**
+ * A cell's place in the grid. The row of headings is row `-1`, the rows count
+ * from 0 in the order they are drawn, and a `selectable` table's checkbox
+ * column is column 0.
+ */
+export interface GridPlace {
+    column: number;
+    row: number;
+}
+/** The edges of the grid a key cannot move past. */
+export interface GridBounds {
+    /** The last row, counted as `GridPlace.row` counts. */
+    last: number;
+    /** The first row: `-1` where there is a row of headings, and `0` where there is not. */
+    top: number;
+    /** How many columns the grid has. */
+    width: number;
+}
+/** What a key reads besides itself. */
+export interface GridKeys {
+    /** Whether Control or Command was held, which takes Home and End to the corners. */
+    control: boolean;
+    /** How many rows Page Up and Page Down move. */
+    page: number;
+    /**
+     * Which way a horizontal arrow moves along the line: `1` forward, `-1` back,
+     * as core `inlineStep` answers, so a right-to-left page is already flipped.
+     */
+    step: -1 | 0 | 1;
+}
+/**
+ * The place a key reaches from `from`, or `undefined` for a key that does not
+ * move focus. A key at an edge answers the place it is on, so the caller still
+ * takes the key.
+ *
+ * | Key | Place |
+ * |---|---|
+ * | Up, Down | One row, the headings included. |
+ * | Left, Right | One column along the line, as `step` says. |
+ * | Home, End | The first or the last column of the row. |
+ * | Control with Home or End | The first column of the first row, or the last of the last. |
+ * | Page Up, Page Down | `page` rows. |
+ */
+export declare const gridMove: (key: string, from: GridPlace, bounds: GridBounds, keys: GridKeys) => GridPlace | undefined;
+/**
+ * How many rows Page Up and Page Down move: the rows of `tall` pixels that fit
+ * in `room`, less one, so the row focus left stays in view. At least one.
+ */
+export declare const pageRows: (room: number, tall: number) => number;

package/dist/utils/grid-move/grid-move.js

@@ -0,0 +1,28 @@
+const within = (value, low, high) => Math.max(low, Math.min(high, value));
+export const gridMove = (key, from, bounds, keys) => {
+    const { last, top, width } = bounds;
+    const edge = Math.max(0, width - 1);
+    const row = (to) => ({ column: from.column, row: within(to, top, last) });
+    switch (key) {
+        case 'ArrowUp':
+            return row(from.row - 1);
+        case 'ArrowDown':
+            return row(from.row + 1);
+        case 'ArrowLeft':
+        case 'ArrowRight':
+            return keys.step === 0
+                ? undefined
+                : { column: within(from.column + keys.step, 0, edge), row: from.row };
+        case 'Home':
+            return { column: 0, row: keys.control ? top : from.row };
+        case 'End':
+            return { column: edge, row: keys.control ? last : from.row };
+        case 'PageUp':
+            return row(from.row - keys.page);
+        case 'PageDown':
+            return row(from.row + keys.page);
+        default:
+            return undefined;
+    }
+};
+export const pageRows = (room, tall) => tall > 0 ? Math.max(1, Math.floor(room / tall) - 1) : 1;

package/dist/utils/locale-of/locale-of.d.ts

@@ -1,3 +1,8 @@
+/**
+ * The runtime's own locale: in a browser, the language its interface is set
+ * to, which is what every `Intl` call given no locale uses.
+ */
+export declare const runtimeLocale: () => string;
 /**
  * The locale an element speaks: `own`, the element's own `locale` property,
  * where one is set, and otherwise the `lang` of the nearest element with one,

package/dist/utils/locale-of/locale-of.js

@@ -1,9 +1,15 @@
 let runtime;
+export const runtimeLocale = () => {
+    runtime ??= new Intl.Locale(new Intl.DateTimeFormat().resolvedOptions().locale);
+    return runtime.toString();
+};
 const usable = (lang) => {
     try {
         const asked = new Intl.Locale(lang);
-        runtime ??= new Intl.Locale(new Intl.DateTimeFormat().resolvedOptions().locale);
-        return asked.region === undefined && asked.language === runtime.language ? '' : asked.toString();
+        runtimeLocale();
+        return asked.region === undefined && asked.language === runtime?.language
+            ? ''
+            : asked.toString();
     }
     catch {
         return '';

package/dist/utils/number-format/number-format.d.ts

@@ -9,6 +9,13 @@
  */
 /** Writes a number in a locale with `Intl.NumberFormat` options. */
 export declare const formatNumber: (value: number, locale?: string, options?: Intl.NumberFormatOptions) => string;
+/**
+ * A share, from 0 to 1, as a locale writes a whole percentage: `40%`, or
+ * `40 %` in French. For `aria-valuetext`, since a bare `aria-valuenow` is read
+ * as a number with no unit. Splitter's position and Meter's and Progress's
+ * readings are written with it.
+ */
+export declare const formatPercent: (share: number, locale?: string) => string;
 /**
  * A reading in words: `value` written with `options` where they say another
  * style, and otherwise `share`, from 0 to 1, as a percentage, whole unless

package/dist/utils/number-format/number-format.js

@@ -10,6 +10,7 @@ const formatter = (locale, options) => {
 };
 export const formatNumber = (value, locale = '', options) => formatter(locale, options).format(value);
 const WHOLE_PERCENT = { maximumFractionDigits: 0, style: 'percent' };
+export const formatPercent = (share, locale = '') => formatNumber(share, locale, WHOLE_PERCENT);
 export const readingText = (value, share, locale = '', options) => options && options.style !== 'percent'
     ? formatNumber(value, locale, options)
     : formatNumber(share, locale, options ?? WHOLE_PERCENT);

package/dist/utils/reorder/drag-preview.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The copy of an item a pointer drags: what the item draws, through every
+ * shadow root and slot in it, rebuilt as plain elements with the styles the
+ * browser computed for each written on it.
+ *
+ * `ReorderController` puts the copy in the host's own shadow root, in the top
+ * layer, so the page's markup is never touched and no scrolling box clips it.
+ * A copy is inert: it has no custom elements, no slots, and no attributes but
+ * a picture's, so nothing in it upgrades, takes the host's children, or joins
+ * a radio group. Pseudo-elements are not copied.
+ */
+import { nothing, type TemplateResult } from 'lit';
+/**
+ * The part a host draws for the drag preview: an empty manual popover,
+ * hidden from assistive technology, which `ReorderController` fills with a
+ * copy of the item a pointer drags and shows in the top layer. Closed, it
+ * takes no room. Drawn while `on`, which is while the host reorders.
+ */
+export declare const drawDragPreview: (on: boolean) => TemplateResult | typeof nothing;
+/** A point in the viewport, where the boxes of a copy are measured from. */
+interface Origin {
+    x: number;
+    y: number;
+}
+/**
+ * The box an element draws: its own, or the boxes of what it draws together,
+ * for an element that is `display: contents`, such as a row of a grid.
+ */
+export declare const boxOf: (element: Element) => DOMRect;
+/**
+ * A copy of what a node draws, for a drag preview, with every style the
+ * browser computed for each part written on it. The custom properties are
+ * left out, having done their work, and so are the logical properties, whose
+ * physical twins are written: two of a pair in one style do not agree on
+ * which wins.
+ *
+ * A `placed` node is put where it is with `position: absolute`, measured from
+ * `origin`, the padding box it is placed in, rather than laid out again. The
+ * root of a preview is placed in the preview, whose padding box is the root's
+ * box as `boxOf` measures it, and so is whatever a grid lays out, since a
+ * subgrid has no tracks of its own once it is copied out of its grid. An
+ * element that is `display: contents`, such as a row whose cells sit in the
+ * grid of its table, has each of its cells put where it is.
+ */
+export declare const dragPreviewOf: (node: Node, placed: boolean, origin: Origin) => Node[];
+export {};

package/dist/utils/reorder/drag-preview.js

@@ -0,0 +1,58 @@
+import { html, nothing } from 'lit';
+export const drawDragPreview = (on) => on ? html `<div part="drag-preview" popover="manual" aria-hidden="true" inert></div>` : nothing;
+const drawn = (node) => {
+    const assigned = node instanceof HTMLSlotElement ? node.assignedNodes({ flatten: true }) : [];
+    return [...(assigned.length ? assigned : (node.shadowRoot ?? node).childNodes)];
+};
+export const boxOf = (element) => {
+    if (getComputedStyle(element).display !== 'contents') {
+        return element.getBoundingClientRect();
+    }
+    let [left, top, right, bottom] = [Infinity, Infinity, -Infinity, -Infinity];
+    for (const node of drawn(element)) {
+        const box = node instanceof Element && boxOf(node);
+        if (box && (box.width || box.height)) {
+            left = Math.min(left, box.left);
+            top = Math.min(top, box.top);
+            right = Math.max(right, box.right);
+            bottom = Math.max(bottom, box.bottom);
+        }
+    }
+    return left <= right ? new DOMRect(left, top, right - left, bottom - top) : new DOMRect();
+};
+export const dragPreviewOf = (node, placed, origin) => {
+    if (node instanceof Text) {
+        return [node.cloneNode()];
+    }
+    const style = node instanceof Element ? getComputedStyle(node) : undefined;
+    if (!style || style.display === 'none') {
+        return [];
+    }
+    const element = node;
+    const tag = element.localName;
+    const whole = /^(img|svg)$/.test(tag);
+    const copy = whole
+        ? element.cloneNode(true)
+        : document.createElement(/-|^slot$/.test(tag) ? 'div' : tag);
+    const contents = style.display === 'contents';
+    const box = element.getBoundingClientRect();
+    let written = '';
+    for (let index = 0; index < style.length; index += 1) {
+        const name = style.item(index);
+        if (!/^--|block|inline|start-|end-/.test(name)) {
+            written += `${name}:${style.getPropertyValue(name)};`;
+        }
+    }
+    copy.style.cssText =
+        placed && !contents
+            ? `${written}position:absolute;inset:auto;left:${box.left - origin.x}px;top:${box.top - origin.y}px;width:${box.width}px;height:${box.height}px;margin:0;box-sizing:border-box;grid-area:auto`
+            : written;
+    if (!whole) {
+        const inner = !contents && (placed || style.position !== 'static')
+            ? { x: box.left + element.clientLeft, y: box.top + element.clientTop }
+            : origin;
+        const grid = contents ? placed : style.display.endsWith('grid');
+        copy.append(...drawn(element).flatMap((child) => dragPreviewOf(child, grid, inner)));
+    }
+    return [copy];
+};