Examples
Available item selected
Available options
1 of 5 items selected
Chosen options
0 of 0 items selected
Multiple available items selected
Available options
3 of 5 items selected
Chosen options
0 of 0 items selected
Tree view with chosen and disabled options
Available options
0 of 10 items selected
Chosen options
0 of 0 items selected
Draggable
Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.
Available options
0 of 5 items selected
Chosen options
0 of 0 items selected
This is the aria-live section that provides real-time feedback to the user.
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-live | [element with live text] | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. Highly Recommended |
aria-labelledby="[id of .pf-v6-c-dual-list-selector__status-text] | .pf-v6-c-dual-list-selector__list [ul] | Gives the list an accessible name. |
role="listbox or tree or group" | .pf-v6-c-dual-list-selector__list [ul] | Indicates the list is single, a tree, or a subgroup within the tree. |
aria-multiselectable="true" | .pf-v6-c-dual-list-selector__list [ul] | Indicates the list is multiselectable. |
aria-activedescendant="" | .pf-v6-c-dual-list-selector__list [ul] | Indicates the list has clickable children. |
role="option or treeitem" | .pf-v6-c-dual-list-selector__list-item [li] | Indicates whether the item is part of a tree. |
aria-expanded="true" | .pf-v6-c-dual-list-selector__list-item [li] | Indicates a treeitem is expanded. |
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-v6-c-dual-list-selector | <div> | Initiates the dual list selector component. Required |
.pf-v6-c-dual-list-selector__pane | <div> | Initiates a dual list selector pane. Required |
.pf-v6-c-dual-list-selector__header | <div> | Initiates a dual list selector pane header. Required |
.pf-v6-c-dual-list-selector__title | <div> | Initiates a dual list selector pane title. Required |
.pf-v6-c-dual-list-selector__title-text | <div> | Initiates a dual list selector pane title text. Required |
.pf-v6-c-dual-list-selector__tools | <div> | Initiates a dual list selector tools. Required |
.pf-v6-c-dual-list-selector__filter | <div> | Initiates a dual list selector pane filter. Required |
.pf-v6-c-dual-list-selector__actions | <div> | Initiates a dual list selector pane actions. |
.pf-v6-c-dual-list-selector__actions-item | <div> | Initiates a dual list selector pane actions item. |
.pf-v6-c-dual-list-selector__status | <div> | Initiates a dual list selector pane selected status. Required |
.pf-v6-c-dual-list-selector__status-text | <span> | Initiates a dual list selector pane selected status text. Required |
.pf-v6-c-dual-list-selector__menu | <div> | Initiates a dual list selector pane menu container. Required |
.pf-v6-c-dual-list-selector__list | <ul> | Initiates a dual list selector pane menu list. Required |
.pf-v6-c-dual-list-selector__list-item | <li> | Initiates a dual list selector pane menu list item. Required |
.pf-v6-c-dual-list-selector__list-item-row | <div> | Initiates a dual list selector pane menu list item row. Required |
.pf-v6-c-dual-list-selector__draggable | <div> | Initiates a dual list selector pane draggable element. |
.pf-v6-c-dual-list-selector__item | <span>, <div> | Initiates a dual list selector pane menu item. Required |
.pf-v6-c-dual-list-selector__item-main | <span> | Initiates a dual list selector pane menu item main container. Required |
.pf-v6-c-dual-list-selector__item-check | <span> | Initiates the dual list selector item check. |
.pf-v6-c-dual-list-selector__item-count | <span> | Initiates the dual list selector item count. |
.pf-v6-c-dual-list-selector__item-toggle-icon | <span> | Initiates the dual list selector item toggle icon. |
.pf-v6-c-dual-list-selector__item-toggle | <button> | Initiates the dual list selector item toggle. |
.pf-v6-c-dual-list-selector__item-text | <span> | Initiates a dual list selector pane menu item text. Required |
.pf-v6-c-dual-list-selector__controls | <div> | Initiates the dual list selector controls. Required |
.pf-v6-c-dual-list-selector__controls-item | <div> | Initiates the dual list selector controls item. Required |
.pf-m-available | .pf-v6-c-dual-list-selector__pane | Defines a pane as the available list. |
.pf-m-chosen | .pf-v6-c-dual-list-selector__pane | Defines a pane as the chosen list. |
.pf-m-drag-over | .pf-v6-c-dual-list-selector__list | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
.pf-m-ghost-row | .pf-v6-c-dual-list-selector__list-item-row | Modifies the list item main to be a ghost row. |
.pf-m-selected | .pf-v6-c-dual-list-selector__list-item-row | Modifies the menu item for the selected state. |
.pf-m-check | .pf-v6-c-dual-list-selector__list-item-row | Indicates that an item is selectable with a checkbox. |
.pf-m-expandable | .pf-v6-c-dual-list-selector__list-item | Indicates that an item is expandable. |
.pf-m-expanded | .pf-v6-c-dual-list-selector__list-item | Indicates that an item is expanded. |
.pf-m-disabled | .pf-v6-c-dual-list-selector__list-item | Indicates that an item is disabled. Note: If an item is expandable, only the top level item needs the disabled class. |
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 | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__title-text--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__title-text--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__tools--MarginBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--BorderRadius | 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 | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item-row--FontSize | 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) | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor | (In light theme) #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 | ||
| ||||
| :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) | ||
| ||||
| :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 | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--indent--base | 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) | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-text--Color | (In light theme) #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 | ||
| ||||
| :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 | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__status--MarginBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__status-text--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__status-text--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--Gap | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--MarginBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd | 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 | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-count--MarginInlineStart | 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 | ||
| ||||
| :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) | ||
| ||||
| :where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth | 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__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__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__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__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__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.pf-m-expandable | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | 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__list-item.pf-m-disabled | --pf-v6-c-dual-list-selector__item-text--Color | (In light theme) #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__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.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__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.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__draggable + .pf-v6-c-dual-list-selector__item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | 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-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__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-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__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-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__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-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__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-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__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-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__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-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__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-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__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-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__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-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__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 | ||
| ||||
