@patternfly/elements 4.0.2 → 4.2.0

package/pf-dropdown/pf-dropdown.js

@@ -15,7 +15,351 @@ import { PfDropdownItem } from './pf-dropdown-item.js';
 import { PfDropdownMenu } from './pf-dropdown-menu.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: inline-block;\n  position: relative;\n  --pf-c-dropdown__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);\n  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);\n  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--MinWidth: 0;\n  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);\n  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-dropdown__toggle--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-dropdown__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n  --pf-c-dropdown__toggle--BackgroundColor: transparent;\n  --pf-c-dropdown__toggle--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);\n  --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);\n  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);\n  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);\n  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n  --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);\n  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-global--Color--200, #6a6e73);\n  --pf-c-dropdown__toggle--m-plain--hover--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-dropdown__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);\n  --pf-c-dropdown__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-dropdown__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-dropdown__toggle--m-plain--child--LineHeight: normal;\n  --pf-c-dropdown__toggle--m-primary--Color: var(--pf-global--Color--light-100, #fff);\n  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n  --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;\n  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-dropdown__toggle-progress--Visibility: hidden;\n  --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);\n  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);\n  --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-dropdown__toggle--m-split-button--child--BackgroundColor: transparent;\n  --pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;\n  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200, #004080);\n  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100, #06c);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;\n  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200, #6a6e73);\n  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);\n  --pf-c-dropdown__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n  --pf-c-dropdown__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-dropdown__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);\n  --pf-c-dropdown--m-top__menu--Top: 0;\n  --pf-c-dropdown--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-dropdown__menu-item--BackgroundColor: transparent;\n  --pf-c-dropdown__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-dropdown__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-dropdown__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);\n  --pf-c-dropdown__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-dropdown__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n  --pf-c-dropdown__menu-item--Color: var(--pf-global--Color--dark-100, #151515);\n  --pf-c-dropdown__menu-item--hover--Color: var(--pf-global--Color--dark-100, #151515);\n  --pf-c-dropdown__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);\n  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);\n  --pf-c-dropdown__menu-item--disabled--BackgroundColor: transparent;\n  --pf-c-dropdown__menu-item--m-text--Color: var(--pf-global--Color--dark-200, #6a6e73);\n  --pf-c-dropdown__menu-item-icon--MarginRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg, 1.5rem);\n  --pf-c-dropdown__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg, 1.5rem);\n  --pf-c-dropdown__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);\n  --pf-c-dropdown__menu-item-description--Color: var(--pf-global--Color--dark-200, #6a6e73);\n  --pf-c-dropdown__group--group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__group-title--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);\n  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);\n  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);\n  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);\n  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);\n  --pf-c-dropdown__toggle-image--MarginTop: 0;\n  --pf-c-dropdown__toggle-image--MarginBottom: 0;\n  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;\n  --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-dropdown--c-menu--ZIndex: var(--pf-global--ZIndex--sm, 200);\n  --pf-c-dropdown--m-top--c-menu--Top: 0;\n  --pf-c-dropdown--m-top--c-menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth: 0;\n  --pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);\n  --pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);\n  --pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);\n  --pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);\n  --pf-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n  --pf-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n  --_font-size: var(\n    --pf-c-dropdown__menu-item--FontSize,\n    var(--pf-global--FontSize--md, 1rem)\n  );\n  --_font-weight: var(\n    --pf-c-dropdown__menu-item--FontWeight,\n    var(--pf-global--FontWeight--normal, 400)\n  );\n  --_line-height: var(\n    --pf-c-dropdown__menu-item--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5)\n  );\n  --_color: var(\n    --pf-c-dropdown__menu-item--Color,\n    var(--pf-global--Color--dark-100, #151515)\n  );\n  --_background-color: var(\n    --pf-c-dropdown__menu-item--BackgroundColor,\n    transparent\n  );\n}\n\n:host([disabled]) {\n  color: var(--pf-global--Color--dark-200, #6a6e73);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\nslot[name="toggle"] {\n  cursor: pointer;\n}\n\npf-button#default-toggle,\n::slotted([slot="toggle"]) {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-width: var(--pf-c-dropdown__toggle--MinWidth);\n  max-width: 100%;\n  padding:\n    var(--pf-c-dropdown__toggle--PaddingTop)\n    var(--pf-c-dropdown__toggle--PaddingRight)\n    var(--pf-c-dropdown__toggle--PaddingBottom)\n    var(--pf-c-dropdown__toggle--PaddingLeft);\n  font-size: var(--pf-c-dropdown__toggle--FontSize);\n  font-weight: var(--pf-c-dropdown__toggle--FontWeight);\n  line-height: var(--pf-c-dropdown__toggle--LineHeight);\n  color: var(--pf-c-dropdown__toggle--Color);\n  background-color: var(--pf-c-dropdown__toggle--BackgroundColor);\n  border: none;\n}\n\npf-dropdown-menu,\n::slotted(pf-dropdown-menu) {\n  position: absolute !important;\n  top: var(\n    --pf-c-dropdown__menu--Top,\n    calc(100% + var(--pf-global--spacer--xs, 0.25rem))\n  ) !important;\n  left: 0 !important;\n  z-index: var(\n    --pf-c-dropdown__menu--ZIndex,\n    var(--pf-global--ZIndex--sm, 200)\n  ) !important;\n  padding-top: var(\n    --pf-c-dropdown__menu--PaddingTop,\n    var(--pf-global--spacer--sm, 0.5rem)\n  ) !important;\n  padding-bottom: var(\n    --pf-c-dropdown__menu--PaddingBottom,\n    var(--pf-global--spacer--sm, 0.5rem)\n  ) !important;\n  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff) !important;\n  background-clip: padding-box !important;\n  box-shadow: var(\n    --pf-c-dropdown__menu--BoxShadow,\n    var(\n      --pf-global--BoxShadow--md,\n      0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),\n      0 0 0.25rem 0 rgba(3, 3, 3, 0.06)\n    )\n  ) !important;\n  min-width: 100% !important;\n  margin: 0 !important;\n}\n\npf-button svg {\n  width: 1em;\n  height: 1em;\n  flex: 0 0 auto;\n  margin-inline-start: 1em;\n}\n\n::slotted(hr) {\n  margin: 0;\n  border-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  border-style: solid;\n}\n\n::slotted([role="separator"]:not(hr)) {\n  width: 100%;\n  height: 1px;\n  background-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  padding: 0px;\n  margin: 0px;\n  border: 0;\n  display: block;\n}\n\n.disabled {\n  & pf-dropdown-menu,\n  & ::slotted(pf-dropdown-menu) {\n    background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n    cursor: not-allowed !important;\n  }\n  & pf-button#default-toggle,\n  & ::slotted([slot="toggle"]) {\n    --pf-c-button--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--disabled--after--BorderColor);\n\n    --pf-c-button--m-primary--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n\n    --pf-c-button--m-secondary--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-secondary--focus--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-secondary--hover--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-secondary--active--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-secondary--after--BorderColor: transparent;\n    --pf-c-button--m-secondary--hover--after--BorderColor: transparent;\n    --pf-c-button--m-secondary--focus--after--BorderColor: transparent;\n    --pf-c-button--m-secondary--active--after--BorderColor: transparent;\n    --pf-c-button--m-secondary--focus--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-secondary--hover--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-secondary--active--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-secondary--focus--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n\n    --pf-c-button--m-control--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-control--focus--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-control--hover--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-control--active--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-control--after--BorderColor: transparent;\n    --pf-c-button--m-control--hover--after--BorderColor: transparent;\n    --pf-c-button--m-control--focus--after--BorderColor: transparent;\n    --pf-c-button--m-control--active--after--BorderColor: transparent;\n    --pf-c-button--m-control--focus--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-control--hover--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-control--active--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-control--focus--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-control--after--BorderBottomColor: transparent;\n    --pf-c-button--m-control--focus--after--BorderBottomColor: transparent;\n    --pf-c-button--m-control--hover--after--BorderBottomColor: transparent;\n    --pf-c-button--m-control--active--after--BorderBottomColor: transparent;\n\n    --pf-c-button--m-plain--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-plain--focus--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-plain--hover--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-plain--active--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-plain--after--BorderColor: transparent;\n    --pf-c-button--m-plain--hover--after--BorderColor: transparent;\n    --pf-c-button--m-plain--focus--after--BorderColor: transparent;\n    --pf-c-button--m-plain--active--after--BorderColor: transparent;\n    --pf-c-button--m-plain--focus--Color: var(--pf-c-button--disabled--Color);\n    --pf-c-button--m-plain--hover--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-plain--active--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n    --pf-c-button--m-plain--focus--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);\n  }\n\n  & pf-button:focus,\n  & ::slotted([slot="toggle"]:focus) {\n    outline: 3px solid var(--pf-global--link--Color, #0066cc);\n  }\n}\n\npf-button#default-toggle,\n::slotted(pf-button[variant="control"]) {\n  --_button-icon-vertical-align: -0.25em;\n  --_button-icon-padding-inline-start: var(--pf-c-dropdown__toggle--PaddingLeft,\n    var(--pf-global--spacer--md, 1rem));\n  --_button-icon-padding-inline-end: var(-pf-c-dropdown__toggle--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n}\n`;
+const styles = css `:host {
+  display: inline-block;
+  position: relative;
+  --pf-c-dropdown__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--MinWidth: 0;
+  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-dropdown__toggle--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-dropdown__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+  --pf-c-dropdown__toggle--BackgroundColor: transparent;
+  --pf-c-dropdown__toggle--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-global--Color--200, #6a6e73);
+  --pf-c-dropdown__toggle--m-plain--hover--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-dropdown__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+  --pf-c-dropdown__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  --pf-c-dropdown__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  --pf-c-dropdown__toggle--m-plain--child--LineHeight: normal;
+  --pf-c-dropdown__toggle--m-primary--Color: var(--pf-global--Color--light-100, #fff);
+  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
+  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-dropdown__toggle-progress--Visibility: hidden;
+  --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm, 0.875rem);
+  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-dropdown__toggle--m-split-button--child--BackgroundColor: transparent;
+  --pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));
+  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
+  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200, #004080);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100, #06c);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md, 1rem);
+  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200, #6a6e73);
+  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
+  /** Dropdown box shadow */
+  --pf-c-dropdown__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+  /** Dropdown top padding */
+  --pf-c-dropdown__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+  /** Dropdown top position */
+  --pf-c-dropdown__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
+  /** Dropdown z-index */
+  --pf-c-dropdown__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
+  --pf-c-dropdown--m-top__menu--Top: 0;
+  --pf-c-dropdown--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-dropdown__menu-item--BackgroundColor: transparent;
+  --pf-c-dropdown__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+  /** Dropdown menu item right padding */
+  --pf-c-dropdown__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  --pf-c-dropdown__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  --pf-c-dropdown__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
+  --pf-c-dropdown__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-dropdown__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+  --pf-c-dropdown__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
+  --pf-c-dropdown__menu-item--hover--Color: var(--pf-global--Color--dark-100, #151515);
+  --pf-c-dropdown__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+  --pf-c-dropdown__menu-item--disabled--BackgroundColor: transparent;
+  --pf-c-dropdown__menu-item--m-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  --pf-c-dropdown__menu-item-icon--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg, 1.5rem);
+  --pf-c-dropdown__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg, 1.5rem);
+  --pf-c-dropdown__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  --pf-c-dropdown__menu-item-description--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  --pf-c-dropdown__group--group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__group-title--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
+  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
+  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
+  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  --pf-c-dropdown__toggle-image--MarginTop: 0;
+  --pf-c-dropdown__toggle-image--MarginBottom: 0;
+  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
+  --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-dropdown--c-menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
+  --pf-c-dropdown--m-top--c-menu--Top: 0;
+  --pf-c-dropdown--m-top--c-menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth: 0;
+  --pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);
+  --pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);
+  --pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);
+  --pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl, 4px);
+  --pf-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  --_font-size: var(
+    --pf-c-dropdown__menu-item--FontSize,
+    var(--pf-global--FontSize--md, 1rem)
+  );
+  --_font-weight: var(
+    --pf-c-dropdown__menu-item--FontWeight,
+    var(--pf-global--FontWeight--normal, 400)
+  );
+  --_line-height: var(
+    --pf-c-dropdown__menu-item--LineHeight,
+    var(--pf-global--LineHeight--md, 1.5)
+  );
+  --_color: var(
+    --pf-c-dropdown__menu-item--Color,
+    var(--pf-global--Color--dark-100, #151515)
+  );
+  --_background-color: var(
+    --pf-c-dropdown__menu-item--BackgroundColor,
+    transparent
+  );
+}
+
+:host([disabled]) {
+  color: var(--pf-global--Color--dark-200, #6a6e73);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+slot[name="toggle"] {
+  cursor: pointer;
+}
+
+pf-button#default-toggle,
+::slotted([slot="toggle"]) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: var(--pf-c-dropdown__toggle--MinWidth);
+  max-width: 100%;
+  padding:
+    var(--pf-c-dropdown__toggle--PaddingTop)
+    var(--pf-c-dropdown__toggle--PaddingRight)
+    var(--pf-c-dropdown__toggle--PaddingBottom)
+    var(--pf-c-dropdown__toggle--PaddingLeft);
+  font-size: var(--pf-c-dropdown__toggle--FontSize);
+  font-weight: var(--pf-c-dropdown__toggle--FontWeight);
+  line-height: var(--pf-c-dropdown__toggle--LineHeight);
+  color: var(--pf-c-dropdown__toggle--Color);
+  background-color: var(--pf-c-dropdown__toggle--BackgroundColor);
+  border: none;
+}
+
+pf-dropdown-menu,
+::slotted(pf-dropdown-menu) {
+  position: absolute !important;
+  top: var(
+    --pf-c-dropdown__menu--Top,
+    calc(100% + var(--pf-global--spacer--xs, 0.25rem))
+  ) !important;
+  left: 0 !important;
+  z-index: var(
+    --pf-c-dropdown__menu--ZIndex,
+    var(--pf-global--ZIndex--sm, 200)
+  ) !important;
+  padding-top: var(
+    --pf-c-dropdown__menu--PaddingTop,
+    var(--pf-global--spacer--sm, 0.5rem)
+  ) !important;
+  padding-bottom: var(
+    --pf-c-dropdown__menu--PaddingBottom,
+    var(--pf-global--spacer--sm, 0.5rem)
+  ) !important;
+  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff) !important;
+  background-clip: padding-box !important;
+  box-shadow: var(
+    --pf-c-dropdown__menu--BoxShadow,
+    var(
+      --pf-global--BoxShadow--md,
+      0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),
+      0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
+    )
+  ) !important;
+  min-width: 100% !important;
+  margin: 0 !important;
+}
+
+pf-button svg {
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  margin-inline-start: 1em;
+}
+
+::slotted(hr) {
+  margin: 0;
+  border-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  border-style: solid;
+}
+
+::slotted([role="separator"]:not(hr)) {
+  width: 100%;
+  height: 1px;
+  background-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  padding: 0px;
+  margin: 0px;
+  border: 0;
+  display: block;
+}
+
+.disabled {
+  & pf-dropdown-menu,
+  & ::slotted(pf-dropdown-menu) {
+    background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+    cursor: not-allowed !important;
+  }
+  & pf-button#default-toggle,
+  & ::slotted([slot="toggle"]) {
+    --pf-c-button--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--disabled--after--BorderColor);
+
+    --pf-c-button--m-primary--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+
+    --pf-c-button--m-secondary--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-secondary--focus--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-secondary--hover--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-secondary--active--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-secondary--after--BorderColor: transparent;
+    --pf-c-button--m-secondary--hover--after--BorderColor: transparent;
+    --pf-c-button--m-secondary--focus--after--BorderColor: transparent;
+    --pf-c-button--m-secondary--active--after--BorderColor: transparent;
+    --pf-c-button--m-secondary--focus--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-secondary--hover--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-secondary--active--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-secondary--focus--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+
+    --pf-c-button--m-control--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-control--focus--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-control--hover--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-control--active--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-control--after--BorderColor: transparent;
+    --pf-c-button--m-control--hover--after--BorderColor: transparent;
+    --pf-c-button--m-control--focus--after--BorderColor: transparent;
+    --pf-c-button--m-control--active--after--BorderColor: transparent;
+    --pf-c-button--m-control--focus--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-control--hover--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-control--active--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-control--focus--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-control--after--BorderBottomColor: transparent;
+    --pf-c-button--m-control--focus--after--BorderBottomColor: transparent;
+    --pf-c-button--m-control--hover--after--BorderBottomColor: transparent;
+    --pf-c-button--m-control--active--after--BorderBottomColor: transparent;
+
+    --pf-c-button--m-plain--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-plain--focus--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-plain--hover--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-plain--active--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-plain--after--BorderColor: transparent;
+    --pf-c-button--m-plain--hover--after--BorderColor: transparent;
+    --pf-c-button--m-plain--focus--after--BorderColor: transparent;
+    --pf-c-button--m-plain--active--after--BorderColor: transparent;
+    --pf-c-button--m-plain--focus--Color: var(--pf-c-button--disabled--Color);
+    --pf-c-button--m-plain--hover--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-plain--active--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+    --pf-c-button--m-plain--focus--BackgroundColor: var(--pf-c-button--disabled--BackgroundColor);
+  }
+
+  & pf-button:focus,
+  & ::slotted([slot="toggle"]:focus) {
+    outline: 3px solid var(--pf-global--link--Color, #0066cc);
+  }
+}
+
+pf-button#default-toggle,
+::slotted(pf-button[variant="control"]) {
+  --_button-icon-vertical-align: -0.25em;
+  --_button-icon-padding-inline-start: var(--pf-c-dropdown__toggle--PaddingLeft,
+    var(--pf-global--spacer--md, 1rem));
+  --_button-icon-padding-inline-end: var(-pf-c-dropdown__toggle--PaddingRight,
+    var(--pf-global--spacer--sm, 0.5rem));
+}
+`;
 export class PfDropdownSelectEvent extends Event {
     constructor(originalEvent, value) {
         super('select', { bubbles: true, cancelable: true });
@@ -65,6 +409,7 @@ let PfDropdown = class PfDropdown extends LitElement {
             [alignment ?? '']: !!alignment })}"
          style="${styleMap(styles)}"
          @slotchange="${__classPrivateFieldGet(this, _PfDropdown_instances, "m", _PfDropdown_onSlotchange)}">
+      <!-- Custom toggle button -->
       <slot name="toggle"
             @keydown="${__classPrivateFieldGet(this, _PfDropdown_instances, "m", _PfDropdown_onButtonKeydown)}"
             @click="${() => this.toggle()}">
@@ -73,12 +418,15 @@ let PfDropdown = class PfDropdown extends LitElement {
           <pf-icon icon="caret-down" size="md"></pf-icon>
         </pf-button>
       </slot>
+      <!-- when using a custom toggle, you must slot a \`<pf-dropdown-menu>\` in alongside it -->
       <slot name="menu"
             ?hidden="${!this.expanded}"
             @focusout="${__classPrivateFieldGet(this, _PfDropdown_instances, "m", _PfDropdown_onMenuFocusout)}"
             @keydown="${__classPrivateFieldGet(this, _PfDropdown_instances, "m", _PfDropdown_onMenuKeydown)}"
             @click="${__classPrivateFieldGet(this, _PfDropdown_instances, "m", _PfDropdown_onSelect)}">
+        <!-- The dropdown menu wrapper -->
         <pf-dropdown-menu id="menu" part="menu" ?disabled="${disabled}">
+          <!-- Must contain one or more \`<pf-dropdown-item>\` or \`<pf-dropdown-group>\` -->
           <slot></slot>
         </pf-dropdown-menu>
       </slot>
@@ -214,7 +562,7 @@ PfDropdown.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfDropdown.version = "4.0.2";
+PfDropdown.version = "4.2.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfDropdown.prototype, "disabled", void 0);

package/pf-dropdown/pf-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-dropdown.js","sourceRoot":"","sources":["pf-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { provide } from '@lit/context';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { context, type PfDropdownContext } from './context.js';\nimport { PfDropdownItem } from './pf-dropdown-item.js';\nimport { PfDropdownMenu } from './pf-dropdown-menu.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-dropdown.css';\n\n\nexport class PfDropdownSelectEvent extends Event {\n  constructor(\n    public originalEvent: Event | KeyboardEvent,\n    public value: string\n  ) {\n    super('select', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * A **dropdown** presents a menu of actions or links in a constrained space that\n * will trigger a process or navigate to a new location.\n * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`\n * @slot toggle - Custom toggle button\n * @slot menu - when using a custom toggle, you must slot a `<pf-dropdown-menu>` in alongside it\n * @csspart menu - The dropdown menu wrapper\n * @cssprop {<length>} [--pf-c-dropdown__menu--PaddingTop=0.5rem] Dropdown top padding\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=0.5rem] Dropdown right padding\n * @cssprop {<length>} [--pf-c-dropdown__menu--ZIndex=200] Dropdown z-index\n * @cssprop [--pf-c-dropdown__menu--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)] Dropdown box shadow\n * @cssprop {<length>} [--pf-c-dropdown__menu--Top=100% + 0.25rem] Dropdown top\n * @fires {PfDropdownSelectEvent} select - when a user select dropdown value\n * @fires open - when the dropdown toggles open\n * @fires close - when the dropdown toggles closed\n */\n@customElement('pf-dropdown')\nexport class PfDropdown extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether the dropdown is expanded\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @queryAssignedElements({ slot: 'toggle', flatten: true })\n  private _toggleElements!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'menu', flatten: true })\n  private _menuElements!: HTMLElement[];\n\n  @provide({ context }) private ctx: PfDropdownContext = { disabled: false };\n\n  #logger = new Logger(this);\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._menuElements?.at(0),\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const ps = await Promise.all([\n      super.getUpdateComplete(),\n      this._menuElements?.map(x => (x as LitElement).updateComplete),\n    ]);\n    return ps.every(x=>!!x);\n  }\n\n  willUpdate(changed: PropertyValues): void {\n    if (changed.has('disabled')) {\n      const { disabled } = this;\n      this.ctx = { disabled };\n    }\n  }\n\n  render(): TemplateResult<1> {\n    const { expanded } = this;\n    const { anchor, alignment, styles = {} } = this.#float;\n    const { disabled } = this;\n    return html`\n    <div class=\"${classMap({ disabled,\n                             expanded,\n                             [anchor ?? '']: !!anchor,\n                             [alignment ?? '']: !!alignment })}\"\n         style=\"${styleMap(styles)}\"\n         @slotchange=\"${this.#onSlotchange}\">\n      <slot name=\"toggle\"\n            @keydown=\"${this.#onButtonKeydown}\"\n            @click=\"${() => this.toggle()}\">\n        <pf-button id=\"default-toggle\" variant=\"control\">\n          Dropdown\n          <pf-icon icon=\"caret-down\" size=\"md\"></pf-icon>\n        </pf-button>\n      </slot>\n      <slot name=\"menu\"\n            ?hidden=\"${!this.expanded}\"\n            @focusout=\"${this.#onMenuFocusout}\"\n            @keydown=\"${this.#onMenuKeydown}\"\n            @click=\"${this.#onSelect}\">\n        <pf-dropdown-menu id=\"menu\" part=\"menu\" ?disabled=\"${disabled}\">\n          <slot></slot>\n        </pf-dropdown-menu>\n      </slot>\n    </div>`;\n  }\n\n  override firstUpdated(): void {\n    this.#onSlotchange();\n  }\n\n  updated(changed: PropertyValues<this>): void {\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #validateDOM() {\n    const [toggle] = this._toggleElements;\n    const [menu] = this._menuElements;\n    if (!toggle) {\n      this.#logger.warn('no toggle found');\n      return false;\n    } else if (!menu) {\n      this.#logger.warn('no menu found');\n      return false;\n    } else if (![toggle, menu].map(x => this.shadowRoot?.contains(x))\n        .every((p, _, a) => p === a[0])) {\n      this.#logger.warn('toggle and menu must be located in the same root');\n      return false;\n    } else {\n      return true;\n    }\n  }\n\n  #onSlotchange() {\n    if (this.#validateDOM()) {\n      const [menu] = this._menuElements;\n      const [toggle] = this._toggleElements;\n      menu.id ||= getRandomId('menu');\n      toggle.setAttribute('aria-controls', menu.id);\n      toggle.setAttribute('aria-haspopup', menu.id);\n      toggle.setAttribute('aria-expanded', String(this.expanded) as 'true' | 'false');\n    }\n  }\n\n  async #expandedChanged() {\n    const will = this.expanded ? 'close' : 'open';\n    const [menu] = this._menuElements;\n    const [toggle] = this._toggleElements;\n    toggle.setAttribute('aria-expanded', `${String(this.expanded) as 'true' | 'false'}`);\n    this.dispatchEvent(new Event(will));\n    if (this.expanded) {\n      await this.#float.show();\n      if (menu instanceof PfDropdownMenu) {\n        menu.activeItem?.focus();\n      }\n    } else {\n      await this.#float.hide();\n    }\n  }\n\n  #disabledChanged() {\n    if (this.#validateDOM()) {\n      const [toggle] = this._toggleElements;\n      toggle.setAttribute('aria-disabled', String(!!this.disabled));\n    }\n  }\n\n  #onSelect(event: KeyboardEvent | Event & { target: PfDropdownItem }) {\n    const [menu] = this._menuElements;\n    if (menu instanceof PfDropdownMenu) {\n      const target = event.target as PfDropdownItem || menu.activeItem;\n      this.dispatchEvent(new PfDropdownSelectEvent(event, `${target?.value}`));\n      this.hide();\n    }\n  }\n\n  #onButtonKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown': {\n        this.show();\n      }\n    }\n  }\n\n  #onMenuFocusout(event: FocusEvent) {\n    if (this.expanded) {\n      const root = this.getRootNode();\n      const [menu] = this._menuElements;\n      if (root instanceof ShadowRoot\n          || root instanceof Document\n          && event.relatedTarget instanceof PfDropdownItem\n          && menu instanceof PfDropdownMenu\n          && !menu.items.includes(event.relatedTarget)\n      ) {\n        this.hide();\n      }\n    }\n  }\n\n  #onMenuKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.#onSelect(event);\n        break;\n      case 'Escape':\n        this.hide();\n        this._toggleElements?.at(0)?.focus();\n    }\n  }\n\n  /**\n   * Opens the dropdown\n   */\n  async show(): Promise<void> {\n    this.expanded = true;\n    await this.updateComplete;\n  }\n\n  /**\n   * Closes the dropdown\n   */\n  async hide(): Promise<void> {\n    this.expanded = false;\n    await this.updateComplete;\n  }\n\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    await this.updateComplete;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown': PfDropdown;\n  }\n}\n"]}
+{"version":3,"file":"pf-dropdown.js","sourceRoot":"","sources":["pf-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { provide } from '@lit/context';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { context, type PfDropdownContext } from './context.js';\nimport { PfDropdownItem } from './pf-dropdown-item.js';\nimport { PfDropdownMenu } from './pf-dropdown-menu.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-dropdown.css';\n\n\nexport class PfDropdownSelectEvent extends Event {\n  constructor(\n    public originalEvent: Event | KeyboardEvent,\n    public value: string\n  ) {\n    super('select', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * A **dropdown** presents a menu of actions or links in a constrained space that\n * will trigger a process or navigate to a new location.\n * @alias Dropdown\n * @fires {PfDropdownSelectEvent} select - when a user select dropdown value\n * @fires open - when the dropdown toggles open\n * @fires close - when the dropdown toggles closed\n */\n@customElement('pf-dropdown')\nexport class PfDropdown extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether the dropdown is expanded\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @queryAssignedElements({ slot: 'toggle', flatten: true })\n  private _toggleElements!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'menu', flatten: true })\n  private _menuElements!: HTMLElement[];\n\n  @provide({ context }) private ctx: PfDropdownContext = { disabled: false };\n\n  #logger = new Logger(this);\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._menuElements?.at(0),\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const ps = await Promise.all([\n      super.getUpdateComplete(),\n      this._menuElements?.map(x => (x as LitElement).updateComplete),\n    ]);\n    return ps.every(x=>!!x);\n  }\n\n  willUpdate(changed: PropertyValues): void {\n    if (changed.has('disabled')) {\n      const { disabled } = this;\n      this.ctx = { disabled };\n    }\n  }\n\n  render(): TemplateResult<1> {\n    const { expanded } = this;\n    const { anchor, alignment, styles = {} } = this.#float;\n    const { disabled } = this;\n    return html`\n    <div class=\"${classMap({ disabled,\n                             expanded,\n                             [anchor ?? '']: !!anchor,\n                             [alignment ?? '']: !!alignment })}\"\n         style=\"${styleMap(styles)}\"\n         @slotchange=\"${this.#onSlotchange}\">\n      <!-- Custom toggle button -->\n      <slot name=\"toggle\"\n            @keydown=\"${this.#onButtonKeydown}\"\n            @click=\"${() => this.toggle()}\">\n        <pf-button id=\"default-toggle\" variant=\"control\">\n          Dropdown\n          <pf-icon icon=\"caret-down\" size=\"md\"></pf-icon>\n        </pf-button>\n      </slot>\n      <!-- when using a custom toggle, you must slot a \\`<pf-dropdown-menu>\\` in alongside it -->\n      <slot name=\"menu\"\n            ?hidden=\"${!this.expanded}\"\n            @focusout=\"${this.#onMenuFocusout}\"\n            @keydown=\"${this.#onMenuKeydown}\"\n            @click=\"${this.#onSelect}\">\n        <!-- The dropdown menu wrapper -->\n        <pf-dropdown-menu id=\"menu\" part=\"menu\" ?disabled=\"${disabled}\">\n          <!-- Must contain one or more \\`<pf-dropdown-item>\\` or \\`<pf-dropdown-group>\\` -->\n          <slot></slot>\n        </pf-dropdown-menu>\n      </slot>\n    </div>`;\n  }\n\n  override firstUpdated(): void {\n    this.#onSlotchange();\n  }\n\n  updated(changed: PropertyValues<this>): void {\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #validateDOM() {\n    const [toggle] = this._toggleElements;\n    const [menu] = this._menuElements;\n    if (!toggle) {\n      this.#logger.warn('no toggle found');\n      return false;\n    } else if (!menu) {\n      this.#logger.warn('no menu found');\n      return false;\n    } else if (![toggle, menu].map(x => this.shadowRoot?.contains(x))\n        .every((p, _, a) => p === a[0])) {\n      this.#logger.warn('toggle and menu must be located in the same root');\n      return false;\n    } else {\n      return true;\n    }\n  }\n\n  #onSlotchange() {\n    if (this.#validateDOM()) {\n      const [menu] = this._menuElements;\n      const [toggle] = this._toggleElements;\n      menu.id ||= getRandomId('menu');\n      toggle.setAttribute('aria-controls', menu.id);\n      toggle.setAttribute('aria-haspopup', menu.id);\n      toggle.setAttribute('aria-expanded', String(this.expanded) as 'true' | 'false');\n    }\n  }\n\n  async #expandedChanged() {\n    const will = this.expanded ? 'close' : 'open';\n    const [menu] = this._menuElements;\n    const [toggle] = this._toggleElements;\n    toggle.setAttribute('aria-expanded', `${String(this.expanded) as 'true' | 'false'}`);\n    this.dispatchEvent(new Event(will));\n    if (this.expanded) {\n      await this.#float.show();\n      if (menu instanceof PfDropdownMenu) {\n        menu.activeItem?.focus();\n      }\n    } else {\n      await this.#float.hide();\n    }\n  }\n\n  #disabledChanged() {\n    if (this.#validateDOM()) {\n      const [toggle] = this._toggleElements;\n      toggle.setAttribute('aria-disabled', String(!!this.disabled));\n    }\n  }\n\n  #onSelect(event: KeyboardEvent | Event & { target: PfDropdownItem }) {\n    const [menu] = this._menuElements;\n    if (menu instanceof PfDropdownMenu) {\n      const target = event.target as PfDropdownItem || menu.activeItem;\n      this.dispatchEvent(new PfDropdownSelectEvent(event, `${target?.value}`));\n      this.hide();\n    }\n  }\n\n  #onButtonKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown': {\n        this.show();\n      }\n    }\n  }\n\n  #onMenuFocusout(event: FocusEvent) {\n    if (this.expanded) {\n      const root = this.getRootNode();\n      const [menu] = this._menuElements;\n      if (root instanceof ShadowRoot\n          || root instanceof Document\n          && event.relatedTarget instanceof PfDropdownItem\n          && menu instanceof PfDropdownMenu\n          && !menu.items.includes(event.relatedTarget)\n      ) {\n        this.hide();\n      }\n    }\n  }\n\n  #onMenuKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.#onSelect(event);\n        break;\n      case 'Escape':\n        this.hide();\n        this._toggleElements?.at(0)?.focus();\n    }\n  }\n\n  /**\n   * Opens the dropdown\n   */\n  async show(): Promise<void> {\n    this.expanded = true;\n    await this.updateComplete;\n  }\n\n  /**\n   * Closes the dropdown\n   */\n  async hide(): Promise<void> {\n    this.expanded = false;\n    await this.updateComplete;\n  }\n\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    await this.updateComplete;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown': PfDropdown;\n  }\n}\n"]}

package/pf-icon/pf-icon.css

@@ -26,6 +26,7 @@ svg {
 :host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }
 
 #container, svg {
+  /** size of the icon */
   width: var(--pf-icon--size, var(--_size));
   height: var(--pf-icon--size, var(--_size));
   min-width: var(--pf-icon--size, var(--_size));

package/pf-icon/pf-icon.d.ts

@@ -12,11 +12,9 @@ export declare class IconResolveError extends ErrorEvent {
 /**
  * An **icon** component is a container that allows for icons of varying dimensions to
  * seamlessly replace each other without shifting surrounding content.
- * @slot - Slotted content is used as a fallback in case the icon doesn't load
+ * @alias Icon
  * @fires load - Fired when an icon is loaded and rendered
  * @fires error - Fired when an icon fails to load
- * @csspart fallback - Container for the fallback (i.e. slotted) content
- * @cssprop {<length>} --pf-icon--size - size of the icon
  */
 export declare class PfIcon extends LitElement {
     #private;

package/pf-icon/pf-icon.js

@@ -6,7 +6,42 @@ import { property } from 'lit/decorators/property.js';
 import { state } from 'lit/decorators/state.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { css } from "lit";
-const style = css `:host {\n  position: relative;\n  display:  inline-block;\n  line-height:  0;\n  height: fit-content !important;\n  width: fit-content !important;\n}\n\n#container {\n  display: grid;\n  grid-template: 1fr / 1fr;\n  place-content: center;\n}\n\n#container.content ::slotted(*) {\n  display: none;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n:host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }\n:host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }\n:host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }\n:host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }\n\n#container, svg {\n  width: var(--pf-icon--size, var(--_size));\n  height: var(--pf-icon--size, var(--_size));\n  min-width: var(--pf-icon--size, var(--_size));\n  min-height: var(--pf-icon--size, var(--_size));\n}\n\n`;
+const style = css `:host {
+  position: relative;
+  display:  inline-block;
+  line-height:  0;
+  height: fit-content !important;
+  width: fit-content !important;
+}
+
+#container {
+  display: grid;
+  grid-template: 1fr / 1fr;
+  place-content: center;
+}
+
+#container.content ::slotted(*) {
+  display: none;
+}
+
+svg {
+  fill: currentcolor;
+}
+
+:host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }
+:host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }
+:host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }
+:host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }
+
+#container, svg {
+  /** size of the icon */
+  width: var(--pf-icon--size, var(--_size));
+  height: var(--pf-icon--size, var(--_size));
+  min-width: var(--pf-icon--size, var(--_size));
+  min-height: var(--pf-icon--size, var(--_size));
+}
+
+`;
 /**
  * requestIdleCallback when available, requestAnimationFrame when not
  * @param f callback
@@ -94,8 +129,13 @@ let PfIcon = _a = class PfIcon extends LitElement {
     render() {
         const content = this.content ?? '';
         return html `
-      <div id="container" aria-hidden="true">${content}<span part="fallback"
-          ?hidden=${!!content}><slot></slot>
+      <div id="container" aria-hidden="true">${content}<!--
+         summary: Container for the fallback (i.e. slotted) content
+        -->
+        <span part="fallback"
+          ?hidden=${!!content}><!--
+           summary: Slotted content is used as a fallback in case the icon doesn't load
+        --><slot></slot>
         </span>
       </div>
     `;
@@ -187,7 +227,7 @@ PfIcon.instances = new Set();
  *          ```
  */
 PfIcon.resolve = PfIcon.defaultResolve;
-PfIcon.version = "4.0.2";
+PfIcon.version = "4.2.0";
 __decorate([
     property()
 ], PfIcon.prototype, "set", void 0);