@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Skeleton/skeleton.css +22 -2
  37. package/components/Skeleton/skeleton.scss +25 -3
  38. package/components/Spinner/spinner.css +5 -0
  39. package/components/Spinner/spinner.scss +6 -0
  40. package/components/Table/table-grid.css +51 -5
  41. package/components/Table/table-grid.scss +22 -1
  42. package/components/Table/table.css +83 -1
  43. package/components/Table/table.scss +123 -1
  44. package/components/Tabs/tabs.css +25 -15
  45. package/components/Tabs/tabs.scss +26 -13
  46. package/components/TextInputGroup/text-input-group.css +16 -0
  47. package/components/TextInputGroup/text-input-group.scss +8 -0
  48. package/components/Timestamp/timestamp.css +4 -0
  49. package/components/Timestamp/timestamp.scss +7 -0
  50. package/components/TreeView/tree-view.css +39 -0
  51. package/components/TreeView/tree-view.scss +42 -2
  52. package/components/Truncate/truncate.css +1 -0
  53. package/components/Truncate/truncate.scss +3 -0
  54. package/components/_index.css +918 -85
  55. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  56. package/docs/components/Button/examples/Button.md +148 -5
  57. package/docs/components/Card/examples/Card.md +8 -8
  58. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  59. package/docs/components/DataList/examples/DataList.md +23 -23
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  61. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  62. package/docs/components/Form/examples/Form.md +1047 -126
  63. package/docs/components/Hint/examples/Hint.md +3 -3
  64. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  65. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  66. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  67. package/docs/components/Masthead/examples/masthead.md +90 -12
  68. package/docs/components/Menu/examples/Menu.md +122 -6
  69. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  70. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  71. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  72. package/docs/components/Page/examples/Page.md +147 -14
  73. package/docs/components/Pagination/examples/Pagination.md +12 -12
  74. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  75. package/docs/components/Slider/examples/Slider.md +2 -2
  76. package/docs/components/Spinner/examples/Spinner.md +10 -0
  77. package/docs/components/Table/examples/Table.md +9428 -6173
  78. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  79. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  80. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  81. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  82. package/docs/demos/Alert/examples/Alert.md +66 -9
  83. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  84. package/docs/demos/Banner/examples/Banner.md +47 -6
  85. package/docs/demos/Card/examples/Card.md +5 -62
  86. package/docs/demos/CardView/examples/CardView.md +24 -5
  87. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  88. package/docs/demos/DataList/examples/DataList.md +100 -24
  89. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  90. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  91. package/docs/demos/Form/examples/BasicForms.md +12 -12
  92. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  93. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  94. package/docs/demos/Modal/examples/Modal.md +132 -18
  95. package/docs/demos/Nav/examples/Nav.md +111 -16
  96. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  97. package/docs/demos/Page/examples/Page.md +309 -43
  98. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  99. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  100. package/docs/demos/Table/examples/Table.md +449 -155
  101. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  102. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  103. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  104. package/package.json +5 -5
  105. package/patternfly-base-no-globals.css +45 -11
  106. package/patternfly-base.css +45 -11
  107. package/patternfly-no-globals.css +963 -96
  108. package/patternfly.css +963 -96
  109. package/patternfly.min.css +1 -1
  110. package/patternfly.min.css.map +1 -1
  111. package/sass-utilities/mixins.scss +54 -0
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -49,7 +49,7 @@ cssPrefix: pf-v6-c-dual-list-selector
49
49
  class="pf-v6-c-menu-toggle pf-m-plain"
50
50
  type="button"
51
51
  aria-expanded="false"
52
- aria-label="Menu toggle"
52
+ aria-label="Dual list item menu toggle"
53
53
  id="basic-available-menu-toggle"
54
54
  >
55
55
  <span class="pf-v6-c-menu-toggle__icon">
@@ -230,7 +230,7 @@ cssPrefix: pf-v6-c-dual-list-selector
230
230
  class="pf-v6-c-menu-toggle pf-m-plain"
231
231
  type="button"
232
232
  aria-expanded="false"
233
- aria-label="Menu toggle"
233
+ aria-label="Dual list item menu toggle"
234
234
  id="basic-chosen-menu-toggle"
235
235
  >
236
236
  <span class="pf-v6-c-menu-toggle__icon">
@@ -304,7 +304,7 @@ cssPrefix: pf-v6-c-dual-list-selector
304
304
  class="pf-v6-c-menu-toggle pf-m-plain"
305
305
  type="button"
306
306
  aria-expanded="false"
307
- aria-label="Menu toggle"
307
+ aria-label="Dual list item menu toggle"
308
308
  id="available-item-selected-available-menu-toggle"
309
309
  >
310
310
  <span class="pf-v6-c-menu-toggle__icon">
@@ -479,7 +479,7 @@ cssPrefix: pf-v6-c-dual-list-selector
479
479
  class="pf-v6-c-menu-toggle pf-m-plain"
480
480
  type="button"
481
481
  aria-expanded="false"
482
- aria-label="Menu toggle"
482
+ aria-label="Dual list item menu toggle"
483
483
  id="available-item-selected-chosen-menu-toggle"
484
484
  >
485
485
  <span class="pf-v6-c-menu-toggle__icon">
@@ -553,7 +553,7 @@ cssPrefix: pf-v6-c-dual-list-selector
553
553
  class="pf-v6-c-menu-toggle pf-m-plain"
554
554
  type="button"
555
555
  aria-expanded="false"
556
- aria-label="Menu toggle"
556
+ aria-label="Dual list item menu toggle"
557
557
  id="multiple-available-items-selected-available-menu-toggle"
558
558
  >
559
559
  <span class="pf-v6-c-menu-toggle__icon">
@@ -728,7 +728,7 @@ cssPrefix: pf-v6-c-dual-list-selector
728
728
  class="pf-v6-c-menu-toggle pf-m-plain"
729
729
  type="button"
730
730
  aria-expanded="false"
731
- aria-label="Menu toggle"
731
+ aria-label="Dual list item menu toggle"
732
732
  id="multiple-available-items-selected-chosen-menu-toggle"
733
733
  >
734
734
  <span class="pf-v6-c-menu-toggle__icon">
@@ -802,7 +802,7 @@ cssPrefix: pf-v6-c-dual-list-selector
802
802
  class="pf-v6-c-menu-toggle pf-m-plain"
803
803
  type="button"
804
804
  aria-expanded="false"
805
- aria-label="Menu toggle"
805
+ aria-label="Dual list item menu toggle"
806
806
  id="chosen-item-available-menu-toggle"
807
807
  >
808
808
  <span class="pf-v6-c-menu-toggle__icon">
@@ -977,7 +977,7 @@ cssPrefix: pf-v6-c-dual-list-selector
977
977
  class="pf-v6-c-menu-toggle pf-m-plain"
978
978
  type="button"
979
979
  aria-expanded="false"
980
- aria-label="Menu toggle"
980
+ aria-label="Dual list item menu toggle"
981
981
  id="chosen-item-chosen-menu-toggle"
982
982
  >
983
983
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1064,7 +1064,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1064
1064
  class="pf-v6-c-menu-toggle pf-m-plain"
1065
1065
  type="button"
1066
1066
  aria-expanded="false"
1067
- aria-label="Menu toggle"
1067
+ aria-label="Dual list item menu toggle"
1068
1068
  id="chosen-item-selected-available-menu-toggle"
1069
1069
  >
1070
1070
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1238,7 +1238,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1238
1238
  class="pf-v6-c-menu-toggle pf-m-plain"
1239
1239
  type="button"
1240
1240
  aria-expanded="false"
1241
- aria-label="Menu toggle"
1241
+ aria-label="Dual list item menu toggle"
1242
1242
  id="chosen-item-selected-chosen-menu-toggle"
1243
1243
  >
1244
1244
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1325,7 +1325,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1325
1325
  class="pf-v6-c-menu-toggle pf-m-plain"
1326
1326
  type="button"
1327
1327
  aria-expanded="false"
1328
- aria-label="Menu toggle"
1328
+ aria-label="Dual list item menu toggle"
1329
1329
  id="tree-available-menu-toggle"
1330
1330
  >
1331
1331
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1768,7 +1768,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1768
1768
  class="pf-v6-c-menu-toggle pf-m-plain"
1769
1769
  type="button"
1770
1770
  aria-expanded="false"
1771
- aria-label="Menu toggle"
1771
+ aria-label="Dual list item menu toggle"
1772
1772
  id="tree-chosen-menu-toggle"
1773
1773
  >
1774
1774
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1842,7 +1842,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1842
1842
  class="pf-v6-c-menu-toggle pf-m-plain"
1843
1843
  type="button"
1844
1844
  aria-expanded="false"
1845
- aria-label="Menu toggle"
1845
+ aria-label="Dual list item menu toggle"
1846
1846
  id="tree-options-available-menu-toggle"
1847
1847
  >
1848
1848
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2266,7 +2266,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2266
2266
  class="pf-v6-c-menu-toggle pf-m-plain"
2267
2267
  type="button"
2268
2268
  aria-expanded="false"
2269
- aria-label="Menu toggle"
2269
+ aria-label="Dual list item menu toggle"
2270
2270
  id="tree-options-chosen-menu-toggle"
2271
2271
  >
2272
2272
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2359,6 +2359,523 @@ cssPrefix: pf-v6-c-dual-list-selector
2359
2359
 
2360
2360
  ```
2361
2361
 
2362
+ ### Tree view animated
2363
+
2364
+ ```html
2365
+ <div class="pf-v6-c-dual-list-selector pf-m-animate-expand">
2366
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
2367
+ <div class="pf-v6-c-dual-list-selector__header">
2368
+ <div class="pf-v6-c-dual-list-selector__title">
2369
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
2370
+ </div>
2371
+ </div>
2372
+ <div class="pf-v6-c-dual-list-selector__tools">
2373
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
2374
+ <div class="pf-v6-c-text-input-group">
2375
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2376
+ <span class="pf-v6-c-text-input-group__text">
2377
+ <span class="pf-v6-c-text-input-group__icon">
2378
+ <i class="fas fa-fw fa-search"></i>
2379
+ </span>
2380
+ <input
2381
+ class="pf-v6-c-text-input-group__text-input"
2382
+ type="text"
2383
+ value
2384
+ aria-label="Search input"
2385
+ />
2386
+ </span>
2387
+ </div>
2388
+ </div>
2389
+ </div>
2390
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
2391
+ <button
2392
+ class="pf-v6-c-button pf-m-plain"
2393
+ type="button"
2394
+ aria-label="Sort"
2395
+ >
2396
+ <span class="pf-v6-c-button__icon pf-m-start">
2397
+ <i
2398
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2399
+ aria-hidden="true"
2400
+ ></i>
2401
+ </span>
2402
+ </button>
2403
+ <button
2404
+ class="pf-v6-c-menu-toggle pf-m-plain"
2405
+ type="button"
2406
+ aria-expanded="false"
2407
+ aria-label="Dual list item menu toggle"
2408
+ id="tree-available-menu-toggle"
2409
+ >
2410
+ <span class="pf-v6-c-menu-toggle__icon">
2411
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2412
+ </span>
2413
+ </button>
2414
+ </div>
2415
+ </div>
2416
+ <div class="pf-v6-c-dual-list-selector__status">
2417
+ <span
2418
+ class="pf-v6-c-dual-list-selector__status-text"
2419
+ id="tree-available-status-text"
2420
+ >1 of 11 items selected</span>
2421
+ </div>
2422
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
2423
+ <ul
2424
+ class="pf-v6-c-dual-list-selector__list"
2425
+ role="tree"
2426
+ aria-labelledby="tree-available-status-text"
2427
+ aria-multiselectable="true"
2428
+ aria-activedescendant
2429
+ >
2430
+ <li
2431
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
2432
+ aria-expanded="true"
2433
+ role="treeitem"
2434
+ >
2435
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2436
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2437
+ <span class="pf-v6-c-dual-list-selector__item-main">
2438
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2439
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2440
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2441
+ </span>
2442
+ </div>
2443
+ <span class="pf-v6-c-dual-list-selector__item-check">
2444
+ <div class="pf-v6-c-check pf-m-standalone">
2445
+ <input
2446
+ class="pf-v6-c-check__input"
2447
+ type="checkbox"
2448
+ id="check-0"
2449
+ aria-label="Dual list selector item check"
2450
+ />
2451
+ </div>
2452
+ </span>
2453
+ <span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
2454
+ </span>
2455
+ <span class="pf-v6-c-dual-list-selector__item-count">
2456
+ <span class="pf-v6-c-badge pf-m-read">6</span>
2457
+ </span>
2458
+ </div>
2459
+ </div>
2460
+
2461
+ <ul
2462
+ class="pf-v6-c-dual-list-selector__list"
2463
+ role="group"
2464
+ aria-labelledby="-status-text"
2465
+ >
2466
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2467
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2468
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2469
+ <span class="pf-v6-c-dual-list-selector__item-main">
2470
+ <span class="pf-v6-c-dual-list-selector__item-check">
2471
+ <div class="pf-v6-c-check pf-m-standalone">
2472
+ <input
2473
+ class="pf-v6-c-check__input"
2474
+ type="checkbox"
2475
+ id="check-1"
2476
+ aria-label="Dual list selector item check"
2477
+ />
2478
+ </div>
2479
+ </span>
2480
+ <span class="pf-v6-c-dual-list-selector__item-text">Red</span>
2481
+ </span>
2482
+ <span class="pf-v6-c-dual-list-selector__item-count">
2483
+ <span class="pf-v6-c-badge pf-m-read"></span>
2484
+ </span>
2485
+ </div>
2486
+ </div>
2487
+ </li>
2488
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2489
+ <div
2490
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
2491
+ >
2492
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2493
+ <span class="pf-v6-c-dual-list-selector__item-main">
2494
+ <span class="pf-v6-c-dual-list-selector__item-check">
2495
+ <div class="pf-v6-c-check pf-m-standalone">
2496
+ <input
2497
+ class="pf-v6-c-check__input"
2498
+ type="checkbox"
2499
+ id="check-2"
2500
+ checked
2501
+ aria-label="Dual list selector item check checked"
2502
+ />
2503
+ </div>
2504
+ </span>
2505
+ <span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
2506
+ </span>
2507
+ <span class="pf-v6-c-dual-list-selector__item-count">
2508
+ <span class="pf-v6-c-badge pf-m-read"></span>
2509
+ </span>
2510
+ </div>
2511
+ </div>
2512
+ </li>
2513
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2514
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2515
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2516
+ <span class="pf-v6-c-dual-list-selector__item-main">
2517
+ <span class="pf-v6-c-dual-list-selector__item-check">
2518
+ <div class="pf-v6-c-check pf-m-standalone">
2519
+ <input
2520
+ class="pf-v6-c-check__input"
2521
+ type="checkbox"
2522
+ id="check-3"
2523
+ aria-label="Dual list selector item check"
2524
+ />
2525
+ </div>
2526
+ </span>
2527
+ <span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
2528
+ </span>
2529
+ <span class="pf-v6-c-dual-list-selector__item-count">
2530
+ <span class="pf-v6-c-badge pf-m-read"></span>
2531
+ </span>
2532
+ </div>
2533
+ </div>
2534
+ </li>
2535
+ <li
2536
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
2537
+ aria-expanded="true"
2538
+ role="treeitem"
2539
+ >
2540
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2541
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2542
+ <span class="pf-v6-c-dual-list-selector__item-main">
2543
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2544
+ <span
2545
+ class="pf-v6-c-dual-list-selector__item-toggle-icon"
2546
+ >
2547
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2548
+ </span>
2549
+ </div>
2550
+ <span class="pf-v6-c-dual-list-selector__item-check">
2551
+ <div class="pf-v6-c-check pf-m-standalone">
2552
+ <input
2553
+ class="pf-v6-c-check__input"
2554
+ type="checkbox"
2555
+ id="check-4"
2556
+ aria-label="Dual list selector item check"
2557
+ />
2558
+ </div>
2559
+ </span>
2560
+ <span class="pf-v6-c-dual-list-selector__item-text">Green</span>
2561
+ </span>
2562
+ <span class="pf-v6-c-dual-list-selector__item-count">
2563
+ <span class="pf-v6-c-badge pf-m-read"></span>
2564
+ </span>
2565
+ </div>
2566
+ </div>
2567
+
2568
+ <ul
2569
+ class="pf-v6-c-dual-list-selector__list"
2570
+ role="group"
2571
+ aria-labelledby="-status-text"
2572
+ >
2573
+ <li
2574
+ class="pf-v6-c-dual-list-selector__list-item"
2575
+ role="treeitem"
2576
+ >
2577
+ <div
2578
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
2579
+ >
2580
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2581
+ <span class="pf-v6-c-dual-list-selector__item-main">
2582
+ <span class="pf-v6-c-dual-list-selector__item-check">
2583
+ <div class="pf-v6-c-check pf-m-standalone">
2584
+ <input
2585
+ class="pf-v6-c-check__input"
2586
+ type="checkbox"
2587
+ id="check-5"
2588
+ aria-label="Dual list selector item check"
2589
+ />
2590
+ </div>
2591
+ </span>
2592
+ <span
2593
+ class="pf-v6-c-dual-list-selector__item-text"
2594
+ >Light green</span>
2595
+ </span>
2596
+ <span class="pf-v6-c-dual-list-selector__item-count">
2597
+ <span class="pf-v6-c-badge pf-m-read"></span>
2598
+ </span>
2599
+ </div>
2600
+ </div>
2601
+ </li>
2602
+ <li
2603
+ class="pf-v6-c-dual-list-selector__list-item"
2604
+ role="treeitem"
2605
+ >
2606
+ <div
2607
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
2608
+ >
2609
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2610
+ <span class="pf-v6-c-dual-list-selector__item-main">
2611
+ <span class="pf-v6-c-dual-list-selector__item-check">
2612
+ <div class="pf-v6-c-check pf-m-standalone">
2613
+ <input
2614
+ class="pf-v6-c-check__input"
2615
+ type="checkbox"
2616
+ id="check-6"
2617
+ aria-label="Dual list selector item check"
2618
+ />
2619
+ </div>
2620
+ </span>
2621
+ <span
2622
+ class="pf-v6-c-dual-list-selector__item-text"
2623
+ >Medium green</span>
2624
+ </span>
2625
+ <span class="pf-v6-c-dual-list-selector__item-count">
2626
+ <span class="pf-v6-c-badge pf-m-read"></span>
2627
+ </span>
2628
+ </div>
2629
+ </div>
2630
+ </li>
2631
+ <li
2632
+ class="pf-v6-c-dual-list-selector__list-item"
2633
+ role="treeitem"
2634
+ >
2635
+ <div
2636
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
2637
+ >
2638
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2639
+ <span class="pf-v6-c-dual-list-selector__item-main">
2640
+ <span class="pf-v6-c-dual-list-selector__item-check">
2641
+ <div class="pf-v6-c-check pf-m-standalone">
2642
+ <input
2643
+ class="pf-v6-c-check__input"
2644
+ type="checkbox"
2645
+ id="check-7"
2646
+ aria-label="Dual list selector item check"
2647
+ />
2648
+ </div>
2649
+ </span>
2650
+ <span
2651
+ class="pf-v6-c-dual-list-selector__item-text"
2652
+ >Dark green</span>
2653
+ </span>
2654
+ <span class="pf-v6-c-dual-list-selector__item-count">
2655
+ <span class="pf-v6-c-badge pf-m-read"></span>
2656
+ </span>
2657
+ </div>
2658
+ </div>
2659
+ </li>
2660
+ </ul>
2661
+ </li>
2662
+ </ul>
2663
+ </li>
2664
+
2665
+ <li
2666
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
2667
+ aria-expanded="true"
2668
+ role="treeitem"
2669
+ >
2670
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2671
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2672
+ <span class="pf-v6-c-dual-list-selector__item-main">
2673
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2674
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2675
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2676
+ </span>
2677
+ </div>
2678
+ <span class="pf-v6-c-dual-list-selector__item-check">
2679
+ <div class="pf-v6-c-check pf-m-standalone">
2680
+ <input
2681
+ class="pf-v6-c-check__input"
2682
+ type="checkbox"
2683
+ id="check-8"
2684
+ aria-label="Dual list selector item check"
2685
+ />
2686
+ </div>
2687
+ </span>
2688
+ <span
2689
+ class="pf-v6-c-dual-list-selector__item-text"
2690
+ >Type something</span>
2691
+ </span>
2692
+ <span class="pf-v6-c-dual-list-selector__item-count">
2693
+ <span class="pf-v6-c-badge pf-m-read"></span>
2694
+ </span>
2695
+ </div>
2696
+ </div>
2697
+ </li>
2698
+
2699
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2700
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2701
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2702
+ <span class="pf-v6-c-dual-list-selector__item-main">
2703
+ <span class="pf-v6-c-dual-list-selector__item-check">
2704
+ <div class="pf-v6-c-check pf-m-standalone">
2705
+ <input
2706
+ class="pf-v6-c-check__input"
2707
+ type="checkbox"
2708
+ id="check-9"
2709
+ aria-label="Dual list selector item check"
2710
+ />
2711
+ </div>
2712
+ </span>
2713
+ <span
2714
+ class="pf-v6-c-dual-list-selector__item-text"
2715
+ >Type something</span>
2716
+ </span>
2717
+ <span class="pf-v6-c-dual-list-selector__item-count">
2718
+ <span class="pf-v6-c-badge pf-m-read"></span>
2719
+ </span>
2720
+ </div>
2721
+ </div>
2722
+ </li>
2723
+
2724
+ <li
2725
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
2726
+ aria-expanded="true"
2727
+ role="treeitem"
2728
+ >
2729
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2730
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2731
+ <span class="pf-v6-c-dual-list-selector__item-main">
2732
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2733
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2734
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2735
+ </span>
2736
+ </div>
2737
+ <span class="pf-v6-c-dual-list-selector__item-check">
2738
+ <div class="pf-v6-c-check pf-m-standalone">
2739
+ <input
2740
+ class="pf-v6-c-check__input"
2741
+ type="checkbox"
2742
+ id="check-10"
2743
+ aria-label="Dual list selector item check"
2744
+ />
2745
+ </div>
2746
+ </span>
2747
+ <span
2748
+ class="pf-v6-c-dual-list-selector__item-text"
2749
+ >Type something</span>
2750
+ </span>
2751
+ <span class="pf-v6-c-dual-list-selector__item-count">
2752
+ <span class="pf-v6-c-badge pf-m-read"></span>
2753
+ </span>
2754
+ </div>
2755
+ </div>
2756
+ </li>
2757
+ </ul>
2758
+ </div>
2759
+ </div>
2760
+ <div class="pf-v6-c-dual-list-selector__controls">
2761
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2762
+ <button
2763
+ class="pf-v6-c-button pf-m-plain"
2764
+ type="button"
2765
+ disabled
2766
+ aria-label="Add selected"
2767
+ >
2768
+ <span class="pf-v6-c-button__icon">
2769
+ <i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
2770
+ </span>
2771
+ </button>
2772
+ </div>
2773
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2774
+ <button
2775
+ class="pf-v6-c-button pf-m-plain"
2776
+ type="button"
2777
+ aria-label="Add all"
2778
+ >
2779
+ <span class="pf-v6-c-button__icon">
2780
+ <i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
2781
+ </span>
2782
+ </button>
2783
+ </div>
2784
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2785
+ <button
2786
+ class="pf-v6-c-button pf-m-plain"
2787
+ type="button"
2788
+ disabled
2789
+ aria-label="Remove all"
2790
+ >
2791
+ <span class="pf-v6-c-button__icon">
2792
+ <i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
2793
+ </span>
2794
+ </button>
2795
+ </div>
2796
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2797
+ <button
2798
+ class="pf-v6-c-button pf-m-plain"
2799
+ type="button"
2800
+ disabled
2801
+ aria-label="Remove selected"
2802
+ >
2803
+ <span class="pf-v6-c-button__icon">
2804
+ <i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
2805
+ </span>
2806
+ </button>
2807
+ </div>
2808
+ </div>
2809
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
2810
+ <div class="pf-v6-c-dual-list-selector__header">
2811
+ <div class="pf-v6-c-dual-list-selector__title">
2812
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
2813
+ </div>
2814
+ </div>
2815
+ <div class="pf-v6-c-dual-list-selector__tools">
2816
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
2817
+ <div class="pf-v6-c-text-input-group">
2818
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2819
+ <span class="pf-v6-c-text-input-group__text">
2820
+ <span class="pf-v6-c-text-input-group__icon">
2821
+ <i class="fas fa-fw fa-search"></i>
2822
+ </span>
2823
+ <input
2824
+ class="pf-v6-c-text-input-group__text-input"
2825
+ type="text"
2826
+ value
2827
+ aria-label="Search input"
2828
+ />
2829
+ </span>
2830
+ </div>
2831
+ </div>
2832
+ </div>
2833
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
2834
+ <button
2835
+ class="pf-v6-c-button pf-m-plain"
2836
+ type="button"
2837
+ aria-label="Sort"
2838
+ >
2839
+ <span class="pf-v6-c-button__icon pf-m-start">
2840
+ <i
2841
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2842
+ aria-hidden="true"
2843
+ ></i>
2844
+ </span>
2845
+ </button>
2846
+ <button
2847
+ class="pf-v6-c-menu-toggle pf-m-plain"
2848
+ type="button"
2849
+ aria-expanded="false"
2850
+ aria-label="Dual list item menu toggle"
2851
+ id="tree-chosen-menu-toggle"
2852
+ >
2853
+ <span class="pf-v6-c-menu-toggle__icon">
2854
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2855
+ </span>
2856
+ </button>
2857
+ </div>
2858
+ </div>
2859
+ <div class="pf-v6-c-dual-list-selector__status">
2860
+ <span
2861
+ class="pf-v6-c-dual-list-selector__status-text"
2862
+ id="tree-chosen-status-text"
2863
+ >0 of 0 items selected</span>
2864
+ </div>
2865
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
2866
+ <ul
2867
+ class="pf-v6-c-dual-list-selector__list"
2868
+ role="listbox"
2869
+ aria-labelledby="tree-chosen-status-text"
2870
+ aria-multiselectable="true"
2871
+ aria-activedescendant
2872
+ ></ul>
2873
+ </div>
2874
+ </div>
2875
+ </div>
2876
+
2877
+ ```
2878
+
2362
2879
  ### Draggable
2363
2880
 
2364
2881
  ```html
@@ -2407,7 +2924,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2407
2924
  class="pf-v6-c-menu-toggle pf-m-plain"
2408
2925
  type="button"
2409
2926
  aria-expanded="false"
2410
- aria-label="Menu toggle"
2927
+ aria-label="Dual list item menu toggle"
2411
2928
  id="draggable-available-menu-toggle"
2412
2929
  >
2413
2930
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2559,7 +3076,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2559
3076
  class="pf-v6-c-menu-toggle pf-m-plain"
2560
3077
  type="button"
2561
3078
  aria-expanded="false"
2562
- aria-label="Menu toggle"
3079
+ aria-label="Dual list item menu toggle"
2563
3080
  id="draggable-chosen-menu-toggle"
2564
3081
  >
2565
3082
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2724,6 +3241,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2724
3241
  | `.pf-v6-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
2725
3242
  | `.pf-v6-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
2726
3243
  | `.pf-v6-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
3244
+ | `.pf-m-animate-expand` | `.pf-v6-c-dual-list-selector` | Animates the expansion of dual list selector tree view. |
2727
3245
  | `.pf-m-available` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the available list. |
2728
3246
  | `.pf-m-chosen` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
2729
3247
  | `.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. |