Summary

Create a <pf-v6-dual-list-selector> web component implementing the PatternFly v6 Dual list selector component.

Side-by-side lists allowing users to move items between available and chosen sets.

Prior Art

Requirements

• MUST implement PFv6 visual designs
• MUST provide end-user feature parity with @patternfly/react-core DualListSelector
• MAY adjust element API to leverage web platform strengths
• SHOULD maintain CSS custom property theming compatibility
• SHOULD expose useful CSS shadow parts

Element-specific considerations

• Sub-elements: DualListSelectorPane, DualListSelectorList, DualListSelectorListItem, DualListSelectorControlsWrapper, DualListSelectorControl
• Left pane: available options; right pane: chosen options
• Filter/search input per pane (searchInputPlaceholder, onFilterUpdate)
• Move controls: add selected, add all, remove selected, remove all (four buttons)
• Reorder controls: move up, move down (for chosen pane)
• Sort option per pane
• isSearchable prop for filter inputs
• FACE not needed (no native form value), but value property for current chosen set
• DualListSelectorListItem: isSelected, onOptionSelect
• Keyboard: Space to select/deselect items, Enter/click buttons to move; standard list navigation
• role="listbox" with aria-multiselectable="true" per pane, items role="option" with aria-selected

Checklist

Implementation

• API per .claude/ADVICE.md
• CSS uses v6 tokens, logical properties, nesting
• @summary and JSDoc on element class

Demos

• Demos match patternfly.org naming/structure
• CSS custom properties match computed styles from patternfly.org (Chrome MCP)
• Visual parity verified via Chrome MCP

Tests

• Public API covered (attributes, properties, events, slots)
• a11ySnapshot assertions

Reviews

• /review-api passes
• /review-demos passes
• /review-a11y passes
• eslint and stylelint pass

Ship

• Add changeset
• PR targets staging/pfv6 (NOT main)