npm - @rcarls/rc-transfer-list - Versions diffs - 0.2.0 → 0.3.0 - Mend

@rcarls/rc-transfer-list 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +115 -1
package/dist/custom-elements.json +76 -10
package/dist/{rc-transfer-list-DDgVWhv6.js → rc-transfer-list-DFPxuGJ2.js} +222 -104
package/dist/rc-transfer-list-DFPxuGJ2.js.map +1 -0
package/dist/rc-transfer-list-define.js +1 -1
package/dist/rc-transfer-list.js +1 -1
package/dist/types/packages/rc-transfer-list/src/rc-transfer-list.d.ts +21 -11
package/dist/types/packages/rc-transfer-list/src/rc-transfer-list.styles.d.ts +2 -0
package/package.json +9 -11
package/dist/demo.css +0 -85
package/dist/demo.js +0 -40
package/dist/rc-transfer-list-DDgVWhv6.js.map +0 -1

package/README.md CHANGED Viewed

@@ -1,6 +1,99 @@
 # @rcarls/rc-transfer-list
-Side-by-side transfer list web component built from rc-listbox.
+Transfer list that enhances a native `<select multiple>` into available and selected panes.
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-transfer-list](https://richardcarls.github.io/rc-webcomponents/components/rc-transfer-list).
+The component renders two listboxes and transfer/reorder actions in between.
+Available options are on the left, and selected options appear on the right. It
+is an older enterprise/admin UI pattern, but solves the specific problem of
+multiple selection within a large amount of options.
+Modern use cases include user and permissions management tasks, multi-select for
+columns / fields / filters and list re-ordering.
+## Installation
+```bash
+npm install @rcarls/rc-transfer-list
+```
+```bash
+yarn add @rcarls/rc-transfer-list
+```
+## Import
+```js
+import '@rcarls/rc-transfer-list/define';
+```
+## Usage
+```html
+<rc-transfer-list available-label="Available planets" selected-label="Mission route">
+  <select name="planets" multiple>
+    <option value="mercury">Mercury</option>
+    <option value="venus" selected>Venus</option>
+    <option value="earth">Earth</option>
+    <option value="mars">Mars</option>
+  </select>
+</rc-transfer-list>
+```
+The selected/right-hand list is reflected back to the native select, so form
+submission serializes selected option values in the order shown in the selected
+panel.
+Use the `compact` attribute when the surrounding layout should present the
+available list, actions, and selected list in one column. The component does not
+switch layout automatically at viewport breakpoints.
+## API
+### Properties
+| Property | Attribute | Type | Default | Description |
+|---|---|---|---|---|
+| `multiple` | `multiple` | `boolean` | `false` | Allows multiple highlighted rows in each listbox. |
+| `compact` | `compact` | `boolean` | `false` | Stacks the panels and action toolbar into a compact one-column layout. |
+| `availableLabel` | `available-label` | `string` | `'Available'` | Visible label for the available list. |
+| `selectedLabel` | `selected-label` | `string` | `'Selected'` | Visible label for the selected list. |
+| `available` | - | `ListboxOption[]` | native select state | Gets or replaces unselected options. |
+| `selected` | - | `ListboxOption[]` | native select state | Gets or replaces selected options. |
+| `defaultSelected` | - | `ListboxOption[] \| undefined` | `undefined` | Initial uncontrolled selected options, applied before host `selected` writes. |
+### Methods
+| Method | Description |
+|---|---|
+| `addSelected()` | Moves highlighted available options to the selected list. |
+| `addAll()` | Moves every available option to the selected list. |
+| `removeSelected()` | Moves highlighted selected options back to the available list. |
+| `clearSelected()` | Moves every selected option back to the available list. |
+| `moveSelected(delta)` | Reorders highlighted selected options by `-1` or `1` rows. |
+### Events
+| Event | Detail | Description |
+|---|---|---|
+| `rc-transfer-list-change` | `{ selected: ListboxOption[] }` | Fires after a user action changes the selected/right-hand list. |
+Host property writes to `available`, `selected`, or `defaultSelected` are silent.
+## Keyboard
+The embedded `rc-listbox` controls provide list navigation and selection. The
+transfer list also supports these shortcuts when focus is inside the component:
+| Shortcut | Action |
+|---|---|
+| `Alt+ArrowRight` | Add highlighted available options. |
+| `Alt+ArrowLeft` | Remove highlighted selected options. |
+| `Alt+ArrowUp` | Move highlighted selected options up. |
+| `Alt+ArrowDown` | Move highlighted selected options down. |
+| `Enter` | Add the highlighted available option in single-select mode. |
+| `Delete` | Remove highlighted selected options. |
 ## Styling Hooks
@@ -8,3 +101,24 @@ 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.
+| CSS custom property | Default | Description |
+|---|---|---|
+| `--rc-transfer-list-gap` | `var(--rc-control-gap, 0.75rem)` | Gap between panels and the action toolbar. |
+| `--rc-transfer-list-panel-gap` | `var(--rc-control-gap, 0.35rem)` | Gap between a panel label and its listbox. |
+| `--rc-transfer-list-listbox-min-block-size` | `10rem` | Minimum block size for each listbox. |
+| `--rc-transfer-list-listbox-border` | `var(--rc-border, 1px solid ButtonBorder)` | Border around each listbox. |
+| `--rc-transfer-list-option-gap` | `var(--rc-item-gap, 0.4em)` | Gap between option adornments and labels. |
+| `--rc-transfer-list-option-padding-block` | `var(--rc-item-padding-block, 0.3em)` | Block padding for option rows. |
+| `--rc-transfer-list-option-padding-inline` | `var(--rc-item-padding-inline, 0.75em)` | Inline padding for option rows. |
+| `--rc-transfer-list-option-selected-bg` | `var(--rc-highlight, Highlight)` | Selected option background. |
+| `--rc-transfer-list-option-selected-color` | `var(--rc-highlight-text, HighlightText)` | Selected option foreground. |
+| Part | Description |
+|---|---|
+| `root` | Root layout wrapper. |
+| `panel` | Shared list panel surface. |
+| `available-panel` | Available/left panel. |
+| `selected-panel` | Selected/right panel. |
+| `actions` | Transfer action toolbar. |
+| `button` | Shared action button surface. |

package/dist/custom-elements.json CHANGED Viewed

@@ -46,7 +46,7 @@
       "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.",
+          "description": "Transfer list that enhances a native <select multiple> into available and selected\npanes.\n\nThe component renders two listboxes and transfer/reorder actions in between.\nAvailable options are on the left, and selected options appear on the right. It\nis an older enterprise/admin UI pattern, but solves the specific problem of\nmultiple selection within a large amount of options.\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": [
             {
@@ -68,6 +68,31 @@
               "description": "Border around each listbox",
               "name": "--rc-transfer-list-listbox-border",
               "default": "var(--rc-border)"
+            },
+            {
+              "description": "Gap between option adornments and labels",
+              "name": "--rc-transfer-list-option-gap",
+              "default": "var(--rc-item-gap)"
+            },
+            {
+              "description": "Block padding for option rows",
+              "name": "--rc-transfer-list-option-padding-block",
+              "default": "var(--rc-item-padding-block)"
+            },
+            {
+              "description": "Inline padding for option rows",
+              "name": "--rc-transfer-list-option-padding-inline",
+              "default": "var(--rc-item-padding-inline)"
+            },
+            {
+              "description": "Selected option background",
+              "name": "--rc-transfer-list-option-selected-bg",
+              "default": "var(--rc-highlight)"
+            },
+            {
+              "description": "Selected option foreground",
+              "name": "--rc-transfer-list-option-selected-color",
+              "default": "var(--rc-highlight-text)"
             }
           ],
           "cssParts": [
@@ -108,6 +133,17 @@
               "attribute": "multiple",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stack the panels and action toolbar into a compact one-column layout.",
+              "attribute": "compact",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "availableLabel",
@@ -166,7 +202,7 @@
             },
             {
               "kind": "field",
-              "name": "_select",
+              "name": "_$select",
               "type": {
                 "text": "HTMLSelectElement | null"
               },
@@ -200,17 +236,12 @@
               "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(); })"
+              "readonly": true,
+              "default": "new MutationObserverController(this, { target: null, disabled: true, callback: () => { if (!this._syncing) { this.requestUpdate(); } }, })"
             },
             {
               "kind": "field",
@@ -362,6 +393,24 @@
               "name": "_onListboxChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_getListboxEventTargetId",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_setupSelect",
@@ -370,7 +419,15 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "$select",
+                  "type": {
+                    "text": "HTMLSelectElement | null"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -465,6 +522,15 @@
               "description": "Enable multi-selection in both lists.",
               "fieldName": "multiple"
             },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stack the panels and action toolbar into a compact one-column layout.",
+              "fieldName": "compact"
+            },
             {
               "name": "available-label",
               "type": {

package/dist/{rc-transfer-list-DDgVWhv6.js → rc-transfer-list-DFPxuGJ2.js} RENAMED Viewed

@@ -1,16 +1,129 @@
+import { css as _, LitElement as m, nothing as c, html as y } from "lit";
+import { property as p, query as f, state as v } from "lit/decorators.js";
+import { MutationObserverController as $, NativeChildController as x } from "@rcarls/rc-common";
 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) => {
+const S = _`
+  :host {
+    display: block;
+  }
+  :host([hidden]) {
+    display: none;
+  }
+  #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));
+  }
+  :host([compact]) #root {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .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-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));
+    background: var(--rc-transfer-list-listbox-bg, var(--rc-surface, Canvas));
+    color: var(--rc-transfer-list-listbox-color, var(--rc-field-text, FieldText));
+    --rc-listbox-option-gap: var(--rc-transfer-list-option-gap, var(--rc-item-gap, 0.4em));
+    --rc-listbox-option-padding-block: var(
+      --rc-transfer-list-option-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-listbox-option-padding-inline: var(
+      --rc-transfer-list-option-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-listbox-hover-bg: var(
+      --rc-transfer-list-option-hover-bg,
+      var(--rc-transfer-list-option-selected-bg, var(--rc-highlight, Highlight))
+    );
+    --rc-listbox-hover-color: var(
+      --rc-transfer-list-option-hover-color,
+      var(--rc-transfer-list-option-selected-color, var(--rc-highlight-text, HighlightText))
+    );
+    --rc-listbox-active-bg: var(
+      --rc-transfer-list-option-hover-bg,
+      var(--rc-transfer-list-option-selected-bg, var(--rc-highlight, Highlight))
+    );
+    --rc-listbox-active-color: var(
+      --rc-transfer-list-option-hover-color,
+      var(--rc-transfer-list-option-selected-color, var(--rc-highlight-text, HighlightText))
+    );
+    --rc-listbox-selected-bg: var(
+      --rc-transfer-list-option-selected-bg,
+      var(--rc-highlight, Highlight)
+    );
+    --rc-listbox-selected-color: var(
+      --rc-transfer-list-option-selected-color,
+      var(--rc-highlight-text, HighlightText)
+    );
+    --rc-listbox-disabled-opacity: var(--rc-disabled-opacity, 0.5);
+  }
+  rc-listbox [part~='option'][hidden] {
+    display: none;
+  }
+  rc-listbox [part~='option'][data-active]:not([aria-disabled='true']) {
+    outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));
+    outline-offset: -2px;
+  }
+  rc-listbox [part~='option'][aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  #actions {
+    align-self: center;
+    transform: translateY(
+      calc((1lh + var(--rc-transfer-list-panel-gap, var(--rc-control-gap, 0.35rem))) / 2)
+    );
+  }
+  :host([compact]) #actions {
+    align-self: stretch;
+    transform: none;
+  }
+  :host([compact]) #actions::part(root) {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  #actions button {
+    white-space: nowrap;
+  }
+  slot:not([name]) {
+    display: none;
+  }
+`;
+var w = 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;
+  return l && w(e, t, l), l;
 };
-class o extends _ {
+const b = class b extends m {
   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();
+    super(), this.multiple = !1, this.compact = !1, this.availableLabel = "Available", this.selectedLabel = "Selected", this._availableSelection = [], this._selectedSelection = [], this._$select = null, this._syncing = !1, this._selectedInitialized = !1, this._selectObserver = new $(this, {
+      target: null,
+      disabled: !0,
+      callback: () => {
+        this._syncing || this.requestUpdate();
+      }
     }), this._onMoveUp = () => {
       this.moveSelected(-1);
     }, this._onMoveDown = () => {
@@ -33,19 +146,27 @@ class o extends _ {
         }
         return;
       }
-      const t = e.target.id;
+      const t = this._getListboxEventTargetId(e);
       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;
+      const t = e;
+      if (t.detail.reason === "action") {
+        e.stopPropagation();
+        return;
+      }
+      const s = t.detail.value, l = Array.isArray(s) ? s : s ? [s] : [], i = e.currentTarget?.id;
       i === "available-list" ? this._availableSelection = l : i === "selected-list" && (this._selectedSelection = l);
-    };
-  }
-  createRenderRoot() {
-    return this;
+    }, new x(this, {
+      selector: ":scope > select[multiple]",
+      observe: !0,
+      onChange: (e) => this._setupSelect(e),
+      onMissing: () => {
+      }
+    });
   }
   /**
    * Available/left-hand options derived from unselected `<option>` elements.
@@ -55,18 +176,19 @@ class o extends _ {
    * 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 })) : [];
+    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;
+    if (!this._$select)
+      return;
     this._syncing = !0;
     const t = new Set(
-      Array.from(this._select.options).filter((s) => s.selected).map((s) => s.value)
+      Array.from(this._$select.options).filter((s) => s.selected).map((s) => s.value)
     );
-    for (const s of Array.from(this._select.options))
+    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));
+      t.has(s.value) || this._$select.add(new Option(s.label, s.value));
     this._syncing = !1, this.requestUpdate();
   }
   /**
@@ -76,15 +198,15 @@ class o extends _ {
    * `<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 })) : [];
+    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) {
+    if (this._selectedInitialized = !0, !!this._$select) {
       this._syncing = !0;
-      for (const t of Array.from(this._select.options))
+      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._$select.add(new Option(t.label, t.value, !1, !0));
       this._syncing = !1, this.requestUpdate();
     }
   }
@@ -93,74 +215,29 @@ class o extends _ {
     return this._defaultSelected;
   }
   set defaultSelected(e) {
-    this._defaultSelected = e, !this._selectedInitialized && this._select && e !== void 0 && this._applyDefaultSelected(e);
+    this._defaultSelected = e, !this._selectedInitialized && this._$select && e !== void 0 && this._applyDefaultSelected(e);
   }
   _applyDefaultSelected(e) {
-    if (this._select) {
+    if (this._$select) {
       this._syncing = !0;
-      for (const t of Array.from(this._select.options))
+      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);
+    super.disconnectedCallback(), this._teardownSelect();
   }
   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>
+    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), g = this._canMoveSelected(t, s, 1);
+    return y`
       <div
+        id="root"
         part="root"
         class="rc-transfer-list-root"
         data-can-move-up=${d ? "" : c}
-        data-can-move-down=${v ? "" : c}
+        data-can-move-down=${g ? "" : c}
+        @keydown=${this._onKeydown}
       >
         <section
           part="panel available-panel"
@@ -177,11 +254,13 @@ class o extends _ {
             tabindex="0"
             .options=${e}
             .multiple=${this.multiple}
+            @rc-listbox-change=${this._onListboxChange}
           ></rc-listbox>
         </section>
         <rc-toolbar
-          orientation="vertical"
+          id="actions"
+          orientation=${this.compact ? "horizontal" : "vertical"}
           label="Transfer actions"
           part="actions"
           class="rc-transfer-list-actions"
@@ -191,37 +270,54 @@ class o extends _ {
             part="button add-button"
             ?disabled=${l || h}
             @click=${this.addSelected}
-          >Add &#x2192;</button>
+          >
+            Add &#x2192;
+          </button>
           <button
             type="button"
             part="button add-all-button"
             ?disabled=${l}
             @click=${this.addAll}
-          >Add all &#x2192;</button>
+          >
+            Add all &#x2192;
+          </button>
           <button
             type="button"
             part="button remove-button"
             ?disabled=${i || a}
             @click=${this.removeSelected}
-          >&#x2190; Remove</button>
+          >
+            &#x2190; Remove
+          </button>
           <button
             type="button"
             part="button clear-button"
             ?disabled=${i}
             @click=${this.clearSelected}
-          >&#x2190; Clear</button>
+          >
+            &#x2190; Clear
+          </button>
           <button
             type="button"
             part="button move-up-button"
             ?disabled=${r || a}
             @click=${this._onMoveUp}
-          >Move up</button>
+          >
+            Move up
+          </button>
           <button
             type="button"
             part="button move-down-button"
             ?disabled=${r || a}
             @click=${this._onMoveDown}
-          >Move down</button>
+          >
+            Move down
+          </button>
         </rc-toolbar>
         <section
@@ -232,6 +328,7 @@ class o extends _ {
           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"
@@ -239,75 +336,91 @@ class o extends _ {
             tabindex="0"
             .options=${t}
             .multiple=${this.multiple}
+            @rc-listbox-change=${this._onListboxChange}
           ></rc-listbox>
         </section>
       </div>
+      <slot></slot>
     `;
   }
   /** Adds the highlighted available options to the selected list. */
   addSelected() {
-    if (!this._select) return;
+    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))
+      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) {
+    if (this._$select) {
       this._syncing = !0;
-      for (const e of Array.from(this._select.options)) e.selected = !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;
+    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))
+      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) {
+    if (this._$select) {
       this._syncing = !0;
-      for (const e of Array.from(this._select.options)) e.selected = !1;
+      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;
+    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;
+      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()));
+  _getListboxEventTargetId(e) {
+    for (const t of e.composedPath())
+      if (t instanceof Element && (t.id === "available-list" || t.id === "selected-list"))
+        return t.id;
+  }
+  _setupSelect(e) {
+    e !== this._$select && (this._teardownSelect(), this._$select = e, e && (e.style.display = "none", e.setAttribute("aria-hidden", "true"), e.tabIndex = -1, this._selectObserver.setOptions({
+      target: e,
+      disabled: !1,
+      observerOptions: { 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;
+    this._$select && (this._$select.style.display = "", this._$select.removeAttribute("aria-hidden"), this._$select.removeAttribute("tabindex")), this._selectObserver.setOptions({ target: null, disabled: !0 }), 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;
+    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]));
@@ -329,10 +442,15 @@ class o extends _ {
       );
     });
   }
-}
+};
+b.styles = S;
+let o = b;
 n([
   p({ type: Boolean, reflect: !0 })
 ], o.prototype, "multiple");
+n([
+  p({ type: Boolean, reflect: !0 })
+], o.prototype, "compact");
 n([
   p({ attribute: "available-label" })
 ], o.prototype, "availableLabel");
@@ -340,18 +458,18 @@ n([
   p({ attribute: "selected-label" })
 ], o.prototype, "selectedLabel");
 n([
-  b("#available-list")
+  f("#available-list")
 ], o.prototype, "_$availableList");
 n([
-  b("#selected-list")
+  f("#selected-list")
 ], o.prototype, "_$selectedList");
 n([
-  f()
+  v()
 ], o.prototype, "_availableSelection");
 n([
-  f()
+  v()
 ], o.prototype, "_selectedSelection");
 export {
   o as R
 };
-//# sourceMappingURL=rc-transfer-list-DDgVWhv6.js.map
+//# sourceMappingURL=rc-transfer-list-DFPxuGJ2.js.map

package/dist/rc-transfer-list-DFPxuGJ2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"rc-transfer-list-DFPxuGJ2.js","sources":["../src/rc-transfer-list.styles.ts","../src/rc-transfer-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const transferListStyles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n #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 :host([compact]) #root {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .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-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 background: var(--rc-transfer-list-listbox-bg, var(--rc-surface, Canvas));\n color: var(--rc-transfer-list-listbox-color, var(--rc-field-text, FieldText));\n --rc-listbox-option-gap: var(--rc-transfer-list-option-gap, var(--rc-item-gap, 0.4em));\n --rc-listbox-option-padding-block: var(\n --rc-transfer-list-option-padding-block,\n var(--rc-item-padding-block, 0.3em)\n );\n --rc-listbox-option-padding-inline: var(\n --rc-transfer-list-option-padding-inline,\n var(--rc-item-padding-inline, 0.75em)\n );\n --rc-listbox-hover-bg: var(\n --rc-transfer-list-option-hover-bg,\n var(--rc-transfer-list-option-selected-bg, var(--rc-highlight, Highlight))\n );\n --rc-listbox-hover-color: var(\n --rc-transfer-list-option-hover-color,\n var(--rc-transfer-list-option-selected-color, var(--rc-highlight-text, HighlightText))\n );\n --rc-listbox-active-bg: var(\n --rc-transfer-list-option-hover-bg,\n var(--rc-transfer-list-option-selected-bg, var(--rc-highlight, Highlight))\n );\n --rc-listbox-active-color: var(\n --rc-transfer-list-option-hover-color,\n var(--rc-transfer-list-option-selected-color, var(--rc-highlight-text, HighlightText))\n );\n --rc-listbox-selected-bg: var(\n --rc-transfer-list-option-selected-bg,\n var(--rc-highlight, Highlight)\n );\n --rc-listbox-selected-color: var(\n --rc-transfer-list-option-selected-color,\n var(--rc-highlight-text, HighlightText)\n );\n --rc-listbox-disabled-opacity: var(--rc-disabled-opacity, 0.5);\n }\n\n rc-listbox [part~='option'][hidden] {\n display: none;\n }\n\n rc-listbox [part~='option'][data-active]:not([aria-disabled='true']) {\n outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));\n outline-offset: -2px;\n }\n\n rc-listbox [part~='option'][aria-disabled='true'] {\n cursor: not-allowed;\n }\n\n #actions {\n align-self: center;\n transform: translateY(\n calc((1lh + var(--rc-transfer-list-panel-gap, var(--rc-control-gap, 0.35rem))) / 2)\n );\n }\n\n :host([compact]) #actions {\n align-self: stretch;\n transform: none;\n }\n\n :host([compact]) #actions::part(root) {\n flex-wrap: wrap;\n justify-content: center;\n }\n\n #actions button {\n white-space: nowrap;\n }\n\n slot:not([name]) {\n display: none;\n }\n`;\n\nexport default transferListStyles;\n","import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport {\n MutationObserverController,\n NativeChildController,\n warnMissingDirectChild,\n} from '@rcarls/rc-common';\nimport type { ListboxOption, RCListbox, RCListboxChangeEvent } from '@rcarls/rc-listbox';\n\nimport '@rcarls/rc-listbox/define';\nimport '@rcarls/rc-toolbar/define';\n\nimport { transferListStyles } from './rc-transfer-list.styles.js';\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 * Transfer list that enhances a native <select multiple> into available and selected\n * panes.\n *\n * The component renders two listboxes and transfer/reorder actions in between.\n * Available options are on the left, and selected options appear on the right. It\n * is an older enterprise/admin UI pattern, but solves the specific problem of\n * multiple selection within a large amount of options.\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 * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-transfer-list rc-transfer-list docs}\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 * @cssprop [--rc-transfer-list-option-gap=var(--rc-item-gap)] - Gap between option adornments and labels\n * @cssprop [--rc-transfer-list-option-padding-block=var(--rc-item-padding-block)] - Block padding for option rows\n * @cssprop [--rc-transfer-list-option-padding-inline=var(--rc-item-padding-inline)] - Inline padding for option rows\n * @cssprop [--rc-transfer-list-option-selected-bg=var(--rc-highlight)] - Selected option background\n * @cssprop [--rc-transfer-list-option-selected-color=var(--rc-highlight-text)] - Selected option foreground\n *\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 static override styles = transferListStyles;\n\n /** Enable multi-selection in both lists. */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /** Stack the panels and action toolbar into a compact one-column layout. */\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n /** Visible label for the available list. */\n @property({ attribute: 'available-label' })\n availableLabel = 'Available';\n\n /** Visible label for the selected list. */\n @property({ attribute: 'selected-label' })\n selectedLabel = 'Selected';\n\n @query('#available-list')\n private _$availableList?: RCListbox;\n\n @query('#selected-list')\n private _$selectedList?: RCListbox;\n\n /** Values currently highlighted in the available list. Drives the \"Add →\" button disable state. */\n @state()\n private _availableSelection: string[] = [];\n\n /** Values currently highlighted in the selected list. Drives Remove/reorder button disable states. */\n @state()\n 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\n private _selectedInitialized = false;\n\n private readonly _selectObserver = new MutationObserverController(this, {\n target: null,\n disabled: true,\n callback: () => {\n if (!this._syncing) {\n this.requestUpdate();\n }\n },\n });\n\n constructor() {\n super();\n\n new NativeChildController<HTMLSelectElement>(this, {\n selector: ':scope > select[multiple]',\n observe: true,\n onChange: ($select) => this._setupSelect($select),\n onMissing: () => {\n if (import.meta.env.DEV) {\n warnMissingDirectChild(this, {\n selector: ':scope > select[multiple]',\n message:\n '[rc-transfer-list] No direct child <select multiple> found. ' +\n 'Add a <select multiple> child for form participation and progressive enhancement.',\n });\n }\n },\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) {\n return [];\n }\n\n return Array.from(this._$select.options)\n .filter(($option) => !$option.selected)\n .map(($option) => ({ value: $option.value, label: $option.label || $option.text }));\n }\n\n set available(items: ListboxOption[]) {\n if (!this._$select) {\n return;\n }\n\n this._syncing = true;\n\n const selectedValues = new Set(\n Array.from(this._$select.options)\n .filter(($option) => $option.selected)\n .map(($option) => $option.value),\n );\n\n for (const $option of Array.from(this._$select.options)) {\n if (!$option.selected) {\n $option.remove();\n }\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 * 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) {\n return [];\n }\n\n return Array.from(this._$select.options)\n .filter(($option) => $option.selected)\n .map(($option) => ({ value: $option.value, label: $option.label || $option.text }));\n }\n\n set selected(items: ListboxOption[]) {\n this._selectedInitialized = true;\n\n if (!this._$select) {\n return;\n }\n\n this._syncing = true;\n\n for (const $option of Array.from(this._$select.options)) {\n if ($option.selected) {\n $option.remove();\n }\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 /** Initial uncontrolled selected list. Applied before any `selected` write from the host. */\n get defaultSelected(): ListboxOption[] | undefined {\n return this._defaultSelected;\n }\n\n set defaultSelected(items: ListboxOption[] | undefined) {\n this._defaultSelected = items;\n\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) {\n return;\n }\n\n this._syncing = true;\n\n for (const $option of Array.from(this._$select.options)) {\n $option.selected = items.some((item) => item.value === $option.value);\n }\n\n this._syncing = false;\n this.requestUpdate();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._teardownSelect();\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 <div\n id=\"root\"\n part=\"root\"\n class=\"rc-transfer-list-root\"\n data-can-move-up=${canMoveUp ? '' : nothing}\n data-can-move-down=${canMoveDown ? '' : nothing}\n @keydown=${this._onKeydown}\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-change=${this._onListboxChange}\n ></rc-listbox>\n </section>\n\n <rc-toolbar\n id=\"actions\"\n orientation=${this.compact ? 'horizontal' : '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 >\n Add →\n </button>\n\n <button\n type=\"button\"\n part=\"button add-all-button\"\n ?disabled=${noAvailable}\n @click=${this.addAll}\n >\n Add all →\n </button>\n\n <button\n type=\"button\"\n part=\"button remove-button\"\n ?disabled=${noSelected || noSelectedSelection}\n @click=${this.removeSelected}\n >\n ← Remove\n </button>\n\n <button\n type=\"button\"\n part=\"button clear-button\"\n ?disabled=${noSelected}\n @click=${this.clearSelected}\n >\n ← Clear\n </button>\n\n <button\n type=\"button\"\n part=\"button move-up-button\"\n ?disabled=${cannotReorder || noSelectedSelection}\n @click=${this._onMoveUp}\n >\n Move up\n </button>\n\n <button\n type=\"button\"\n part=\"button move-down-button\"\n ?disabled=${cannotReorder || noSelectedSelection}\n @click=${this._onMoveDown}\n >\n Move down\n </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\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-change=${this._onListboxChange}\n ></rc-listbox>\n </section>\n </div>\n <slot></slot>\n `;\n }\n\n /** Adds the highlighted available options to the selected list. */\n addSelected(): void {\n if (!this._$select) {\n return;\n }\n\n const values = new Set(this._$availableList?.selectedValues ?? []);\n\n if (values.size === 0) {\n return;\n }\n\n this._syncing = true;\n\n for (const $option of Array.from(this._$select.options)) {\n if (!$option.selected && values.has($option.value)) {\n $option.selected = true;\n }\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) {\n return;\n }\n\n this._syncing = true;\n\n for (const $option of Array.from(this._$select.options)) {\n $option.selected = true;\n }\n\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) {\n return;\n }\n\n const values = new Set(this._$selectedList?.selectedValues ?? []);\n\n if (values.size === 0) {\n return;\n }\n\n this._syncing = true;\n\n for (const $option of Array.from(this._$select.options)) {\n if ($option.selected && values.has($option.value)) {\n $option.selected = false;\n }\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) {\n return;\n }\n\n this._syncing = true;\n\n for (const $option of Array.from(this._$select.options)) {\n $option.selected = false;\n }\n\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) {\n return;\n }\n\n const values = new Set(this._$selectedList?.selectedValues ?? []);\n\n if (values.size === 0) {\n return;\n }\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 => {\n this.moveSelected(-1);\n };\n\n private _onMoveDown = (): void => {\n this.moveSelected(1);\n };\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) {\n return false;\n }\n\n return selected.some((item, index) => {\n if (!selectedValues.has(item.value)) {\n return false;\n }\n\n const target = index + delta;\n\n if (target < 0 || target >= selected.length) {\n return false;\n }\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':\n e.preventDefault();\n this.addSelected();\n\n break;\n\n case 'ArrowLeft':\n e.preventDefault();\n this.removeSelected();\n\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n this.moveSelected(-1);\n\n break;\n\n case 'ArrowDown':\n e.preventDefault();\n this.moveSelected(1);\n\n break;\n }\n\n return;\n }\n\n const targetId = this._getListboxEventTargetId(e);\n\n // APG shortcut: Enter in the available list adds the active item.\n\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\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\n this.removeSelected();\n }\n };\n\n private _onListboxChange = (e: Event): void => {\n const ev = e as CustomEvent<RCListboxChangeEvent>;\n\n if (ev.detail.reason === 'action') {\n e.stopPropagation();\n return;\n }\n\n const raw = ev.detail.value;\n const values = Array.isArray(raw) ? raw : raw ? [raw] : [];\n const targetId = (e.currentTarget as Element | null)?.id;\n\n if (targetId === 'available-list') {\n this._availableSelection = values;\n } else if (targetId === 'selected-list') {\n this._selectedSelection = values;\n }\n };\n\n private _getListboxEventTargetId(e: Event): string | undefined {\n for (const node of e.composedPath()) {\n if (\n node instanceof Element &&\n (node.id === 'available-list' || node.id === 'selected-list')\n ) {\n return node.id;\n }\n }\n\n return undefined;\n }\n\n private _setupSelect($select: HTMLSelectElement | null): void {\n if ($select === this._$select) {\n return;\n }\n\n this._teardownSelect();\n this._$select = $select;\n\n if (!$select) {\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.setOptions({\n target: $select,\n disabled: false,\n observerOptions: { childList: true },\n });\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\n this._selectObserver.setOptions({ target: null, disabled: true });\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 $options = Array.from($select.options).filter(($option) => $option.selected);\n\n const start = delta < 0 ? 1 : $options.length - 2;\n const end = delta < 0 ? $options.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\n if (!movedValues.has($options[i].value) || movedValues.has($options[target].value)) {\n continue;\n }\n\n if (delta < 0) {\n $select.insertBefore($options[i], $options[target]);\n } else {\n $options[target].insertAdjacentElement('afterend', $options[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":["transferListStyles","css","_RCTransferList","LitElement","MutationObserverController","targetId","ev","raw","values","NativeChildController","$select","$option","items","selectedValues","item","available","selected","noAvailable","noSelected","cannotReorder","noAvailableSelection","noSelectedSelection","canMoveUp","canMoveDown","html","nothing","delta","index","target","node","movedValues","$options","start","end","step","i","RCTransferList","__decorateClass","property","query","state"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { R as t } from "./rc-transfer-list-DDgVWhv6.js";
+import { R as t } from "./rc-transfer-list-DFPxuGJ2.js";
 customElements.get("rc-transfer-list") || customElements.define("rc-transfer-list", t);
 export {
   t as RCTransferList

package/dist/rc-transfer-list.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { R as a } from "./rc-transfer-list-DDgVWhv6.js";
+import { R as a } from "./rc-transfer-list-DFPxuGJ2.js";
 export {
   a as RCTransferList
 };

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

@@ -10,24 +10,32 @@ declare global {
     }
 }
 /**
- * Side-by-side transfer list built from two `rc-listbox` instances.
+ * Transfer list that enhances a native <select multiple> into available and selected
+ * panes.
  *
- * 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 component renders two listboxes and transfer/reorder actions in between.
+ * Available options are on the left, and selected options appear on the right. It
+ * is an older enterprise/admin UI pattern, but solves the specific problem of
+ * multiple selection within a large amount of options.
  *
  * 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.
  *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-transfer-list rc-transfer-list docs}
+ *
  * @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
+ * @cssprop [--rc-transfer-list-option-gap=var(--rc-item-gap)] - Gap between option adornments and labels
+ * @cssprop [--rc-transfer-list-option-padding-block=var(--rc-item-padding-block)] - Block padding for option rows
+ * @cssprop [--rc-transfer-list-option-padding-inline=var(--rc-item-padding-inline)] - Inline padding for option rows
+ * @cssprop [--rc-transfer-list-option-selected-bg=var(--rc-highlight)] - Selected option background
+ * @cssprop [--rc-transfer-list-option-selected-color=var(--rc-highlight-text)] - Selected option foreground
+ *
  * @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.
@@ -36,9 +44,11 @@ declare global {
  * @csspart button - Shared action button surface.
  */
 export declare class RCTransferList extends LitElement {
-    createRenderRoot(): this;
+    static styles: import('lit').CSSResult;
     /** Enable multi-selection in both lists. */
     multiple: boolean;
+    /** Stack the panels and action toolbar into a compact one-column layout. */
+    compact: boolean;
     /** Visible label for the available list. */
     availableLabel: string;
     /** Visible label for the selected list. */
@@ -49,13 +59,13 @@ export declare class RCTransferList extends LitElement {
     private _availableSelection;
     /** Values currently highlighted in the selected list. Drives Remove/reorder button disable states. */
     private _selectedSelection;
-    private _select;
+    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;
+    private readonly _selectObserver;
+    constructor();
     /**
      * Available/left-hand options derived from unselected `<option>` elements.
      *
@@ -77,7 +87,6 @@ export declare class RCTransferList extends LitElement {
     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. */
@@ -95,6 +104,7 @@ export declare class RCTransferList extends LitElement {
     private _canMoveSelected;
     private _onKeydown;
     private _onListboxChange;
+    private _getListboxEventTargetId;
     private _setupSelect;
     private _teardownSelect;
     /**

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

	@@ -0,0 +1,2 @@
1	+ export declare const transferListStyles: import('lit').CSSResult;
2	+ export default transferListStyles;

package/package.json CHANGED Viewed

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless WAI-ARIA transfer list web component built with Lit",
+  "version": "0.3.0",
+  "description": "Transfer list that enhances a native <select multiple> into available and selected panes.",
   "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",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-transfer-list",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,22 +37,20 @@
   ],
   "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"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-listbox": "workspace:^",
-    "@rcarls/rc-toolbar": "workspace:^"
+    "@rcarls/rc-common": "workspace:*",
+    "@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",

package/dist/demo.css DELETED Viewed

@@ -1,85 +0,0 @@
-*, *::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 DELETED Viewed

@@ -1,40 +0,0 @@
-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.map DELETED Viewed

@@ -1 +0,0 @@

- {"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 →</button>\n <button\n type=\"button\"\n part=\"button add-all-button\"\n ?disabled=${noAvailable}\n @click=${this.addAll}\n >Add all →</button>\n <button\n type=\"button\"\n part=\"button remove-button\"\n ?disabled=${noSelected || noSelectedSelection}\n @click=${this.removeSelected}\n >← Remove</button>\n <button\n type=\"button\"\n part=\"button clear-button\"\n ?disabled=${noSelected}\n @click=${this.clearSelected}\n >← 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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"}