@patternfly/elements 4.0.2 → 4.2.0

package/pf-code-block/pf-code-block.js

@@ -5,27 +5,78 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: block;\n  background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);\n  font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);\n  font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n#container {\n  margin: 0;\n  padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);\n  padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);\n  padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);\n  padding-left: var(--pf-c-code-block__content--PaddingLeft, 1rem);\n}\n\n#header {\n  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);\n}\n\npre {\n  margin: 0;\n}\n\nslot[name="actions"] {\n  display: flex;\n  justify-content: end;\n}\n\n#expanded {\n  display: inline;\n}\n\nbutton {\n  display: flex;\n  background: none;\n  border: none;\n  padding: 6px 16px 6px 0;\n  color: #06c;\n  cursor: pointer;\n  font-size: 16px;\n}\n\nbutton svg {\n  color: #151515;\n  margin-right: 12px;\n  transition: .2s ease-in 0s;\n  vertical-align: -0.125em;\n}\n\n.expanded button svg {\n  transform: rotate(-90deg);\n}\n`;
+const styles = css `:host {
+  display: block;
+  /** Background color for code block */
+  background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);
+  /** Font size for code block pre element */
+  font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);
+  /** Font family for code block pre element */
+  font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#container {
+  margin: 0;
+  /** Top padding for code block content */
+  padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);
+  /** Right padding for code block content */
+  padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);
+  /** Bottom padding for code block content */
+  padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);
+  /** Left padding for code block content */
+  padding-left: var(--pf-c-code-block__content--PaddingLeft, 1rem);
+}
+
+#header {
+  /** Border bottom width for code block header */
+  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid
+    /** Border bottom color for code block header */
+    var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);
+}
+
+pre {
+  margin: 0;
+}
+
+slot[name="actions"] {
+  display: flex;
+  justify-content: end;
+}
+
+#expanded {
+  display: inline;
+}
+
+button {
+  display: flex;
+  background: none;
+  border: none;
+  padding: 6px 16px 6px 0;
+  color: #06c;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button svg {
+  color: #151515;
+  margin-right: 12px;
+  transition: .2s ease-in 0s;
+  vertical-align: -0.125em;
+}
+
+.expanded button svg {
+  transform: rotate(-90deg);
+}
+`;
 /**
  * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
- * @slot code
- *       The slot to put the code in
- * @slot expandable-code
- *       The slot to put the code in that should be revealed when the "Show more" button is
- *       clicked to expand the code-block
- * @slot actions
- *       Contains the actions for the code-block. For example, copy to clipboard.
+ * @alias Code Block
  * @attr {boolean} [expanded=false]
  *       Indicates if the code-block has been expanded
- * @cssprop {<color>} [--pf-c-code-block--BackgroundColor=#f0f0f0]
- * @cssprop {<length>} [--pf-c-code-block__header--BorderBottomWidth=1px]
- * @cssprop {<color>} [--pf-c-code-block__header--BorderBottomColor=#d2d2d2]
- * @cssprop {<length>} [--pf-c-code-block__content--PaddingTop=1rem]
- * @cssprop {<length>} [--pf-c-code-block__content--PaddingRight=1rem]
- * @cssprop {<length>} [--pf-c-code-block__content--PaddingBottom=1rem]
- * @cssprop {<length>} [--pf-c-code-block__content--PaddingLeft=1rem]
- * @cssprop {<length>} [--pf-c-code-block__pre--FontSize=0.875rem]
- * @cssprop {<string>} [--pf-c-code-block__pre--FontFamily="Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace]
  */
 function dedent(str) {
     const stripped = str.replace(/^\n/, '');
@@ -44,6 +95,7 @@ let PfCodeBlock = class PfCodeBlock extends LitElement {
         return html `
       <div id="header">
         <div id="actions">
+          <!-- Contains the actions for the code-block. For example, copy to clipboard. -->
           <slot name="actions"></slot>
         </div>
       </div>
@@ -85,7 +137,7 @@ _PfCodeBlock_toggle = function _PfCodeBlock_toggle() {
     this.expanded = !this.expanded;
 };
 PfCodeBlock.styles = [styles];
-PfCodeBlock.version = "4.0.2";
+PfCodeBlock.version = "4.2.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfCodeBlock.prototype, "expanded", void 0);

package/pf-code-block/pf-code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.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;;;AAGvD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,SAAS,MAAM,CAAC,GAAW;IACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9E,CAAC;AAGM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;;QAGL,kDAAkD;QACN,aAAQ,GAAG,KAAK,CAAC;;IAgBpD,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;mCAMoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,uBAAA,IAAI,wDAAS;uBACxB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC/B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;;;;;;;YASjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;;IAvCC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACxE,CAAC;;IAGC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAoB,cAAc,CAAC,CAAC;IACvE,IAAI,MAAM,EAAE,IAAI,KAAK,wBAAwB;WACtC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE,CAAC;QACzD,OAAO,EAAE,CAAC;IACZ,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC;AACH,CAAC;;IA+BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;AAjDe,kBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGP;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAJlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW","sourcesContent":["import { LitElement, html, 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 styles from './pf-code-block.css';\n\n/**\n * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.\n * @slot code\n *       The slot to put the code in\n * @slot expandable-code\n *       The slot to put the code in that should be revealed when the \"Show more\" button is\n *       clicked to expand the code-block\n * @slot actions\n *       Contains the actions for the code-block. For example, copy to clipboard.\n * @attr {boolean} [expanded=false]\n *       Indicates if the code-block has been expanded\n * @cssprop {<color>} [--pf-c-code-block--BackgroundColor=#f0f0f0]\n * @cssprop {<length>} [--pf-c-code-block__header--BorderBottomWidth=1px]\n * @cssprop {<color>} [--pf-c-code-block__header--BorderBottomColor=#d2d2d2]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingTop=1rem]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingRight=1rem]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingBottom=1rem]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingLeft=1rem]\n * @cssprop {<length>} [--pf-c-code-block__pre--FontSize=0.875rem]\n * @cssprop {<string>} [--pf-c-code-block__pre--FontFamily=\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace]\n */\n\nfunction dedent(str: string): string {\n  const stripped = str.replace(/^\\n/, '');\n  const match = stripped.match(/^\\s+/);\n  return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n}\n\n@customElement('pf-code-block')\nexport class PfCodeBlock extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /** Flag for whether the code block is expanded */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  get #expandedContent(): string {\n    return this.querySelector?.('script[data-expand]')?.textContent ?? '';\n  }\n\n  get #content() {\n    const script = this.querySelector?.<HTMLScriptElement>('script[type]');\n    if (script?.type !== 'text/javascript-sample'\n        && !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n      return '';\n    } else {\n      return dedent(script?.textContent ?? '');\n    }\n  }\n\n  override render(): TemplateResult<1> {\n    const { expanded } = this;\n    return html`\n      <div id=\"header\">\n        <div id=\"actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n      <div id=\"container\" class=\"${classMap({ expanded })}\">\n        <pre><code id=\"content\">${this.#content}</code><code id=\"code-block-expand\"\n            ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n        <button ?hidden=\"${!this.#expandedContent}\"\n                @click=${this.#toggle}\n                aria-expanded=${this.expanded}\n                aria-controls=\"code-block-expand\">\n          <svg fill=\"currentColor\"\n               height=\"1em\"\n               width=\"1em\"\n               viewBox=\"0 0 256 512\"\n               aria-hidden=\"true\"\n               role=\"img\"><path\n                  d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"/></svg>\n          ${!this.expanded ? 'Show more' : 'Show less'}\n        </button>\n      </div>\n    `;\n  }\n\n  #toggle() {\n    this.expanded = !this.expanded;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-code-block': PfCodeBlock;\n  }\n}\n"]}
+{"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGvD;;;;;GAKG;AAEH,SAAS,MAAM,CAAC,GAAW;IACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9E,CAAC;AAGM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;;QAGL,kDAAkD;QACN,aAAQ,GAAG,KAAK,CAAC;;IAgBpD,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;;mCAOoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,uBAAA,IAAI,wDAAS;uBACxB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC/B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;;;;;;;YASjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;;IAxCC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACxE,CAAC;;IAGC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAoB,cAAc,CAAC,CAAC;IACvE,IAAI,MAAM,EAAE,IAAI,KAAK,wBAAwB;WACtC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE,CAAC;QACzD,OAAO,EAAE,CAAC;IACZ,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC;AACH,CAAC;;IAgCC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;AAlDe,kBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGP;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAJlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW","sourcesContent":["import { LitElement, html, 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 styles from './pf-code-block.css';\n\n/**\n * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.\n * @alias Code Block\n * @attr {boolean} [expanded=false]\n *       Indicates if the code-block has been expanded\n */\n\nfunction dedent(str: string): string {\n  const stripped = str.replace(/^\\n/, '');\n  const match = stripped.match(/^\\s+/);\n  return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n}\n\n@customElement('pf-code-block')\nexport class PfCodeBlock extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /** Flag for whether the code block is expanded */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  get #expandedContent(): string {\n    return this.querySelector?.('script[data-expand]')?.textContent ?? '';\n  }\n\n  get #content() {\n    const script = this.querySelector?.<HTMLScriptElement>('script[type]');\n    if (script?.type !== 'text/javascript-sample'\n        && !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n      return '';\n    } else {\n      return dedent(script?.textContent ?? '');\n    }\n  }\n\n  override render(): TemplateResult<1> {\n    const { expanded } = this;\n    return html`\n      <div id=\"header\">\n        <div id=\"actions\">\n          <!-- Contains the actions for the code-block. For example, copy to clipboard. -->\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n      <div id=\"container\" class=\"${classMap({ expanded })}\">\n        <pre><code id=\"content\">${this.#content}</code><code id=\"code-block-expand\"\n            ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n        <button ?hidden=\"${!this.#expandedContent}\"\n                @click=${this.#toggle}\n                aria-expanded=${this.expanded}\n                aria-controls=\"code-block-expand\">\n          <svg fill=\"currentColor\"\n               height=\"1em\"\n               width=\"1em\"\n               viewBox=\"0 0 256 512\"\n               aria-hidden=\"true\"\n               role=\"img\"><path\n                  d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"/></svg>\n          ${!this.expanded ? 'Show more' : 'Show less'}\n        </button>\n      </div>\n    `;\n  }\n\n  #toggle() {\n    this.expanded = !this.expanded;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-code-block': PfCodeBlock;\n  }\n}\n"]}

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

@@ -3,7 +3,45 @@ import { LitElement, html } from 'lit';
 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`;
+const styles = css `:host {
+  display: block;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+p {
+  margin: 0;
+  font-size: 14px;
+  font-weight: normal;
+  color: #777;
+  padding-top: 0.5rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #6a6e73;
+}
+
+::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;
+  pointer-events: none;
+}
+`;
 let PfDropdownGroup = class PfDropdownGroup extends LitElement {
     render() {
         return html `
@@ -17,7 +55,7 @@ PfDropdownGroup.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfDropdownGroup.version = "4.0.2";
+PfDropdownGroup.version = "4.2.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,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"]}
+{"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.css

@@ -5,22 +5,27 @@
   white-space: nowrap;
   border: none;
   cursor: pointer;
+  /** Dropdown item font size */
   font-size: var(
     --pf-c-dropdown__menu-item--FontSize,
     var(--pf-global--FontSize--md, 1rem)
   );
+  /** Dropdown item font weight */
   font-weight: var(
     --pf-c-dropdown__menu-item--FontWeight,
     var(--pf-global--FontWeight--normal, 400)
   );
+  /** Dropdown item line height */
   line-height: var(
     --pf-c-dropdown__menu-item--LineHeight,
     var(--pf-global--LineHeight--md, 1.5)
   );
+  /** Dropdown item color */
   color: var(
     --pf-c-dropdown__menu-item--Color,
     var(--pf-global--Color--dark-100, #151515)
   );
+  /** Dropdown item background color */
   background-color: var(
     --pf-c-dropdown__menu-item--BackgroundColor,
     transparent
@@ -73,19 +78,24 @@
   align-items: stretch;
   justify-content: space-between;
   flex-wrap: wrap;
+  /** Dropdown item padding */
   padding: var(
+      /** Dropdown item padding top */
       --pf-c-dropdown__menu-item--PaddingTop,
       var(--pf-global--spacer--sm, 0.5rem)
     )
     var(
+      /** Dropdown item padding right */
       --pf-c-dropdown__menu-item--PaddingRight,
       var(--pf-global--spacer--md, 1rem)
     )
     var(
+      /** Dropdown item padding bottom */
       --pf-c-dropdown__menu-item--PaddingBottom,
       var(--pf-global--spacer--sm, 0.5rem)
     )
     var(
+      /** Dropdown item padding left */
       --pf-c-dropdown__menu-item--PaddingLeft,
       var(--pf-global--spacer--md, 1rem)
     );

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

@@ -10,33 +10,6 @@ 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=1rem]
- *          Dropdown item font size
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--FontWeight=400]
- *          Dropdown item font weight
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--LineHeight=1.5]
- *          Dropdown item line height
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--Color=#151515]
- *          Dropdown item color
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--BackgroundColor=transparent]
- *          Dropdown item background color
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingTop=0.5rem]
- *          Dropdown item padding top
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingRight=1rem]
- *          Dropdown item padding right
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingBottom=0.5rem]
- *          Dropdown item padding bottom
- *
- * @cssprop {<length>} [--pf-c-dropdown__menu-item--PaddingLeft=1rem]
- *          Dropdown item padding left
- *
  */
 export declare class PfDropdownItem extends LitElement {
     static readonly styles: CSSStyleSheet[];

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

@@ -7,7 +7,160 @@ import { query } from 'lit/decorators/query.js';
 import { consume } from '@lit/context';
 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`;
+const styles = css `:host {
+  display: block;
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+  border: none;
+  cursor: pointer;
+  /** Dropdown item font size */
+  font-size: var(
+    --pf-c-dropdown__menu-item--FontSize,
+    var(--pf-global--FontSize--md, 1rem)
+  );
+  /** Dropdown item font weight */
+  font-weight: var(
+    --pf-c-dropdown__menu-item--FontWeight,
+    var(--pf-global--FontWeight--normal, 400)
+  );
+  /** Dropdown item line height */
+  line-height: var(
+    --pf-c-dropdown__menu-item--LineHeight,
+    var(--pf-global--LineHeight--md, 1.5)
+  );
+  /** Dropdown item color */
+  color: var(
+    --pf-c-dropdown__menu-item--Color,
+    var(--pf-global--Color--dark-100, #151515)
+  );
+  /** Dropdown item background color */
+  background-color: var(
+    --pf-c-dropdown__menu-item--BackgroundColor,
+    transparent
+  );
+  border: 3px solid var(
+    --pf-c-dropdown__menu-item--BackgroundColor,
+    transparent
+  );
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+:host([disabled]),
+.disabled {
+  &, & a {
+    cursor: not-allowed;
+  }
+  --pf-c-dropdown__menu-item--Color: var(
+    --pf-c-dropdown__menu-item--disabled--Color,
+    var(--pf-global--Color--dark-200, #6a6e73)
+  );
+  --pf-c-dropdown__menu-item--BackgroundColor: var(
+    --pf-c-dropdown__menu-item--disabled--BackgroundColor,
+    transparent
+  );
+}
+
+:host(:hover) {
+  --pf-c-dropdown__menu-item--Color: var(
+    --pf-c-dropdown__menu-item--hover--Color,
+    var(--pf-global--Color--dark-100, #151515)
+  );
+  --pf-c-dropdown__menu-item--BackgroundColor: var(
+    --pf-c-dropdown__menu-item--hover--BackgroundColor,
+    var(--pf-global--BackgroundColor--light-300, #f0f0f0)
+  );
+  text-decoration: none;
+}
+
+:host(:focus-within) {
+  border: 3px solid var(--pf-global--link--Color, #0066cc);
+}
+
+#menuitem {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  /** Dropdown item padding */
+  padding: var(
+      /** Dropdown item padding top */
+      --pf-c-dropdown__menu-item--PaddingTop,
+      var(--pf-global--spacer--sm, 0.5rem)
+    )
+    var(
+      /** Dropdown item padding right */
+      --pf-c-dropdown__menu-item--PaddingRight,
+      var(--pf-global--spacer--md, 1rem)
+    )
+    var(
+      /** Dropdown item padding bottom */
+      --pf-c-dropdown__menu-item--PaddingBottom,
+      var(--pf-global--spacer--sm, 0.5rem)
+    )
+    var(
+      /** Dropdown item padding left */
+      --pf-c-dropdown__menu-item--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem)
+    );
+}
+
+#item {
+  display: flex;
+  align-items: center;
+}
+
+#item:focus {
+  outline: none;
+}
+
+#item::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+#description {
+  display: block;
+  flex: 1 0 100%;
+  font-size: var(
+    --pf-c-dropdown__menu-item-description--FontSize, var(
+      --pf-global--FontSize--sm, 0.75rem
+    )
+  );
+  color: var(
+    --pf-c-dropdown__menu-item-description--Color, var(
+      --pf-global--Color--dark-200, #6a6e73
+    )
+  );
+  word-break: break-all;
+}
+
+a {
+  color: var(
+    --pf-c-dropdown__menu-item--Color,
+    var(--pf-global--Color--dark-100, #151515)
+  ) !important;
+  text-decoration: none !important;
+}
+
+slot:not([name]){
+  flex: 1 0 44px;
+  min-height: 44px;
+}
+
+slot[name="icon"]::slotted(*) {
+  margin-inline-end: 0.5em;
+}
+`;
 export class DropdownItemChange extends Event {
     constructor() {
         super('change', { bubbles: true, cancelable: true });
@@ -54,7 +207,7 @@ PfDropdownItem.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfDropdownItem.version = "4.0.2";
+PfDropdownItem.version = "4.2.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,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"]}
+{"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;AAYM,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 */\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.js

@@ -10,7 +10,44 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals-
 import { PfDropdownItem, DropdownItemChange } from './pf-dropdown-item.js';
 import { PfDropdownGroup } from './pf-dropdown-group.js';
 import { css } from "lit";
-const styles = css `:host {\n  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff);\n}\n\n.disabled {\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  ) !important;\n  --pf-c-dropdown__menu-item--BackgroundColor: var(\n    --pf-c-dropdown__menu-item--disabled--BackgroundColor,\n    transparent\n  ) !important;\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\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\n`;
+const styles = css `:host {
+  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff);
+}
+
+.disabled {
+  --pf-c-dropdown__menu-item--Color: var(
+    --pf-c-dropdown__menu-item--disabled--Color,
+    var(--pf-global--Color--dark-200, #6a6e73)
+  ) !important;
+  --pf-c-dropdown__menu-item--BackgroundColor: var(
+    --pf-c-dropdown__menu-item--disabled--BackgroundColor,
+    transparent
+  ) !important;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+::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;
+  pointer-events: none;
+}
+
+`;
 import { classMap } from 'lit/directives/class-map.js';
 function isDisabledItemClick(event) {
     const item = event.composedPath().find((x) => x instanceof PfDropdownItem);
@@ -120,7 +157,7 @@ PfDropdownMenu.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfDropdownMenu.version = "4.0.2";
+PfDropdownMenu.version = "4.2.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, 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"]}
+{"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.css

@@ -94,15 +94,20 @@
   --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);

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

@@ -8,15 +8,7 @@ export declare class PfDropdownSelectEvent extends Event {
 /**
  * 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=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
+ * @alias Dropdown
  * @fires {PfDropdownSelectEvent} select - when a user select dropdown value
  * @fires open - when the dropdown toggles open
  * @fires close - when the dropdown toggles closed