Dual list selector

A dual list selector displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists.

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

Examples

Basic

0 of 4 items selected

0 of 0 items selected

Basic with tooltips

0 of 4 items selected

0 of 0 items selected

Basic with search

0 of 4 items selected

0 of 0 items selected

Using more complex options with actions

0 of 4 items selected

0 of 0 items selected

isDisabled

With tree

0 of 7 items selected

0 of 4 items selected

Composable structure

The dual list selector can also be built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:

<DualListSelector>
  <DualListSelectorPane>
    <DualListSelectorList>
      <DualListSelectorListItem />
    </DualListSelectorList>
  </DualListSelectorPane>

  <DualListSelectorControlsWrapper>
    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
  </DualListSelectorControlsWrapper>

  <DualListSelectorPane isChosen>
    <DualListSelectorList>
      <DualListSelectorListItem />
    </DualListSelectorList>
  </DualListSelectorPane>
</DualListSelector>

Composable dual list selector

0 of 7 options selected

0 of 0 options selected

Composable with drag and drop

Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the drag and drop demos.

This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:

wrap the DualListSelectorPane in a DragDrop component
wrap the DualListSelectorList in a Droppable component
wrap the DualListSelectorListItem components in a Draggable component
define an onDrop callback which reorders the sortable options.
- The onDrop function provides the starting location and destination location for a dragged item. It should return true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's old position.
- define an onDrag callback which ensures that the drag event will not cross hairs with the onOptionSelect click event set on the option. Note: the ignoreNextOptionSelect state value is used to prevent selection while dragging.

Keyboard and screen reader accessibility for the <DragDrop> component is still in development.

0 of 3 options selected

0 of 4 options selected

Composable with tree

0 of 7 options selected

0 of 4 options selected

Props

DualListSelector

Acts as a container for all other DualListSelector sub-components when using a composable dual list selector.
*required
Name	Type	Default	Description
addAll	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built add all button
addAllAriaLabel	string	'Add all'	Accessible label for the dynamically built add all button
addAllTooltip	React.ReactNode		Tooltip content for the dynamically built add all button
addAllTooltipProps	any		Additonal tooltip properties for the dynamically built add all tooltip
addSelected	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built add selected button
addSelectedAriaLabel	string	'Add selected'	Accessible label for the dynamically built add selected button
addSelectedTooltip	React.ReactNode		Tooltip content for the dynamically built add selected button
addSelectedTooltipProps	any		Additonal tooltip properties for the dynamically built add selected tooltip
availableOptions	React.ReactNode[] \| DualListSelectorTreeItemData[]	[]	Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
availableOptionsActions	React.ReactNode[]		Actions to be displayed above the dynamically built available options pane.
availableOptionsSearchAriaLabel	string	'Available search input'	Accessible label for the search input on the dynamically built available options pane.
availableOptionsStatus	string		Status message to display above the dynamically built available options pane.
availableOptionsTitle	string	'Available options'	Title applied to the dynamically built available options pane.
children	React.ReactNode	''	Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided.
chosenOptions	React.ReactNode[] \| DualListSelectorTreeItemData[]	[]	Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
chosenOptionsActions	React.ReactNode[]		Actions to be displayed above the dynamically built chosen options pane.
chosenOptionsSearchAriaLabel	string	'Chosen search input'	Accessible label for the search input on the dynamically built chosen options pane.
chosenOptionsStatus	string		Status message to display above the dynamically built chosen options pane.
chosenOptionsTitle	string	'Chosen options'	Title applied to the dynamically built chosen options pane.
className	string		Additional classes applied to the dual list selector.
controlsAriaLabel	string	'Selector controls'	Accessible label for the dynamically built controls between the two panes.
filterOption	(option: React.ReactNode, input: string) => boolean		Optional filter function for custom filtering based on search string. Used with a dynamically built search input.
id	string		Id of the dual list selector.
isDisabled	boolean	false	Flag indicating if the dual list selector is in a disabled state
isSearchable	boolean		Flag indicating a search bar should be included above both the dynamically built available and chosen panes.
isTree	boolean	false	Flag indicating if the dual list selector uses trees instead of simple lists
onAvailableOptionsSearchInputChanged	(event: React.FormEvent<HTMLInputElement>, value: string) => void		A callback for when the search input value for the dynamically built available options changes.
onChosenOptionsSearchInputChanged	(event: React.FormEvent<HTMLInputElement>, value: string) => void		A callback for when the search input value for the dynamically built chosen options changes.
onListChange	( event: React.MouseEvent<HTMLElement>, newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[] ) => void		Callback fired every time dynamically built options are chosen or removed
onOptionCheck	( event: React.MouseEvent \| React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent, checked: boolean, checkedId: string, newCheckedItems: string[] ) => void		Optional callback fired when a dynamically built option is checked
onOptionSelect	( event: React.MouseEvent \| React.ChangeEvent \| React.KeyboardEvent, index: number, isChosen: boolean, id: string, itemData: any, parentData: any ) => void		Optional callback fired when a dynamically built option is selected
removeAll	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built remove all button
removeAllAriaLabel	string	'Remove all'	Accessible label for the dynamically built remove all button
removeAllTooltip	React.ReactNode		Tooltip content for the dynamically built remove all button
removeAllTooltipProps	any		Additonal tooltip properties for the dynamically built remove all tooltip
removeSelected	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built remove selected button
removeSelectedAriaLabel	string	'Remove selected'	Accessible label for the dynamically built remove selected button
removeSelectedTooltip	React.ReactNode		Tooltip content for the dynamically built remove selected button
removeSelectedTooltipProps	any		Additonal tooltip properties for the dynamically built remove selected tooltip

DualListSelectorPane

Acts as the container for a list of options that are either available or chosen, depending on the pane type (available or chosen). A search input and other actions, such as sorting, can also be passed into this sub-component.
*required
Name	Type	Default	Description
actions	React.ReactNode[]		Actions to place above the pane.
children	React.ReactNode		A dual list selector list or dual list selector tree to be rendered in the pane.
className	string	''	Additional classes applied to the dual list selector pane.
id	string	getUniqueId('dual-list-selector-pane')	Id of the pane.
isChosen	boolean	false	Flag indicating if this pane is the chosen pane.
isDisabled	boolean	false	Flag indicating whether the component is disabled.
listMinHeight	string		Minimum height of the list of options rendered in the pane. *
onSearch	(event: React.ChangeEvent<HTMLInputElement>) => void		Callback for search input. To be used when isSearchable is true.
searchInput	React.ReactNode		A search input placed above the list at the top of the pane, before actions.
status	string	''	Status to display above the pane.
title	React.ReactNode	''	Title of the pane.

DualListSelectorList

Acts as the container for DualListSelectorListItem sub-components.
*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the dual list selector list

DualListSelectorListItem

Creates an individual option that can be selected and moved between the dual list selector panes. This is contained within the DualListSelectorList sub-component.
*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the dual list selector.
className	string	Additional classes applied to the dual list selector.
draggableButtonAriaLabel	string	Accessible label for the draggable button on draggable list items
id	string	ID of the option.
isDisabled	boolean	Flag indicating if the dual list selector is in a disabled state
isDraggable	boolean	Flag indicating this item is draggable for reordring
isSelected	boolean	Flag indicating the list item is currently selected.
onOptionSelect	(event: React.MouseEvent \| React.ChangeEvent \| React.KeyboardEvent, id?: string) => void	Callback fired when an option is selected.

DualListSelectorControlsWrapper

Acts as the container for the DualListSelectorControl sub-components.
*required
Name	Type	Description
aria-label	string	Accessible label for the dual list selector controls wrapper.
children	React.ReactNode	Anything that can be rendered inside of the wrapper.
className	string	Additional classes added to the wrapper.

DualListSelectorControl

Renders an individual control button for moving selected options between each dual list selector pane.
*required
Name	Type	Description
aria-label	string	Accessible label for the dual list selector control.
children	React.ReactNode	Content to be rendered in the dual list selector control.
className	string	Additional classes applied to the dual list selector control.
isDisabled	boolean	Flag indicating the control is disabled.
onClick	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback fired when dual list selector control is selected.
tooltipContent	React.ReactNode	Content to be displayed in a tooltip on hover of control.
tooltipProps	any	Additional tooltip properties passed to the tooltip.

DualListSelectorTree

Used in place of the DualListSelectorListItem sub-component when building a composable dual list selector with a tree.
*required
Name	Type	Default	Description
datarequired	DualListSelectorTreeItemData[] \| (() => DualListSelectorTreeItemData[])		Data of the tree view
defaultAllExpanded	boolean	false	Sets the default expanded behavior
hasBadges	boolean	false	Flag indicating if all options should have badges
id	string		ID of the tree view
isDisabled	boolean	false	Flag indicating if the dual list selector tree is in the disabled state
onOptionCheck	( event: React.MouseEvent \| React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent, isChecked: boolean, itemData: DualListSelectorTreeItemData ) => void		Callback fired when an option is checked

DualListSelectorTreeItemData

*required
Name	Type	Description
idrequired	string	ID of the option
isCheckedrequired	boolean	Checked state of the option
textrequired	string	Text of the option
badgeProps	any	Additional properties to pass to the option badge
checkProps	any	Additional properties to pass to the option checkbox
children	DualListSelectorTreeItemData[]	Content rendered inside the dual list selector.
className	string	Additional classes applied to the dual list selector.
defaultExpanded	boolean	Flag indicating this option is expanded by default.
hasBadge	boolean	Flag indicating this option has a badge
isDisabled	boolean	Flag indicating whether the component is disabled.
onOptionCheck	( event: React.MouseEvent \| React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent, isChecked: boolean, isChosen: boolean, itemData: DualListSelectorTreeItemData ) => void	Callback fired when an option is checked
parentId	string	Parent id of an option

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__header--GridArea	pane-header
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__tools--GridArea	pane-tools
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__status--GridArea	pane-status
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__menu--GridArea	pane-menu
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__controls--GridArea	controls
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector--m-chosen__header--GridArea	pane-header-c
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector--m-chosen__tools--GridArea	pane-tools-c
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector--m-chosen__status--GridArea	pane-status-c
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector--m-chosen__menu--GridArea	pane-menu-c
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min	12.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max	28.125rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__header--MarginBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__header--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__title-text--FontWeight	500
--pf-v6-c-dual-list-selector__title-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__title-text--FontSize	1rem
--pf-v6-c-dual-list-selector__title-text--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__tools--MarginBlockEnd	1rem
--pf-v6-c-dual-list-selector__tools--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart	0.5rem
--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__menu--BorderWidth	1px
--pf-v6-c-dual-list-selector__menu--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__menu--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-dual-list-selector__menu--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__menu--BorderRadius	6px
--pf-v6-c-dual-list-selector__menu--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__menu--MinHeight	12.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__menu--MaxHeight	20rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__menu--MarginBlockStart	1rem
--pf-v6-c-dual-list-selector__menu--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item-row--FontSize	0.875rem
--pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(255, 255, 255, 0.0000)
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity	.4
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--PaddingBlockStart	0.5rem
--pf-v6-c-dual-list-selector__item--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--PaddingInlineEnd	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--PaddingBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__item--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--indent--base	calc(1rem + 0.5rem + 0.875rem)
--pf-v6-c-dual-list-selector__item--indent--base calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) calc(1rem + 0.5rem + --pf-t--global--font--size--200) calc(1rem + 0.5rem + 0.875rem)
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--nested-indent--base	calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
--pf-v6-c-dual-list-selector__item--nested-indent--base calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart	0.25rem
--pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item-text--Color	(In light theme) #4d4d4d
--pf-v6-c-dual-list-selector__item-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color	(In light theme) #151515
--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__status--MarginBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__status--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__status-text--FontSize	0.875rem
--pf-v6-c-dual-list-selector__status-text--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__status-text--Color	(In light theme) #4d4d4d
--pf-v6-c-dual-list-selector__status-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd	1rem
--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__controls--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__controls--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__controls--Gap	0.5rem
--pf-v6-c-dual-list-selector__controls--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__controls--MarginBlockStart	1rem
--pf-v6-c-dual-list-selector__controls--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd	0.5rem
--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	0
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX	-100%
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item-check--MarginInlineEnd	0.5rem
--pf-v6-c-dual-list-selector__item-check--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item-count--MarginInlineStart	0.5rem
--pf-v6-c-dual-list-selector__item-count--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate	0
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate	90deg
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item-toggle-icon--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-v6-c-dual-list-selector__item-toggle-icon--Transition --pf-t--global--transition all 250ms cubic-bezier(.42, 0, .58, 1)
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth	0.875rem
--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth --pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	:where(:root, .pf-v6-c-dual-list-selector)	--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__header--GridArea	pane-header-c
--pf-v6-c-dual-list-selector__header--GridArea --pf-v6-c-dual-list-selector--m-chosen__header--GridArea pane-header-c
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__tools--GridArea	pane-tools-c
--pf-v6-c-dual-list-selector__tools--GridArea --pf-v6-c-dual-list-selector--m-chosen__tools--GridArea pane-tools-c
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__status--GridArea	pane-status-c
--pf-v6-c-dual-list-selector__status--GridArea --pf-v6-c-dual-list-selector--m-chosen__status--GridArea pane-status-c
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__menu--GridArea	pane-menu-c
--pf-v6-c-dual-list-selector__menu--GridArea --pf-v6-c-dual-list-selector--m-chosen__menu--GridArea pane-menu-c
	.pf-v6-c-dual-list-selector__list	--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate	0
	.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list	--pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart	0
	.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list	--pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd	0
	.pf-v6-c-dual-list-selector__list-item:focus	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector__list-item.pf-m-expandable	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item.pf-m-expanded	--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate	90deg
--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate 90deg
	.pf-v6-c-dual-list-selector__list-item.pf-m-disabled	--pf-v6-c-dual-list-selector__item-text--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__item-text--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector__list-item.pf-m-disabled	--pf-v6-c-dual-list-selector__item-toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__item-toggle-icon--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected .pf-v6-c-dual-list-selector__item-text	--pf-v6-c-dual-list-selector__item-text--Color	(In light theme) #151515
--pf-v6-c-dual-list-selector__item-text--Color --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-dual-list-selector__list-item-row:hover	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-check	--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor	transparent
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-dual-list-selector__draggable + .pf-v6-c-dual-list-selector__item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	0.25rem
--pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-dual-list-selector__draggable .pf-v6-c-button	--pf-v6-c-button--FontSize	inherit
	.pf-v6-c-dual-list-selector__item-count .pf-v6-c-badge.pf-m-read	--pf-v6-c-badge--m-read--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-badge--m-read--BackgroundColor --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 1 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 1 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 1 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 1 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 2 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 2 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 2 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 2 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 3 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 3 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 3 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 3 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 4 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 4 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 4 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 4 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 5 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 5 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 5 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 5 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 6 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 6 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 6 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 6 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 7 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 7 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 7 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 7 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 8 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 8 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 8 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 8 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 9 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 9 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 9 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 9 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 10 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 10 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 10 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 10 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem

View source on GitHub