npm - @patternfly/patternfly - Versions diffs - 6.0.0-alpha.99 → 6.0.0-prerelease.2 - Mend

@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show

package/README.md +1 -2
package/assets/fontawesome/_animated.scss +1 -0
package/assets/fontawesome/_bordered-pulled.scss +1 -0
package/assets/fontawesome/_core.scss +2 -0
package/assets/fontawesome/_fixed-width.scss +2 -0
package/assets/fontawesome/_icons.scss +1 -0
package/assets/fontawesome/_index.scss +12 -0
package/assets/fontawesome/_larger.scss +4 -2
package/assets/fontawesome/_list.scss +4 -2
package/assets/fontawesome/_rotated-flipped.scss +2 -0
package/assets/fontawesome/_screen-reader.scss +1 -0
package/assets/fontawesome/_stacked.scss +3 -1
package/assets/fontawesome/_variables.scss +3 -2
package/assets/fontawesome/fontawesome.scss +12 -12
package/assets/icons/iconUnicodes.json +6 -0
package/assets/images/img_avatar-dark.svg +22 -16
package/assets/images/img_avatar-light.svg +25 -18
package/assets/images/pf-background.svg +21 -21
package/assets/images/pf_logo.svg +11 -11
package/assets/images/pf_logo_white.svg +16 -17
package/assets/pficon/pf-v6-pficon.woff2 +0 -0
package/assets/pficon/pficon.scss +310 -271
package/base/_index.scss +10 -0
package/base/{_globals.scss → normalize.scss} +15 -48
package/base/patternfly-common.css +14 -0
package/base/patternfly-common.scss +68 -2
package/base/patternfly-fa-icons.css +1 -1
package/base/patternfly-fa-icons.scss +35 -2
package/base/patternfly-fonts.css +10 -80
package/base/patternfly-fonts.scss +49 -2
package/base/patternfly-pf-icons.css +158 -134
package/base/patternfly-pf-icons.scss +1 -2
package/base/patternfly-svg-icons.css +5 -0
package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
package/base/patternfly-variables.css +1082 -1206
package/base/patternfly-variables.scss +20 -2
package/base/reset.scss +33 -0
package/base/tokens/_index.scss +6 -0
package/base/tokens/tokens-charts-dark.scss +173 -0
package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
package/components/AboutModalBox/about-modal-box.css +86 -81
package/components/AboutModalBox/about-modal-box.scss +80 -82
package/components/Accordion/accordion.css +44 -43
package/components/Accordion/accordion.scss +52 -52
package/components/ActionList/action-list.css +6 -5
package/components/ActionList/action-list.scss +7 -5
package/components/Alert/alert-group.css +72 -19
package/components/Alert/alert-group.scss +105 -18
package/components/Alert/alert.css +52 -59
package/components/Alert/alert.scss +56 -65
package/components/Avatar/avatar.css +42 -41
package/components/Avatar/avatar.scss +8 -7
package/components/BackToTop/back-to-top.css +19 -17
package/components/BackToTop/back-to-top.scss +17 -17
package/components/Backdrop/backdrop.css +1 -1
package/components/Backdrop/backdrop.scss +3 -4
package/components/BackgroundImage/background-image.scss +3 -4
package/components/Badge/badge.css +29 -7
package/components/Badge/badge.scss +33 -9
package/components/Banner/banner.css +30 -37
package/components/Banner/banner.scss +30 -43
package/components/Brand/brand.css +14 -10
package/components/Brand/brand.scss +8 -5
package/components/Breadcrumb/breadcrumb.css +23 -24
package/components/Breadcrumb/breadcrumb.scss +25 -28
package/components/Button/button.css +150 -128
package/components/Button/button.scss +155 -130
package/components/CalendarMonth/calendar-month.css +46 -46
package/components/CalendarMonth/calendar-month.scss +49 -50
package/components/Card/card.css +110 -93
package/components/Card/card.scss +118 -92
package/components/Check/check.css +5 -5
package/components/Check/check.scss +7 -8
package/components/ClipboardCopy/clipboard-copy.css +33 -41
package/components/ClipboardCopy/clipboard-copy.scss +35 -44
package/components/CodeBlock/code-block.css +21 -20
package/components/CodeBlock/code-block.scss +21 -21
package/components/CodeEditor/code-editor.css +35 -34
package/components/CodeEditor/code-editor.scss +35 -35
package/components/Content/content.css +167 -153
package/components/Content/content.scss +204 -145
package/components/DataList/data-list-grid.css +117 -117
package/components/DataList/data-list-grid.scss +22 -20
package/components/DataList/data-list.css +308 -312
package/components/DataList/data-list.scss +145 -152
package/components/DatePicker/date-picker.css +17 -17
package/components/DatePicker/date-picker.scss +17 -18
package/components/DescriptionList/description-list-order.css +5 -5
package/components/DescriptionList/description-list-order.scss +3 -1
package/components/DescriptionList/description-list.css +46 -44
package/components/DescriptionList/description-list.scss +26 -31
package/components/Divider/divider.css +104 -107
package/components/Divider/divider.scss +19 -19
package/components/DragDrop/drag-drop.css +4 -2
package/components/DragDrop/drag-drop.scss +3 -3
package/components/Drawer/drawer.css +115 -114
package/components/Drawer/drawer.scss +136 -134
package/components/DualListSelector/dual-list-selector.css +64 -61
package/components/DualListSelector/dual-list-selector.scss +54 -51
package/components/EmptyState/empty-state.css +38 -37
package/components/EmptyState/empty-state.scss +39 -39
package/components/ExpandableSection/expandable-section.css +27 -86
package/components/ExpandableSection/expandable-section.scss +32 -101
package/components/FileUpload/file-upload.css +2 -2
package/components/FileUpload/file-upload.scss +2 -3
package/components/Form/form.css +173 -115
package/components/Form/form.scss +117 -103
package/components/FormControl/form-control.css +57 -57
package/components/FormControl/form-control.scss +69 -67
package/components/HelperText/helper-text.css +5 -4
package/components/HelperText/helper-text.scss +8 -6
package/components/Hint/hint.css +25 -25
package/components/Hint/hint.scss +25 -27
package/components/Icon/icon.css +10 -10
package/components/Icon/icon.scss +11 -12
package/components/InlineEdit/inline-edit.css +12 -12
package/components/InlineEdit/inline-edit.scss +12 -13
package/components/InputGroup/input-group.css +16 -16
package/components/InputGroup/input-group.scss +18 -19
package/components/JumpLinks/jump-links.css +80 -96
package/components/JumpLinks/jump-links.scss +80 -100
package/components/Label/label-group.css +28 -28
package/components/Label/label-group.scss +29 -30
package/components/Label/label.css +102 -87
package/components/Label/label.scss +113 -94
package/components/List/list.css +44 -47
package/components/List/list.scss +51 -58
package/components/Login/login.css +122 -118
package/components/Login/login.scss +105 -112
package/components/Masthead/masthead.css +273 -175
package/components/Masthead/masthead.scss +102 -68
package/components/Menu/menu.css +151 -95
package/components/Menu/menu.scss +59 -40
package/components/MenuToggle/menu-toggle.css +129 -108
package/components/MenuToggle/menu-toggle.scss +150 -128
package/components/ModalBox/modal-box.css +53 -45
package/components/ModalBox/modal-box.scss +52 -46
package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
package/components/Nav/nav.css +33 -9
package/components/Nav/nav.scss +46 -13
package/components/NotificationDrawer/notification-drawer.css +50 -51
package/components/NotificationDrawer/notification-drawer.scss +58 -57
package/components/NumberInput/number-input.css +7 -11
package/components/NumberInput/number-input.scss +5 -7
package/components/OverflowMenu/overflow-menu.css +2 -1
package/components/OverflowMenu/overflow-menu.scss +3 -1
package/components/Page/page.css +175 -519
package/components/Page/page.scss +155 -386
package/components/Pagination/pagination.css +82 -79
package/components/Pagination/pagination.scss +43 -40
package/components/Panel/panel.css +33 -30
package/components/Panel/panel.scss +35 -33
package/components/Popover/popover.css +54 -52
package/components/Popover/popover.scss +55 -54
package/components/Progress/progress.css +8 -4
package/components/Progress/progress.scss +14 -11
package/components/ProgressStepper/progress-stepper.css +246 -245
package/components/ProgressStepper/progress-stepper.scss +118 -118
package/components/Radio/radio.css +7 -7
package/components/Radio/radio.scss +9 -10
package/components/Sidebar/sidebar.css +139 -139
package/components/Sidebar/sidebar.scss +61 -61
package/components/SimpleList/simple-list.css +21 -20
package/components/SimpleList/simple-list.scss +22 -23
package/components/Skeleton/skeleton.css +4 -4
package/components/Skeleton/skeleton.scss +7 -8
package/components/SkipToContent/skip-to-content.css +7 -6
package/components/SkipToContent/skip-to-content.scss +7 -7
package/components/Slider/slider.css +31 -31
package/components/Slider/slider.scss +54 -55
package/components/Spinner/spinner.scss +4 -5
package/components/Switch/switch.css +4 -10
package/components/Switch/switch.scss +8 -17
package/components/TabContent/tab-content.css +25 -25
package/components/TabContent/tab-content.scss +28 -28
package/components/Table/table-grid.css +434 -508
package/components/Table/table-grid.scss +131 -150
package/components/Table/table-scrollable.css +31 -34
package/components/Table/table-scrollable.scss +44 -41
package/components/Table/table-tree-view.css +287 -279
package/components/Table/table-tree-view.scss +84 -84
package/components/Table/table.css +316 -279
package/components/Table/table.scss +346 -301
package/components/Tabs/tabs.css +215 -240
package/components/Tabs/tabs.scss +130 -162
package/components/TextInputGroup/text-input-group.css +122 -64
package/components/TextInputGroup/text-input-group.scss +144 -87
package/components/Tile/tile.css +15 -15
package/components/Tile/tile.scss +16 -17
package/components/Timestamp/timestamp.css +13 -19
package/components/Timestamp/timestamp.scss +16 -22
package/components/Title/title.css +14 -13
package/components/Title/title.scss +15 -15
package/components/ToggleGroup/toggle-group.css +37 -37
package/components/ToggleGroup/toggle-group.scss +38 -41
package/components/Toolbar/toolbar.css +547 -1431
package/components/Toolbar/toolbar.scss +159 -123
package/components/Tooltip/tooltip.css +28 -27
package/components/Tooltip/tooltip.scss +31 -30
package/components/TreeView/tree-view.css +184 -184
package/components/TreeView/tree-view.scss +133 -133
package/components/Truncate/truncate.css +2 -2
package/components/Truncate/truncate.scss +7 -8
package/components/Wizard/wizard.css +190 -154
package/components/Wizard/wizard.scss +211 -165
package/components/_index.css +22378 -0
package/components/_index.scss +82 -0
package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
package/docs/components/Accordion/examples/Accordion.md +1 -1
package/docs/components/ActionList/examples/ActionList.md +64 -24
package/docs/components/Alert/examples/Alert.md +116 -74
package/docs/components/BackToTop/examples/BackToTop.md +1 -1
package/docs/components/Badge/examples/Badge.md +6 -16
package/docs/components/Banner/examples/Banner.md +16 -10
package/docs/components/Brand/examples/Brand.md +2 -2
package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
package/docs/components/Button/examples/Button.md +537 -368
package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
package/docs/components/Card/examples/Card.md +372 -658
package/docs/components/Check/examples/Check.md +10 -15
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
package/docs/components/Content/examples/Content.md +600 -60
package/docs/components/DataList/examples/DataList.md +291 -1028
package/docs/components/DatePicker/examples/DatePicker.md +18 -6
package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
package/docs/components/Drawer/examples/Drawer.md +60 -21
package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
package/docs/components/EmptyState/examples/EmptyState.md +123 -53
package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
package/docs/components/FileUpload/examples/FileUpload.md +42 -14
package/docs/components/Form/examples/Form.md +100 -26
package/docs/components/Hint/examples/Hint.md +54 -164
package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
package/docs/components/InputGroup/examples/InputGroup.md +38 -62
package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
package/docs/components/Label/examples/Label.md +2577 -406
package/docs/components/Login/examples/Login.md +372 -334
package/docs/components/Masthead/examples/masthead.md +515 -484
package/docs/components/Menu/examples/Menu.md +77 -138
package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
package/docs/components/ModalBox/examples/ModalBox.md +158 -100
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
package/docs/components/Nav/examples/Navigation.css +2 -7
package/docs/components/Nav/examples/Navigation.md +337 -270
package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
package/docs/components/NumberInput/examples/NumberInput.md +96 -48
package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
package/docs/components/Page/examples/Page.css +5 -9
package/docs/components/Page/examples/Page.md +254 -181
package/docs/components/Pagination/examples/Pagination.md +336 -756
package/docs/components/Panel/examples/Panel.md +3 -2
package/docs/components/Popover/examples/Popover.md +60 -15
package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
package/docs/components/Sidebar/examples/Sidebar.css +4 -2
package/docs/components/Sidebar/examples/Sidebar.md +3 -3
package/docs/components/Skeleton/examples/Skeleton.css +1 -1
package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
package/docs/components/Slider/examples/Slider.md +53 -45
package/docs/components/Spinner/examples/Spinner.md +1 -1
package/docs/components/Switch/examples/Switch.md +33 -148
package/docs/components/Table/examples/Table.css +11 -6
package/docs/components/Table/examples/Table.md +5302 -2464
package/docs/components/Tabs/examples/Tabs.md +1267 -607
package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
package/docs/components/Tile/examples/Tile.css +5 -5
package/docs/components/Timestamp/examples/Timestamp.md +7 -1
package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
package/docs/components/Toolbar/examples/Toolbar.css +50 -39
package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
package/docs/components/Tooltip/examples/Tooltip.css +1 -1
package/docs/components/TreeView/examples/TreeView.md +627 -49
package/docs/components/Truncate/examples/Truncate.css +1 -2
package/docs/components/Wizard/examples/Wizard.md +1595 -126
package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
package/docs/demos/Alert/examples/Alert.md +924 -909
package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
package/docs/demos/Banner/examples/Banner.md +641 -659
package/docs/demos/Button/examples/Button.md +8 -8
package/docs/demos/Card/examples/Card.css +6 -6
package/docs/demos/Card/examples/Card.md +419 -606
package/docs/demos/CardView/examples/CardView.md +822 -1435
package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
package/docs/demos/DataList/examples/DataList.md +3210 -3424
package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
package/docs/demos/Form/examples/BasicForms.md +153 -88
package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
package/docs/demos/Modal/examples/Modal.md +1231 -1235
package/docs/demos/Nav/examples/Nav.md +1216 -1230
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
package/docs/demos/Page/examples/Page.css +11 -0
package/docs/demos/Page/examples/Page.md +3753 -2540
package/docs/demos/Panel/Panel.md +88 -0
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
package/docs/demos/Table/examples/Table.md +14272 -15154
package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
package/docs/layouts/Flex/examples/Flex.css +4 -4
package/docs/layouts/Flex/examples/Flex.md +50 -50
package/docs/layouts/Gallery/examples/Gallery.css +4 -4
package/docs/layouts/Gallery/examples/Gallery.md +6 -6
package/docs/layouts/Grid/examples/Grid.css +3 -3
package/docs/layouts/Grid/examples/Grid.md +33 -33
package/docs/layouts/Level/examples/Level.css +5 -5
package/docs/layouts/Split/examples/Split.css +4 -4
package/docs/layouts/Stack/examples/Stack.css +5 -5
package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
package/docs/utilities/Alignment/examples/Alignment.css +6 -6
package/docs/utilities/Alignment/examples/Alignment.md +5 -5
package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
package/docs/utilities/Display/examples/Display.css +3 -10
package/docs/utilities/Display/examples/Display.md +21 -12
package/docs/utilities/Flex/examples/Flex.css +7 -7
package/docs/utilities/Flex/examples/Flex.md +82 -40
package/docs/utilities/Float/examples/Float.css +5 -5
package/docs/utilities/Float/examples/Float.md +6 -6
package/docs/utilities/Sizing/examples/Sizing.css +6 -6
package/docs/utilities/Sizing/examples/Sizing.md +60 -60
package/docs/utilities/Spacing/examples/Spacing.css +3 -3
package/docs/utilities/Spacing/examples/Spacing.md +37 -37
package/docs/utilities/Text/examples/Text.md +78 -77
package/icons/pficons.mjs +6 -0
package/layouts/Bullseye/bullseye.css +4 -0
package/layouts/Bullseye/bullseye.scss +5 -1
package/layouts/Flex/flex.css +241 -237
package/layouts/Flex/flex.scss +48 -44
package/layouts/Gallery/gallery.css +15 -11
package/layouts/Gallery/gallery.scss +9 -5
package/layouts/Grid/grid.css +20 -16
package/layouts/Grid/grid.scss +12 -8
package/layouts/Level/level.css +5 -1
package/layouts/Level/level.scss +6 -2
package/layouts/Split/split.css +5 -1
package/layouts/Split/split.scss +6 -2
package/layouts/Stack/stack.css +5 -1
package/layouts/Stack/stack.scss +6 -2
package/layouts/_index.css +3461 -0
package/layouts/_index.scss +8 -0
package/package.json +39 -39
package/patternfly-addons.css +2071 -2648
package/patternfly-addons.scss +2 -12
package/patternfly-base-no-globals.css +1429 -1645
package/patternfly-base-no-globals.scss +5 -3
package/patternfly-base.css +1511 -1723
package/patternfly-base.scss +2 -6
package/patternfly-charts.css +579 -240
package/patternfly-charts.scss +352 -337
package/patternfly-no-globals.css +19895 -23410
package/patternfly-no-globals.scss +5 -4
package/patternfly.css +19999 -23510
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1
package/patternfly.scss +3 -4
package/sass-utilities/_index.scss +6 -0
package/sass-utilities/functions.scss +25 -25
package/sass-utilities/{_init.scss → init.scss} +6 -6
package/sass-utilities/mixins.scss +108 -72
package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
package/sass-utilities/scss-variables.scss +49 -261
package/utilities/Accessibility/accessibility.css +15 -15
package/utilities/Accessibility/accessibility.scss +8 -6
package/utilities/Alignment/alignment.css +29 -29
package/utilities/Alignment/alignment.scss +6 -4
package/utilities/BackgroundColor/background-color.css +67 -0
package/utilities/BackgroundColor/background-color.scss +16 -0
package/utilities/BoxShadow/box-shadow.css +15 -39
package/utilities/BoxShadow/box-shadow.scss +19 -28
package/utilities/Display/display.css +43 -5
package/utilities/Display/display.scss +7 -4
package/utilities/Flex/flex.css +50 -50
package/utilities/Flex/flex.scss +21 -20
package/utilities/Float/float.css +29 -29
package/utilities/Float/float.scss +6 -6
package/utilities/Sizing/sizing.css +58 -58
package/utilities/Sizing/sizing.scss +23 -21
package/utilities/Spacing/spacing.css +1372 -1372
package/utilities/Spacing/spacing.scss +6 -6
package/utilities/Text/text.css +419 -662
package/utilities/Text/text.scss +81 -107
package/utilities/_index.css +7815 -0
package/utilities/_index.scss +10 -0
package/assets/images/pf-logo-small.svg +0 -23
package/assets/images/pf_logo_white.hbs +0 -35
package/assets/images/pfbg-icon.svg +0 -1
package/assets/pficon/pf-v5-pficon.woff2 +0 -0
package/base/_base.scss +0 -2
package/base/_chart-globals.scss +0 -415
package/base/_common.scss +0 -50
package/base/_fa-icons.scss +0 -33
package/base/_fonts.scss +0 -136
package/base/_icons.scss +0 -3
package/base/_pficons.scss +0 -2
package/base/_themes.scss +0 -43
package/base/_variables.scss +0 -299
package/base/patternfly-globals.css +0 -120
package/base/patternfly-globals.scss +0 -2
package/base/patternfly-icons.css +0 -4728
package/base/patternfly-icons.scss +0 -2
package/base/patternfly-themes.css +0 -82
package/base/patternfly-themes.scss +0 -2
package/base/themes/dark/_chart-globals.scss +0 -42
package/base/themes/dark/_globals.scss +0 -5
package/base/tokens/_workspace-overrides.scss +0 -7
package/components/AppLauncher/app-launcher.css +0 -244
package/components/AppLauncher/app-launcher.scss +0 -308
package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
package/components/Chip/chip-group.css +0 -93
package/components/Chip/chip-group.scss +0 -98
package/components/Chip/chip.css +0 -122
package/components/Chip/chip.scss +0 -140
package/components/Chip/themes/dark/chip.scss +0 -9
package/components/ContextSelector/context-selector.css +0 -336
package/components/ContextSelector/context-selector.scss +0 -384
package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
package/components/Dropdown/dropdown.css +0 -686
package/components/Dropdown/dropdown.scss +0 -820
package/components/Dropdown/themes/dark/dropdown.scss +0 -32
package/components/LogViewer/log-viewer.css +0 -197
package/components/LogViewer/log-viewer.scss +0 -226
package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
package/components/NotificationBadge/notification-badge.css +0 -87
package/components/NotificationBadge/notification-badge.scss +0 -108
package/components/OptionsMenu/options-menu.css +0 -279
package/components/OptionsMenu/options-menu.scss +0 -332
package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
package/components/Select/select.css +0 -599
package/components/Select/select.scss +0 -713
package/components/Select/themes/dark/select.scss +0 -23
package/components/_all.scss +0 -91
package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
package/docs/components/Chip/examples/Chip.md +0 -846
package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
package/docs/components/LogViewer/examples/LogViewer.css +0 -17
package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
package/docs/components/Page/deprecated/PageHeader.css +0 -17
package/docs/components/Page/deprecated/PageHeader.md +0 -261
package/docs/components/Pagination/examples/Pagination.css +0 -3
package/docs/components/Select/deprecated/Select.css +0 -56
package/docs/components/Select/deprecated/Select.md +0 -3525
package/docs/components/Tabs/examples/Tabs.css +0 -10
package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
package/docs/demos/Page/examples/Penta.md +0 -821
package/docs/utilities/Text/examples/Text.css +0 -0
package/layouts/_all.scss +0 -7
package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
package/patternfly-base-theme-dark-unversioned.css +0 -6393
package/patternfly-base-theme-dark-unversioned.scss +0 -5
package/patternfly-charts-theme-dark-unversioned.css +0 -70
package/patternfly-charts-theme-dark-unversioned.scss +0 -8
package/patternfly-charts-theme-dark.css +0 -70
package/patternfly-charts-theme-dark.scss +0 -8
package/patternfly-theme-dark-unversioned.css +0 -35533
package/patternfly-theme-dark-unversioned.scss +0 -6
package/patternfly-theme-dark.css +0 -0
package/patternfly-theme-dark.scss +0 -1
package/sass-utilities/_all.scss +0 -9
package/sass-utilities/colors.scss +0 -82
package/sass-utilities/div.import.scss +0 -3
package/sass-utilities/div.scss +0 -4
package/sass-utilities/placeholders.scss +0 -72
package/sass-utilities/themes/dark/_all.scss +0 -4
package/sass-utilities/themes/dark/colors.scss +0 -16
package/sass-utilities/themes/dark/mixins.scss +0 -7
package/sass-utilities/themes/dark/placeholders.scss +0 -5
package/sass-utilities/themes/dark/scss-variables.scss +0 -92
package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
package/utilities/BackgroundColor/BackgroundColor.css +0 -414
package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
package/utilities/Text/themes/dark/text.css +0 -0
package/utilities/Text/themes/dark/text.scss +0 -33

package/docs/components/Select/deprecated/Select.md DELETED Viewed

@@ -1,3525 +0,0 @@
----
-id: Select
-section: components
-subsection: menus
-cssPrefix: pf-v6-c-select
-deprecated: true
----import './Select.css'
-## Single
-### Single select
-```html
-<div class="pf-v6-c-select">
-  <span id="select-single-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-single-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-single-label select-single-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-single-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Single expanded
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-single-expanded-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-single-expanded-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-single-expanded-label select-single-expanded-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-single-expanded-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Single with top expanded
-```html
-<div class="pf-v6-c-select pf-m-expanded pf-m-top">
-  <span id="select-single-top-expanded-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-single-top-expanded-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-single-top-expanded-label select-single-top-expanded-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-single-top-expanded-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Single expanded and selected
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-single-expanded-selected-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-single-expanded-selected-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-single-expanded-selected-label select-single-expanded-selected-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">April</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-single-expanded-selected-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` |  Initiates a custom select. |
-| `.pf-v6-c-select__toggle` | `<button>` |  Initiates a custom toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates a custom select toggle wrapper. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the custom select dropdown menu. |
-| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the custom select dropdown menu. |
-| `.pf-v6-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
-| `.pf-m-top` | `.pf-v6-c-select` |  Modifies the select menu to display above the toggle. |
-| `.pf-m-align-right` | `.pf-v6-c-select__menu` |  Modifies the select menu to display right aligned to the toggle. |
-| `.pf-m-static` | `.pf-v6-c-select__menu` |  Modifies the select menu to be statically positioned to support custom positioning. |
-| `.pf-m-active` | `.pf-v6-c-select` | Forces display of the active state of the toggle. |
-## States
-### Disabled
-```html
-<div class="pf-v6-c-select">
-  <span id="select-disabled-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-disabled-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-disabled-label select-disabled-toggle"
-    disabled
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-disabled-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Success
-```html
-<div class="pf-v6-c-select pf-m-success">
-  <span id="select-success-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-success-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-success-label select-success-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-status-icon">
-      <i class="fas fa-check-circle" aria-hidden="true"></i>
-    </span>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-success-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Warning
-```html
-<div class="pf-v6-c-select pf-m-warning">
-  <span id="select-warning-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-warning-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-warning-label select-warning-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-status-icon">
-      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
-    </span>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-warning-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Invalid
-```html
-<div class="pf-v6-c-select pf-m-invalid">
-  <span id="select-invalid-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-invalid-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-invalid-label select-invalid-toggle"
-    aria-invalid="true"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-status-icon">
-      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-    </span>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-invalid-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Accessibility
-| Attribute | Applied to | Outcome |
-| -- | -- | -- |
-| `aria-invalid="true"` | `.pf-v6-c-select__toggle` | Indicates that the select is in the invalid state. |
-| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
-| `disabled` | `.pf-v6-c-select__toggle` | Disables the dropdown toggle and removes it from keyboard focus. |
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-v6-c-select__menu-item-icon` | `<span>` |  Initiates the selected item icon wrapper. |
-| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
-| `.pf-m-success` | `.pf-v6-c-select` | Modifies select component for the success state. |
-| `.pf-m-warning` | `.pf-v6-c-select` | Modifies select component for the warning state. |
-| `.pf-m-invalid` | `.pf-v6-c-select` | Modifies select component for the invalid state. |
-| `.pf-m-selected` | `.pf-v6-c-select__menu-item` |  Indicates the menu item is selected. |
-| `.pf-m-disabled` | `div.pf-v6-c-select__toggle` | Modifies to display the select toggle as disabled. This applies to `div.pf-v6-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-v6-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-v6-c-select__toggle`|
-## Typeahead
-### Single with typeahead
-```html
-<div class="pf-v6-c-select">
-  <span id="select-single-typeahead-label" hidden>Choose a state</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-single-typeahead-typeahead"
-          aria-label="Type to filter"
-          value
-          placeholder="Choose a state"
-        />
-      </span>
-    </div>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-single-typeahead-toggle"
-      aria-haspopup="true"
-      aria-expanded="false"
-      aria-labelledby="select-single-typeahead-label select-single-typeahead-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-single-typeahead-label"
-    role="listbox"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        New
-        &nbsp;Mexico
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;York
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
-    </li>
-  </ul>
-</div>
-```
-### Single with typeahead expanded
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-single-typeahead-expanded-label" hidden>Choose a state</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-single-typeahead-expanded-typeahead"
-          aria-label="Type to filter"
-          value="New"
-          placeholder="Choose a state"
-        />
-      </span>
-    </div>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
-      type="button"
-      aria-label="Clear all"
-    >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
-    </button>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-single-typeahead-expanded-toggle"
-      aria-haspopup="true"
-      aria-expanded="true"
-      aria-labelledby="select-single-typeahead-expanded-label select-single-typeahead-expanded-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-single-typeahead-expanded-label"
-    role="listbox"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        <mark class="pf-v6-c-select__menu-item--match">New</mark>
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        <mark class="pf-v6-c-select__menu-item--match">New</mark>
-        &nbsp;Mexico
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        <mark class="pf-v6-c-select__menu-item--match">New</mark>
-        &nbsp;York
-      </button>
-    </li>
-  </ul>
-</div>
-```
-### Single with typeahead expanded and selected
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span
-    id="select-single-typeahead-expanded-selected-label"
-    hidden
-  >Choose a state</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-single-typeahead-expanded-selected-typeahead"
-          aria-label="Type to filter"
-          value="New Mexico"
-          placeholder="Choose a state"
-        />
-      </span>
-    </div>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
-      type="button"
-      aria-label="Clear all"
-    >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
-    </button>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-single-typeahead-expanded-selected-toggle"
-      aria-haspopup="true"
-      aria-expanded="true"
-      aria-labelledby="select-single-typeahead-expanded-selected-label select-single-typeahead-expanded-selected-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-single-typeahead-expanded-selected-label"
-    role="listbox"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        New
-        &nbsp;Mexico
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;York
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
-    </li>
-  </ul>
-</div>
-```
-### Disabled with typeahead
-```html
-<div class="pf-v6-c-select">
-  <span id="select-single-typeahead-disabled-label" hidden>Choose a state</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead pf-m-disabled">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span
-        class="pf-v6-c-form-control pf-m-disabled pf-v5-c-select__toggle-typeahead"
-      >
-        <input
-          disabled
-          type="text"
-          id="select-single-typeahead-disabled-typeahead"
-          aria-label="Type to filter"
-          placeholder="Choose a state"
-        />
-      </span>
-    </div>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-single-typeahead-disabled-toggle"
-      aria-haspopup="true"
-      aria-expanded="false"
-      aria-labelledby="select-single-typeahead-disabled-label select-single-typeahead-disabled-toggle"
-      aria-label="Select"
-      disabled
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-single-typeahead-disabled-label"
-    role="listbox"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        New
-        &nbsp;Mexico
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;York
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
-    </li>
-  </ul>
-</div>
-```
-### Invalid with typeahead
-```html
-<div class="pf-v6-c-select pf-m-invalid">
-  <span id="select-single-typeahead-invalid-label" hidden>Choose a state</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-single-typeahead-invalid-typeahead"
-          aria-invalid="true"
-          value="Invalid"
-          aria-label="Type to filter"
-          placeholder="Choose a state"
-        />
-      </span>
-    </div>
-    <span class="pf-v6-c-select__toggle-status-icon">
-      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-    </span>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-single-typeahead-invalid-toggle"
-      aria-haspopup="true"
-      aria-expanded="false"
-      aria-labelledby="select-single-typeahead-invalid-label select-single-typeahead-invalid-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-single-typeahead-invalid-label"
-    role="listbox"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        New
-        &nbsp;Mexico
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;York
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
-    </li>
-  </ul>
-</div>
-```
-The single select typeahead should be used when the user is selecting one option from a list of items with the option to narrow the list by typing from the keyboard. Selected items are removed from the list. The user can clear the selection and restore the placeholder text.
-### Accessibility
-| Attribute | Applied to | Outcome |
-| -- | -- | -- |
-| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v6-c-select__toggle` | `<div>` |  Initiates the select toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` |  Initiates the input field for typeahead. |
-| `.pf-v6-c-select__toggle-clear` | `button.pf-v6-c-button.pf-m-plain` |  Initiates a clear button in the toggle. |
-| `.pf-v6-c-select__toggle-button` | `button.pf-v6-c-button.pf-m-plain` | Initiates a toggle button. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
-| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
-| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` |  Indicates the select has a typeahead. |
-| `.pf-m-focus` | `.pf-v6-c-select__menu-item` |  Modifies the menu item to apply `:focus` styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. |
-## Typeahead multiselect
-### Select multi with typeahead
-```html
-<div class="pf-v6-c-select">
-  <span id="select-multi-typeahead-label" hidden>Choose states</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-multi-typeahead-typeahead"
-          aria-label="Type to filter"
-          value
-          placeholder="Choose states"
-        />
-      </span>
-    </div>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-multi-typeahead-toggle"
-      aria-haspopup="true"
-      aria-expanded="false"
-      aria-labelledby="select-multi-typeahead-label select-multi-typeahead-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-multi-typeahead-label"
-    role="listbox"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;York
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
-    </li>
-  </ul>
-</div>
-```
-### Multi with typeahead (chip group expanded)
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-multi-typeahead-expanded-label" hidden>Choose states</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <div class="pf-v6-c-chip-group" role="group">
-        <div class="pf-v6-c-chip-group__main">
-          <ul
-            class="pf-v6-c-chip-group__list"
-            role="list"
-            aria-label="Chip group list"
-          >
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-chip_one"
-                  >Arkansas</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded_chip_one"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-chip_two"
-                  >Massachusetts</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded_chip_two"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-chip_three"
-                  >New Mexico</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded_chip_three"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-chip_four"
-                  >Ohio</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded_chip_four"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-chip_five"
-                  >Washington</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded_chip_five"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-multi-typeahead-expanded-typeahead"
-          aria-label="Type to filter"
-          value
-          placeholder="Choose states"
-        />
-      </span>
-    </div>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
-      type="button"
-      aria-label="Clear all"
-    >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
-    </button>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-multi-typeahead-expanded-toggle"
-      aria-haspopup="true"
-      aria-expanded="true"
-      aria-labelledby="select-multi-typeahead-expanded-label select-multi-typeahead-expanded-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-multi-typeahead-expanded-label"
-    role="listbox"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;York
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
-    </li>
-  </ul>
-</div>
-```
-### Multi with typeahead (chip group collapsed)
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-multi-typeahead-expanded-selected-label" hidden>Choose states</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <div class="pf-v6-c-chip-group" role="group">
-        <div class="pf-v6-c-chip-group__main">
-          <ul
-            class="pf-v6-c-chip-group__list"
-            role="list"
-            aria-label="Chip group list"
-          >
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-selected-chip_one"
-                  >Arkansas</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded-selected_chip_one"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-selected-chip_two"
-                  >Massachusetts</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded-selected_chip_two"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-expanded-selected-chip_three"
-                  >New Mexico</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-expanded-selected_chip_three"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <button class="pf-v6-c-chip pf-m-overflow">
-                <span class="pf-v6-c-chip__content">
-                  <span class="pf-v6-c-chip__text">2 more</span>
-                </span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-multi-typeahead-expanded-selected-typeahead"
-          aria-label="Type to filter"
-          value="New"
-          placeholder="Choose states"
-        />
-      </span>
-    </div>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
-      type="button"
-      aria-label="Clear all"
-    >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
-    </button>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-multi-typeahead-expanded-selected-toggle"
-      aria-haspopup="true"
-      aria-expanded="true"
-      aria-labelledby="select-multi-typeahead-expanded-selected-label select-multi-typeahead-expanded-selected-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-multi-typeahead-expanded-selected-label"
-    role="listbox"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        <mark class="pf-v6-c-select__menu-item--match">New</mark>
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        <mark class="pf-v6-c-select__menu-item--match">New</mark>
-        &nbsp;York
-      </button>
-    </li>
-  </ul>
-</div>
-```
-### Multi with typeahead invalid
-```html
-<div class="pf-v6-c-select pf-m-expanded pf-m-invalid">
-  <span id="select-multi-typeahead-invalid-label" hidden>Choose states</span>
-  <div class="pf-v6-c-select__toggle pf-m-typeahead">
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <div class="pf-v6-c-chip-group" role="group">
-        <div class="pf-v6-c-chip-group__main">
-          <ul
-            class="pf-v6-c-chip-group__list"
-            role="list"
-            aria-label="Chip group list"
-          >
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-invalid-chip_one"
-                  >Arkansas</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-invalid_chip_one"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-invalid-chip_two"
-                  >Massachusetts</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-invalid_chip_two"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-invalid-chip_three"
-                  >New Mexico</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-invalid_chip_three"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-invalid-chip_four"
-                  >Ohio</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-invalid_chip_four"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-            <li class="pf-v6-c-chip-group__list-item">
-              <div class="pf-v6-c-chip">
-                <span class="pf-v6-c-chip__content">
-                  <span
-                    class="pf-v6-c-chip__text"
-                    id="select-multi-typeahead-invalid-chip_five"
-                  >Washington</span>
-                </span>
-                <span class="pf-v6-c-chip__actions">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
-                    aria-label="Remove"
-                    id="remove_select-multi-typeahead-invalid_chip_five"
-                  >
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                  </button>
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
-        <input
-          type="text"
-          id="select-multi-typeahead-invalid-typeahead"
-          aria-invalid="true"
-          value="Invalid"
-          aria-label="Type to filter"
-          placeholder="Choose states"
-        />
-      </span>
-    </div>
-    <span class="pf-v6-c-select__toggle-status-icon">
-      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-    </span>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
-      type="button"
-      aria-label="Clear all"
-    >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
-    </button>
-    <button
-      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
-      type="button"
-      id="select-multi-typeahead-invalid-toggle"
-      aria-haspopup="true"
-      aria-expanded="true"
-      aria-labelledby="select-multi-typeahead-invalid-label select-multi-typeahead-invalid-toggle"
-      aria-label="Select"
-    >
-      <i
-        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
-        aria-hidden="true"
-      ></i>
-    </button>
-  </div>
-  <ul
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-multi-typeahead-invalid-label"
-    role="listbox"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;Jersey
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        New
-        &nbsp;York
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
-    </li>
-  </ul>
-</div>
-```
-The multiselect should be used when the user is selecting multiple items from a list. The user can narrow the list by typing from the keyboard. The List updates while typing. Selected items create a new chip and are removed from the list. The user may clear selections individually or all at once to restore the placeholder.
-### Accessibility
-| Attribute | Applied to | Outcome |
-| -- | -- | -- |
-| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v6-c-select__toggle` | `<div>` |  Initiates the select toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper so that chips and input field can wrap together. |
-| `.pf-v6-c-chip` | `<div>` |  Initiates a chip. (See [chip component](/components/chip) for more details) |
-| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` |  Initiates the input field for typeahead. |
-| `.pf-v6-c-select__toggle-clear` | `button.pf-m-plain` |  Initiates a clear button in the toggle. |
-| `.pf-v6-c-select__toggle-button` | `<button>` | Initiates a toggle button. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
-| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
-| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` |  Indicates the select has a typeahead. |
-## Checkbox
-### Checkbox select
-```html
-<div class="pf-v6-c-select">
-  <span id="select-checkbox-label" hidden>Choose many</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-checkbox-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-checkbox-label select-checkbox-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu" hidden>
-    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
-        id="select-checkbox-active"
-        for="select-checkbox-active-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          aria-describedby="select-checkbox-active-description"
-          id="select-checkbox-active-input"
-          name="select-checkbox-active-input"
-        />
-        <span class="pf-v6-c-check__label">Active</span>
-        <span
-          class="pf-v6-c-check__description"
-          id="select-checkbox-active-description"
-        >This is a description</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
-        id="select-checkbox-canceled"
-        for="select-checkbox-canceled-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          aria-describedby="select-checkbox-canceled-description"
-          id="select-checkbox-canceled-input"
-          name="select-checkbox-canceled-input"
-        />
-        <span class="pf-v6-c-check__label">Canceled</span>
-        <span
-          class="pf-v6-c-check__description"
-          id="select-checkbox-canceled-description"
-        >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-paused"
-        for="select-checkbox-paused-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-paused-input"
-          name="select-checkbox-paused-input"
-        />
-        <span class="pf-v6-c-check__label">Paused</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-warning"
-        for="select-checkbox-warning-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-warning-input"
-          name="select-checkbox-warning-input"
-        />
-        <span class="pf-v6-c-check__label">Warning</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-restarted"
-        for="select-checkbox-restarted-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-restarted-input"
-          name="select-checkbox-restarted-input"
-        />
-        <span class="pf-v6-c-check__label">Restarted</span>
-      </label>
-    </fieldset>
-  </div>
-</div>
-```
-### Checkbox expanded
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-checkbox-expanded-label" hidden>Choose many</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-checkbox-expanded-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-checkbox-expanded-label select-checkbox-expanded-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu">
-    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-expanded-check-active"
-        for="select-checkbox-expanded-check-active-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-expanded-check-active-input"
-          name="select-checkbox-expanded-check-active-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">Active</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-expanded-check-canceled"
-        for="select-checkbox-expanded-check-canceled-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-expanded-check-canceled-input"
-          name="select-checkbox-expanded-check-canceled-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">Canceled</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-expanded-check-paused"
-        for="select-checkbox-expanded-check-paused-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-expanded-check-paused-input"
-          name="select-checkbox-expanded-check-paused-input"
-        />
-        <span class="pf-v6-c-check__label">Paused</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-expanded-check-warning"
-        for="select-checkbox-expanded-check-warning-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-expanded-check-warning-input"
-          name="select-checkbox-expanded-check-warning-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">Warning</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-expanded-check-restarted"
-        for="select-checkbox-expanded-check-restarted-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-expanded-check-restarted-input"
-          name="select-checkbox-expanded-check-restarted-input"
-        />
-        <span class="pf-v6-c-check__label">Restarted</span>
-      </label>
-    </fieldset>
-  </div>
-</div>
-```
-### Checkbox expanded and selected with groups
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-checkbox-expanded-selected-label" hidden>Choose many</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-checkbox-expanded-selected-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-checkbox-expanded-selected-label select-checkbox-expanded-selected-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu">
-    <div class="pf-v6-c-select__menu-group">
-      <div
-        class="pf-v6-c-select__menu-group-title"
-        aria-hidden="true"
-        id="select-checkbox-expanded-selected-group-status"
-      >Status</div>
-      <fieldset
-        class="pf-v6-c-select__menu-fieldset"
-        aria-labelledby="select-checkbox-expanded-selected-group-status"
-      >
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-running"
-          for="select-checkbox-expanded-selected-check-running-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-running-input"
-            name="select-checkbox-expanded-selected-check-running-input"
-          />
-          <span class="pf-v6-c-check__label">Running</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-stopped"
-          for="select-checkbox-expanded-selected-check-stopped-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-stopped-input"
-            name="select-checkbox-expanded-selected-check-stopped-input"
-          />
-          <span class="pf-v6-c-check__label">Stopped</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-down"
-          for="select-checkbox-expanded-selected-check-down-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-down-input"
-            name="select-checkbox-expanded-selected-check-down-input"
-          />
-          <span class="pf-v6-c-check__label">Down</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-degraded"
-          for="select-checkbox-expanded-selected-check-degraded-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-degraded-input"
-            name="select-checkbox-expanded-selected-check-degraded-input"
-          />
-          <span class="pf-v6-c-check__label">Degraded</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-needs-maintenance"
-          for="select-checkbox-expanded-selected-check-needs-maintenance-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-needs-maintenance-input"
-            name="select-checkbox-expanded-selected-check-needs-maintenance-input"
-            checked
-          />
-          <span class="pf-v6-c-check__label">Needs maintenance</span>
-        </label>
-      </fieldset>
-    </div>
-    <div class="pf-v6-c-select__menu-group">
-      <div
-        class="pf-v6-c-select__menu-group-title"
-        aria-hidden="true"
-        id="select-checkbox-expanded-selected-group-vendor"
-      >Vendor</div>
-      <fieldset
-        class="pf-v6-c-select__menu-fieldset"
-        aria-labelledby="select-checkbox-expanded-selected-group-vendor"
-      >
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-dell"
-          for="select-checkbox-expanded-selected-check-dell-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-dell-input"
-            name="select-checkbox-expanded-selected-check-dell-input"
-          />
-          <span class="pf-v6-c-check__label">Dell</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-Samsung"
-          for="select-checkbox-expanded-selected-check-Samsung-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-Samsung-input"
-            name="select-checkbox-expanded-selected-check-Samsung-input"
-            disabled
-          />
-          <span class="pf-v6-c-check__label pf-m-disabled">Samsung</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-check-Hp"
-          for="select-checkbox-expanded-selected-check-Hp-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-check-Hp-input"
-            name="select-checkbox-expanded-selected-check-Hp-input"
-          />
-          <span class="pf-v6-c-check__label">Hewlett-Packard</span>
-        </label>
-      </fieldset>
-    </div>
-  </div>
-</div>
-```
-### Checkbox expanded and selected with groups and filter
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span
-    id="select-checkbox-expanded-selected-filter-example-label"
-    hidden
-  >Choose many</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-checkbox-expanded-selected-filter-example-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-checkbox-expanded-selected-filter-example-label select-checkbox-expanded-selected-filter-example-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu">
-    <div class="pf-v6-c-select__menu-search">
-      <div class="pf-v6-c-text-input-group">
-        <div class="pf-v6-c-text-input-group__main pf-m-icon">
-          <span class="pf-v6-c-text-input-group__text">
-            <span class="pf-v6-c-text-input-group__icon">
-              <i class="fas fa-fw fa-search"></i>
-            </span>
-            <input
-              class="pf-v6-c-text-input-group__text-input"
-              type="text"
-              placeholder="Search"
-              value
-              aria-label="Search input"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-    <hr class="pf-v6-c-divider" />
-    <div class="pf-v6-c-select__menu-group">
-      <div
-        class="pf-v6-c-select__menu-group-title"
-        aria-hidden="true"
-        id="select-checkbox-expanded-selected-filter-example-group-status"
-      >Status</div>
-      <fieldset
-        class="pf-v6-c-select__menu-fieldset"
-        aria-labelledby="select-checkbox-expanded-selected-filter-example-group-status"
-      >
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-running"
-          for="select-checkbox-expanded-selected-filter-example-check-running-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-running-input"
-            name="select-checkbox-expanded-selected-filter-example-check-running-input"
-          />
-          <span class="pf-v6-c-check__label">Running</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-stopped"
-          for="select-checkbox-expanded-selected-filter-example-check-stopped-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-stopped-input"
-            name="select-checkbox-expanded-selected-filter-example-check-stopped-input"
-          />
-          <span class="pf-v6-c-check__label">Stopped</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-down"
-          for="select-checkbox-expanded-selected-filter-example-check-down-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-down-input"
-            name="select-checkbox-expanded-selected-filter-example-check-down-input"
-          />
-          <span class="pf-v6-c-check__label">Down</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-degraded"
-          for="select-checkbox-expanded-selected-filter-example-check-degraded-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-degraded-input"
-            name="select-checkbox-expanded-selected-filter-example-check-degraded-input"
-          />
-          <span class="pf-v6-c-check__label">Degraded</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance"
-          for="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
-            name="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
-            checked
-          />
-          <span class="pf-v6-c-check__label">Needs maintenance</span>
-        </label>
-      </fieldset>
-    </div>
-    <div class="pf-v6-c-select__menu-group">
-      <div
-        class="pf-v6-c-select__menu-group-title"
-        aria-hidden="true"
-        id="select-checkbox-expanded-selected-filter-example-group-vendor"
-      >Vendor</div>
-      <fieldset
-        class="pf-v6-c-select__menu-fieldset"
-        aria-labelledby="select-checkbox-expanded-selected-filter-example-group-vendor"
-      >
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-dell"
-          for="select-checkbox-expanded-selected-filter-example-check-dell-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-dell-input"
-            name="select-checkbox-expanded-selected-filter-example-check-dell-input"
-          />
-          <span class="pf-v6-c-check__label">Dell</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-Samsung"
-          for="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
-            name="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
-            disabled
-          />
-          <span class="pf-v6-c-check__label pf-m-disabled">Samsung</span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v5-c-select__menu-item"
-          id="select-checkbox-expanded-selected-filter-example-check-Hp"
-          for="select-checkbox-expanded-selected-filter-example-check-Hp-input"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            type="checkbox"
-            id="select-checkbox-expanded-selected-filter-example-check-Hp-input"
-            name="select-checkbox-expanded-selected-filter-example-check-Hp-input"
-          />
-          <span class="pf-v6-c-check__label">Hewlett-Packard</span>
-        </label>
-      </fieldset>
-    </div>
-  </div>
-</div>
-```
-### Checkbox expanded without badge
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-checkbox-without-badge-label" hidden>Choose many</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-checkbox-without-badge-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-checkbox-without-badge-label select-checkbox-without-badge-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu">
-    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-without-badge-check-active"
-        for="select-checkbox-without-badge-check-active-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-without-badge-check-active-input"
-          name="select-checkbox-without-badge-check-active-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">Active</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-without-badge-check-canceled"
-        for="select-checkbox-without-badge-check-canceled-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-without-badge-check-canceled-input"
-          name="select-checkbox-without-badge-check-canceled-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">Canceled</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-without-badge-check-paused"
-        for="select-checkbox-without-badge-check-paused-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-without-badge-check-paused-input"
-          name="select-checkbox-without-badge-check-paused-input"
-        />
-        <span class="pf-v6-c-check__label">Paused</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-without-badge-check-warning"
-        for="select-checkbox-without-badge-check-warning-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-without-badge-check-warning-input"
-          name="select-checkbox-without-badge-check-warning-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">Warning</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-without-badge-check-restarted"
-        for="select-checkbox-without-badge-check-restarted-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-without-badge-check-restarted-input"
-          name="select-checkbox-without-badge-check-restarted-input"
-        />
-        <span class="pf-v6-c-check__label">Restarted</span>
-      </label>
-    </fieldset>
-  </div>
-</div>
-```
-### Checkbox with counts
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-checkbox-counts-label" hidden>Choose many</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-checkbox-counts-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-checkbox-counts-label select-checkbox-counts-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu">
-    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-counts-active"
-        for="select-checkbox-counts-active-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-counts-active-input"
-          name="select-checkbox-counts-active-input"
-        />
-        <span class="pf-v6-c-check__label">
-          <span class="pf-v6-c-select__menu-item-row">
-            <span class="pf-v6-c-select__menu-item-text">Active</span>
-            <span class="pf-v6-c-select__menu-item-count">3</span>
-          </span>
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-counts-canceled"
-        for="select-checkbox-counts-canceled-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-counts-canceled-input"
-          name="select-checkbox-counts-canceled-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">
-          <span class="pf-v6-c-select__menu-item-row">
-            <span class="pf-v6-c-select__menu-item-text">Canceled</span>
-            <span class="pf-v6-c-select__menu-item-count">1</span>
-          </span>
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-counts-paused"
-        for="select-checkbox-counts-paused-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-counts-paused-input"
-          name="select-checkbox-counts-paused-input"
-        />
-        <span class="pf-v6-c-check__label">
-          <span class="pf-v6-c-select__menu-item-row">
-            <span class="pf-v6-c-select__menu-item-text">Paused</span>
-            <span class="pf-v6-c-select__menu-item-count">15</span>
-          </span>
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-counts-warning"
-        for="select-checkbox-counts-warning-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-counts-warning-input"
-          name="select-checkbox-counts-warning-input"
-          checked
-        />
-        <span class="pf-v6-c-check__label">
-          <span class="pf-v6-c-select__menu-item-row">
-            <span class="pf-v6-c-select__menu-item-text">Warning</span>
-            <span class="pf-v6-c-select__menu-item-count">2</span>
-          </span>
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-counts-restarted"
-        for="select-checkbox-counts-restarted-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-counts-restarted-input"
-          name="select-checkbox-counts-restarted-input"
-        />
-        <span class="pf-v6-c-check__label">
-          <span class="pf-v6-c-select__menu-item-row">
-            <span class="pf-v6-c-select__menu-item-text">Restarted</span>
-            <span class="pf-v6-c-select__menu-item-count">8</span>
-          </span>
-        </span>
-      </label>
-    </fieldset>
-  </div>
-</div>
-```
-The checkbox select can select multiple items using checkboxes. The number of items selected is reflected in an optional badge in the dropdown toggle. The user may clear items by unchecking or using the clear button. Optionally, items may be grouped.
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
-| `.pf-v6-c-select__toggle` | `<button>` | Initiates the select toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper so that chips and input field can wrap together. |
-| `.pf-v6-c-chip` | `<div>` | Initiates a chip. (See [chip component](/components/chip) for more details) |
-| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` |  Initiates the input field for typeahead. |
-| `.pf-v6-c-select__toggle-badge` | `<div>` | Initiates a container for a badge to indicate the number of items checked. \* note: This should contain an unread badge \* |
-| `.pf-v6-c-select__toggle-clear` | `button.pf-m-plain` | Initiates a clear button in the toggle. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
-| `.pf-v6-c-select__menu` | `<div>` | Initiates the select dropdown menu. |
-| `.pf-v6-c-select__menu-item` | `div.pf-v6-c-check` | Initiates the items in the select dropdown menu. |
-| `.pf-v6-c-select__menu-item-row` | `<span>` | Initiates a menu item row for use with positioning other elements before/after the item text. |
-| `.pf-v6-c-select__menu-item-text` | `<span>` | Initiates the menu item row text. |
-| `.pf-v6-c-select__menu-item-count` | `<span>` | Initiates the menu item row count. |
-| `.pf-v6-c-select__menu-fieldset` | `<fieldset>` | Initiates a fieldset for the items in a checkbox select. |
-| `.pf-v6-c-select__menu-group` | `<div>` | Initiates a group within a select menu. |
-| `.pf-v6-c-select__menu-group-title` | `<div>` | Initiates a title for a group with a select menu. |
-| `.pf-v6-c-select__menu-search` | `<div>` | Initiates a container for the search input group. |
-| `.pf-m-expanded` | `.pf-v6-c-select` | Indicates the select is expanded. |
-| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` | Indicates the select has a typeahead. |
-## Plain
-### Plain toggle
-```html
-<div class="pf-v6-c-select">
-  <span id="select-plain-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle pf-m-plain"
-    type="button"
-    id="select-plain-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-plain-label select-plain-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-plain-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Plain toggle expanded
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-plain-expanded-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle pf-m-plain"
-    type="button"
-    id="select-plain-expanded-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-plain-expanded-label select-plain-expanded-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-plain-expanded-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-The plain select variation should be used when you do not want a border applied to the select toggle.
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-v6-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
-| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
-| `.pf-m-plain` | `.pf-v6-c-select__toggle` |  Modifies to display the toggle with no border. |
-| `.pf-m-selected` | `.pf-v6-c-select__menu-item` |  Indicates the menu item is selected. |
-## Icon
-### Toggle icon
-```html
-<div class="pf-v6-c-select">
-  <span id="select-icon-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-icon-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-icon-label select-icon-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-icon">
-        <i class="fas fa-filter" aria-hidden="true"></i>
-      </span>
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-icon-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Accessibility
-| Attribute | Applied to | Outcome |
-| -- | -- | -- |
-| `aria-hidden="true"` | `.pf-v6-c-select__toggle-icon` | Hides the icon from assistive technologies.
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v6-c-select__toggle-icon` | `<span>` |  Initiates the icon in the dropdown toggle. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-## Panel
-### Panel menu
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-panel-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-panel-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-panel-label select-panel-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div
-    class="pf-v6-c-select__menu"
-    aria-labelledby="select-panel-label"
-  >[Panel contents here]</div>
-</div>
-```
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v6-c-select__menu` | `<div>` |  Initiates the select dropdown menu. |
-## Description
-### Item description
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-with-description-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-with-description-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-with-description-label select-with-description-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Select with description</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-with-description-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Menu item</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item pf-m-description" role="option">
-        <span class="pf-v6-c-select__menu-item-main">Menu item description</span>
-        <span
-          class="pf-v6-c-select__menu-item-description"
-        >This is a description.</span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-description"
-        role="option"
-        disabled
-      >
-        <span class="pf-v6-c-select__menu-item-main">
-          <span
-            class="pf-v6-c-select__menu-item-main"
-          >Menu item description disabled</span>
-        </span>
-        <span
-          class="pf-v6-c-select__menu-item-description"
-        >This is a description.</span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected pf-m-description"
-        role="option"
-        aria-selected="true"
-      >
-        <span class="pf-v6-c-select__menu-item-main">
-          Menu item description selected
-          <span
-            class="pf-v6-c-select__menu-item-icon"
-          >
-            <i class="fas fa-check" aria-hidden="true"></i>
-          </span>
-        </span>
-        <span
-          class="pf-v6-c-select__menu-item-description"
-        >This is a description.</span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item pf-m-description" role="option">
-        <span class="pf-v6-c-select__menu-item-main">Menu item long description</span>
-        <span
-          class="pf-v6-c-select__menu-item-description"
-        >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
-      </button>
-    </li>
-  </ul>
-</div>
-```
-### Checkbox item description
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-checkbox-description-label" hidden>Choose many</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-checkbox-description-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-checkbox-description-label select-checkbox-description-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu">
-    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
-        id="select-checkbox-description-active"
-        for="select-checkbox-description-active-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          aria-describedby="select-checkbox-description-active-description"
-          id="select-checkbox-description-active-input"
-          name="select-checkbox-description-active-input"
-        />
-        <span class="pf-v6-c-check__label">Active</span>
-        <span
-          class="pf-v6-c-check__description"
-          id="select-checkbox-description-active-description"
-        >This is a description</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
-        id="select-checkbox-description-canceled"
-        for="select-checkbox-description-canceled-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          aria-describedby="select-checkbox-description-canceled-description"
-          id="select-checkbox-description-canceled-input"
-          name="select-checkbox-description-canceled-input"
-        />
-        <span class="pf-v6-c-check__label">Canceled</span>
-        <span
-          class="pf-v6-c-check__description"
-          id="select-checkbox-description-canceled-description"
-        >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-description-paused"
-        for="select-checkbox-description-paused-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-description-paused-input"
-          name="select-checkbox-description-paused-input"
-        />
-        <span class="pf-v6-c-check__label">Paused</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-description-warning"
-        for="select-checkbox-description-warning-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-description-warning-input"
-          name="select-checkbox-description-warning-input"
-        />
-        <span class="pf-v6-c-check__label">Warning</span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v5-c-select__menu-item"
-        id="select-checkbox-description-restarted"
-        for="select-checkbox-description-restarted-input"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          type="checkbox"
-          id="select-checkbox-description-restarted-input"
-          name="select-checkbox-description-restarted-input"
-        />
-        <span class="pf-v6-c-check__label">Restarted</span>
-      </label>
-    </fieldset>
-  </div>
-</div>
-```
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select__menu-item-description` | `<span>` |  Initiates the select menu item description element. |
-| `.pf-v6-c-select__menu-item-main` | `<span>` | Initiates the select menu item main element. Used when the description element is present. |
-| `.pf-m-description` | `.pf-v6-c-select__menu-item` | Modifies the select menu item when selected to accommodate the description element. |
-## Favorites
-### Menu item favorites
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-favorites-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-favorites-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-favorites-label select-favorites-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Favorites</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu" aria-labelledby="select-favorites-label">
-    <div class="pf-v6-c-select__menu-search">
-      <div class="pf-v6-c-text-input-group">
-        <div class="pf-v6-c-text-input-group__main pf-m-icon">
-          <span class="pf-v6-c-text-input-group__text">
-            <span class="pf-v6-c-text-input-group__icon">
-              <i class="fas fa-fw fa-search"></i>
-            </span>
-            <input
-              class="pf-v6-c-text-input-group__text-input"
-              type="text"
-              placeholder="Search"
-              value
-              aria-label="Search input"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-    <hr class="pf-v6-c-divider" />
-    <div class="pf-v6-c-select__menu-group">
-      <div
-        class="pf-v6-c-select__menu-group-title"
-        aria-hidden="true"
-        id="select-favorites-group-title-1"
-      >Favorites</div>
-      <ul role="listbox" aria-labelledby="select-favorites-group-title-1">
-        <li
-          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
-          role="presentation"
-        >
-          <button
-            class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
-            role="option"
-          >
-            <span class="pf-v6-c-select__menu-item-main">Item 1</span>
-            <span
-              class="pf-v6-c-select__menu-item-description"
-            >This is a description.</span>
-          </button>
-          <button
-            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            role="option"
-            aria-label="Starred"
-          >
-            <span class="pf-v6-c-select__menu-item-action-icon">
-              <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-        <li
-          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
-          role="presentation"
-        >
-          <button
-            class="pf-v6-c-select__menu-item pf-m-link"
-            role="option"
-          >Item 4</button>
-          <button
-            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            role="option"
-            aria-label="Starred"
-          >
-            <span class="pf-v6-c-select__menu-item-action-icon">
-              <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-      </ul>
-    </div>
-    <hr class="pf-v6-c-divider" />
-    <div class="pf-v6-c-select__menu-group">
-      <div
-        class="pf-v6-c-select__menu-group-title"
-        aria-hidden="true"
-        id="select-favorites-group-title-2"
-      >Group 1</div>
-      <ul role="listbox" aria-labelledby="select-favorites-group-title-2">
-        <li
-          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
-          role="presentation"
-        >
-          <button
-            class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
-            role="option"
-          >
-            <span class="pf-v6-c-select__menu-item-main">Item 1</span>
-            <span
-              class="pf-v6-c-select__menu-item-description"
-            >This is a description.</span>
-          </button>
-          <button
-            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            role="option"
-            aria-label="Starred"
-          >
-            <span class="pf-v6-c-select__menu-item-action-icon">
-              <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-        <li class="pf-v6-c-select__menu-wrapper" role="presentation">
-          <button
-            class="pf-v6-c-select__menu-item pf-m-selected pf-m-link"
-            role="option"
-            aria-selected="true"
-          >
-            Item 2
-            <span class="pf-v6-c-select__menu-item-icon">
-              <i class="fas fa-check" aria-hidden="true"></i>
-            </span>
-          </button>
-          <button
-            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            role="option"
-            aria-label="Not starred"
-          >
-            <span class="pf-v6-c-select__menu-item-action-icon">
-              <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-        <li
-          class="pf-v6-c-select__menu-wrapper pf-m-disabled"
-          role="presentation"
-        >
-          <button
-            class="pf-v6-c-select__menu-item pf-m-link"
-            role="option"
-            disabled
-          >Item 3 (disabled)</button>
-          <button
-            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            role="option"
-            disabled
-            aria-label="Not starred"
-          >
-            <span class="pf-v6-c-select__menu-item-action-icon">
-              <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-      </ul>
-    </div>
-    <hr class="pf-v6-c-divider" />
-    <div class="pf-v6-c-select__menu-group">
-      <div
-        class="pf-v6-c-select__menu-group-title"
-        aria-hidden="true"
-        id="select-favorites-group-title-3"
-      >Group 2</div>
-      <ul role="listbox" aria-labelledby="select-favorites-group-title-3">
-        <li
-          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
-          role="presentation"
-        >
-          <button
-            class="pf-v6-c-select__menu-item pf-m-link"
-            role="option"
-          >Item 4</button>
-          <button
-            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            role="option"
-            aria-label="Starred"
-          >
-            <span class="pf-v6-c-select__menu-item-action-icon">
-              <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-        <li class="pf-v6-c-select__menu-wrapper" role="presentation">
-          <button
-            class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
-            role="option"
-          >
-            <span class="pf-v6-c-select__menu-item-main">Item 5</span>
-            <span
-              class="pf-v6-c-select__menu-item-description"
-            >This is a description.</span>
-          </button>
-          <button
-            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            role="option"
-            aria-label="Not starred"
-          >
-            <span class="pf-v6-c-select__menu-item-action-icon">
-              <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-```
-### Accessibility
-| Attribute | Applied to | Outcome |
-| -- | -- | -- |
-| `aria-label="Not starred"` | `.pf-v6-c-select__menu-wrapper > .pf-v6-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is not selected. |
-| `aria-label="Starred"` | `.pf-v6-c-select__menu-wrapper.pf-m-favorite > .pf-v6-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is selected. |
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
-| `.pf-m-favorite` | `.pf-v6-c-select__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
-| `.pf-m-favorite-action` | `.pf-v6-c-select__menu-item` | Modifies an item for favorite styles. |
-| `.pf-m-link` | `.pf-v6-c-select__menu-item.pf-m-wrapper > .pf-v6-c-select__menu-item` | Modifies item for link styles. |
-| `.pf-m-action` | `.pf-v6-c-select__menu-item.pf-m-wrapper > .pf-v6-c-select__menu-item` | Modifies item to for action styles. |
-## View more
-### View more menu item
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-single-view-more-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-single-view-more-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-single-view-more-label select-single-view-more-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-single-view-more-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-load"
-        role="option"
-      >View more</button>
-    </li>
-  </ul>
-</div>
-```
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-m-load` | `.pf-v6-c-select__menu-item` | Modifies a menu item for load styles. |
-## Loading
-### Loading menu item
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-single-loading-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-single-loading-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-single-loading-label select-single-loading-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-single-loading-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-    <li role="presentation" class="pf-v6-c-select__list-item pf-m-loading">
-      <button class="pf-v6-c-select__menu-item" role="option">
-        <svg
-          class="pf-v6-c-spinner pf-m-lg"
-          role="progressbar"
-          viewBox="0 0 100 100"
-          aria-label="Loading items"
-        >
-          <circle
-            class="pf-v6-c-spinner__path"
-            cx="50"
-            cy="50"
-            r="45"
-            fill="none"
-          />
-        </svg>
-      </button>
-    </li>
-  </ul>
-</div>
-```
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select__list-item` | `<li>` | Defines a list item element in the select menu. |
-| `.pf-m-loading` | `.pf-v6-c-select__list-item` | Modifies a list item for loading styles. |
-## Footer
-### Menu footer
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-single-footer-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle"
-    type="button"
-    id="select-single-footer-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-single-footer-label select-single-footer-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <div class="pf-v6-c-select__menu">
-    <ul
-      class="pf-v6-c-select__menu-list"
-      role="listbox"
-      aria-labelledby="select-single-footer-label"
-    >
-      <li role="presentation">
-        <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-      </li>
-      <li role="presentation">
-        <button
-          class="pf-v6-c-select__menu-item pf-m-selected"
-          role="option"
-          aria-selected="true"
-        >
-          Stopped
-          <span class="pf-v6-c-select__menu-item-icon">
-            <i class="fas fa-check" aria-hidden="true"></i>
-          </span>
-        </button>
-      </li>
-      <li role="presentation">
-        <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-      </li>
-      <li role="presentation">
-        <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-      </li>
-      <li role="presentation">
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-        >Needs maintenance</button>
-      </li>
-    </ul>
-    <div class="pf-v6-c-select__menu-footer">
-      <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Action</button>
-    </div>
-  </div>
-</div>
-```
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-select__menu-footer` | `<div>` | Defines a menu footer. |
-| `.pf-v6-c-select__menu-list` | `<ul>` | Defines the menu list when the list is placed in `div.pf-v6-c-select__menu`. |
-## Placeholder
-### Placeholder collapsed
-```html
-<div class="pf-v6-c-select">
-  <span id="select-placeholder-collapsed-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle pf-m-placeholder"
-    type="button"
-    id="select-placeholder-collapsed-toggle"
-    aria-haspopup="true"
-    aria-expanded="false"
-    aria-labelledby="select-placeholder-collapsed-label select-placeholder-collapsed-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-placeholder-collapsed-label"
-    hidden
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Placeholder expanded
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-placeholder-expanded-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle pf-m-placeholder"
-    type="button"
-    id="select-placeholder-expanded-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-placeholder-expanded-label select-placeholder-expanded-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-placeholder-expanded-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Placeholder item disabled
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-placeholder-item-disabled-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle pf-m-placeholder"
-    type="button"
-    id="select-placeholder-item-disabled-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-placeholder-item-disabled-label select-placeholder-item-disabled-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-placeholder-item-disabled-label"
-  >
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item"
-        role="option"
-        disabled
-      >Filter by status</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Placeholder item enabled
-```html
-<div class="pf-v6-c-select pf-m-expanded">
-  <span id="select-placeholder-item-enabled-label" hidden>Choose one</span>
-  <button
-    class="pf-v6-c-select__toggle pf-m-placeholder"
-    type="button"
-    id="select-placeholder-item-enabled-toggle"
-    aria-haspopup="true"
-    aria-expanded="true"
-    aria-labelledby="select-placeholder-item-enabled-label select-placeholder-item-enabled-toggle"
-  >
-    <div class="pf-v6-c-select__toggle-wrapper">
-      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
-    </div>
-    <span class="pf-v6-c-select__toggle-arrow">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </span>
-  </button>
-  <ul
-    class="pf-v6-c-select__menu"
-    role="listbox"
-    aria-labelledby="select-placeholder-item-enabled-label"
-  >
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Filter by status</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-    </li>
-    <li role="presentation">
-      <button
-        class="pf-v6-c-select__menu-item pf-m-selected"
-        role="option"
-        aria-selected="true"
-      >
-        Stopped
-        <span class="pf-v6-c-select__menu-item-icon">
-          <i class="fas fa-check" aria-hidden="true"></i>
-        </span>
-      </button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-    </li>
-    <li role="presentation">
-      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
-    </li>
-  </ul>
-</div>
-```
-### Usage
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-m-placeholder` | `.pf-v6-c-select__toggle` | Modifies the toggle for placeholder styles. |
-## Documentation
-### Overview
-There are 4 variants of the select component: single select, single select with typeahead, multiple select with typeahead, and a multiple checkbox select. See the examples for more details about each variation.
-The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.