@patternfly/elements 3.0.1 → 4.0.0

package/pf-dropdown/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAMlF,MAAM,CAAC,MAAM,OAAO,GAClB,qBAAqB,CAAqB,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC","sourcesContent":["import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';\n\nexport interface PfDropdownContext {\n  disabled: boolean;\n}\n\nexport const context =\n  createContextWithRoot<PfDropdownContext >(Symbol('pf-dropdown-menu-context'));\n"]}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAMlF,MAAM,CAAC,MAAM,OAAO,GAClB,qBAAqB,CAAoB,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC","sourcesContent":["import type { Context } from '@lit/context';\nimport { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';\n\nexport interface PfDropdownContext {\n  disabled: boolean;\n}\n\nexport const context: Context<unknown, PfDropdownContext> =\n  createContextWithRoot<PfDropdownContext>(Symbol('pf-dropdown-menu-context'));\n"]}

package/pf-dropdown/pf-dropdown-group.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Represents a group of items for a dropdown component.
  * @slot
@@ -6,18 +6,12 @@ import { LitElement } from 'lit';
  */
 export declare class PfDropdownGroup extends LitElement {
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     /**
      * The label for the group of dropdown items.
      */
     label?: string;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-dropdown/pf-dropdown-group.js

@@ -4,11 +4,6 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
 const styles = css `:host {\n  display: block;\n}\n\n[hidden] {\n  display: none !important;\n}\n\np {\n  margin: 0;\n  font-size: 14px;\n  font-weight: normal;\n  color: #777;\n  padding-top: 0.5rem;\n  padding-right: 1rem;\n  padding-bottom: 0.5rem;\n  padding-left: 1rem;\n  font-size: 0.75rem;\n  font-weight: 400;\n  color: #6a6e73;\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  pointer-events: none;\n}\n`;
-/**
- * Represents a group of items for a dropdown component.
- * @slot
- *     Content for the group of dropdown items
- */
 let PfDropdownGroup = class PfDropdownGroup extends LitElement {
     render() {
         return html `
@@ -22,6 +17,7 @@ PfDropdownGroup.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfDropdownGroup.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfDropdownGroup.prototype, "label", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-dropdown-group.js","sourceRoot":"","sources":["pf-dropdown-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAa7C,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,CAAC,IAAI,CAAC,KAAK,yBAAyB,IAAI,CAAC,KAAK;;KAE7D,CAAC;IACJ,CAAC;;AAjBe,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAET,iCAAiB,GAAG;IAC3C,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAK2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAXjC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAmB3B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-dropdown-group.css';\n\n/**\n * Represents a group of items for a dropdown component.\n * @slot\n *     Content for the group of dropdown items\n */\n@customElement('pf-dropdown-group')\nexport class PfDropdownGroup extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The label for the group of dropdown items.\n   */\n  @property({ reflect: true }) label?: string;\n\n  render() {\n    return html`\n      <p ?hidden=\"${!this.label}\" role=\"presentation\">${this.label}</p>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-group': PfDropdownGroup;\n  }\n}\n"]}
+{"version":3,"file":"pf-dropdown-group.js","sourceRoot":"","sources":["pf-dropdown-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAU/C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAa7C,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,CAAC,IAAI,CAAC,KAAK,yBAAyB,IAAI,CAAC,KAAK;;KAE7D,CAAC;IACJ,CAAC;;AAjBe,sBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;AAE1B,iCAAiB,GAAmB;IAC3D,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;;AAK2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAXjC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-dropdown-group.css';\n\n/**\n * Represents a group of items for a dropdown component.\n * @slot\n *     Content for the group of dropdown items\n */\n@customElement('pf-dropdown-group')\nexport class PfDropdownGroup 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   * The label for the group of dropdown items.\n   */\n  @property({ reflect: true }) label?: string;\n\n  render(): TemplateResult<1> {\n    return html`\n      <p ?hidden=\"${!this.label}\" role=\"presentation\">${this.label}</p>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-group': PfDropdownGroup;\n  }\n}\n"]}

package/pf-dropdown/pf-dropdown-item.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 export declare class DropdownItemChange extends Event {
     constructor();
 }
@@ -10,43 +10,37 @@ export declare class DropdownItemChange extends Event {
  *      Optional slot for item description
  * @slot -
  *      Content for the dropdown item
- * @cssprop {<length>} --pf-c-dropdown__menu-item--FontSize
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--FontSize=1rem]
  *          Dropdown item font size
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--FontWeight
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--FontWeight=400]
  *          Dropdown item font weight
- *          {@default `400`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--LineHeight
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--LineHeight=1.5]
  *          Dropdown item line height
- *          {@default `1.5`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--Color
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--Color=#151515]
  *          Dropdown item color
- *          {@default `#151515`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--BackgroundColor
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--BackgroundColor=transparent]
  *          Dropdown item background color
- *          {@default `transparent`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingTop
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingTop=0.5rem]
  *          Dropdown item padding top
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingRight
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingRight=1rem]
  *          Dropdown item padding right
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingBottom
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingBottom=0.5rem]
  *          Dropdown item padding bottom
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingLeft
+ *
+ * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingLeft=1rem]
  *          Dropdown item padding left
- *          {@default `1rem`}
+ *
  */
 export declare class PfDropdownItem extends LitElement {
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     /**
      * The value associated with the dropdown item.
      * This value can be used to identify the selected item
@@ -71,7 +65,7 @@ export declare class PfDropdownItem extends LitElement {
     /** @internal */
     menuItem: HTMLElement;
     protected updated(changed: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-dropdown/pf-dropdown-item.js

@@ -5,7 +5,6 @@ import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators/query.js';
 import { consume } from '@lit/context';
-import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { context } from './context.js';
 import { css } from "lit";
 const styles = css `:host {\n  display: block;\n  width: 100%;\n  text-align: left;\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\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  border: 3px solid var(\n    --pf-c-dropdown__menu-item--BackgroundColor,\n    transparent\n  );\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n:host([disabled]),\n.disabled {\n  &, & a {\n    cursor: not-allowed;\n  }\n  --pf-c-dropdown__menu-item--Color: var(\n    --pf-c-dropdown__menu-item--disabled--Color,\n    var(--pf-global--Color--dark-200, #6a6e73)\n  );\n  --pf-c-dropdown__menu-item--BackgroundColor: var(\n    --pf-c-dropdown__menu-item--disabled--BackgroundColor,\n    transparent\n  );\n}\n\n:host(:hover) {\n  --pf-c-dropdown__menu-item--Color: var(\n    --pf-c-dropdown__menu-item--hover--Color,\n    var(--pf-global--Color--dark-100, #151515)\n  );\n  --pf-c-dropdown__menu-item--BackgroundColor: var(\n    --pf-c-dropdown__menu-item--hover--BackgroundColor,\n    var(--pf-global--BackgroundColor--light-300, #f0f0f0)\n  );\n  text-decoration: none;\n}\n\n:host(:focus-within) {\n  border: 3px solid var(--pf-global--link--Color, #0066cc);\n}\n\n#menuitem {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: var(\n      --pf-c-dropdown__menu-item--PaddingTop,\n      var(--pf-global--spacer--sm, 0.5rem)\n    )\n    var(\n      --pf-c-dropdown__menu-item--PaddingRight,\n      var(--pf-global--spacer--md, 1rem)\n    )\n    var(\n      --pf-c-dropdown__menu-item--PaddingBottom,\n      var(--pf-global--spacer--sm, 0.5rem)\n    )\n    var(\n      --pf-c-dropdown__menu-item--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem)\n    );\n}\n\n#item {\n  display: flex;\n  align-items: center;\n}\n\n#item:focus {\n  outline: none;\n}\n\n#item::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n#description {\n  display: block;\n  flex: 1 0 100%;\n  font-size: var(\n    --pf-c-dropdown__menu-item-description--FontSize, var(\n      --pf-global--FontSize--sm, 0.75rem\n    )\n  );\n  color: var(\n    --pf-c-dropdown__menu-item-description--Color, var(\n      --pf-global--Color--dark-200, #6a6e73\n    )\n  );\n  word-break: break-all;\n}\n\na {\n  color: var(\n    --pf-c-dropdown__menu-item--Color,\n    var(--pf-global--Color--dark-100, #151515)\n  ) !important;\n  text-decoration: none !important;\n}\n\nslot:not([name]){\n  flex: 1 0 44px;\n  min-height: 44px;\n}\n\nslot[name="icon"]::slotted(*) {\n  margin-inline-end: 0.5em;\n}\n`;
@@ -14,42 +13,6 @@ export class DropdownItemChange extends Event {
         super('change', { bubbles: true, cancelable: true });
     }
 }
-/**
- * Represents an item for a dropdown component.
- * @slot icon
- *      Optional slot for an icon
- * @slot description
- *      Optional slot for item description
- * @slot -
- *      Content for the dropdown item
- * @cssprop {<length>} --pf-c-dropdown__menu-item--FontSize
- *          Dropdown item font size
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--FontWeight
- *          Dropdown item font weight
- *          {@default `400`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--LineHeight
- *          Dropdown item line height
- *          {@default `1.5`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--Color
- *          Dropdown item color
- *          {@default `#151515`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--BackgroundColor
- *          Dropdown item background color
- *          {@default `transparent`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingTop
- *          Dropdown item padding top
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingRight
- *          Dropdown item padding right
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingBottom
- *          Dropdown item padding bottom
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingLeft
- *          Dropdown item padding left
- *          {@default `1rem`}
- */
 let PfDropdownItem = class PfDropdownItem extends LitElement {
     constructor() {
         super(...arguments);
@@ -91,6 +54,7 @@ PfDropdownItem.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfDropdownItem.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfDropdownItem.prototype, "value", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-dropdown-item.js","sourceRoot":"","sources":["pf-dropdown-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,EAAE,OAAO,EAA0B,MAAM,cAAc,CAAC;;;AAI/D,MAAM,OAAO,kBAAmB,SAAQ,KAAK;IAC3C;QACE,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAmBL;;WAEG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;;WAGG;QACyC,aAAQ,GAAG,KAAK,CAAC;IAmC/D,CAAC;IAvBoB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QACrD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC;QAC3D,OAAO,IAAI,CAAA;8CAC+B,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;6CAC5C,IAAI,CAAC,IAAI,oBAAoB,UAAU;;;;SAI3E,CAAC,CAAC,CAAC,IAAI,CAAA;wDACwC,UAAU;;;eAGnD;oDACqC,IAAI,CAAC,WAAW,IAAI,EAAE;aAC7D,CAAC;IACZ,CAAC;;AA7De,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAET,gCAAiB,GAAG;IAC3C,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAM2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAgB;AAKX;IAAhC,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;4CAAe;AAKH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAMf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAGjD;IAAX,QAAQ,EAAE;mDAAsB;AAIzB;IAFP,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CACC;AAGhB;IAAf,KAAK,CAAC,OAAO,CAAC;gDAAwB;AAtC5B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA+D1B","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators/query.js';\nimport { consume } from '@lit/context';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { context, type PfDropdownContext } from './context.js';\n\nimport styles from './pf-dropdown-item.css';\n\nexport class DropdownItemChange extends Event {\n  constructor() {\n    super('change', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * Represents an item for a dropdown component.\n * @slot icon\n *      Optional slot for an icon\n * @slot description\n *      Optional slot for item description\n * @slot -\n *      Content for the dropdown item\n * @cssprop {<length>} --pf-c-dropdown__menu-item--FontSize\n *          Dropdown item font size\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--FontWeight\n *          Dropdown item font weight\n *          {@default `400`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--LineHeight\n *          Dropdown item line height\n *          {@default `1.5`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--Color\n *          Dropdown item color\n *          {@default `#151515`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--BackgroundColor\n *          Dropdown item background color\n *          {@default `transparent`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingTop\n *          Dropdown item padding top\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingRight\n *          Dropdown item padding right\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingBottom\n *          Dropdown item padding bottom\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingLeft\n *          Dropdown item padding left\n *          {@default `1rem`}\n */\n@customElement('pf-dropdown-item')\nexport class PfDropdownItem extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The value associated with the dropdown item.\n   * This value can be used to identify the selected item\n   */\n  @property({ reflect: true }) value?: string;\n\n  /**\n   * href for link dropdown items\n   */\n  @property({ attribute: 'href' }) href?: string;\n\n  /**\n   * Flag indicating whether the item is active\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * Indicates whether the dropdown item is disabled.\n   * A disabled item cannot be selected.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Item description; overridden by `description` slot */\n  @property() description?: string;\n\n  @consume({ context, subscribe: true })\n  @property({ attribute: false })\n  private ctx?: PfDropdownContext;\n\n  /** @internal */\n  @query('#item') menuItem!: HTMLElement;\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('href')) {\n      this.dispatchEvent(new DropdownItemChange());\n    }\n  }\n\n  render() {\n    const { disabled } = this.ctx ?? { disabled: false };\n    const isDisabled = !!this.disabled || !!this.ctx?.disabled;\n    return html`\n      <div id=\"menuitem\" role=\"none\" class=\"${classMap({ disabled })}\">${this.href ? html`\n        <a id=\"item\" role=\"menuitem\" href=\"${this.href}\" aria-disabled=\"${isDisabled}\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n        </a>\n        ` : html`\n        <div id=\"item\" role=\"menuitem\" aria-disabled=\"${isDisabled}\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n        </div>`}\n        <slot id=\"description\" name=\"description\">${this.description ?? ''}</slot>\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-item': PfDropdownItem;\n  }\n}\n"]}
+{"version":3,"file":"pf-dropdown-item.js","sourceRoot":"","sources":["pf-dropdown-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAA0B,MAAM,cAAc,CAAC;;;AAI/D,MAAM,OAAO,kBAAmB,SAAQ,KAAK;IAC3C;QACE,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;CACF;AAuCM,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAmBL;;WAEG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;;WAGG;QACyC,aAAQ,GAAG,KAAK,CAAC;;IAY1C,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QACrD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC;QAC3D,OAAO,IAAI,CAAA;8CAC+B,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;6CAC5C,IAAI,CAAC,IAAI,oBAAoB,UAAU;;;;SAI3E,CAAC,CAAC,CAAC,IAAI,CAAA;wDACwC,UAAU;;;eAGnD;oDACqC,IAAI,CAAC,WAAW,IAAI,EAAE;aAC7D,CAAC;IACZ,CAAC;;AA7De,qBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;AAE1B,gCAAiB,GAAmB;IAC3D,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;;AAM2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAgB;AAKX;IAAhC,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;4CAAe;AAKH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAMf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAGjD;IAAX,QAAQ,EAAE;mDAAsB;AAIzB;IAFP,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CACC;AAGhB;IAAf,KAAK,CAAC,OAAO,CAAC;gDAAwB;AAtC5B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators/query.js';\nimport { consume } from '@lit/context';\n\nimport { context, type PfDropdownContext } from './context.js';\n\nimport styles from './pf-dropdown-item.css';\n\nexport class DropdownItemChange extends Event {\n  constructor() {\n    super('change', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * Represents an item for a dropdown component.\n * @slot icon\n *      Optional slot for an icon\n * @slot description\n *      Optional slot for item description\n * @slot -\n *      Content for the dropdown item\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--FontSize=1rem]\n *          Dropdown item font size\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--FontWeight=400]\n *          Dropdown item font weight\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--LineHeight=1.5]\n *          Dropdown item line height\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--Color=#151515]\n *          Dropdown item color\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--BackgroundColor=transparent]\n *          Dropdown item background color\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingTop=0.5rem]\n *          Dropdown item padding top\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingRight=1rem]\n *          Dropdown item padding right\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingBottom=0.5rem]\n *          Dropdown item padding bottom\n *\n * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingLeft=1rem]\n *          Dropdown item padding left\n *\n */\n@customElement('pf-dropdown-item')\nexport class PfDropdownItem 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   * The value associated with the dropdown item.\n   * This value can be used to identify the selected item\n   */\n  @property({ reflect: true }) value?: string;\n\n  /**\n   * href for link dropdown items\n   */\n  @property({ attribute: 'href' }) href?: string;\n\n  /**\n   * Flag indicating whether the item is active\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * Indicates whether the dropdown item is disabled.\n   * A disabled item cannot be selected.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Item description; overridden by `description` slot */\n  @property() description?: string;\n\n  @consume({ context, subscribe: true })\n  @property({ attribute: false })\n  private ctx?: PfDropdownContext;\n\n  /** @internal */\n  @query('#item') menuItem!: HTMLElement;\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('href')) {\n      this.dispatchEvent(new DropdownItemChange());\n    }\n  }\n\n  render(): TemplateResult<1> {\n    const { disabled } = this.ctx ?? { disabled: false };\n    const isDisabled = !!this.disabled || !!this.ctx?.disabled;\n    return html`\n      <div id=\"menuitem\" role=\"none\" class=\"${classMap({ disabled })}\">${this.href ? html`\n        <a id=\"item\" role=\"menuitem\" href=\"${this.href}\" aria-disabled=\"${isDisabled}\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n        </a>\n        ` : html`\n        <div id=\"item\" role=\"menuitem\" aria-disabled=\"${isDisabled}\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n        </div>`}\n        <slot id=\"description\" name=\"description\">${this.description ?? ''}</slot>\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-item': PfDropdownItem;\n  }\n}\n"]}

package/pf-dropdown/pf-dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { PfDropdownItem } from './pf-dropdown-item.js';
 /**
  * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a
@@ -8,18 +8,12 @@ import { PfDropdownItem } from './pf-dropdown-item.js';
 export declare class PfDropdownMenu extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     private ctx?;
     /**
      * current active descendant in menu
      */
-    get activeItem(): HTMLElement | undefined;
+    get activeItem(): HTMLElement | null;
     /**
      * index of current active descendant in menu
      */
@@ -27,7 +21,7 @@ export declare class PfDropdownMenu extends LitElement {
     get items(): PfDropdownItem[];
     connectedCallback(): void;
     protected willUpdate(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-dropdown/pf-dropdown-menu.js

@@ -1,4 +1,4 @@
-var _PfDropdownMenu_instances, _PfDropdownMenu_internals, _PfDropdownMenu_tabindex, _PfDropdownMenu_onItemChange, _PfDropdownMenu_onSlotChange, _PfDropdownMenu_onMenuitemFocusin, _PfDropdownMenu_onMenuitemClick, _PfDropdownMenu_getSlottedItems;
+var _PfDropdownMenu_instances, _PfDropdownMenu_internals, _PfDropdownMenu_items_get, _PfDropdownMenu_tabindex, _PfDropdownMenu_onItemChange, _PfDropdownMenu_onSlotChange, _PfDropdownMenu_onMenuitemFocusin, _PfDropdownMenu_onMenuitemClick, _PfDropdownMenu_focusItem, _PfDropdownMenu_getSlottedItems;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
@@ -16,36 +16,28 @@ function isDisabledItemClick(event) {
     const item = event.composedPath().find((x) => x instanceof PfDropdownItem);
     return !!item?.disabled;
 }
-/**
- * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a
- * process or navigate to a new location.
- * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`
- */
 let PfDropdownMenu = class PfDropdownMenu extends LitElement {
     constructor() {
         super(...arguments);
         _PfDropdownMenu_instances.add(this);
         _PfDropdownMenu_internals.set(this, InternalsController.of(this, { role: 'menu' }));
-        _PfDropdownMenu_tabindex.set(this, new RovingTabindexController(this, {
-            getItems: () => this.items.map(x => x.menuItem),
+        _PfDropdownMenu_tabindex.set(this, RovingTabindexController.of(this, {
+            getItems: () => __classPrivateFieldGet(this, _PfDropdownMenu_instances, "a", _PfDropdownMenu_items_get),
         }));
     }
     /**
      * current active descendant in menu
      */
     get activeItem() {
-        return __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem ?? __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").firstItem;
+        return __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").items.at(__classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").atFocusedItemIndex)
+            ?? __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").atFocusableItems.at(0)
+            ?? null;
     }
     /**
      * index of current active descendant in menu
      */
     get activeIndex() {
-        if (!__classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem) {
-            return -1;
-        }
-        else {
-            return __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").items.indexOf(__classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem);
-        }
+        return __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").atFocusedItemIndex;
     }
     get items() {
         return __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_getSlottedItems).call(this, this.shadowRoot?.querySelector('slot'));
@@ -70,22 +62,24 @@ let PfDropdownMenu = class PfDropdownMenu extends LitElement {
 _PfDropdownMenu_internals = new WeakMap();
 _PfDropdownMenu_tabindex = new WeakMap();
 _PfDropdownMenu_instances = new WeakSet();
+_PfDropdownMenu_items_get = function _PfDropdownMenu_items_get() {
+    return this.items.map(x => x.menuItem);
+};
 _PfDropdownMenu_onItemChange = function _PfDropdownMenu_onItemChange(event) {
     if (event instanceof DropdownItemChange) {
-        __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").updateItems();
+        __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_onSlotChange).call(this);
     }
 };
 _PfDropdownMenu_onSlotChange = function _PfDropdownMenu_onSlotChange() {
-    __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").updateItems();
+    __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").items = __classPrivateFieldGet(this, _PfDropdownMenu_instances, "a", _PfDropdownMenu_items_get);
 };
 _PfDropdownMenu_onMenuitemFocusin = function _PfDropdownMenu_onMenuitemFocusin(event) {
     if (this.ctx?.disabled) {
         event.preventDefault();
         event.stopPropagation();
     }
-    else if (event.target instanceof PfDropdownItem
-        && event.target.menuItem !== __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem) {
-        __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").setActiveItem(event.target.menuItem);
+    else if (event.target instanceof PfDropdownItem) {
+        __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_focusItem).call(this, event.target.menuItem);
     }
 };
 _PfDropdownMenu_onMenuitemClick = function _PfDropdownMenu_onMenuitemClick(event) {
@@ -93,9 +87,14 @@ _PfDropdownMenu_onMenuitemClick = function _PfDropdownMenu_onMenuitemClick(event
         event.preventDefault();
         event.stopPropagation();
     }
-    else if (event.target instanceof PfDropdownItem
-        && event.target.menuItem !== __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem) {
-        __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").setActiveItem(event.target.menuItem);
+    else if (event.target instanceof PfDropdownItem) {
+        __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_focusItem).call(this, event.target.menuItem);
+    }
+};
+_PfDropdownMenu_focusItem = function _PfDropdownMenu_focusItem(item) {
+    const itemIndex = __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").items.indexOf(item);
+    if (itemIndex !== __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").atFocusedItemIndex) {
+        __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").atFocusedItemIndex = itemIndex;
     }
 };
 _PfDropdownMenu_getSlottedItems = function _PfDropdownMenu_getSlottedItems(slot) {
@@ -121,6 +120,7 @@ PfDropdownMenu.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfDropdownMenu.version = "4.0.0";
 __decorate([
     consume({ context, subscribe: true }),
     state()

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

@@ -1 +1 @@
-{"version":3,"file":"pf-dropdown-menu.js","sourceRoot":"","sources":["pf-dropdown-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { consume } from '@lit/context';\nimport { state } from 'lit/decorators/state.js';\nimport { context, type PfDropdownContext } from './context.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { PfDropdownItem, DropdownItemChange } from './pf-dropdown-item.js';\nimport { PfDropdownGroup } from './pf-dropdown-group.js';\n\nimport styles from './pf-dropdown-menu.css';\nimport { classMap } from 'lit/directives/class-map.js';\n\nfunction isDisabledItemClick(event: MouseEvent) {\n  const item: PfDropdownItem | undefined =\n    event.composedPath().find((x): x is PfDropdownItem => x instanceof PfDropdownItem);\n  return !!item?.disabled;\n}\n\n/**\n * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a\n * process or navigate to a new location.\n * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`\n */\n@customElement('pf-dropdown-menu')\nexport class PfDropdownMenu extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @consume({ context, subscribe: true })\n  @state()\n  private ctx?: PfDropdownContext;\n\n  #internals = InternalsController.of(this, { role: 'menu' });\n\n  #tabindex = new RovingTabindexController(this, {\n    getItems: () => this.items.map(x => x.menuItem),\n  });\n\n  /**\n   * current active descendant in menu\n   */\n  get activeItem() {\n    return this.#tabindex.activeItem ?? this.#tabindex.firstItem;\n  }\n\n  /**\n   * index of current active descendant in menu\n   */\n  get activeIndex() {\n    if (!this.#tabindex.activeItem) {\n      return -1;\n    } else {\n      return this.#tabindex.items.indexOf(this.#tabindex.activeItem);\n    }\n  }\n\n  get items(): PfDropdownItem[] {\n    return this.#getSlottedItems(this.shadowRoot?.querySelector('slot'));\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('focusin', this.#onMenuitemFocusin);\n    this.addEventListener('click', this.#onMenuitemClick);\n  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaDisabled = String(!!this.ctx?.disabled);\n  }\n\n  render() {\n    const { disabled = false } = this.ctx ?? {};\n    return html`\n      <slot class=\"${classMap({ disabled })}\"\n            @slotchange=\"${this.#onSlotChange}\"\n            @change=\"${this.#onItemChange}\"></slot>\n    `;\n  }\n\n  /**\n   * handles a change event from a dropdown item\n   * @param event {Event}\n   */\n  #onItemChange(event: Event) {\n    if (event instanceof DropdownItemChange) {\n      this.#tabindex.updateItems();\n    }\n  }\n\n  /**\n   * handles slot change event\n   */\n  #onSlotChange() {\n    this.#tabindex.updateItems();\n  }\n\n  /**\n   * handles focusing on an option:\n   * updates roving tabindex and active descendant\n   */\n  #onMenuitemFocusin(event: FocusEvent) {\n    if (this.ctx?.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (event.target instanceof PfDropdownItem\n        && event.target.menuItem !== this.#tabindex.activeItem) {\n      this.#tabindex.setActiveItem(event.target.menuItem);\n    }\n  }\n\n  /**\n   * handles clicking on a menuitem:\n   * which selects an item by default\n   * or toggles selection if multiselectable\n   */\n  #onMenuitemClick(event: MouseEvent) {\n    if (this.ctx?.disabled || isDisabledItemClick(event)) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (event.target instanceof PfDropdownItem\n        && event.target.menuItem !== this.#tabindex.activeItem) {\n      this.#tabindex.setActiveItem(event.target.menuItem);\n    }\n  }\n\n  #getSlottedItems(slot?: HTMLSlotElement | null): PfDropdownItem[] {\n    return slot\n        ?.assignedElements()\n        .flatMap(element => {\n          if (element instanceof HTMLSlotElement) {\n            return this.#getSlottedItems(element);\n          } else if (element instanceof PfDropdownItem) {\n            return [element];\n          } else if (element instanceof PfDropdownGroup) {\n            return Array.from(element.querySelectorAll('pf-dropdown-item'));\n          } else {\n            return [];\n          }\n        }) ?? [];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-menu': PfDropdownMenu;\n  }\n}\n"]}
+{"version":3,"file":"pf-dropdown-menu.js","sourceRoot":"","sources":["pf-dropdown-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { consume } from '@lit/context';\nimport { state } from 'lit/decorators/state.js';\nimport { context, type PfDropdownContext } from './context.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { PfDropdownItem, DropdownItemChange } from './pf-dropdown-item.js';\nimport { PfDropdownGroup } from './pf-dropdown-group.js';\n\nimport styles from './pf-dropdown-menu.css';\nimport { classMap } from 'lit/directives/class-map.js';\n\nfunction isDisabledItemClick(event: MouseEvent) {\n  const item: PfDropdownItem | undefined =\n    event.composedPath().find((x): x is PfDropdownItem => x instanceof PfDropdownItem);\n  return !!item?.disabled;\n}\n\n/**\n * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a\n * process or navigate to a new location.\n * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`\n */\n@customElement('pf-dropdown-menu')\nexport class PfDropdownMenu extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @consume({ context, subscribe: true })\n  @state()\n  private ctx?: PfDropdownContext;\n\n  #internals = InternalsController.of(this, { role: 'menu' });\n\n  get #items() {\n    return this.items.map(x => x.menuItem);\n  }\n\n  #tabindex = RovingTabindexController.of(this, {\n    getItems: () => this.#items,\n  });\n\n  /**\n   * current active descendant in menu\n   */\n  get activeItem(): HTMLElement | null {\n    return this.#tabindex.items.at(this.#tabindex.atFocusedItemIndex)\n        ?? this.#tabindex.atFocusableItems.at(0)\n        ?? null;\n  }\n\n  /**\n   * index of current active descendant in menu\n   */\n  get activeIndex(): number {\n    return this.#tabindex.atFocusedItemIndex;\n  }\n\n  get items(): PfDropdownItem[] {\n    return this.#getSlottedItems(this.shadowRoot?.querySelector('slot'));\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('focusin', this.#onMenuitemFocusin);\n    this.addEventListener('click', this.#onMenuitemClick);\n  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaDisabled = String(!!this.ctx?.disabled);\n  }\n\n  render(): TemplateResult<1> {\n    const { disabled = false } = this.ctx ?? {};\n    return html`\n      <slot class=\"${classMap({ disabled })}\"\n            @slotchange=\"${this.#onSlotChange}\"\n            @change=\"${this.#onItemChange}\"></slot>\n    `;\n  }\n\n  /**\n   * handles a change event from a dropdown item\n   * @param event {Event}\n   */\n  #onItemChange(event: Event) {\n    if (event instanceof DropdownItemChange) {\n      this.#onSlotChange();\n    }\n  }\n\n  /**\n   * handles slot change event\n   */\n  #onSlotChange() {\n    this.#tabindex.items = this.#items;\n  }\n\n  /**\n   * handles focusing on an option:\n   * updates roving tabindex and active descendant\n   * @param event the focus event\n   */\n  #onMenuitemFocusin(event: FocusEvent) {\n    if (this.ctx?.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (event.target instanceof PfDropdownItem) {\n      this.#focusItem(event.target.menuItem);\n    }\n  }\n\n  /**\n   * handles clicking on a menuitem:\n   * which selects an item by default\n   * or toggles selection if multiselectable\n   * @param event the click event\n   */\n  #onMenuitemClick(event: MouseEvent) {\n    if (this.ctx?.disabled || isDisabledItemClick(event)) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (event.target instanceof PfDropdownItem) {\n      this.#focusItem(event.target.menuItem);\n    }\n  }\n\n  #focusItem(item: HTMLElement) {\n    const itemIndex = this.#tabindex.items.indexOf(item);\n    if (itemIndex !== this.#tabindex.atFocusedItemIndex) {\n      this.#tabindex.atFocusedItemIndex = itemIndex;\n    }\n  }\n\n  #getSlottedItems(slot?: HTMLSlotElement | null): PfDropdownItem[] {\n    return slot\n        ?.assignedElements()\n        .flatMap(element => {\n          if (element instanceof HTMLSlotElement) {\n            return this.#getSlottedItems(element);\n          } else if (element instanceof PfDropdownItem) {\n            return [element];\n          } else if (element instanceof PfDropdownGroup) {\n            return Array.from(element.querySelectorAll('pf-dropdown-item'));\n          } else {\n            return [];\n          }\n        }) ?? [];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-menu': PfDropdownMenu;\n  }\n}\n"]}

package/pf-dropdown/pf-dropdown.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import '@patternfly/elements/pf-button/pf-button.js';
 export declare class PfDropdownSelectEvent extends Event {
     originalEvent: Event | KeyboardEvent;
@@ -12,21 +12,11 @@ export declare class PfDropdownSelectEvent extends Event {
  * @slot toggle - Custom toggle button
  * @slot menu - when using a custom toggle, you must slot a `<pf-dropdown-menu>` in alongside it
  * @csspart menu - The dropdown menu wrapper
- * @cssprop {<length>} --pf-c-dropdown__menu--PaddingTop
- *          Dropdown top padding
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight
- *          Dropdown right padding
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu--ZIndex
- *          Dropdown z-index
- *          {@default `200`}
- * @cssprop --pf-c-dropdown__menu--BoxShadow
- *          Dropdown box shadow
- *          {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}
- * @cssprop {<length>} --pf-c-dropdown__menu--Top
- *          Dropdown top
- *          {@default `100% + 0.25rem`}
+ * @cssprop {<length>} [--pf-c-dropdown__menu--PaddingTop=0.5rem] Dropdown top padding
+ * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=0.5rem] Dropdown right padding
+ * @cssprop {<length>} [--pf-c-dropdown__menu--ZIndex=200] Dropdown z-index
+ * @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
+ * @cssprop {<length>} [--pf-c-dropdown__menu--Top=100% + 0.25rem] Dropdown top
  * @fires {PfDropdownSelectEvent} select - when a user select dropdown value
  * @fires open - when the dropdown toggles open
  * @fires close - when the dropdown toggles closed
@@ -34,13 +24,7 @@ export declare class PfDropdownSelectEvent extends Event {
 export declare class PfDropdown extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     /**
      * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.
      */
@@ -54,7 +38,7 @@ export declare class PfDropdown extends LitElement {
     private ctx;
     protected getUpdateComplete(): Promise<boolean>;
     willUpdate(changed: PropertyValues): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     firstUpdated(): void;
     updated(changed: PropertyValues<this>): void;
     /**

package/pf-dropdown/pf-dropdown.js

@@ -23,32 +23,6 @@ export class PfDropdownSelectEvent extends Event {
         this.value = value;
     }
 }
-/**
- * A **dropdown** presents a menu of actions or links in a constrained space that
- * will trigger a process or navigate to a new location.
- * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`
- * @slot toggle - Custom toggle button
- * @slot menu - when using a custom toggle, you must slot a `<pf-dropdown-menu>` in alongside it
- * @csspart menu - The dropdown menu wrapper
- * @cssprop {<length>} --pf-c-dropdown__menu--PaddingTop
- *          Dropdown top padding
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight
- *          Dropdown right padding
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-dropdown__menu--ZIndex
- *          Dropdown z-index
- *          {@default `200`}
- * @cssprop --pf-c-dropdown__menu--BoxShadow
- *          Dropdown box shadow
- *          {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}
- * @cssprop {<length>} --pf-c-dropdown__menu--Top
- *          Dropdown top
- *          {@default `100% + 0.25rem`}
- * @fires {PfDropdownSelectEvent} select - when a user select dropdown value
- * @fires open - when the dropdown toggles open
- * @fires close - when the dropdown toggles closed
- */
 let PfDropdown = class PfDropdown extends LitElement {
     constructor() {
         super(...arguments);
@@ -240,6 +214,7 @@ PfDropdown.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfDropdown.version = "4.0.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 } 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\n *          Dropdown top padding\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight\n *          Dropdown right padding\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu--ZIndex\n *          Dropdown z-index\n *          {@default `200`}\n * @cssprop --pf-c-dropdown__menu--BoxShadow\n *          Dropdown box shadow\n *          {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop {<length>} --pf-c-dropdown__menu--Top\n *          Dropdown top\n *          {@default `100% + 0.25rem`}\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 = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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) {\n    if (changed.has('disabled')) {\n      const { disabled } = this;\n      this.ctx = { disabled };\n    }\n  }\n\n  render() {\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() {\n    this.#onSlotchange();\n  }\n\n  updated(changed: PropertyValues<this>) {\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() {\n    this.expanded = true;\n    await this.updateComplete;\n  }\n\n  /**\n   * Closes the dropdown\n   */\n  async hide() {\n    this.expanded = false;\n    await this.updateComplete;\n  }\n\n  async toggle() {\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 * @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"]}