Transfer List II

Requirements

• Initially the available list has Apple, Banana, and Cherry; the chosen list has Date and Fig. No items are selected.
• Provide controlled item checkboxes plus one Select all checkbox per list. It is checked when every source item is selected, indeterminate when only some are selected, and unchecked when none are selected. Disable it for an empty list.
• Clicking a mixed or unchecked bulk checkbox selects every item in that list. Clicking a checked bulk checkbox deselects that list only; preserve the other list’s selections.
• Move selected items or all items in either direction. Preserve source order and append moved items after existing destination items. Deselect moved items only, and disable controls when they have nothing to move.
• Each list has its own labeled new-item input and Add item button. Trim the label, require 1–80 characters, and reject case-insensitive duplicates across both lists. Show the specified validation message without changing membership on failure.
• For empty labels show Enter an item name. For duplicate labels show That item already exists. For labels longer than 80 characters show Use at most 80 characters. Clear the source input and error after a successful add; add the new item unselected with a unique stable ID.
• Adding an unselected item to an all-selected list makes its bulk checkbox mixed. Never lose or duplicate items, and render No items for an empty list.
• The markup and full CSS are provided. Implement native input.indeterminate through the DOM property, not an HTML attribute. No drag and drop, persistence, item deletion, or custom checkbox widgets are required.

Examples

Input: Select all available items, then add Pear to the available list.
Output: Pear is unselected and the available bulk checkbox becomes mixed.

Input: Move selected available items while Date is selected in the chosen list.
Output: Only available selections move; Date remains selected.