@lit-material/sortable 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bohdaq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,60 @@
-# Temporary Holding Version
+# @lit-material/sortable
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Lets people reorder a list by dragging a handle (mouse, pen or touch) or from the keyboard, within a list or between lists, with each step announced to screen readers. Built with [Lit](https://lit.dev/). Part of [lit-material](https://github.com/bohdaq/lit-material).
+
+## Install
+
+```sh
+npm install @lit-material/sortable @lit-material/tokens
+```
+
+## Usage
+
+```js
+import "@lit-material/sortable";
+
+html`<lit-material-sortable label="Requests" @sort=${(e) => {
+  const { from, to } = e.detail;
+  const [moved] = requests.splice(from, 1);
+  requests.splice(to, 0, moved);
+  this.requestUpdate();
+}}>
+  ${repeat(requests, (r) => r.id, (r) => html`
+    <div data-sort-id=${r.id}>
+      <button data-sort-handle aria-label=${`Reorder ${r.name}`}>⋮⋮</button>${r.name}
+    </div>`)}
+</lit-material-sortable>`;
+```
+
+It never moves elements itself: it shows a drop line and fires `sort`; your code reorders its data
+and re-renders. That keeps it safe with Lit, React or any renderer that owns its DOM. Key repeated
+items (`repeat`, React `key`) so the moved element keeps keyboard focus.
+
+## API
+
+| Property   | Attribute  | Type      | Default |
+| ---------- | ---------- | --------- | ------- |
+| `group`    | `group`    | `string`  | `""` (this list only) |
+| `label`    | `label`    | `string`  | `""` (names the list in announcements) |
+| `disabled` | `disabled` (reflected) | `boolean` | `false` |
+
+Event `sort`: `detail: { item, id, from, to, fromList, toList }` — `to` is the item's index in
+`toList` after the move. Between lists it fires on the list the item left; check
+`toList !== fromList`. Item attributes: `data-sort-id`, `data-sort-label` (announcement name,
+default the text), `data-sort-handle` on the handle (default: the item). While dragged an item has
+`data-sort-dragging`, while picked up from the keyboard `data-sort-grabbed`.
+`--lit-material-sortable-indicator-color` colours the drop line.
+
+## Behavior
+
+- Pointer: press a handle and move 4px to start; the drop line follows; release drops, Escape
+  cancels. Handles get `touch-action: none` so touch drags don't scroll.
+- Keyboard: focus a handle, Space or Enter picks the item up, ↑/↓ (or Home/End) move it — each move
+  fires `sort` — Space drops, Escape puts it back where it started. Moving focus away drops it.
+- Handles get `aria-description="Press Space to reorder"` unless they have one; pick-up, moves and
+  drops are announced from a live region.
+- Lists that share a `group` accept each other's items by pointer.
+
+## License
+
+MIT

package/custom-elements.json

@@ -0,0 +1,471 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialSortable",
+          "declaration": {
+            "name": "LitMaterialSortable",
+            "module": "./sortable.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortDetail",
+          "declaration": {
+            "name": "SortDetail",
+            "module": "./sortable.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/sortable.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Lets people reorder a list: by dragging a handle with a mouse, pen or\nfinger, or from the keyboard — focus a handle, Space (or Enter) picks the\nitem up, ↑/↓ move it, Space drops it and Escape puts it back. Each step is\nannounced to screen readers.\n\nEvery element child is an item. An item's handle is its\n`[data-sort-handle]` descendant (a button, ideally), or the item itself.\nGive items a `data-sort-id` and, when their text isn't a good name, a\n`data-sort-label` for the announcements.\n\nIt never moves elements itself: it shows where the item would land and\nfires `sort` with `{ from, to }`, and your code reorders its data and\nre-renders — so it works with Lit, React or plain DOM, which each own\ntheir own nodes. Lists that share a `group` accept each other's items by\npointer; `sort` then fires on the list the item left, with `toList` set.",
+          "name": "LitMaterialSortable",
+          "cssProperties": [
+            {
+              "description": "The drop line (default `--md-sys-color-primary`).",
+              "name": "--lit-material-sortable-indicator-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The items.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "group",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Lists with the same group accept each other's items. Empty: this list only.",
+              "attribute": "group",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Names the list in announcements, e.g. \"Requests\".",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dropIndex",
+              "type": {
+                "text": "number | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "Where a dragged item would land (index among the other items), or `null`."
+            },
+            {
+              "kind": "field",
+              "name": "announcement",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "drag",
+              "type": {
+                "text": "{\n    item: HTMLElement;\n    from: number;\n    pointerId: number;\n    startX: number;\n    startY: number;\n    active: boolean;\n    target: LitMaterialSortable | null;\n  } | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "grabbed",
+              "type": {
+                "text": "{ item: HTMLElement; origin: number; index: number; refocusing?: number } | undefined"
+              },
+              "privacy": "private",
+              "description": "Keyboard pick-up: the item, where it started, where it is now."
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "description": "The items, in order.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onSlotChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleOf",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "itemFromHandle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "path",
+                  "type": {
+                    "text": "EventTarget[]"
+                  }
+                }
+              ],
+              "description": "The item that `node` is the handle of (or inside), if any."
+            },
+            {
+              "kind": "method",
+              "name": "nameOf",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "announce",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "to",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "toList",
+                  "type": {
+                    "text": "LitMaterialSortable"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "onPointerDown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onPointerMove",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onPointerUp",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onPointerCancel",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onDragKeyDown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "endPointerDrag",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "listAt",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "LitMaterialSortable | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "x",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "y",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "The sortable under a point that accepts this list's items."
+            },
+            {
+              "kind": "method",
+              "name": "indexAt",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "y",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "dragged",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Index among the items other than `dragged` before which `y` falls."
+            },
+            {
+              "kind": "method",
+              "name": "indicatorTop",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number | null"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onKeyDown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "moveGrabbed",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "to",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "refocus",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "drop",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "onFocusOut",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "events": [
+            {
+              "name": "sort",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When an item is dropped somewhere new; `detail` is `SortDetail`."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "group",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Lists with the same group accept each other's items. Empty: this list only.",
+              "fieldName": "group"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Names the list in announcements, e.g. \"Requests\".",
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-sortable",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialSortable",
+          "declaration": {
+            "name": "LitMaterialSortable",
+            "module": "src/sortable.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-sortable",
+          "declaration": {
+            "name": "LitMaterialSortable",
+            "module": "src/sortable.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LitMaterialSortable, type SortDetail } from "./sortable.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { LitMaterialSortable } from "./sortable.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAmB,MAAM,eAAe,CAAC"}

package/dist/sortable.d.ts

@@ -0,0 +1,86 @@
+import { LitElement } from "lit";
+export interface SortDetail {
+    /** The moved element. */
+    item: HTMLElement;
+    /** Its `data-sort-id`, or `""`. */
+    id: string;
+    /** Index in `fromList` before the move. */
+    from: number;
+    /** Index in `toList` after the move. */
+    to: number;
+    fromList: LitMaterialSortable;
+    toList: LitMaterialSortable;
+}
+/**
+ * Lets people reorder a list: by dragging a handle with a mouse, pen or
+ * finger, or from the keyboard — focus a handle, Space (or Enter) picks the
+ * item up, ↑/↓ move it, Space drops it and Escape puts it back. Each step is
+ * announced to screen readers.
+ *
+ * Every element child is an item. An item's handle is its
+ * `[data-sort-handle]` descendant (a button, ideally), or the item itself.
+ * Give items a `data-sort-id` and, when their text isn't a good name, a
+ * `data-sort-label` for the announcements.
+ *
+ * It never moves elements itself: it shows where the item would land and
+ * fires `sort` with `{ from, to }`, and your code reorders its data and
+ * re-renders — so it works with Lit, React or plain DOM, which each own
+ * their own nodes. Lists that share a `group` accept each other's items by
+ * pointer; `sort` then fires on the list the item left, with `toList` set.
+ *
+ * @element lit-material-sortable
+ *
+ * @slot - The items.
+ *
+ * @fires sort - When an item is dropped somewhere new; `detail` is `SortDetail`.
+ *
+ * @cssprop --lit-material-sortable-indicator-color - The drop line (default `--md-sys-color-primary`).
+ */
+export declare class LitMaterialSortable extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Lists with the same group accept each other's items. Empty: this list only. */
+    group: string;
+    /** Names the list in announcements, e.g. "Requests". */
+    label: string;
+    disabled: boolean;
+    /** Where a dragged item would land (index among the other items), or `null`. */
+    private dropIndex;
+    private announcement;
+    private drag?;
+    /** Keyboard pick-up: the item, where it started, where it is now. */
+    private grabbed?;
+    /** The items, in order. */
+    get items(): HTMLElement[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly onSlotChange;
+    private handleOf;
+    /** The item that `node` is the handle of (or inside), if any. */
+    private itemFromHandle;
+    private nameOf;
+    private announce;
+    private emit;
+    private readonly onPointerDown;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
+    private readonly onPointerCancel;
+    private readonly onDragKeyDown;
+    private endPointerDrag;
+    /** The sortable under a point that accepts this list's items. */
+    private listAt;
+    /** Index among the items other than `dragged` before which `y` falls. */
+    indexAt(y: number, dragged: HTMLElement): number;
+    private indicatorTop;
+    private readonly onKeyDown;
+    private moveGrabbed;
+    private refocus;
+    private drop;
+    private readonly onFocusOut;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-sortable": LitMaterialSortable;
+    }
+}
+//# sourceMappingURL=sortable.d.ts.map

package/dist/sortable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../src/sortable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAKD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAgCpB;IAEF,kFAAkF;IACrD,KAAK,SAAM;IAExC,wDAAwD;IAC5C,KAAK,SAAM;IAEqB,QAAQ,UAAS;IAE7D,gFAAgF;IACvE,OAAO,CAAC,SAAS,CAAuB;IAExC,OAAO,CAAC,YAAY,CAAM;IAEnC,OAAO,CAAC,IAAI,CAAC,CAQX;IAEF,qEAAqE;IACrE,OAAO,CAAC,OAAO,CAAC,CAA4E;IAE5F,2BAA2B;IAC3B,IAAI,KAAK,IAAI,WAAW,EAAE,CAEzB;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS3B;IAEF,OAAO,CAAC,QAAQ;IAIhB,iEAAiE;IACjE,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,IAAI;IAYZ,OAAO,CAAC,QAAQ,CAAC,aAAa,CAiB5B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAU1B;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAqC;IAErE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM5B;IAEF,OAAO,CAAC,cAAc;IAatB,iEAAiE;IACjE,OAAO,CAAC,MAAM;IAYd,yEAAyE;IACzE,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,MAAM;IAShD,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAkCxB;IAEF,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,QAAQ,CAAC,UAAU,CAczB;IAEO,MAAM;CAMhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

package/dist/sortable.js

@@ -0,0 +1,374 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var LitMaterialSortable_1;
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+/** Pixels the pointer must travel before a press becomes a drag. */
+const DRAG_THRESHOLD = 4;
+/**
+ * Lets people reorder a list: by dragging a handle with a mouse, pen or
+ * finger, or from the keyboard — focus a handle, Space (or Enter) picks the
+ * item up, ↑/↓ move it, Space drops it and Escape puts it back. Each step is
+ * announced to screen readers.
+ *
+ * Every element child is an item. An item's handle is its
+ * `[data-sort-handle]` descendant (a button, ideally), or the item itself.
+ * Give items a `data-sort-id` and, when their text isn't a good name, a
+ * `data-sort-label` for the announcements.
+ *
+ * It never moves elements itself: it shows where the item would land and
+ * fires `sort` with `{ from, to }`, and your code reorders its data and
+ * re-renders — so it works with Lit, React or plain DOM, which each own
+ * their own nodes. Lists that share a `group` accept each other's items by
+ * pointer; `sort` then fires on the list the item left, with `toList` set.
+ *
+ * @element lit-material-sortable
+ *
+ * @slot - The items.
+ *
+ * @fires sort - When an item is dropped somewhere new; `detail` is `SortDetail`.
+ *
+ * @cssprop --lit-material-sortable-indicator-color - The drop line (default `--md-sys-color-primary`).
+ */
+let LitMaterialSortable = class LitMaterialSortable extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Lists with the same group accept each other's items. Empty: this list only. */
+        this.group = "";
+        /** Names the list in announcements, e.g. "Requests". */
+        this.label = "";
+        this.disabled = false;
+        /** Where a dragged item would land (index among the other items), or `null`. */
+        this.dropIndex = null;
+        this.announcement = "";
+        this.onSlotChange = () => {
+            for (const item of this.items) {
+                const handle = this.handleOf(item);
+                handle.style.touchAction = "none";
+                if (!handle.hasAttribute("aria-description")) {
+                    handle.setAttribute("aria-description", "Press Space to reorder");
+                }
+                if (handle.tabIndex < 0 && !handle.hasAttribute("tabindex"))
+                    handle.tabIndex = 0;
+            }
+        };
+        // ---- Pointer ----
+        this.onPointerDown = (event) => {
+            if (this.disabled || event.button !== 0 || this.grabbed)
+                return;
+            const item = this.itemFromHandle(event.composedPath());
+            if (!item)
+                return;
+            this.drag = {
+                item,
+                from: this.items.indexOf(item),
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                active: false,
+                target: null,
+            };
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointercancel", this.onPointerCancel);
+            document.addEventListener("keydown", this.onDragKeyDown, true);
+        };
+        this.onPointerMove = (event) => {
+            const drag = this.drag;
+            if (!drag || event.pointerId !== drag.pointerId)
+                return;
+            if (!drag.active) {
+                if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < DRAG_THRESHOLD)
+                    return;
+                drag.active = true;
+                drag.item.setAttribute("data-sort-dragging", "");
+                document.documentElement.style.setProperty("user-select", "none");
+            }
+            event.preventDefault();
+            const target = this.listAt(event.clientX, event.clientY);
+            if (drag.target && drag.target !== target)
+                drag.target.dropIndex = null;
+            drag.target = target;
+            if (target)
+                target.dropIndex = target.indexAt(event.clientY, drag.item);
+        };
+        this.onPointerUp = (event) => {
+            const drag = this.drag;
+            if (!drag || event.pointerId !== drag.pointerId)
+                return;
+            const target = drag.target;
+            const to = target?.dropIndex ?? null;
+            this.endPointerDrag();
+            if (!drag.active || !target || to === null)
+                return;
+            if (target === this && to === drag.from)
+                return;
+            this.emit(drag.item, drag.from, to, target);
+            this.announce(`${this.nameOf(drag.item)} moved to position ${to + 1}${target === this ? "" : ` in ${target.label || "the other list"}`}`);
+        };
+        this.onPointerCancel = () => this.endPointerDrag();
+        this.onDragKeyDown = (event) => {
+            if (event.key === "Escape" && this.drag?.active) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.endPointerDrag();
+            }
+        };
+        // ---- Keyboard ----
+        this.onKeyDown = (event) => {
+            if (this.disabled || event.defaultPrevented)
+                return;
+            const item = this.itemFromHandle(event.composedPath());
+            if (!item || event.composedPath()[0] !== this.handleOf(item))
+                return;
+            const grabbed = this.grabbed;
+            const count = this.items.length;
+            if (event.key === " " || event.key === "Enter") {
+                event.preventDefault();
+                if (!grabbed) {
+                    const index = this.items.indexOf(item);
+                    this.grabbed = { item, origin: index, index };
+                    item.setAttribute("data-sort-grabbed", "");
+                    this.announce(`${this.nameOf(item)} picked up, position ${index + 1} of ${count}. ↑ and ↓ to move, Space to drop, Escape to cancel.`);
+                }
+                else {
+                    this.drop(`${this.nameOf(item)} dropped at position ${grabbed.index + 1} of ${count}.`);
+                }
+                return;
+            }
+            if (!grabbed)
+                return;
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                if (grabbed.index !== grabbed.origin)
+                    this.moveGrabbed(grabbed.origin);
+                this.drop(`${this.nameOf(item)} back at position ${grabbed.origin + 1} of ${count}.`);
+                return;
+            }
+            const step = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -1, ArrowRight: 1 }[event.key];
+            const jump = event.key === "Home" ? 0 : event.key === "End" ? count - 1 : undefined;
+            if (step === undefined && jump === undefined)
+                return;
+            event.preventDefault();
+            const to = jump ?? Math.min(count - 1, Math.max(0, grabbed.index + step));
+            if (to === grabbed.index)
+                return;
+            this.moveGrabbed(to);
+            this.announce(`${this.nameOf(item)} moved to position ${to + 1} of ${count}.`);
+        };
+        this.onFocusOut = (event) => {
+            const grabbed = this.grabbed;
+            // A re-render moving the item blurs it for a moment (refocused after the move).
+            if (!grabbed || grabbed.refocusing)
+                return;
+            // Only a real move elsewhere drops it.
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                if (this.grabbed !== grabbed)
+                    return;
+                const active = document.activeElement;
+                if (active && this.contains(active))
+                    return;
+                if (event.relatedTarget && this.contains(event.relatedTarget))
+                    return;
+                this.drop(`${this.nameOf(grabbed.item)} dropped at position ${grabbed.index + 1}.`);
+            }));
+        };
+    }
+    static { LitMaterialSortable_1 = this; }
+    static { this.styles = css `
+    :host {
+      display: block;
+      position: relative;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    ::slotted([data-sort-dragging]) {
+      opacity: 0.4;
+    }
+    ::slotted([data-sort-grabbed]) {
+      outline: 2px solid var(--lit-material-sortable-indicator-color, var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff)));
+      outline-offset: -2px;
+    }
+    .indicator {
+      position: absolute;
+      inset-inline: 0;
+      height: 2px;
+      margin-top: -1px;
+      border-radius: 1px;
+      background: var(--lit-material-sortable-indicator-color, var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff)));
+      pointer-events: none;
+    }
+    .sr {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  `; }
+    /** The items, in order. */
+    get items() {
+        return Array.from(this.children).filter((el) => el instanceof HTMLElement);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("pointerdown", this.onPointerDown);
+        this.addEventListener("keydown", this.onKeyDown);
+        this.addEventListener("focusout", this.onFocusOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("pointerdown", this.onPointerDown);
+        this.removeEventListener("keydown", this.onKeyDown);
+        this.removeEventListener("focusout", this.onFocusOut);
+        this.endPointerDrag();
+    }
+    handleOf(item) {
+        return item.querySelector("[data-sort-handle]") ?? item;
+    }
+    /** The item that `node` is the handle of (or inside), if any. */
+    itemFromHandle(path) {
+        for (const item of this.items) {
+            const handle = this.handleOf(item);
+            if (path.includes(handle))
+                return item;
+        }
+        return undefined;
+    }
+    nameOf(item) {
+        return item.dataset.sortLabel || item.textContent?.trim().replace(/\s+/g, " ") || "Item";
+    }
+    announce(message) {
+        // Re-announce identical text by clearing first.
+        this.announcement = "";
+        requestAnimationFrame(() => (this.announcement = message));
+    }
+    emit(item, from, to, toList) {
+        this.dispatchEvent(new CustomEvent("sort", {
+            bubbles: true,
+            composed: true,
+            detail: { item, id: item.dataset.sortId ?? "", from, to, fromList: this, toList },
+        }));
+    }
+    endPointerDrag() {
+        const drag = this.drag;
+        if (!drag)
+            return;
+        drag.item.removeAttribute("data-sort-dragging");
+        if (drag.target)
+            drag.target.dropIndex = null;
+        this.drag = undefined;
+        document.documentElement.style.removeProperty("user-select");
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.removeEventListener("pointercancel", this.onPointerCancel);
+        document.removeEventListener("keydown", this.onDragKeyDown, true);
+    }
+    /** The sortable under a point that accepts this list's items. */
+    listAt(x, y) {
+        // A list inside a shadow root isn't in the document's hit list, only its host is.
+        const root = this.getRootNode();
+        const hits = root === document ? document.elementsFromPoint(x, y) : [...root.elementsFromPoint(x, y), ...document.elementsFromPoint(x, y)];
+        for (const el of hits) {
+            const list = el instanceof LitMaterialSortable_1 ? el : el.closest("lit-material-sortable");
+            if (!list || list.disabled)
+                continue;
+            if (list === this || (this.group && list.group === this.group))
+                return list;
+        }
+        return null;
+    }
+    /** Index among the items other than `dragged` before which `y` falls. */
+    indexAt(y, dragged) {
+        const others = this.items.filter((item) => item !== dragged);
+        const index = others.findIndex((item) => {
+            const box = item.getBoundingClientRect();
+            return y < box.top + box.height / 2;
+        });
+        return index === -1 ? others.length : index;
+    }
+    indicatorTop() {
+        if (this.dropIndex === null)
+            return null;
+        const dragged = this.drag?.item ?? document.querySelector("[data-sort-dragging]");
+        const others = this.items.filter((item) => item !== dragged);
+        const host = this.getBoundingClientRect();
+        if (others.length === 0)
+            return 0;
+        const next = others[this.dropIndex];
+        if (next)
+            return next.getBoundingClientRect().top - host.top;
+        return others[others.length - 1].getBoundingClientRect().bottom - host.top;
+    }
+    moveGrabbed(to) {
+        const grabbed = this.grabbed;
+        const { item } = grabbed;
+        const from = grabbed.index;
+        grabbed.index = to;
+        grabbed.refocusing = (grabbed.refocusing ?? 0) + 1;
+        this.emit(item, from, to, this);
+        // The app re-renders the list; moving a focused node drops focus, so put it
+        // back: right after the re-render (Lit and synchronous renderers finish in
+        // a microtask), so a key pressed at once still lands, and again two frames
+        // later for renderers that wait for a frame.
+        queueMicrotask(() => this.refocus(item));
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            if (this.grabbed)
+                this.grabbed.refocusing = (this.grabbed.refocusing ?? 1) - 1;
+            this.refocus(item);
+        }));
+    }
+    refocus(item) {
+        const grabbed = this.grabbed;
+        if (!grabbed)
+            return;
+        const current = (item.isConnected && this.contains(item) ? item : undefined) ??
+            this.items.find((el) => item.dataset.sortId && el.dataset.sortId === item.dataset.sortId);
+        if (!current)
+            return;
+        if (current !== grabbed.item) {
+            grabbed.item.removeAttribute("data-sort-grabbed");
+            grabbed.item = current;
+            current.setAttribute("data-sort-grabbed", "");
+        }
+        this.handleOf(current).focus();
+    }
+    drop(message) {
+        this.grabbed?.item.removeAttribute("data-sort-grabbed");
+        this.grabbed = undefined;
+        this.announce(message);
+    }
+    render() {
+        const top = this.indicatorTop();
+        return html `<slot @slotchange=${this.onSlotChange}></slot>${top === null
+            ? ""
+            : html `<div class="indicator" style="top: ${top}px"></div>`}<div class="sr" role="status" aria-live="assertive">${this.announcement}</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], LitMaterialSortable.prototype, "group", void 0);
+__decorate([
+    property()
+], LitMaterialSortable.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialSortable.prototype, "disabled", void 0);
+__decorate([
+    state()
+], LitMaterialSortable.prototype, "dropIndex", void 0);
+__decorate([
+    state()
+], LitMaterialSortable.prototype, "announcement", void 0);
+LitMaterialSortable = LitMaterialSortable_1 = __decorate([
+    customElement("lit-material-sortable")
+], LitMaterialSortable);
+export { LitMaterialSortable };
+//# sourceMappingURL=sortable.js.map

package/dist/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.js","sourceRoot":"","sources":["../src/sortable.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@lit-material/sortable",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Sortable list for lit-material: reorder items by pointer, touch or keyboard, within a list or between lists, with screen reader announcements.",
+  "license": "MIT",
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/sortable"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "sortable",
+    "reorder",
+    "drag-and-drop"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "custom-elements.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "@lit-material/tokens": "0.0.2"
+  },
+  "devDependencies": {
+    "@lit-labs/ssr": "^3.3.1",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^1.0.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
+  }
 }