@lit-material/dual-list 0.0.0-init → 0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,53 @@
+# @lit-material/dual-list
+
+Picks a subset of a list by moving items between "Available" and "Chosen": project members, permissions, scopes, regions. Built with [Lit](https://lit.dev/). Part of [lit-material](https://github.com/bohdaq/lit-material).
+
+## Install
+
+```sh
+npm install @lit-material/dual-list @lit-material/tokens
+```
+
+## Usage
+
+```html
+<lit-material-dual-list-selector id="scopes" filterable chosen-label="Granted"></lit-material-dual-list-selector>
+<script type="module">
+  import "@lit-material/dual-list";
+  const scopes = document.querySelector("#scopes");
+  scopes.items = [
+    { value: "vm:read", label: "Read VMs" },
+    { value: "vm:write", label: "Manage VMs" },
+    { value: "billing", label: "Billing", disabled: true },
+  ];
+  scopes.selected = ["vm:read"];
+  scopes.addEventListener("change", (e) => console.log(e.detail.selected));
+</script>
+```
+
+## API
+
+| Property         | Attribute         | Type                                     | Default       |
+| ---------------- | ----------------- | ---------------------------------------- | ------------- |
+| `items`          | —                 | `{ value, label, disabled? }[]`          | `[]`          |
+| `selected`       | —                 | `string[]` (chosen values)               | `[]`          |
+| `availableLabel` | `available-label` | `string`                                 | `"Available"` |
+| `chosenLabel`    | `chosen-label`    | `string`                                 | `"Chosen"`    |
+| `filterable`     | `filterable`      | `boolean`                                | `false`       |
+| `disabled`       | `disabled` (reflected) | `boolean`                           | `false`       |
+
+Method: `move(side, values)`. Event: `change` (`detail: { selected }`, in `items` order). Parts:
+`pane`, `list`, `option`. `--lit-material-dual-list-height` sets each list's height (default `16rem`).
+
+## Behavior
+
+- Click marks an item, Ctrl/⌘-click adds to the marks, Shift-click marks a range; the arrow buttons
+  move the marked items (or everything the filter shows), a double-click moves one item.
+- Each list is a multi-select `listbox`: ↑/↓ move, Space marks, Shift+↑/↓ extends the marks,
+  Ctrl+A marks everything shown, Enter moves the marked (or the current) item, Home/End jump. The
+  header counts the marked items for screen readers.
+- Disabled items show but never move. Below 600px the lists stack and the buttons sit between them.
+
+## License
+
+MIT

package/custom-elements.json

@@ -0,0 +1,441 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/dual-list-selector.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Picks a subset of a list by moving items between \"Available\" and\n\"Chosen\": project members, permissions, scopes, regions. `items` lists\neverything; `selected` holds the chosen values.\n\nMark items with a click (Ctrl/⌘-click adds to the marks, Shift-click\nmarks a range) and move them with the arrow buttons, or double-click an\nitem to move just it. Each list is a multi-select listbox: ↑/↓ move,\nSpace marks, Shift+↑/↓ extends the marks, Ctrl+A marks everything shown,\nEnter moves the marked items, Home/End jump. `filterable` adds a filter\nfield above each list; \"move all\" moves only what the filter shows.",
+          "name": "LitMaterialDualListSelector",
+          "cssProperties": [
+            {
+              "description": "Height of each list (default `16rem`).",
+              "name": "--lit-material-dual-list-height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Each side (header, filter, list).",
+              "name": "pane"
+            },
+            {
+              "description": "Each listbox.",
+              "name": "list"
+            },
+            {
+              "description": "Each item.",
+              "name": "option"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "DualListItem[]"
+              },
+              "default": "[]",
+              "description": "Every item, in display order."
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The chosen values."
+            },
+            {
+              "kind": "field",
+              "name": "availableLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Available\"",
+              "attribute": "available-label"
+            },
+            {
+              "kind": "field",
+              "name": "chosenLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Chosen\"",
+              "attribute": "chosen-label"
+            },
+            {
+              "kind": "field",
+              "name": "filterable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a filter field above each list.",
+              "attribute": "filterable"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "marks",
+              "type": {
+                "text": "Record<Side, Set<string>>"
+              },
+              "privacy": "private",
+              "default": "{ available: new Set(), chosen: new Set() }"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "Record<Side, string | null>"
+              },
+              "privacy": "private",
+              "default": "{ available: null, chosen: null }"
+            },
+            {
+              "kind": "field",
+              "name": "filters",
+              "type": {
+                "text": "Record<Side, string>"
+              },
+              "privacy": "private",
+              "default": "{ available: \"\", chosen: \"\" }"
+            },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "Record<Side, string | null>"
+              },
+              "privacy": "private",
+              "default": "{ available: null, chosen: null }",
+              "description": "Where Shift-selection extends from, per side."
+            },
+            {
+              "kind": "field",
+              "name": "uid",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`dual-list-${++nextId}`"
+            },
+            {
+              "kind": "method",
+              "name": "visible",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "DualListItem[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "movable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                },
+                {
+                  "name": "values",
+                  "type": {
+                    "text": "Iterable<string>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "move",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                },
+                {
+                  "name": "values",
+                  "type": {
+                    "text": "Iterable<string>"
+                  }
+                }
+              ],
+              "description": "Moves `values` from `side` to the other list."
+            },
+            {
+              "kind": "method",
+              "name": "setMarks",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                },
+                {
+                  "name": "marks",
+                  "type": {
+                    "text": "Set<string>"
+                  }
+                },
+                {
+                  "name": "active",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "range",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Set<string>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                },
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "string | null"
+                  }
+                },
+                {
+                  "name": "to",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onOptionClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                },
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "DualListItem"
+                  }
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderPane",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "Side"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "optionIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "After a move; `detail: { selected }`."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "available-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Available\"",
+              "fieldName": "availableLabel"
+            },
+            {
+              "name": "chosen-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Chosen\"",
+              "fieldName": "chosenLabel"
+            },
+            {
+              "name": "filterable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a filter field above each list.",
+              "fieldName": "filterable"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-dual-list-selector",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialDualListSelector",
+          "declaration": {
+            "name": "LitMaterialDualListSelector",
+            "module": "src/dual-list-selector.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-dual-list-selector",
+          "declaration": {
+            "name": "LitMaterialDualListSelector",
+            "module": "src/dual-list-selector.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialDualListSelector",
+          "declaration": {
+            "name": "LitMaterialDualListSelector",
+            "module": "./dual-list-selector.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DualListItem",
+          "declaration": {
+            "name": "DualListItem",
+            "module": "./dual-list-selector.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/dual-list-selector.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from "lit";
+import "@lit-material/icon-button";
+import "@lit-material/text-field";
+export interface DualListItem {
+    value: string;
+    label: string;
+    /** Can't be moved either way. */
+    disabled?: boolean;
+}
+type Side = "available" | "chosen";
+/**
+ * Picks a subset of a list by moving items between "Available" and
+ * "Chosen": project members, permissions, scopes, regions. `items` lists
+ * everything; `selected` holds the chosen values.
+ *
+ * Mark items with a click (Ctrl/⌘-click adds to the marks, Shift-click
+ * marks a range) and move them with the arrow buttons, or double-click an
+ * item to move just it. Each list is a multi-select listbox: ↑/↓ move,
+ * Space marks, Shift+↑/↓ extends the marks, Ctrl+A marks everything shown,
+ * Enter moves the marked items, Home/End jump. `filterable` adds a filter
+ * field above each list; "move all" moves only what the filter shows.
+ *
+ * @element lit-material-dual-list-selector
+ *
+ * @fires change - After a move; `detail: { selected }`.
+ *
+ * @csspart pane - Each side (header, filter, list).
+ * @csspart list - Each listbox.
+ * @csspart option - Each item.
+ *
+ * @cssprop --lit-material-dual-list-height - Height of each list (default `16rem`).
+ */
+export declare class LitMaterialDualListSelector extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Every item, in display order. */
+    items: DualListItem[];
+    /** The chosen values. */
+    selected: string[];
+    availableLabel: string;
+    chosenLabel: string;
+    /** Adds a filter field above each list. */
+    filterable: boolean;
+    disabled: boolean;
+    private marks;
+    private active;
+    private filters;
+    /** Where Shift-selection extends from, per side. */
+    private anchor;
+    private readonly uid;
+    private visible;
+    private movable;
+    /** Moves `values` from `side` to the other list. */
+    move(side: Side, values: Iterable<string>): void;
+    private setMarks;
+    private range;
+    private onOptionClick;
+    private onKeyDown;
+    private renderPane;
+    private optionIndex;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-dual-list-selector": LitMaterialDualListSelector;
+    }
+}
+export {};
+//# sourceMappingURL=dual-list-selector.d.ts.map

package/dist/dual-list-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dual-list-selector.d.ts","sourceRoot":"","sources":["../src/dual-list-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,IAAI,GAAG,WAAW,GAAG,QAAQ,CAAC;AAWnC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IACzD,OAAgB,MAAM,0BA8GpB;IAEF,oCAAoC;IACJ,KAAK,EAAE,YAAY,EAAE,CAAM;IAE3D,yBAAyB;IACO,QAAQ,EAAE,MAAM,EAAE,CAAM;IAEZ,cAAc,SAAe;IAEhC,WAAW,SAAY;IAEhE,2CAA2C;IACd,UAAU,UAAS;IAEJ,QAAQ,UAAS;IAEpD,OAAO,CAAC,KAAK,CAA0E;IAEvF,OAAO,CAAC,MAAM,CAAkE;IAEhF,OAAO,CAAC,OAAO,CAAuD;IAE/E,oDAAoD;IACpD,OAAO,CAAC,MAAM,CAAkE;IAEhF,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA2B;IAE/C,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,OAAO;IAKf,oDAAoD;IACpD,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI;IAgBhD,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,SAAS;IAqDjB,OAAO,CAAC,UAAU;IA8DlB,OAAO,CAAC,WAAW;IAIV,MAAM;CAmChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}

package/dist/dual-list-selector.js

@@ -0,0 +1,414 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import "@lit-material/icon-button";
+import "@lit-material/text-field";
+// Material icons chevron_right, chevron_left, keyboard_double_arrow_right/left (Apache 2.0).
+const svg = (d) => html `<svg viewBox="0 0 24 24" aria-hidden="true"><path d=${d}></path></svg>`;
+const addIcon = svg("M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z");
+const removeIcon = svg("M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z");
+const addAllIcon = svg("M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6zm6.59 0-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z");
+const removeAllIcon = svg("M17.59 18 19 16.59 14.42 12 19 7.41 17.59 6l-6 6zm-6.59 0L12.41 16.59 7.83 12l4.58-4.59L11 6l-6 6z");
+let nextId = 0;
+/**
+ * Picks a subset of a list by moving items between "Available" and
+ * "Chosen": project members, permissions, scopes, regions. `items` lists
+ * everything; `selected` holds the chosen values.
+ *
+ * Mark items with a click (Ctrl/⌘-click adds to the marks, Shift-click
+ * marks a range) and move them with the arrow buttons, or double-click an
+ * item to move just it. Each list is a multi-select listbox: ↑/↓ move,
+ * Space marks, Shift+↑/↓ extends the marks, Ctrl+A marks everything shown,
+ * Enter moves the marked items, Home/End jump. `filterable` adds a filter
+ * field above each list; "move all" moves only what the filter shows.
+ *
+ * @element lit-material-dual-list-selector
+ *
+ * @fires change - After a move; `detail: { selected }`.
+ *
+ * @csspart pane - Each side (header, filter, list).
+ * @csspart list - Each listbox.
+ * @csspart option - Each item.
+ *
+ * @cssprop --lit-material-dual-list-height - Height of each list (default `16rem`).
+ */
+let LitMaterialDualListSelector = class LitMaterialDualListSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Every item, in display order. */
+        this.items = [];
+        /** The chosen values. */
+        this.selected = [];
+        this.availableLabel = "Available";
+        this.chosenLabel = "Chosen";
+        /** Adds a filter field above each list. */
+        this.filterable = false;
+        this.disabled = false;
+        this.marks = { available: new Set(), chosen: new Set() };
+        this.active = { available: null, chosen: null };
+        this.filters = { available: "", chosen: "" };
+        /** Where Shift-selection extends from, per side. */
+        this.anchor = { available: null, chosen: null };
+        this.uid = `dual-list-${++nextId}`;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      align-items: stretch;
+      gap: 8px;
+      color: var(--md-sys-color-on-surface, light-dark(#1d1b20, #e6e0e9));
+      font-family: var(--md-sys-typescale-body-large-font, Roboto, system-ui, sans-serif);
+      font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .pane {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+      font-weight: 500;
+    }
+    .count {
+      color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
+      font-weight: 400;
+      font-variant-numeric: tabular-nums;
+    }
+    lit-material-text-field {
+      --lit-material-text-field-min-width: 0;
+    }
+    .list {
+      box-sizing: border-box;
+      height: var(--lit-material-dual-list-height, 16rem);
+      margin: 0;
+      padding: 4px 0;
+      overflow-y: auto;
+      list-style: none;
+      border: 1px solid var(--md-sys-color-outline-variant, light-dark(#cac4d0, #49454f));
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      outline: none;
+    }
+    .list:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff));
+      outline-offset: 2px;
+    }
+    .option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .option:hover {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+    }
+    .option[aria-selected="true"] {
+      background: var(--md-sys-color-secondary-container, light-dark(#e8def8, #4a4458));
+      color: var(--md-sys-color-on-secondary-container, light-dark(#1d192b, #e8def8));
+    }
+    .option.active {
+      box-shadow: inset 2px 0 0 var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff));
+    }
+    .option[aria-disabled="true"] {
+      opacity: 0.38;
+      cursor: default;
+    }
+    .mark {
+      flex: none;
+      width: 16px;
+      height: 16px;
+      box-sizing: border-box;
+      border: 2px solid currentColor;
+      border-radius: 2px;
+      opacity: 0.6;
+    }
+    .option[aria-selected="true"] .mark {
+      opacity: 1;
+      background: currentColor;
+    }
+    .empty {
+      padding: 6px 12px;
+      color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
+    }
+    .controls {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 4px;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+    @media (max-width: 600px) {
+      :host {
+        flex-direction: column;
+      }
+      .controls {
+        flex-direction: row;
+        justify-content: center;
+      }
+      .controls svg {
+        transform: rotate(90deg);
+      }
+    }
+  `; }
+    visible(side) {
+        const chosen = new Set(this.selected);
+        const filter = this.filters[side].trim().toLowerCase();
+        return this.items.filter((item) => chosen.has(item.value) === (side === "chosen") && (!filter || item.label.toLowerCase().includes(filter)));
+    }
+    movable(side, values) {
+        const shown = new Map(this.visible(side).map((item) => [item.value, item]));
+        return [...values].filter((v) => shown.has(v) && !shown.get(v).disabled);
+    }
+    /** Moves `values` from `side` to the other list. */
+    move(side, values) {
+        const moving = this.movable(side, values);
+        if (moving.length === 0 || this.disabled)
+            return;
+        const set = new Set(this.selected);
+        for (const v of moving) {
+            if (side === "available")
+                set.add(v);
+            else
+                set.delete(v);
+        }
+        // Keep `items` order.
+        this.selected = this.items.filter((item) => set.has(item.value)).map((item) => item.value);
+        this.marks = { ...this.marks, [side]: new Set() };
+        const rest = this.visible(side);
+        this.active = { ...this.active, [side]: rest[0]?.value ?? null };
+        this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { selected: this.selected } }));
+    }
+    setMarks(side, marks, active) {
+        this.marks = { ...this.marks, [side]: marks };
+        this.active = { ...this.active, [side]: active };
+    }
+    range(side, from, to) {
+        const values = this.visible(side).filter((i) => !i.disabled).map((i) => i.value);
+        const a = from === null ? -1 : values.indexOf(from);
+        const b = values.indexOf(to);
+        if (a < 0 || b < 0)
+            return new Set([to]);
+        return new Set(values.slice(Math.min(a, b), Math.max(a, b) + 1));
+    }
+    onOptionClick(side, item, event) {
+        if (item.disabled || this.disabled)
+            return;
+        let marks;
+        if (event.shiftKey) {
+            marks = this.range(side, this.anchor[side], item.value);
+        }
+        else {
+            marks = new Set(event.ctrlKey || event.metaKey ? this.marks[side] : []);
+            if (marks.has(item.value) && (event.ctrlKey || event.metaKey))
+                marks.delete(item.value);
+            else
+                marks.add(item.value);
+            this.anchor[side] = item.value;
+        }
+        this.setMarks(side, marks, item.value);
+        this.renderRoot.querySelector(`#${this.uid}-${side}`)?.focus();
+    }
+    onKeyDown(side, event) {
+        if (this.disabled)
+            return;
+        const items = this.visible(side);
+        if (items.length === 0)
+            return;
+        const index = Math.max(0, items.findIndex((i) => i.value === this.active[side]));
+        const go = (to) => {
+            const target = items[Math.min(items.length - 1, Math.max(0, to))];
+            if (event.shiftKey) {
+                this.setMarks(side, this.range(side, this.anchor[side] ?? this.active[side], target.value), target.value);
+            }
+            else {
+                this.active = { ...this.active, [side]: target.value };
+            }
+            this.updateComplete.then(() => this.renderRoot.querySelector(`[data-value="${CSS.escape(target.value)}"][data-side="${side}"]`)?.scrollIntoView({ block: "nearest" }));
+        };
+        switch (event.key) {
+            case "ArrowDown":
+                go(this.active[side] === null ? 0 : index + 1);
+                break;
+            case "ArrowUp":
+                go(index - 1);
+                break;
+            case "Home":
+                go(0);
+                break;
+            case "End":
+                go(items.length - 1);
+                break;
+            case " ": {
+                const value = this.active[side] ?? items[0].value;
+                const item = items.find((i) => i.value === value);
+                if (!item || item.disabled)
+                    break;
+                const marks = new Set(this.marks[side]);
+                if (marks.has(value))
+                    marks.delete(value);
+                else
+                    marks.add(value);
+                this.anchor[side] = value;
+                this.setMarks(side, marks, value);
+                break;
+            }
+            case "Enter":
+                this.move(side, this.marks[side].size ? this.marks[side] : this.active[side] ? [this.active[side]] : []);
+                break;
+            case "a":
+                if (!(event.ctrlKey || event.metaKey))
+                    return;
+                this.setMarks(side, new Set(items.filter((i) => !i.disabled).map((i) => i.value)), this.active[side]);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    renderPane(side) {
+        const label = side === "available" ? this.availableLabel : this.chosenLabel;
+        const items = this.visible(side);
+        const total = side === "chosen" ? this.selected.length : this.items.length - this.selected.length;
+        const marked = this.marks[side].size;
+        const listId = `${this.uid}-${side}`;
+        const active = items.some((i) => i.value === this.active[side]) ? this.active[side] : null;
+        return html `<div part="pane" class="pane">
+      <div class="header">
+        <span id="${listId}-label">${label}</span>
+        <span class="count" aria-live="polite">${marked ? `${marked} of ${total} marked` : `${total}`}</span>
+      </div>
+      ${this.filterable
+            ? html `<lit-material-text-field
+            variant="outlined"
+            label=${`Filter ${label.toLowerCase()}`}
+            type="search"
+            autocomplete="off"
+            .value=${this.filters[side]}
+            ?disabled=${this.disabled}
+            @input=${(e) => (this.filters = { ...this.filters, [side]: e.target.value })}
+          ></lit-material-text-field>`
+            : nothing}
+      <ul
+        part="list"
+        class="list"
+        id=${listId}
+        role="listbox"
+        aria-multiselectable="true"
+        aria-labelledby="${listId}-label"
+        aria-activedescendant=${active ? `${listId}-${this.optionIndex(active)}` : nothing}
+        aria-disabled=${this.disabled ? "true" : nothing}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @keydown=${(e) => this.onKeyDown(side, e)}
+        @focus=${() => {
+            if (!this.active[side] && items[0])
+                this.active = { ...this.active, [side]: items[0].value };
+        }}
+      >
+        ${items.length === 0
+            ? html `<li class="empty" role="presentation">${this.filters[side] ? "No matches" : "Nothing here"}</li>`
+            : repeat(items, (item) => item.value, (item) => html `<li
+                part="option"
+                class=${item.value === active ? "option active" : "option"}
+                id="${listId}-${this.optionIndex(item.value)}"
+                role="option"
+                data-side=${side}
+                data-value=${item.value}
+                aria-selected=${this.marks[side].has(item.value) ? "true" : "false"}
+                aria-disabled=${item.disabled ? "true" : nothing}
+                @click=${(e) => this.onOptionClick(side, item, e)}
+                @dblclick=${() => !item.disabled && this.move(side, [item.value])}
+              >
+                <span class="mark" aria-hidden="true"></span>${item.label}
+              </li>`)}
+      </ul>
+    </div>`;
+    }
+    optionIndex(value) {
+        return this.items.findIndex((i) => i.value === value);
+    }
+    render() {
+        const movableMarked = (side) => this.movable(side, this.marks[side]).length > 0;
+        const movableAll = (side) => this.visible(side).some((i) => !i.disabled);
+        const off = this.disabled;
+        return html `
+      ${this.renderPane("available")}
+      <div class="controls" role="group" aria-label="Move items">
+        <lit-material-icon-button
+          aria-label=${`Move marked to ${this.chosenLabel.toLowerCase()}`}
+          ?disabled=${off || !movableMarked("available")}
+          @click=${() => this.move("available", this.marks.available)}
+          ><span slot="icon">${addIcon}</span></lit-material-icon-button
+        >
+        <lit-material-icon-button
+          aria-label=${`Move all shown to ${this.chosenLabel.toLowerCase()}`}
+          ?disabled=${off || !movableAll("available")}
+          @click=${() => this.move("available", this.visible("available").map((i) => i.value))}
+          ><span slot="icon">${addAllIcon}</span></lit-material-icon-button
+        >
+        <lit-material-icon-button
+          aria-label=${`Move all shown to ${this.availableLabel.toLowerCase()}`}
+          ?disabled=${off || !movableAll("chosen")}
+          @click=${() => this.move("chosen", this.visible("chosen").map((i) => i.value))}
+          ><span slot="icon">${removeAllIcon}</span></lit-material-icon-button
+        >
+        <lit-material-icon-button
+          aria-label=${`Move marked to ${this.availableLabel.toLowerCase()}`}
+          ?disabled=${off || !movableMarked("chosen")}
+          @click=${() => this.move("chosen", this.marks.chosen)}
+          ><span slot="icon">${removeIcon}</span></lit-material-icon-button
+        >
+      </div>
+      ${this.renderPane("chosen")}
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], LitMaterialDualListSelector.prototype, "items", void 0);
+__decorate([
+    property({ attribute: false })
+], LitMaterialDualListSelector.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: "available-label" })
+], LitMaterialDualListSelector.prototype, "availableLabel", void 0);
+__decorate([
+    property({ attribute: "chosen-label" })
+], LitMaterialDualListSelector.prototype, "chosenLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitMaterialDualListSelector.prototype, "filterable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDualListSelector.prototype, "disabled", void 0);
+__decorate([
+    state()
+], LitMaterialDualListSelector.prototype, "marks", void 0);
+__decorate([
+    state()
+], LitMaterialDualListSelector.prototype, "active", void 0);
+__decorate([
+    state()
+], LitMaterialDualListSelector.prototype, "filters", void 0);
+LitMaterialDualListSelector = __decorate([
+    customElement("lit-material-dual-list-selector")
+], LitMaterialDualListSelector);
+export { LitMaterialDualListSelector };
+//# sourceMappingURL=dual-list-selector.js.map

package/dist/dual-list-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dual-list-selector.js","sourceRoot":"","sources":["../src/dual-list-selector.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAWlC,6FAA6F;AAC7F,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAA,uDAAuD,CAAC,gBAAgB,CAAC;AACxG,MAAM,OAAO,GAAG,GAAG,CAAC,gDAAgD,CAAC,CAAC;AACtE,MAAM,UAAU,GAAG,GAAG,CAAC,+CAA+C,CAAC,CAAC;AACxE,MAAM,UAAU,GAAG,GAAG,CAAC,6FAA6F,CAAC,CAAC;AACtH,MAAM,aAAa,GAAG,GAAG,CAAC,oGAAoG,CAAC,CAAC;AAEhI,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;QAiHL,oCAAoC;QACJ,UAAK,GAAmB,EAAE,CAAC;QAE3D,yBAAyB;QACO,aAAQ,GAAa,EAAE,CAAC;QAEZ,mBAAc,GAAG,WAAW,CAAC;QAEhC,gBAAW,GAAG,QAAQ,CAAC;QAEhE,2CAA2C;QACd,eAAU,GAAG,KAAK,CAAC;QAEJ,aAAQ,GAAG,KAAK,CAAC;QAE5C,UAAK,GAA8B,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC;QAE/E,WAAM,GAAgC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;QAExE,YAAO,GAAyB,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QAE/E,oDAAoD;QAC5C,WAAM,GAAgC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;QAE/D,QAAG,GAAG,aAAa,EAAE,MAAM,EAAE,CAAC;IAsNjD,CAAC;aA9ViB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8G3B,AA9GqB,CA8GpB;IA4BM,OAAO,CAAC,IAAU;QACxB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QACvD,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CACtB,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CACnH,CAAC;IACJ,CAAC;IAEO,OAAO,CAAC,IAAU,EAAE,MAAwB;QAClD,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;QAC5E,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAE,CAAC,QAAQ,CAAC,CAAC;IAC5E,CAAC;IAED,oDAAoD;IACpD,IAAI,CAAC,IAAU,EAAE,MAAwB;QACvC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAC1C,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QACjD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,KAAK,MAAM,CAAC,IAAI,MAAM,EAAE,CAAC;YACvB,IAAI,IAAI,KAAK,WAAW;gBAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;gBAChC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC;QACD,sBAAsB;QACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3F,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC;QAClD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;IACxH,CAAC;IAEO,QAAQ,CAAC,IAAU,EAAE,KAAkB,EAAE,MAAqB;QACpE,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;QAC9C,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IACnD,CAAC;IAEO,KAAK,CAAC,IAAU,EAAE,IAAmB,EAAE,EAAU;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACjF,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACpD,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC7B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;YAAE,OAAO,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,OAAO,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACnE,CAAC;IAEO,aAAa,CAAC,IAAU,EAAE,IAAkB,EAAE,KAAiB;QACrE,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3C,IAAI,KAAkB,CAAC;QACvB,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1D,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACxE,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;gBAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;gBACnF,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;IAC9E,CAAC;IAEO,SAAS,CAAC,IAAU,EAAE,KAAoB;QAChD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACjF,MAAM,EAAE,GAAG,CAAC,EAAU,EAAE,EAAE;YACxB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAE,CAAC;YACnE,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5G,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAC5B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB,IAAI,IAAI,CAAC,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CACvI,CAAC;QACJ,CAAC,CAAC;QACF,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBAC/C,MAAM;YACR,KAAK,SAAS;gBACZ,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBACd,MAAM;YACR,KAAK,MAAM;gBACT,EAAE,CAAC,CAAC,CAAC,CAAC;gBACN,MAAM;YACR,KAAK,KAAK;gBACR,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBACrB,MAAM;YACR,KAAK,GAAG,CAAC,CAAC,CAAC;gBACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAE,CAAC,KAAK,CAAC;gBACnD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;gBAClD,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;oBAAE,MAAM;gBAClC,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;gBACxC,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;oBAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;oBACrC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;gBAClC,MAAM;YACR,CAAC;YACD,KAAK,OAAO;gBACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBAC1G,MAAM;YACR,KAAK,GAAG;gBACN,IAAI,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;oBAAE,OAAO;gBAC9C,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;gBACtG,MAAM;YACR;gBACE,OAAO;QACX,CAAC;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAEO,UAAU,CAAC,IAAU;QAC3B,MAAM,KAAK,GAAG,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QAC5E,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACjC,MAAM,KAAK,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAClG,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QACrC,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;QACrC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3F,OAAO,IAAI,CAAA;;oBAEK,MAAM,WAAW,KAAK;iDACO,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE;;QAE7F,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;oBAEM,UAAU,KAAK,CAAC,WAAW,EAAE,EAAE;;;qBAG9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;wBACf,IAAI,CAAC,QAAQ;qBAChB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;sCAC/E;YAC9B,CAAC,CAAC,OAAO;;;;aAIJ,MAAM;;;2BAGQ,MAAM;gCACD,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;wBAClE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;mBAC1B,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC/C,GAAG,EAAE;YACZ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC;gBAAE,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/F,CAAC;;UAEC,KAAK,CAAC,MAAM,KAAK,CAAC;YAClB,CAAC,CAAC,IAAI,CAAA,yCAAyC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,OAAO;YACxG,CAAC,CAAC,MAAM,CACJ,KAAK,EACL,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,EACpB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEJ,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ;sBACpD,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;4BAEhC,IAAI;6BACH,IAAI,CAAC,KAAK;gCACP,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gCACnD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;yBACvC,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;4BACjD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;+DAElB,IAAI,CAAC,KAAK;oBACrD,CACP;;WAEF,CAAC;IACV,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IACxD,CAAC;IAEQ,MAAM;QACb,MAAM,aAAa,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACtF,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QAC/E,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;;;uBAGb,kBAAkB,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE;sBACnD,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;mBACrC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;+BACtC,OAAO;;;uBAGf,qBAAqB,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE;sBACtD,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;mBAClC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;+BAC/D,UAAU;;;uBAGlB,qBAAqB,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,EAAE;sBACzD,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;mBAC/B,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;+BACzD,aAAa;;;uBAGrB,kBAAkB,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,EAAE;sBACtD,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;mBAClC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;+BAChC,UAAU;;;QAGjC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;KAC5B,CAAC;IACJ,CAAC;;AA5O+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DAA4B;AAG3B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DAAyB;AAEZ;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;mEAA8B;AAEhC;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gEAAwB;AAGnC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+DAAoB;AAEJ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6DAAkB;AAE5C;IAAhB,KAAK,EAAE;0DAAwF;AAE/E;IAAhB,KAAK,EAAE;2DAAiF;AAExE;IAAhB,KAAK,EAAE;4DAAuE;AApIpE,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CA+VvC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LitMaterialDualListSelector, type DualListItem } from "./dual-list-selector.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1,2 @@
+export { LitMaterialDualListSelector } from "./dual-list-selector.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@lit-material/dual-list",
-  "version": "0.0.0-init",
+  "version": "0.1.0",
+  "description": "Dual list selector for lit-material: move items between available and chosen lists, with filters and full keyboard support.",
   "license": "MIT",
-  "description": "Placeholder: real versions are published from CI."
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/dual-list"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "dual-list",
+    "transfer-list",
+    "listbox",
+    "selector"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "custom-elements.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "@lit-material/button": "0.1.3",
+    "@lit-material/icon-button": "0.0.4",
+    "@lit-material/text-field": "0.3.0",
+    "@lit-material/tokens": "0.0.2"
+  },
+  "devDependencies": {
+    "@lit-labs/ssr": "^3.3.1",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^1.0.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
+  }
 }