@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/drag-drop/dom/clone-node.js

@@ -0,0 +1,58 @@
+// Ported from Angular Components (src/cdk/drag-drop/dom/clone-node.ts), MIT, © Google LLC.
+/** Creates a deep clone of an element. */
+export function deepCloneNode(node) {
+    const clone = node.cloneNode(true);
+    const descendantsWithId = clone.querySelectorAll('[id]');
+    const nodeName = node.nodeName.toLowerCase();
+    // Remove the `id` to avoid having multiple elements with the same id on the page.
+    clone.removeAttribute('id');
+    for (let i = 0; i < descendantsWithId.length; i++) {
+        descendantsWithId[i].removeAttribute('id');
+    }
+    if (nodeName === 'canvas') {
+        transferCanvasData(node, clone);
+    }
+    else if (nodeName === 'input' || nodeName === 'select' || nodeName === 'textarea') {
+        transferInputData(node, clone);
+    }
+    transferData('canvas', node, clone, transferCanvasData);
+    transferData('input, textarea, select', node, clone, transferInputData);
+    return clone;
+}
+/** Matches elements between an element and its clone and allows for their data to be cloned. */
+function transferData(selector, node, clone, callback) {
+    const descendantElements = node.querySelectorAll(selector);
+    if (descendantElements.length) {
+        const cloneElements = clone.querySelectorAll(selector);
+        for (let i = 0; i < descendantElements.length; i++) {
+            callback(descendantElements[i], cloneElements[i]);
+        }
+    }
+}
+// Counter for unique cloned radio button names.
+let cloneUniqueId = 0;
+/** Transfers the data of one input element to another. */
+function transferInputData(source, clone) {
+    // Browsers throw an error when assigning the value of a file input programmatically.
+    if (clone.type !== 'file') {
+        clone.value = source.value;
+    }
+    // Radio button `name` attributes must be unique for radio button groups
+    // otherwise original radio buttons can lose their checked state
+    // once the clone is inserted in the DOM.
+    if (clone.type === 'radio' && clone.name) {
+        clone.name = `mat-clone-${clone.name}-${cloneUniqueId++}`;
+    }
+}
+/** Transfers the data of one canvas element to another. */
+function transferCanvasData(source, clone) {
+    const context = clone.getContext('2d');
+    if (context) {
+        // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
+        // We can't do much about it so just ignore the error.
+        try {
+            context.drawImage(source, 0, 0);
+        }
+        catch { }
+    }
+}

package/drag-drop/dom/coerce.d.ts

@@ -0,0 +1,6 @@
+/** An element or an `ElementRef`-like wrapper. */
+export type ElementLike<T extends Element = HTMLElement> = T | {
+    nativeElement: T;
+};
+/** Coerces an `ElementRef`-like or an element into an element. */
+export declare function coerceElement<T extends Element = HTMLElement>(elementOrRef: ElementLike<T>): T;

package/drag-drop/dom/coerce.js

@@ -0,0 +1,8 @@
+// Ported from Angular Components (src/cdk/coercion/element.ts), MIT, © Google LLC.
+// Rivet: no `ElementRef` class — any `{nativeElement}` object is accepted.
+/** Coerces an `ElementRef`-like or an element into an element. */
+export function coerceElement(elementOrRef) {
+    return elementOrRef && typeof elementOrRef === 'object' && 'nativeElement' in elementOrRef
+        ? elementOrRef.nativeElement
+        : elementOrRef;
+}

package/drag-drop/dom/dom-rect.d.ts

@@ -0,0 +1,37 @@
+/** Gets a mutable version of an element's bounding `DOMRect`. */
+export declare function getMutableClientRect(element: Element): DOMRect;
+/**
+ * Checks whether some coordinates are within a `DOMRect`.
+ * @param clientRect DOMRect that is being checked.
+ * @param x Coordinates along the X axis.
+ * @param y Coordinates along the Y axis.
+ */
+export declare function isInsideClientRect(clientRect: DOMRect, x: number, y: number): boolean;
+/**
+ * Checks if the child element is overflowing from its parent.
+ * @param parentRect - The bounding rect of the parent element.
+ * @param childRect - The bounding rect of the child element.
+ */
+export declare function isOverflowingParent(parentRect: DOMRect, childRect: DOMRect): boolean;
+/**
+ * Updates the top/left positions of a `DOMRect`, as well as their bottom/right counterparts.
+ * @param domRect `DOMRect` that should be updated.
+ * @param top Amount to add to the `top` position.
+ * @param left Amount to add to the `left` position.
+ */
+export declare function adjustDomRect(domRect: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+}, top: number, left: number): void;
+/**
+ * Checks whether the pointer coordinates are close to a DOMRect.
+ * @param rect DOMRect to check against.
+ * @param threshold Threshold around the DOMRect.
+ * @param pointerX Coordinates along the X axis.
+ * @param pointerY Coordinates along the Y axis.
+ */
+export declare function isPointerNearDomRect(rect: DOMRect, threshold: number, pointerX: number, pointerY: number): boolean;

package/drag-drop/dom/dom-rect.js

@@ -0,0 +1,71 @@
+// Ported from Angular Components (src/cdk/drag-drop/dom/dom-rect.ts), MIT, © Google LLC.
+/** Gets a mutable version of an element's bounding `DOMRect`. */
+export function getMutableClientRect(element) {
+    const rect = element.getBoundingClientRect();
+    // We need to clone the `clientRect` here, because all the values on it are readonly
+    // and we need to be able to update them. Also we can't use a spread here, because
+    // the values on a `DOMRect` aren't own properties. See:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
+    return {
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        x: rect.x,
+        y: rect.y,
+    };
+}
+/**
+ * Checks whether some coordinates are within a `DOMRect`.
+ * @param clientRect DOMRect that is being checked.
+ * @param x Coordinates along the X axis.
+ * @param y Coordinates along the Y axis.
+ */
+export function isInsideClientRect(clientRect, x, y) {
+    const { top, bottom, left, right } = clientRect;
+    return y >= top && y <= bottom && x >= left && x <= right;
+}
+/**
+ * Checks if the child element is overflowing from its parent.
+ * @param parentRect - The bounding rect of the parent element.
+ * @param childRect - The bounding rect of the child element.
+ */
+export function isOverflowingParent(parentRect, childRect) {
+    // check for horizontal overflow (left and right)
+    const isLeftOverflowing = childRect.left < parentRect.left;
+    const isRightOverflowing = childRect.left + childRect.width > parentRect.right;
+    // check for vertical overflow (top and bottom)
+    const isTopOverflowing = childRect.top < parentRect.top;
+    const isBottomOverflowing = childRect.top + childRect.height > parentRect.bottom;
+    return isLeftOverflowing || isRightOverflowing || isTopOverflowing || isBottomOverflowing;
+}
+/**
+ * Updates the top/left positions of a `DOMRect`, as well as their bottom/right counterparts.
+ * @param domRect `DOMRect` that should be updated.
+ * @param top Amount to add to the `top` position.
+ * @param left Amount to add to the `left` position.
+ */
+export function adjustDomRect(domRect, top, left) {
+    domRect.top += top;
+    domRect.bottom = domRect.top + domRect.height;
+    domRect.left += left;
+    domRect.right = domRect.left + domRect.width;
+}
+/**
+ * Checks whether the pointer coordinates are close to a DOMRect.
+ * @param rect DOMRect to check against.
+ * @param threshold Threshold around the DOMRect.
+ * @param pointerX Coordinates along the X axis.
+ * @param pointerY Coordinates along the Y axis.
+ */
+export function isPointerNearDomRect(rect, threshold, pointerX, pointerY) {
+    const { top, right, bottom, left, width, height } = rect;
+    const xThreshold = width * threshold;
+    const yThreshold = height * threshold;
+    return (pointerY > top - yThreshold &&
+        pointerY < bottom + yThreshold &&
+        pointerX > left - xThreshold &&
+        pointerX < right + xThreshold);
+}

package/drag-drop/dom/fake-event.d.ts

@@ -0,0 +1,4 @@
+/** Gets whether an event could be a faked `mousedown` event dispatched by a screen reader. */
+export declare function isFakeMousedownFromScreenReader(event: MouseEvent): boolean;
+/** Gets whether an event could be a faked `touchstart` event dispatched by a screen reader. */
+export declare function isFakeTouchstartFromScreenReader(event: TouchEvent): boolean;

package/drag-drop/dom/fake-event.js

@@ -0,0 +1,22 @@
+// Ported from Angular Components (src/cdk/a11y/fake-event-detection.ts), MIT, © Google LLC.
+/** Gets whether an event could be a faked `mousedown` event dispatched by a screen reader. */
+export function isFakeMousedownFromScreenReader(event) {
+    // Some screen readers will dispatch a fake `mousedown` event when pressing enter or space on
+    // a clickable element. We can distinguish these events when `event.buttons` is zero, or
+    // `event.detail` is zero depending on the browser:
+    // - `event.buttons` works on Firefox, but fails on Chrome.
+    // - `detail` works on Chrome, but fails on Firefox.
+    return event.buttons === 0 || event.detail === 0;
+}
+/** Gets whether an event could be a faked `touchstart` event dispatched by a screen reader. */
+export function isFakeTouchstartFromScreenReader(event) {
+    const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
+    // A fake `touchstart` can be distinguished from a real one by looking at the `identifier`
+    // which is typically >= 0 on a real device versus -1 from a screen reader. Just to be safe,
+    // we can also look at `radiusX` and `radiusY`. This behavior was observed against a Windows 10
+    // device with a touch screen running NVDA v2020.4 and Firefox 85 or Chrome 88.
+    return (!!touch &&
+        touch.identifier === -1 &&
+        (touch.radiusX == null || touch.radiusX === 1) &&
+        (touch.radiusY == null || touch.radiusY === 1));
+}

package/drag-drop/dom/inherited-text.d.ts

@@ -0,0 +1,4 @@
+/** The `.cdk-drag-preview` declarations of the resets layer: the carried values, else plain inheritance. */
+export declare const INHERITED_TEXT_RESETS: string;
+/** Copies `source`'s computed inherited text properties onto `preview` (as the resets layer's custom properties). */
+export declare function carryInheritedText(preview: HTMLElement, source: Element): void;

package/drag-drop/dom/inherited-text.js

@@ -0,0 +1,44 @@
+// Rivet-authored (no upstream file). Keeps a body-level drag preview's inherited typography.
+//
+// Angular CDK inserts the preview at the end of `<body>` (`previewContainer: "global"`), so it inherits
+// the body's text styles instead of the ones the dragged element got from its ancestors: a card in a
+// `text-sm` board grows to the body's 16px while its `text-xs` parts stay the same (user bug 2026-10-09,
+// "kanban - dragged item has different font sizes"). The preview root carries the source parent's
+// computed inherited text properties as custom properties; the resets layer (`drag-drop-registry.ts`,
+// the lowest-priority layer) applies them, so any class or rule the app gives the element or
+// `.cdk-drag-preview` still wins, as inheritance would let it.
+/** Inherited text properties a global preview takes from the dragged element's parent. */
+const INHERITED_TEXT = [
+    "color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "font-variant-numeric",
+    "font-feature-settings",
+    "line-height",
+    "letter-spacing",
+    "word-spacing",
+    "text-align",
+    "text-transform",
+    "white-space",
+];
+const variable = (property) => `--rv-drag-${property}`;
+/** The `.cdk-drag-preview` declarations of the resets layer: the carried values, else plain inheritance. */
+export const INHERITED_TEXT_RESETS = INHERITED_TEXT.map((property) => `${property}:var(${variable(property)},inherit)`).join(";");
+/** Copies `source`'s computed inherited text properties onto `preview` (as the resets layer's custom properties). */
+export function carryInheritedText(preview, source) {
+    const computed = getComputedStyle(source);
+    const style = preview.style;
+    for (const property of INHERITED_TEXT) {
+        const value = computed.getPropertyValue(property);
+        if (value)
+            style.setProperty(variable(property), value);
+    }
+    // A unitless line height inherits as the factor (each descendant multiplies its own font size);
+    // the computed style string is the resolved px value, so keep the number where Typed OM exposes it.
+    const lineHeight = source.computedStyleMap?.().get("line-height");
+    if (lineHeight && lineHeight.unit === "number") {
+        style.setProperty(variable("line-height"), String(lineHeight.value));
+    }
+}

package/drag-drop/dom/layout-shift.d.ts

@@ -0,0 +1,8 @@
+/** Cancels the running layout-shift animations of `elements`. */
+export declare function cancelLayoutShift(elements: readonly HTMLElement[]): void;
+/**
+ * Reads the visual rects of `elements` now (including running transforms / shift animations), cancels
+ * their running shift animations and returns a function that, once called, animates every element that
+ * moved from its old position to its new one (measured in a microtask, after the caller's DOM work).
+ */
+export declare function captureLayoutShift(elements: readonly HTMLElement[]): () => void;

package/drag-drop/dom/layout-shift.js

@@ -0,0 +1,87 @@
+// Rivet-authored (no upstream file). Animates the layout shift of a drop list's items when a dragged
+// item enters or leaves the list.
+//
+// Angular CDK moves the placeholder between lists with a plain DOM insert, so the receiving list's items
+// (and the source list's items, once the placeholder leaves) jump to their new layout position: only
+// the sorting inside a list animates, through the user's `transform` transition on the items. Here the
+// jump is replaced by a FLIP: the items' visual rects are read before the change, then (in a microtask,
+// after the drag engine finished the pointer move) each moved item plays a Web Animation from its old
+// position back to zero. The animation is additive (`composite: "add"`), so the sort strategy's inline
+// transforms and their CSS transitions keep working on top, and the inline style never sees it.
+// The duration / easing are the item's own `transform` transition (the CSS the upstream docs ask for)
+// after the change, else before it (the source list drops its `cdk-drop-list-dragging` transition on
+// exit), so an item without a transform transition still jumps, as upstream.
+/** `Animation.id` of the layout-shift animations (lets the drop list cancel them before it measures). */
+const SHIFT_ID = "rv-drop-list-shift";
+/** Cancels the running layout-shift animations of `elements`. */
+export function cancelLayoutShift(elements) {
+    for (const element of elements) {
+        if (typeof element.getAnimations !== "function")
+            return;
+        for (const animation of element.getAnimations()) {
+            if (animation.id === SHIFT_ID)
+                animation.cancel();
+        }
+    }
+}
+/**
+ * Reads the visual rects of `elements` now (including running transforms / shift animations), cancels
+ * their running shift animations and returns a function that, once called, animates every element that
+ * moved from its old position to its new one (measured in a microtask, after the caller's DOM work).
+ */
+export function captureLayoutShift(elements) {
+    if (!elements.length || typeof elements[0].animate !== "function")
+        return () => { };
+    const first = elements.map((element) => element.getBoundingClientRect());
+    // A list that stops sorting (exit) loses its `cdk-drop-list-dragging` transition with the change.
+    const before = elements.map(transformTransition);
+    cancelLayoutShift(elements);
+    return () => queueMicrotask(() => {
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            if (!element.isConnected)
+                continue;
+            const timing = transformTransition(element) || before[i];
+            if (!timing)
+                continue;
+            const last = element.getBoundingClientRect();
+            const x = first[i].left - last.left;
+            const y = first[i].top - last.top;
+            if (!x && !y)
+                continue;
+            element.animate([{ transform: `translate3d(${x}px, ${y}px, 0)` }, { transform: "translate3d(0, 0, 0)" }], {
+                ...timing,
+                composite: "add",
+                id: SHIFT_ID,
+            });
+        }
+    });
+}
+/** The element's computed `transform` transition (`transform` or `all`), or null when it has none. */
+function transformTransition(element) {
+    const style = getComputedStyle(element);
+    const properties = list(style, "transition-property");
+    const index = properties.findIndex((property) => property === "transform" || property === "all");
+    if (index < 0)
+        return null;
+    const duration = timeAt(list(style, "transition-duration"), index);
+    if (!duration)
+        return null;
+    const easings = style.getPropertyValue("transition-timing-function").split(/,(?![^(]*\))/);
+    return {
+        duration,
+        delay: timeAt(list(style, "transition-delay"), index),
+        easing: (easings[index % easings.length] || "ease").trim(),
+    };
+}
+function list(style, name) {
+    return style
+        .getPropertyValue(name)
+        .split(",")
+        .map((part) => part.trim());
+}
+/** CSS repeats a shorter time list to the property count. */
+function timeAt(values, index) {
+    const value = values[index % values.length] || "0s";
+    return parseFloat(value) * (value.toLowerCase().indexOf("ms") > -1 ? 1 : 1000) || 0;
+}

package/drag-drop/dom/mount-content.d.ts

@@ -0,0 +1,2 @@
+/** Mounts `content` into `template.content`; returns the disposer. */
+export declare function mountTemplateContent(template: HTMLTemplateElement, content: unknown): () => void;

package/drag-drop/dom/mount-content.js

@@ -0,0 +1,7 @@
+// Rivet: client-side mount of `<DragPreview>` / `<DragPlaceholder>` content into their `<template>`'s
+// fragment (a `.ts` module so the component's server build keeps no `mount` import).
+import { mount } from "@rivetjs/runtime/dom";
+/** Mounts `content` into `template.content`; returns the disposer. */
+export function mountTemplateContent(template, content) {
+    return mount(() => content, template.content);
+}

package/drag-drop/dom/parent-position-tracker.d.ts

@@ -0,0 +1,32 @@
+/** Object holding the scroll position of something. */
+interface ScrollPosition {
+    top: number;
+    left: number;
+}
+/** Keeps track of the scroll position and dimensions of the parents of an element. */
+export declare class ParentPositionTracker {
+    /** Cached positions of the scrollable parent elements. */
+    readonly positions: Map<Document | HTMLElement, {
+        scrollPosition: ScrollPosition;
+        clientRect?: DOMRect;
+    }>;
+    private _document;
+    constructor(_document: Document);
+    /** Clears the cached positions. */
+    clear(): void;
+    /** Caches the positions. Should be called at the beginning of a drag sequence. */
+    cache(elements: readonly HTMLElement[]): void;
+    /** Handles scrolling while a drag is taking place. */
+    handleScroll(event: Event): ScrollPosition | null;
+    /**
+     * Gets the scroll position of the viewport. Note that we use the scrollX and scrollY directly,
+     * instead of going through the `ViewportRuler`, because the first value the ruler looks at is
+     * the top/left offset of the `document.documentElement` which works for most cases, but breaks
+     * if the element is offset by something like the `BlockScrollStrategy`.
+     */
+    getViewportScrollPosition(): {
+        top: number;
+        left: number;
+    };
+}
+export {};

package/drag-drop/dom/parent-position-tracker.js

@@ -0,0 +1,71 @@
+// Ported from Angular Components (src/cdk/drag-drop/dom/parent-position-tracker.ts), MIT, © Google LLC.
+// Rivet: imports the local _getEventTarget helper.
+import { _getEventTarget } from "./shadow-dom.js";
+import { getMutableClientRect, adjustDomRect } from "./dom-rect.js";
+/** Keeps track of the scroll position and dimensions of the parents of an element. */
+export class ParentPositionTracker {
+    /** Cached positions of the scrollable parent elements. */
+    positions = new Map();
+    _document;
+    constructor(_document) {
+        this._document = _document;
+    }
+    /** Clears the cached positions. */
+    clear() {
+        this.positions.clear();
+    }
+    /** Caches the positions. Should be called at the beginning of a drag sequence. */
+    cache(elements) {
+        this.clear();
+        this.positions.set(this._document, {
+            scrollPosition: this.getViewportScrollPosition(),
+        });
+        elements.forEach(element => {
+            this.positions.set(element, {
+                scrollPosition: { top: element.scrollTop, left: element.scrollLeft },
+                clientRect: getMutableClientRect(element),
+            });
+        });
+    }
+    /** Handles scrolling while a drag is taking place. */
+    handleScroll(event) {
+        const target = _getEventTarget(event);
+        const cachedPosition = this.positions.get(target);
+        if (!cachedPosition) {
+            return null;
+        }
+        const scrollPosition = cachedPosition.scrollPosition;
+        let newTop;
+        let newLeft;
+        if (target === this._document) {
+            const viewportScrollPosition = this.getViewportScrollPosition();
+            newTop = viewportScrollPosition.top;
+            newLeft = viewportScrollPosition.left;
+        }
+        else {
+            newTop = target.scrollTop;
+            newLeft = target.scrollLeft;
+        }
+        const topDifference = scrollPosition.top - newTop;
+        const leftDifference = scrollPosition.left - newLeft;
+        // Go through and update the cached positions of the scroll
+        // parents that are inside the element that was scrolled.
+        this.positions.forEach((position, node) => {
+            if (position.clientRect && target !== node && target.contains(node)) {
+                adjustDomRect(position.clientRect, topDifference, leftDifference);
+            }
+        });
+        scrollPosition.top = newTop;
+        scrollPosition.left = newLeft;
+        return { top: topDifference, left: leftDifference };
+    }
+    /**
+     * Gets the scroll position of the viewport. Note that we use the scrollX and scrollY directly,
+     * instead of going through the `ViewportRuler`, because the first value the ruler looks at is
+     * the top/left offset of the `document.documentElement` which works for most cases, but breaks
+     * if the element is offset by something like the `BlockScrollStrategy`.
+     */
+    getViewportScrollPosition() {
+        return { top: window.scrollY, left: window.scrollX };
+    }
+}

package/drag-drop/dom/root-node.d.ts

@@ -0,0 +1,21 @@
+/** A stamped-out view of a helper template (Angular: `EmbeddedViewRef`). */
+export interface StampedView {
+    rootNodes: Node[];
+    destroy(): void;
+}
+/** Creates a view (Angular: `viewContainer.createEmbeddedView(templateRef, context)`). */
+export type DragTemplateFactory = () => StampedView;
+/** Template that can be used to create a drag helper element (e.g. a preview or a placeholder). */
+export interface DragHelperTemplate<T = any> {
+    /** View factory, or a host element whose children are cloned (Angular: `TemplateRef`). */
+    template: DragTemplateFactory | HTMLElement | null;
+    /** Data of the drag item (Angular: template context). */
+    context?: T;
+}
+/** Stamps out a helper template (Angular: `createEmbeddedView`). */
+export declare function stampTemplate(template: DragTemplateFactory | HTMLElement): StampedView;
+/**
+ * Gets the root HTML element of an embedded view.
+ * If the root is not an HTML element it gets wrapped in one.
+ */
+export declare function getRootNode(viewRef: StampedView, _document: Document): HTMLElement;

package/drag-drop/dom/root-node.js

@@ -0,0 +1,41 @@
+// Ported from Angular Components (src/cdk/drag-drop/dom/root-node.ts), MIT, © Google LLC.
+// Rivet: there are no embedded views. A helper "template" is either a factory returning a stamped view
+// (the `<DragPreview>` / `<DragPlaceholder>` components: their `<template>` content is moved out for the
+// drag and back afterwards, so its bindings stay live — Angular's embedded view), or a host element
+// whose current content is cloned (imperative use: `withPreviewTemplate({ template: element })`).
+// `view.destroy()` stands in for `EmbeddedViewRef.destroy()`.
+import { deepCloneNode } from "./clone-node.js";
+/** Stamps out a helper template (Angular: `createEmbeddedView`). */
+export function stampTemplate(template) {
+    if (typeof template === "function")
+        return template();
+    const source = template instanceof HTMLTemplateElement ? template.content : template;
+    const rootNodes = [];
+    source.childNodes.forEach((node) => {
+        // Skip whitespace and framework comment markers.
+        if (node.nodeType === 3 && !node.textContent.trim())
+            return;
+        if (node.nodeType === 8)
+            return;
+        rootNodes.push(node.nodeType === 1 ? deepCloneNode(node) : node.cloneNode(true));
+    });
+    return {
+        rootNodes,
+        destroy() {
+            rootNodes.forEach((node) => node.remove?.());
+        },
+    };
+}
+/**
+ * Gets the root HTML element of an embedded view.
+ * If the root is not an HTML element it gets wrapped in one.
+ */
+export function getRootNode(viewRef, _document) {
+    const rootNodes = viewRef.rootNodes;
+    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+        return rootNodes[0];
+    }
+    const wrapper = _document.createElement("div");
+    rootNodes.forEach((node) => wrapper.appendChild(node));
+    return wrapper;
+}

package/drag-drop/dom/shadow-dom.d.ts

@@ -0,0 +1,4 @@
+/** Gets the shadow root of an element, if supported and the element is inside the Shadow DOM. */
+export declare function _getShadowRoot(element: HTMLElement): ShadowRoot | null;
+/** Gets the event target of an event while accounting for Shadow DOM. */
+export declare function _getEventTarget<T extends EventTarget>(event: Event): T | null;

package/drag-drop/dom/shadow-dom.js

@@ -0,0 +1,18 @@
+// Ported from Angular Components (src/cdk/platform/features/shadow-dom.ts), MIT, © Google LLC.
+/** Gets the shadow root of an element, if supported and the element is inside the Shadow DOM. */
+export function _getShadowRoot(element) {
+    if (typeof element.attachShadow === "function") {
+        const rootNode = element.getRootNode ? element.getRootNode() : null;
+        // Note that this should be caught by `_supportsShadowDom`, but some
+        // teams have been able to hit this code path on unsupported browsers.
+        if (typeof ShadowRoot !== "undefined" && ShadowRoot && rootNode instanceof ShadowRoot)
+            return rootNode;
+    }
+    return null;
+}
+/** Gets the event target of an event while accounting for Shadow DOM. */
+export function _getEventTarget(event) {
+    // If an event is bound outside the Shadow DOM, the `event.target` will
+    // point to the shadow root so we have to use `composedPath` instead.
+    return (event.composedPath ? event.composedPath()[0] : event.target);
+}

package/drag-drop/dom/styling.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Extended CSSStyleDeclaration that includes a couple of drag-related
+ * properties that aren't in the built-in TS typings.
+ */
+export interface DragCSSStyleDeclaration extends CSSStyleDeclaration {
+    msScrollSnapType: string;
+    scrollSnapType: string;
+    webkitTapHighlightColor: string;
+}
+/**
+ * Shallow-extends a stylesheet object with another stylesheet-like object.
+ * Note that the keys in `source` have to be dash-cased.
+ * @docs-private
+ */
+export declare function extendStyles(dest: CSSStyleDeclaration, source: Record<string, string>, importantProperties?: Set<string>): CSSStyleDeclaration;
+/**
+ * Toggles whether the native drag interactions should be enabled for an element.
+ * @param element Element on which to toggle the drag interactions.
+ * @param enable Whether the drag interactions should be enabled.
+ * @docs-private
+ */
+export declare function toggleNativeDragInteractions(element: HTMLElement, enable: boolean): void;
+/**
+ * Rivet: the styles `toggleNativeDragInteractions` applies (split out so server-rendered handles carry
+ * the same declarations before any code runs).
+ */
+export declare function nativeDragInteractionStyles(enable: boolean): Record<string, string>;
+/**
+ * Toggles whether an element is visible while preserving its dimensions.
+ * @param element Element whose visibility to toggle
+ * @param enable Whether the element should be visible.
+ * @param importantProperties Properties to be set as `!important`.
+ * @docs-private
+ */
+export declare function toggleVisibility(element: HTMLElement, enable: boolean, importantProperties?: Set<string>): void;
+/**
+ * Combines a transform string with an optional other transform
+ * that exited before the base transform was applied.
+ */
+export declare function combineTransforms(transform: string, initialTransform?: string): string;
+/**
+ * Matches the target element's size to the source's size.
+ * @param target Element that needs to be resized.
+ * @param sourceRect Dimensions of the source element.
+ */
+export declare function matchElementSize(target: HTMLElement, sourceRect: DOMRect): void;
+/**
+ * Gets a 3d `transform` that can be applied to an element.
+ * @param x Desired position of the element along the X axis.
+ * @param y Desired position of the element along the Y axis.
+ */
+export declare function getTransform(x: number, y: number): string;