@rcarls/rc-transfer-list 0.1.0

package/README.md

@@ -0,0 +1,10 @@
+# @rcarls/rc-transfer-list
+
+Side-by-side transfer list web component built from rc-listbox.
+
+## Styling Hooks
+
+Panels expose `data-empty` when their backing list has no options and
+`data-has-selection` when that panel currently has highlighted rows. The root
+exposes `data-can-move-up` and `data-can-move-down` when the selected panel has
+highlighted rows that can be reordered in that direction.

package/dist/custom-elements.json

@@ -0,0 +1,515 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-transfer-list",
+          "declaration": {
+            "name": "RCTransferList",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-transfer-list.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-transfer-list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Side-by-side transfer list built from two `rc-listbox` instances.\n\nRequires a direct child `<select multiple>` element as the single source of\ntruth for option data and form participation. Unselected `<option>` elements\npopulate the available (left) panel; selected ones populate the selected\n(right) panel. Transfers are reflected back to the `<select>` so native form\nsubmission serialises the right-panel values in user-determined order.\n\nThe `available` and `selected` JS array properties write through to the\nbacking `<select>`, so the component can also be driven imperatively from a\nframework without giving up form participation.",
+          "name": "RCTransferList",
+          "cssProperties": [
+            {
+              "description": "Gap between panels and the action toolbar",
+              "name": "--rc-transfer-list-gap",
+              "default": "var(--rc-control-gap)"
+            },
+            {
+              "description": "Gap between a panel label and its listbox",
+              "name": "--rc-transfer-list-panel-gap",
+              "default": "var(--rc-control-gap)"
+            },
+            {
+              "description": "Minimum block size for each listbox",
+              "name": "--rc-transfer-list-listbox-min-block-size",
+              "default": "10rem"
+            },
+            {
+              "description": "Border around each listbox",
+              "name": "--rc-transfer-list-listbox-border",
+              "default": "var(--rc-border)"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Root layout wrapper. Reflects data-can-move-up/down.",
+              "name": "root"
+            },
+            {
+              "description": "Shared list panel surface.",
+              "name": "panel"
+            },
+            {
+              "description": "Available/left panel. Reflects data-empty and data-has-selection.",
+              "name": "available-panel"
+            },
+            {
+              "description": "Selected/right panel. Reflects data-empty and data-has-selection.",
+              "name": "selected-panel"
+            },
+            {
+              "description": "Transfer action toolbar.",
+              "name": "actions"
+            },
+            {
+              "description": "Shared action button surface.",
+              "name": "button"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable multi-selection in both lists.",
+              "attribute": "multiple",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "availableLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Available'",
+              "description": "Visible label for the available list.",
+              "attribute": "available-label"
+            },
+            {
+              "kind": "field",
+              "name": "selectedLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Selected'",
+              "description": "Visible label for the selected list.",
+              "attribute": "selected-label"
+            },
+            {
+              "kind": "field",
+              "name": "_$availableList",
+              "type": {
+                "text": "RCListbox | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_$selectedList",
+              "type": {
+                "text": "RCListbox | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_availableSelection",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Values currently highlighted in the available list. Drives the \"Add →\" button disable state."
+            },
+            {
+              "kind": "field",
+              "name": "_selectedSelection",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Values currently highlighted in the selected list. Drives Remove/reorder button disable states."
+            },
+            {
+              "kind": "field",
+              "name": "_select",
+              "type": {
+                "text": "HTMLSelectElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_syncing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Set while the component mutates the backing <select> to prevent observer feedback loops."
+            },
+            {
+              "kind": "field",
+              "name": "_defaultSelected",
+              "type": {
+                "text": "ListboxOption[] | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_selectedInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hostObserver",
+              "privacy": "private",
+              "default": "new MutationObserver(() => this._setupSelect())"
+            },
+            {
+              "kind": "field",
+              "name": "_selectObserver",
+              "privacy": "private",
+              "default": "new MutationObserver(() => { if (!this._syncing) this.requestUpdate(); })"
+            },
+            {
+              "kind": "field",
+              "name": "available",
+              "type": {
+                "text": "ListboxOption[]"
+              },
+              "description": "Available/left-hand options derived from unselected `<option>` elements.\n\nSetting this property replaces all unselected options in the backing\n`<select>`. Items whose values already appear in the selected list are\nskipped to prevent duplicate option values."
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "ListboxOption[]"
+              },
+              "description": "Selected/right-hand options derived from selected `<option>` elements.\n\nSetting this property replaces all selected options in the backing\n`<select>`. Unselected options are left unchanged."
+            },
+            {
+              "kind": "field",
+              "name": "defaultSelected",
+              "type": {
+                "text": "ListboxOption[] | undefined"
+              },
+              "description": "Initial uncontrolled selected list. Applied before any `selected` write from the host."
+            },
+            {
+              "kind": "method",
+              "name": "_applyDefaultSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addSelected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Adds the highlighted available options to the selected list."
+            },
+            {
+              "kind": "method",
+              "name": "addAll",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Adds every available option to the selected list."
+            },
+            {
+              "kind": "method",
+              "name": "removeSelected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Removes the highlighted right-hand options from the selected list."
+            },
+            {
+              "kind": "method",
+              "name": "clearSelected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clears the selected/right-hand list."
+            },
+            {
+              "kind": "method",
+              "name": "moveSelected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "delta",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Moves highlighted right-hand options by `delta` rows (-1 = up, 1 = down)."
+            },
+            {
+              "kind": "field",
+              "name": "_onMoveUp",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onMoveDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_canMoveSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                },
+                {
+                  "name": "selectedValues",
+                  "type": {
+                    "text": "Set<string>"
+                  }
+                },
+                {
+                  "name": "delta",
+                  "type": {
+                    "text": "-1 | 1"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_onKeydown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onListboxChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_setupSelect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_teardownSelect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_reorderSelectOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "movedValues",
+                  "type": {
+                    "text": "Set<string>"
+                  }
+                },
+                {
+                  "name": "delta",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Reorders selected `<option>` DOM nodes inside the backing `<select>` to\npreserve user-determined order in form serialisation."
+            },
+            {
+              "kind": "method",
+              "name": "_syncSelection",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectedValues",
+                  "default": "new Set()",
+                  "type": {
+                    "text": "Set<string>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_dispatchChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectedValues",
+                  "optional": true,
+                  "type": {
+                    "text": "Set<string>"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "rc-transfer-list-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires when the selected/right-hand list changes."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable multi-selection in both lists.",
+              "fieldName": "multiple"
+            },
+            {
+              "name": "available-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Available'",
+              "description": "Visible label for the available list.",
+              "fieldName": "availableLabel"
+            },
+            {
+              "name": "selected-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Selected'",
+              "description": "Visible label for the selected list.",
+              "fieldName": "selectedLabel"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-transfer-list",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCTransferList",
+          "declaration": {
+            "name": "RCTransferList",
+            "module": "src/rc-transfer-list.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCTransferList",
+            "module": "src/rc-transfer-list.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: light dark;
+  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
+}
+
+@supports (color: AccentColor) {
+  :root {
+    --rc-accent: AccentColor;
+  }
+}
+
+[data-theme="light"] { color-scheme: light; }
+[data-theme="dark"]  { color-scheme: dark;  }
+
+[data-theme="solarized-light"] {
+  color-scheme: light;
+  --rc-surface: #fdf6e3;
+  --rc-text:    #657b83;
+  --rc-border:  1px solid #93a1a1;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
+}
+
+[data-theme="solarized-dark"] {
+  color-scheme: dark;
+  --rc-surface: #002b36;
+  --rc-text:    #839496;
+  --rc-border:  1px solid #586e75;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+}
+
+.demo-page {
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.demo-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid ButtonBorder;
+}
+
+.demo-controls .demo-title {
+  flex: 1;
+}
+
+.demo-controls h1 {
+  margin: 0 0 0.15rem;
+  font-size: 1.5rem;
+}
+
+.demo-controls a {
+  font-size: 0.8rem;
+}
+
+.demo-section {
+  margin-bottom: 2rem;
+}
+
+.demo-section h2 {
+  margin: 0 0 0.5rem;
+}
+
+.theme-picker {
+  padding: 0.35em 0.75em;
+  font-family: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  border: 1px solid ButtonBorder;
+  border-radius: 4px;
+  background: Canvas;
+  color: CanvasText;
+}

package/dist/demo.js

@@ -0,0 +1,40 @@
+const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
+const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
+
+const stored = localStorage.getItem('rc-demo-theme') ?? '';
+applyTheme(stored);
+
+function applyTheme(theme) {
+  if (theme) {
+    document.documentElement.dataset.theme = theme;
+  } else {
+    delete document.documentElement.dataset.theme;
+  }
+}
+
+function currentIndex() {
+  const current = document.documentElement.dataset.theme ?? '';
+  const idx = THEMES.indexOf(current);
+  return idx === -1 ? 0 : idx;
+}
+
+function updateButtons() {
+  const label = LABELS[currentIndex()];
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.textContent = label;
+  });
+}
+
+window.cycleTheme = function () {
+  const next = THEMES[(currentIndex() + 1) % THEMES.length];
+  applyTheme(next);
+  localStorage.setItem('rc-demo-theme', next);
+  updateButtons();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  updateButtons();
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.addEventListener('click', window.cycleTheme);
+  });
+});

package/dist/rc-transfer-list-DDgVWhv6.js

@@ -0,0 +1,357 @@
+import "@rcarls/rc-listbox/define";
+import "@rcarls/rc-toolbar/define";
+import { LitElement as _, nothing as c, html as m } from "lit";
+import { property as p, query as b, state as f } from "lit/decorators.js";
+var y = Object.defineProperty, n = (u, e, t, s) => {
+  for (var l = void 0, i = u.length - 1, r; i >= 0; i--)
+    (r = u[i]) && (l = r(e, t, l) || l);
+  return l && y(e, t, l), l;
+};
+class o extends _ {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.availableLabel = "Available", this.selectedLabel = "Selected", this._availableSelection = [], this._selectedSelection = [], this._select = null, this._syncing = !1, this._selectedInitialized = !1, this._hostObserver = new MutationObserver(() => this._setupSelect()), this._selectObserver = new MutationObserver(() => {
+      this._syncing || this.requestUpdate();
+    }), this._onMoveUp = () => {
+      this.moveSelected(-1);
+    }, this._onMoveDown = () => {
+      this.moveSelected(1);
+    }, this._onKeydown = (e) => {
+      if (e.altKey) {
+        switch (e.key) {
+          case "ArrowRight":
+            e.preventDefault(), this.addSelected();
+            break;
+          case "ArrowLeft":
+            e.preventDefault(), this.removeSelected();
+            break;
+          case "ArrowUp":
+            e.preventDefault(), this.moveSelected(-1);
+            break;
+          case "ArrowDown":
+            e.preventDefault(), this.moveSelected(1);
+            break;
+        }
+        return;
+      }
+      const t = e.target.id;
+      if (t === "available-list" && !this.multiple && e.key === "Enter") {
+        e.preventDefault(), this.addSelected();
+        return;
+      }
+      t === "selected-list" && e.key === "Delete" && (e.preventDefault(), this.removeSelected());
+    }, this._onListboxChange = (e) => {
+      const s = e.detail.value, l = Array.isArray(s) ? s : s ? [s] : [], i = e.target?.id;
+      i === "available-list" ? this._availableSelection = l : i === "selected-list" && (this._selectedSelection = l);
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  /**
+   * Available/left-hand options derived from unselected `<option>` elements.
+   *
+   * Setting this property replaces all unselected options in the backing
+   * `<select>`. Items whose values already appear in the selected list are
+   * skipped to prevent duplicate option values.
+   */
+  get available() {
+    return this._select ? Array.from(this._select.options).filter((e) => !e.selected).map((e) => ({ value: e.value, label: e.label || e.text })) : [];
+  }
+  set available(e) {
+    if (!this._select) return;
+    this._syncing = !0;
+    const t = new Set(
+      Array.from(this._select.options).filter((s) => s.selected).map((s) => s.value)
+    );
+    for (const s of Array.from(this._select.options))
+      s.selected || s.remove();
+    for (const s of e)
+      t.has(s.value) || this._select.add(new Option(s.label, s.value));
+    this._syncing = !1, this.requestUpdate();
+  }
+  /**
+   * Selected/right-hand options derived from selected `<option>` elements.
+   *
+   * Setting this property replaces all selected options in the backing
+   * `<select>`. Unselected options are left unchanged.
+   */
+  get selected() {
+    return this._select ? Array.from(this._select.options).filter((e) => e.selected).map((e) => ({ value: e.value, label: e.label || e.text })) : [];
+  }
+  set selected(e) {
+    if (this._selectedInitialized = !0, !!this._select) {
+      this._syncing = !0;
+      for (const t of Array.from(this._select.options))
+        t.selected && t.remove();
+      for (const t of e)
+        this._select.add(new Option(t.label, t.value, !1, !0));
+      this._syncing = !1, this.requestUpdate();
+    }
+  }
+  /** Initial uncontrolled selected list. Applied before any `selected` write from the host. */
+  get defaultSelected() {
+    return this._defaultSelected;
+  }
+  set defaultSelected(e) {
+    this._defaultSelected = e, !this._selectedInitialized && this._select && e !== void 0 && this._applyDefaultSelected(e);
+  }
+  _applyDefaultSelected(e) {
+    if (this._select) {
+      this._syncing = !0;
+      for (const t of Array.from(this._select.options))
+        t.selected = e.some((s) => s.value === t.value);
+      this._syncing = !1, this.requestUpdate();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._hostObserver.observe(this, { childList: !0 }), this.addEventListener("keydown", this._onKeydown), this.addEventListener("rc-listbox-change", this._onListboxChange), this._setupSelect();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._hostObserver.disconnect(), this._teardownSelect(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("rc-listbox-change", this._onListboxChange);
+  }
+  render() {
+    const e = this.available, t = this.selected, s = new Set(this._selectedSelection), l = e.length === 0, i = t.length === 0, r = t.length < 2, h = this._availableSelection.length === 0, a = this._selectedSelection.length === 0, d = this._canMoveSelected(t, s, -1), v = this._canMoveSelected(t, s, 1);
+    return m`
+      <style>
+        rc-transfer-list {
+          display: block;
+        }
+
+        rc-transfer-list .rc-transfer-list-root {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+          align-items: stretch;
+          gap: var(--rc-transfer-list-gap, var(--rc-control-gap, 0.75rem));
+        }
+
+        rc-transfer-list .rc-transfer-list-panel {
+          display: flex;
+          min-inline-size: 0;
+          flex-direction: column;
+          gap: var(--rc-transfer-list-panel-gap, var(--rc-control-gap, 0.35rem));
+        }
+
+        rc-transfer-list .rc-transfer-list-panel > rc-listbox {
+          flex: 1 1 auto;
+          min-block-size: var(--rc-transfer-list-listbox-min-block-size, 10rem);
+          overflow: auto;
+          border: var(--rc-transfer-list-listbox-border, var(--rc-border, 1px solid ButtonBorder));
+        }
+
+        rc-transfer-list .rc-transfer-list-actions {
+          align-self: center;
+        }
+
+        rc-transfer-list .rc-transfer-list-actions button {
+          white-space: nowrap;
+        }
+
+        @media (max-width: 42rem) {
+          rc-transfer-list .rc-transfer-list-root {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          rc-transfer-list .rc-transfer-list-actions {
+            align-self: stretch;
+          }
+        }
+      </style>
+      <div
+        part="root"
+        class="rc-transfer-list-root"
+        data-can-move-up=${d ? "" : c}
+        data-can-move-down=${v ? "" : c}
+      >
+        <section
+          part="panel available-panel"
+          class="rc-transfer-list-panel"
+          aria-labelledby="available-label"
+          data-empty=${l ? "" : c}
+          data-has-selection=${h ? c : ""}
+        >
+          <span part="label available-label" id="available-label">${this.availableLabel}</span>
+          <rc-listbox
+            id="available-list"
+            part="listbox available-listbox"
+            aria-labelledby="available-label"
+            tabindex="0"
+            .options=${e}
+            .multiple=${this.multiple}
+          ></rc-listbox>
+        </section>
+
+        <rc-toolbar
+          orientation="vertical"
+          label="Transfer actions"
+          part="actions"
+          class="rc-transfer-list-actions"
+        >
+          <button
+            type="button"
+            part="button add-button"
+            ?disabled=${l || h}
+            @click=${this.addSelected}
+          >Add &#x2192;</button>
+          <button
+            type="button"
+            part="button add-all-button"
+            ?disabled=${l}
+            @click=${this.addAll}
+          >Add all &#x2192;</button>
+          <button
+            type="button"
+            part="button remove-button"
+            ?disabled=${i || a}
+            @click=${this.removeSelected}
+          >&#x2190; Remove</button>
+          <button
+            type="button"
+            part="button clear-button"
+            ?disabled=${i}
+            @click=${this.clearSelected}
+          >&#x2190; Clear</button>
+          <button
+            type="button"
+            part="button move-up-button"
+            ?disabled=${r || a}
+            @click=${this._onMoveUp}
+          >Move up</button>
+          <button
+            type="button"
+            part="button move-down-button"
+            ?disabled=${r || a}
+            @click=${this._onMoveDown}
+          >Move down</button>
+        </rc-toolbar>
+
+        <section
+          part="panel selected-panel"
+          class="rc-transfer-list-panel"
+          aria-labelledby="selected-label"
+          data-empty=${i ? "" : c}
+          data-has-selection=${a ? c : ""}
+        >
+          <span part="label selected-label" id="selected-label">${this.selectedLabel}</span>
+          <rc-listbox
+            id="selected-list"
+            part="listbox selected-listbox"
+            aria-labelledby="selected-label"
+            tabindex="0"
+            .options=${t}
+            .multiple=${this.multiple}
+          ></rc-listbox>
+        </section>
+      </div>
+    `;
+  }
+  /** Adds the highlighted available options to the selected list. */
+  addSelected() {
+    if (!this._select) return;
+    const e = new Set(this._$availableList?.selectedValues ?? []);
+    if (e.size !== 0) {
+      this._syncing = !0;
+      for (const t of Array.from(this._select.options))
+        !t.selected && e.has(t.value) && (t.selected = !0);
+      this._syncing = !1, this._availableSelection = [], this.requestUpdate(), this._dispatchChange();
+    }
+  }
+  /** Adds every available option to the selected list. */
+  addAll() {
+    if (this._select) {
+      this._syncing = !0;
+      for (const e of Array.from(this._select.options)) e.selected = !0;
+      this._syncing = !1, this._availableSelection = [], this.requestUpdate(), this._dispatchChange();
+    }
+  }
+  /** Removes the highlighted right-hand options from the selected list. */
+  removeSelected() {
+    if (!this._select) return;
+    const e = new Set(this._$selectedList?.selectedValues ?? []);
+    if (e.size !== 0) {
+      this._syncing = !0;
+      for (const t of Array.from(this._select.options))
+        t.selected && e.has(t.value) && (t.selected = !1);
+      this._syncing = !1, this._selectedSelection = [], this.requestUpdate(), this._dispatchChange();
+    }
+  }
+  /** Clears the selected/right-hand list. */
+  clearSelected() {
+    if (this._select) {
+      this._syncing = !0;
+      for (const e of Array.from(this._select.options)) e.selected = !1;
+      this._syncing = !1, this._selectedSelection = [], this.requestUpdate(), this._dispatchChange();
+    }
+  }
+  /** Moves highlighted right-hand options by `delta` rows (-1 = up, 1 = down). */
+  moveSelected(e) {
+    if (e === 0 || !this._select) return;
+    const t = new Set(this._$selectedList?.selectedValues ?? []);
+    t.size !== 0 && (this._syncing = !0, this._reorderSelectOptions(t, e), this._syncing = !1, this.requestUpdate(), this._dispatchChange(t));
+  }
+  _canMoveSelected(e, t, s) {
+    return t.size === 0 || e.length < 2 ? !1 : e.some((l, i) => {
+      if (!t.has(l.value)) return !1;
+      const r = i + s;
+      return r < 0 || r >= e.length ? !1 : !t.has(e[r].value);
+    });
+  }
+  _setupSelect() {
+    const e = this.querySelector(":scope > select[multiple]");
+    e !== this._select && (this._teardownSelect(), this._select = e, e && (e.style.display = "none", e.setAttribute("aria-hidden", "true"), e.tabIndex = -1, this._selectObserver.observe(e, { childList: !0 }), !this._selectedInitialized && this._defaultSelected !== void 0 && this._applyDefaultSelected(this._defaultSelected), this.requestUpdate()));
+  }
+  _teardownSelect() {
+    this._select && (this._select.style.display = "", this._select.removeAttribute("aria-hidden"), this._select.removeAttribute("tabindex")), this._selectObserver.disconnect(), this._select = null;
+  }
+  /**
+   * Reorders selected `<option>` DOM nodes inside the backing `<select>` to
+   * preserve user-determined order in form serialisation.
+   */
+  _reorderSelectOptions(e, t) {
+    const s = this._select, l = Array.from(s.options).filter((a) => a.selected), i = t < 0 ? 1 : l.length - 2, r = t < 0 ? l.length : -1, h = t < 0 ? 1 : -1;
+    for (let a = i; a !== r; a += h) {
+      const d = a + t;
+      !e.has(l[a].value) || e.has(l[d].value) || (t < 0 ? s.insertBefore(l[a], l[d]) : l[d].insertAdjacentElement("afterend", l[a]));
+    }
+  }
+  // Restores selection in the selected listbox after a mutation. Options are
+  // set declaratively in render() so only selection state needs imperative sync.
+  _syncSelection(e = /* @__PURE__ */ new Set()) {
+    this._$selectedList?.setSelectedValues([...e]);
+  }
+  _dispatchChange(e) {
+    this.updateComplete.then(() => {
+      this._syncSelection(e), this.dispatchEvent(
+        new CustomEvent("rc-transfer-list-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { selected: [...this.selected] }
+        })
+      );
+    });
+  }
+}
+n([
+  p({ type: Boolean, reflect: !0 })
+], o.prototype, "multiple");
+n([
+  p({ attribute: "available-label" })
+], o.prototype, "availableLabel");
+n([
+  p({ attribute: "selected-label" })
+], o.prototype, "selectedLabel");
+n([
+  b("#available-list")
+], o.prototype, "_$availableList");
+n([
+  b("#selected-list")
+], o.prototype, "_$selectedList");
+n([
+  f()
+], o.prototype, "_availableSelection");
+n([
+  f()
+], o.prototype, "_selectedSelection");
+export {
+  o as R
+};
+//# sourceMappingURL=rc-transfer-list-DDgVWhv6.js.map

package/dist/rc-transfer-list-DDgVWhv6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-transfer-list-DDgVWhv6.js","sources":["../src/rc-transfer-list.ts"],"sourcesContent":["import '@rcarls/rc-listbox/define';\nimport '@rcarls/rc-toolbar/define';\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { ListboxOption, RCListbox, RCListboxChangeEvent } from '@rcarls/rc-listbox';\n\nexport interface RCTransferListChangeEvent {\n  /** Ordered selected/right-hand list options. */\n  selected: ListboxOption[];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-transfer-list': RCTransferList;\n  }\n}\n\n/**\n * Side-by-side transfer list built from two `rc-listbox` instances.\n *\n * Requires a direct child `<select multiple>` element as the single source of\n * truth for option data and form participation. Unselected `<option>` elements\n * populate the available (left) panel; selected ones populate the selected\n * (right) panel. Transfers are reflected back to the `<select>` so native form\n * submission serialises the right-panel values in user-determined order.\n *\n * The `available` and `selected` JS array properties write through to the\n * backing `<select>`, so the component can also be driven imperatively from a\n * framework without giving up form participation.\n *\n * @fires rc-transfer-list-change - Fires when the selected/right-hand list changes.\n *\n * @cssprop [--rc-transfer-list-gap=var(--rc-control-gap)] - Gap between panels and the action toolbar\n * @cssprop [--rc-transfer-list-panel-gap=var(--rc-control-gap)] - Gap between a panel label and its listbox\n * @cssprop [--rc-transfer-list-listbox-min-block-size=10rem] - Minimum block size for each listbox\n * @cssprop [--rc-transfer-list-listbox-border=var(--rc-border)] - Border around each listbox\n * @csspart root - Root layout wrapper. Reflects data-can-move-up/down.\n * @csspart panel - Shared list panel surface.\n * @csspart available-panel - Available/left panel. Reflects data-empty and data-has-selection.\n * @csspart selected-panel - Selected/right panel. Reflects data-empty and data-has-selection.\n * @csspart actions - Transfer action toolbar.\n * @csspart button - Shared action button surface.\n */\nexport class RCTransferList extends LitElement {\n  override createRenderRoot() { return this; }\n\n  /** Enable multi-selection in both lists. */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Visible label for the available list. */\n  @property({ attribute: 'available-label' }) availableLabel = 'Available';\n\n  /** Visible label for the selected list. */\n  @property({ attribute: 'selected-label' }) selectedLabel = 'Selected';\n\n  @query('#available-list') private _$availableList?: RCListbox;\n  @query('#selected-list') private _$selectedList?: RCListbox;\n\n  /** Values currently highlighted in the available list. Drives the \"Add →\" button disable state. */\n  @state() private _availableSelection: string[] = [];\n\n  /** Values currently highlighted in the selected list. Drives Remove/reorder button disable states. */\n  @state() private _selectedSelection: string[] = [];\n\n  private _select: HTMLSelectElement | null = null;\n\n  /** Set while the component mutates the backing <select> to prevent observer feedback loops. */\n  private _syncing = false;\n\n  private _defaultSelected: ListboxOption[] | undefined;\n  private _selectedInitialized = false;\n\n  private _hostObserver = new MutationObserver(() => this._setupSelect());\n  private _selectObserver = new MutationObserver(() => {\n    if (!this._syncing) this.requestUpdate();\n  });\n\n\n  /**\n   * Available/left-hand options derived from unselected `<option>` elements.\n   *\n   * Setting this property replaces all unselected options in the backing\n   * `<select>`. Items whose values already appear in the selected list are\n   * skipped to prevent duplicate option values.\n   */\n  get available(): ListboxOption[] {\n    if (!this._select) return [];\n\n    return Array.from(this._select.options)\n      .filter((o) => !o.selected)\n      .map((o) => ({ value: o.value, label: o.label || o.text }));\n  }\n\n  set available(items: ListboxOption[]) {\n    if (!this._select) return;\n\n    this._syncing = true;\n\n    const selectedValues = new Set(\n      Array.from(this._select.options).filter((o) => o.selected).map((o) => o.value),\n    );\n\n    for (const opt of Array.from(this._select.options)) {\n      if (!opt.selected) opt.remove();\n    }\n\n    for (const item of items) {\n      if (!selectedValues.has(item.value)) {\n        this._select.add(new Option(item.label, item.value));\n      }\n    }\n\n    this._syncing = false;\n    this.requestUpdate();\n  }\n\n\n  /**\n   * Selected/right-hand options derived from selected `<option>` elements.\n   *\n   * Setting this property replaces all selected options in the backing\n   * `<select>`. Unselected options are left unchanged.\n   */\n  get selected(): ListboxOption[] {\n    if (!this._select) return [];\n\n    return Array.from(this._select.options)\n      .filter((o) => o.selected)\n      .map((o) => ({ value: o.value, label: o.label || o.text }));\n  }\n\n  set selected(items: ListboxOption[]) {\n    this._selectedInitialized = true;\n    if (!this._select) return;\n\n    this._syncing = true;\n\n    for (const opt of Array.from(this._select.options)) {\n      if (opt.selected) opt.remove();\n    }\n\n    for (const item of items) {\n      this._select.add(new Option(item.label, item.value, false, true));\n    }\n\n    this._syncing = false;\n    this.requestUpdate();\n  }\n\n\n  /** Initial uncontrolled selected list. Applied before any `selected` write from the host. */\n  get defaultSelected(): ListboxOption[] | undefined {\n    return this._defaultSelected;\n  }\n  set defaultSelected(items: ListboxOption[] | undefined) {\n    this._defaultSelected = items;\n    if (!this._selectedInitialized && this._select && items !== undefined) {\n      this._applyDefaultSelected(items);\n    }\n  }\n\n  private _applyDefaultSelected(items: ListboxOption[]): void {\n    if (!this._select) return;\n    this._syncing = true;\n    for (const opt of Array.from(this._select.options)) {\n      opt.selected = items.some((item) => item.value === opt.value);\n    }\n    this._syncing = false;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._hostObserver.observe(this, { childList: true });\n    this.addEventListener('keydown', this._onKeydown);\n    this.addEventListener('rc-listbox-change', this._onListboxChange);\n    this._setupSelect();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._hostObserver.disconnect();\n    this._teardownSelect();\n    this.removeEventListener('keydown', this._onKeydown);\n    this.removeEventListener('rc-listbox-change', this._onListboxChange);\n  }\n\n  override render() {\n    const available = this.available; // reads <select> directly; requestUpdate() always precedes render\n    const selected = this.selected;\n    const selectedValues = new Set(this._selectedSelection);\n    const noAvailable = available.length === 0;\n    const noSelected = selected.length === 0;\n    const cannotReorder = selected.length < 2;\n    const noAvailableSelection = this._availableSelection.length === 0;\n    const noSelectedSelection = this._selectedSelection.length === 0;\n    const canMoveUp = this._canMoveSelected(selected, selectedValues, -1);\n    const canMoveDown = this._canMoveSelected(selected, selectedValues, 1);\n\n    return html`\n      <style>\n        rc-transfer-list {\n          display: block;\n        }\n\n        rc-transfer-list .rc-transfer-list-root {\n          display: grid;\n          grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n          align-items: stretch;\n          gap: var(--rc-transfer-list-gap, var(--rc-control-gap, 0.75rem));\n        }\n\n        rc-transfer-list .rc-transfer-list-panel {\n          display: flex;\n          min-inline-size: 0;\n          flex-direction: column;\n          gap: var(--rc-transfer-list-panel-gap, var(--rc-control-gap, 0.35rem));\n        }\n\n        rc-transfer-list .rc-transfer-list-panel > rc-listbox {\n          flex: 1 1 auto;\n          min-block-size: var(--rc-transfer-list-listbox-min-block-size, 10rem);\n          overflow: auto;\n          border: var(--rc-transfer-list-listbox-border, var(--rc-border, 1px solid ButtonBorder));\n        }\n\n        rc-transfer-list .rc-transfer-list-actions {\n          align-self: center;\n        }\n\n        rc-transfer-list .rc-transfer-list-actions button {\n          white-space: nowrap;\n        }\n\n        @media (max-width: 42rem) {\n          rc-transfer-list .rc-transfer-list-root {\n            grid-template-columns: minmax(0, 1fr);\n          }\n\n          rc-transfer-list .rc-transfer-list-actions {\n            align-self: stretch;\n          }\n        }\n      </style>\n      <div\n        part=\"root\"\n        class=\"rc-transfer-list-root\"\n        data-can-move-up=${canMoveUp ? '' : nothing}\n        data-can-move-down=${canMoveDown ? '' : nothing}\n      >\n        <section\n          part=\"panel available-panel\"\n          class=\"rc-transfer-list-panel\"\n          aria-labelledby=\"available-label\"\n          data-empty=${noAvailable ? '' : nothing}\n          data-has-selection=${!noAvailableSelection ? '' : nothing}\n        >\n          <span part=\"label available-label\" id=\"available-label\">${this.availableLabel}</span>\n          <rc-listbox\n            id=\"available-list\"\n            part=\"listbox available-listbox\"\n            aria-labelledby=\"available-label\"\n            tabindex=\"0\"\n            .options=${available}\n            .multiple=${this.multiple}\n          ></rc-listbox>\n        </section>\n\n        <rc-toolbar\n          orientation=\"vertical\"\n          label=\"Transfer actions\"\n          part=\"actions\"\n          class=\"rc-transfer-list-actions\"\n        >\n          <button\n            type=\"button\"\n            part=\"button add-button\"\n            ?disabled=${noAvailable || noAvailableSelection}\n            @click=${this.addSelected}\n          >Add &#x2192;</button>\n          <button\n            type=\"button\"\n            part=\"button add-all-button\"\n            ?disabled=${noAvailable}\n            @click=${this.addAll}\n          >Add all &#x2192;</button>\n          <button\n            type=\"button\"\n            part=\"button remove-button\"\n            ?disabled=${noSelected || noSelectedSelection}\n            @click=${this.removeSelected}\n          >&#x2190; Remove</button>\n          <button\n            type=\"button\"\n            part=\"button clear-button\"\n            ?disabled=${noSelected}\n            @click=${this.clearSelected}\n          >&#x2190; Clear</button>\n          <button\n            type=\"button\"\n            part=\"button move-up-button\"\n            ?disabled=${cannotReorder || noSelectedSelection}\n            @click=${this._onMoveUp}\n          >Move up</button>\n          <button\n            type=\"button\"\n            part=\"button move-down-button\"\n            ?disabled=${cannotReorder || noSelectedSelection}\n            @click=${this._onMoveDown}\n          >Move down</button>\n        </rc-toolbar>\n\n        <section\n          part=\"panel selected-panel\"\n          class=\"rc-transfer-list-panel\"\n          aria-labelledby=\"selected-label\"\n          data-empty=${noSelected ? '' : nothing}\n          data-has-selection=${!noSelectedSelection ? '' : nothing}\n        >\n          <span part=\"label selected-label\" id=\"selected-label\">${this.selectedLabel}</span>\n          <rc-listbox\n            id=\"selected-list\"\n            part=\"listbox selected-listbox\"\n            aria-labelledby=\"selected-label\"\n            tabindex=\"0\"\n            .options=${selected}\n            .multiple=${this.multiple}\n          ></rc-listbox>\n        </section>\n      </div>\n    `;\n  }\n\n  /** Adds the highlighted available options to the selected list. */\n  addSelected(): void {\n    if (!this._select) return;\n\n    const values = new Set(this._$availableList?.selectedValues ?? []);\n    if (values.size === 0) return;\n\n    this._syncing = true;\n\n    for (const opt of Array.from(this._select.options)) {\n      if (!opt.selected && values.has(opt.value)) opt.selected = true;\n    }\n\n    this._syncing = false;\n    this._availableSelection = [];\n    this.requestUpdate();\n    this._dispatchChange();\n  }\n\n  /** Adds every available option to the selected list. */\n  addAll(): void {\n    if (!this._select) return;\n\n    this._syncing = true;\n    for (const opt of Array.from(this._select.options)) opt.selected = true;\n    this._syncing = false;\n\n    this._availableSelection = [];\n    this.requestUpdate();\n    this._dispatchChange();\n  }\n\n  /** Removes the highlighted right-hand options from the selected list. */\n  removeSelected(): void {\n    if (!this._select) return;\n\n    const values = new Set(this._$selectedList?.selectedValues ?? []);\n    if (values.size === 0) return;\n\n    this._syncing = true;\n\n    for (const opt of Array.from(this._select.options)) {\n      if (opt.selected && values.has(opt.value)) opt.selected = false;\n    }\n\n    this._syncing = false;\n    this._selectedSelection = [];\n    this.requestUpdate();\n    this._dispatchChange();\n  }\n\n  /** Clears the selected/right-hand list. */\n  clearSelected(): void {\n    if (!this._select) return;\n\n    this._syncing = true;\n    for (const opt of Array.from(this._select.options)) opt.selected = false;\n    this._syncing = false;\n\n    this._selectedSelection = [];\n    this.requestUpdate();\n    this._dispatchChange();\n  }\n\n  /** Moves highlighted right-hand options by `delta` rows (-1 = up, 1 = down). */\n  moveSelected(delta: number): void {\n    if (delta === 0 || !this._select) return;\n\n    const values = new Set(this._$selectedList?.selectedValues ?? []);\n    if (values.size === 0) return;\n\n    this._syncing = true;\n    this._reorderSelectOptions(values, delta);\n    this._syncing = false;\n\n    this.requestUpdate();\n    this._dispatchChange(values);\n  }\n\n  private _onMoveUp = (): void => { this.moveSelected(-1); };\n\n  private _onMoveDown = (): void => { this.moveSelected(1); };\n\n  private _canMoveSelected(\n    selected: ListboxOption[],\n    selectedValues: Set<string>,\n    delta: -1 | 1,\n  ): boolean {\n    if (selectedValues.size === 0 || selected.length < 2) return false;\n\n    return selected.some((item, index) => {\n      if (!selectedValues.has(item.value)) return false;\n\n      const target = index + delta;\n      if (target < 0 || target >= selected.length) return false;\n\n      return !selectedValues.has(selected[target].value);\n    });\n  }\n\n  private _onKeydown = (e: KeyboardEvent): void => {\n    if (e.altKey) {\n      switch (e.key) {\n        case 'ArrowRight': e.preventDefault(); this.addSelected(); break;\n        case 'ArrowLeft':  e.preventDefault(); this.removeSelected(); break;\n        case 'ArrowUp':    e.preventDefault(); this.moveSelected(-1); break;\n        case 'ArrowDown':  e.preventDefault(); this.moveSelected(1); break;\n      }\n      return;\n    }\n\n    const targetId = (e.target as Element).id;\n\n    // APG shortcut: Enter in the available list adds the active item.\n    // Restricted to single-select: in multi mode Enter toggles selection in rc-listbox\n    // first, so triggering addSelected() here would immediately transfer a single item\n    // and discard any multi-item selection the user was building.\n    if (targetId === 'available-list' && !this.multiple && e.key === 'Enter') {\n      e.preventDefault();\n      this.addSelected();\n      return;\n    }\n\n    // APG shortcut: Delete in the selected list removes the highlighted items.\n    if (targetId === 'selected-list' && e.key === 'Delete') {\n      e.preventDefault();\n      this.removeSelected();\n    }\n  };\n\n  private _onListboxChange = (e: Event): void => {\n    const ev = e as CustomEvent<RCListboxChangeEvent>;\n    const raw = ev.detail.value;\n    const values = Array.isArray(raw) ? raw : raw ? [raw] : [];\n    const targetId = (e.target as Element | null)?.id;\n    if (targetId === 'available-list') this._availableSelection = values;\n    else if (targetId === 'selected-list') this._selectedSelection = values;\n  };\n\n  private _setupSelect(): void {\n    const select = this.querySelector<HTMLSelectElement>(':scope > select[multiple]');\n\n    if (select === this._select) return;\n\n    this._teardownSelect();\n    this._select = select;\n\n    if (!select) {\n      if (import.meta.env.DEV) {\n        console.warn(\n          '[rc-transfer-list] No direct child <select multiple> found. ' +\n          'Add a <select multiple> child for form participation and progressive enhancement.',\n          this,\n        );\n      }\n      return;\n    }\n\n    // Remove from visual display, AT, and tab order — the rc-listbox UI is the\n    // accessible interface; the <select> is only present for form serialisation.\n    select.style.display = 'none';\n    select.setAttribute('aria-hidden', 'true');\n    select.tabIndex = -1;\n\n    // Watch for external option additions/removals (attribute-level opt.selected\n    // changes via IDL are not observable; use the component API instead).\n    this._selectObserver.observe(select, { childList: true });\n\n    if (!this._selectedInitialized && this._defaultSelected !== undefined) {\n      this._applyDefaultSelected(this._defaultSelected);\n    }\n\n    this.requestUpdate();\n  }\n\n  private _teardownSelect(): void {\n    if (this._select) {\n      this._select.style.display = '';\n      this._select.removeAttribute('aria-hidden');\n      this._select.removeAttribute('tabindex');\n    }\n    this._selectObserver.disconnect();\n    this._select = null;\n  }\n\n  /**\n   * Reorders selected `<option>` DOM nodes inside the backing `<select>` to\n   * preserve user-determined order in form serialisation.\n   */\n  private _reorderSelectOptions(movedValues: Set<string>, delta: number): void {\n    const select = this._select!;\n    const opts = Array.from(select.options).filter((o) => o.selected);\n\n    const start = delta < 0 ? 1 : opts.length - 2;\n    const end = delta < 0 ? opts.length : -1;\n    const step = delta < 0 ? 1 : -1;\n\n    for (let i = start; i !== end; i += step) {\n      const target = i + delta;\n      if (!movedValues.has(opts[i].value) || movedValues.has(opts[target].value)) continue;\n\n      if (delta < 0) {\n        select.insertBefore(opts[i], opts[target]);\n      } else {\n        opts[target].insertAdjacentElement('afterend', opts[i]);\n      }\n    }\n  }\n\n  // Restores selection in the selected listbox after a mutation. Options are\n  // set declaratively in render() so only selection state needs imperative sync.\n  private _syncSelection(selectedValues: Set<string> = new Set()): void {\n    this._$selectedList?.setSelectedValues([...selectedValues]);\n  }\n\n  private _dispatchChange(selectedValues?: Set<string>): void {\n    this.updateComplete.then(() => {\n      this._syncSelection(selectedValues);\n\n      this.dispatchEvent(\n        new CustomEvent<RCTransferListChangeEvent>('rc-transfer-list-change', {\n          bubbles: true,\n          composed: true,\n          detail: { selected: [...this.selected] },\n        }),\n      );\n    });\n  }\n}\n\nexport default RCTransferList;\n"],"names":["RCTransferList","LitElement","targetId","raw","values","o","items","selectedValues","opt","item","available","selected","noAvailable","noSelected","cannotReorder","noAvailableSelection","noSelectedSelection","canMoveUp","canMoveDown","html","nothing","delta","index","target","select","movedValues","opts","start","end","step","i","__decorateClass","property","query","state"],"mappings":"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"}

package/dist/rc-transfer-list-define.js

@@ -0,0 +1,6 @@
+import { R as t } from "./rc-transfer-list-DDgVWhv6.js";
+customElements.get("rc-transfer-list") || customElements.define("rc-transfer-list", t);
+export {
+  t as RCTransferList
+};
+//# sourceMappingURL=rc-transfer-list-define.js.map

package/dist/rc-transfer-list-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-transfer-list-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCTransferList } from './index.js';\n\ncustomElements.get('rc-transfer-list') || customElements.define('rc-transfer-list', RCTransferList);\n\nexport * from './index.js';\n"],"names":["RCTransferList"],"mappings":";AAEA,eAAe,IAAI,kBAAkB,KAAK,eAAe,OAAO,oBAAoBA,CAAc;"}

package/dist/rc-transfer-list.js

@@ -0,0 +1,5 @@
+import { R as a } from "./rc-transfer-list-DDgVWhv6.js";
+export {
+  a as RCTransferList
+};
+//# sourceMappingURL=rc-transfer-list.js.map

package/dist/rc-transfer-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-transfer-list.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-transfer-list/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-transfer-list/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-transfer-list.js';

package/dist/types/packages/rc-transfer-list/src/rc-transfer-list.d.ts

@@ -0,0 +1,108 @@
+import { LitElement } from 'lit';
+import { ListboxOption } from '@rcarls/rc-listbox';
+export interface RCTransferListChangeEvent {
+    /** Ordered selected/right-hand list options. */
+    selected: ListboxOption[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-transfer-list': RCTransferList;
+    }
+}
+/**
+ * Side-by-side transfer list built from two `rc-listbox` instances.
+ *
+ * Requires a direct child `<select multiple>` element as the single source of
+ * truth for option data and form participation. Unselected `<option>` elements
+ * populate the available (left) panel; selected ones populate the selected
+ * (right) panel. Transfers are reflected back to the `<select>` so native form
+ * submission serialises the right-panel values in user-determined order.
+ *
+ * The `available` and `selected` JS array properties write through to the
+ * backing `<select>`, so the component can also be driven imperatively from a
+ * framework without giving up form participation.
+ *
+ * @fires rc-transfer-list-change - Fires when the selected/right-hand list changes.
+ *
+ * @cssprop [--rc-transfer-list-gap=var(--rc-control-gap)] - Gap between panels and the action toolbar
+ * @cssprop [--rc-transfer-list-panel-gap=var(--rc-control-gap)] - Gap between a panel label and its listbox
+ * @cssprop [--rc-transfer-list-listbox-min-block-size=10rem] - Minimum block size for each listbox
+ * @cssprop [--rc-transfer-list-listbox-border=var(--rc-border)] - Border around each listbox
+ * @csspart root - Root layout wrapper. Reflects data-can-move-up/down.
+ * @csspart panel - Shared list panel surface.
+ * @csspart available-panel - Available/left panel. Reflects data-empty and data-has-selection.
+ * @csspart selected-panel - Selected/right panel. Reflects data-empty and data-has-selection.
+ * @csspart actions - Transfer action toolbar.
+ * @csspart button - Shared action button surface.
+ */
+export declare class RCTransferList extends LitElement {
+    createRenderRoot(): this;
+    /** Enable multi-selection in both lists. */
+    multiple: boolean;
+    /** Visible label for the available list. */
+    availableLabel: string;
+    /** Visible label for the selected list. */
+    selectedLabel: string;
+    private _$availableList?;
+    private _$selectedList?;
+    /** Values currently highlighted in the available list. Drives the "Add →" button disable state. */
+    private _availableSelection;
+    /** Values currently highlighted in the selected list. Drives Remove/reorder button disable states. */
+    private _selectedSelection;
+    private _select;
+    /** Set while the component mutates the backing <select> to prevent observer feedback loops. */
+    private _syncing;
+    private _defaultSelected;
+    private _selectedInitialized;
+    private _hostObserver;
+    private _selectObserver;
+    /**
+     * Available/left-hand options derived from unselected `<option>` elements.
+     *
+     * Setting this property replaces all unselected options in the backing
+     * `<select>`. Items whose values already appear in the selected list are
+     * skipped to prevent duplicate option values.
+     */
+    get available(): ListboxOption[];
+    set available(items: ListboxOption[]);
+    /**
+     * Selected/right-hand options derived from selected `<option>` elements.
+     *
+     * Setting this property replaces all selected options in the backing
+     * `<select>`. Unselected options are left unchanged.
+     */
+    get selected(): ListboxOption[];
+    set selected(items: ListboxOption[]);
+    /** Initial uncontrolled selected list. Applied before any `selected` write from the host. */
+    get defaultSelected(): ListboxOption[] | undefined;
+    set defaultSelected(items: ListboxOption[] | undefined);
+    private _applyDefaultSelected;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+    /** Adds the highlighted available options to the selected list. */
+    addSelected(): void;
+    /** Adds every available option to the selected list. */
+    addAll(): void;
+    /** Removes the highlighted right-hand options from the selected list. */
+    removeSelected(): void;
+    /** Clears the selected/right-hand list. */
+    clearSelected(): void;
+    /** Moves highlighted right-hand options by `delta` rows (-1 = up, 1 = down). */
+    moveSelected(delta: number): void;
+    private _onMoveUp;
+    private _onMoveDown;
+    private _canMoveSelected;
+    private _onKeydown;
+    private _onListboxChange;
+    private _setupSelect;
+    private _teardownSelect;
+    /**
+     * Reorders selected `<option>` DOM nodes inside the backing `<select>` to
+     * preserve user-determined order in form serialisation.
+     */
+    private _reorderSelectOptions;
+    private _syncSelection;
+    private _dispatchChange;
+}
+export default RCTransferList;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@rcarls/rc-transfer-list",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless WAI-ARIA transfer list web component built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-transfer-list"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-transfer-list.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-transfer-list/src/index.d.ts",
+        "default": "./dist/rc-transfer-list.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-transfer-list/src/define.d.ts",
+        "default": "./dist/rc-transfer-list-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-transfer-list/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-transfer-list-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest",
+    "test:browser:chrome": "vitest --project=chromium",
+    "test:browser:firefox": "vitest --project=firefox",
+    "yalc:publish": "yalc publish --push"
+  },
+  "dependencies": {
+    "@rcarls/rc-listbox": "workspace:^",
+    "@rcarls/rc-toolbar": "workspace:^"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@guanghechen/rollup-plugin-copy": "^6.0.9",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}