diff --git a/.changeset/cold-tools-follow.md b/.changeset/cold-tools-follow.md
new file mode 100644
index 0000000000..3a2246d21a
--- /dev/null
+++ b/.changeset/cold-tools-follow.md
@@ -0,0 +1,6 @@
+---
+"@patternfly/elements": patch
+---
+
+Use inline slot documentation instead of JSDoc
+  
\ No newline at end of file
diff --git a/.changeset/little-lizards-jog.md b/.changeset/little-lizards-jog.md
new file mode 100644
index 0000000000..3a07fa8f0f
--- /dev/null
+++ b/.changeset/little-lizards-jog.md
@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+Adjust dev server for new cem output
+  
\ No newline at end of file
diff --git a/docs/components/demos.11tydata.cjs b/docs/components/demos.11tydata.cjs
index ca77da79f0..24a74b500e 100644
--- a/docs/components/demos.11tydata.cjs
+++ b/docs/components/demos.11tydata.cjs
@@ -1,4 +1,3 @@
-const { dirname } = require('path');
 module.exports = {
   templateEngineOverride: 'njk',
   permalink: '{{ demo.permalink }}',
@@ -6,19 +5,5 @@ module.exports = {
     data: 'demos',
     alias: 'demo',
     size: 1,
-    // somehow the main pf-icon demo is being printed twice.
-    // so we'll group by tag name, and only take the first of each.
-    before: demos => Object.values(Object.groupBy(demos
-        .filter(demo => demo.permalink?.includes(demo.tagName))
-        .map(demo => {
-          if (demo.filePath?.endsWith(`${demo.tagName}.html`)) {
-            return {
-              ...demo,
-              permalink: `${dirname(demo.permalink)}/`,
-            };
-          } else {
-            return demo;
-          }
-        }), demo => demo.tagName)).map(([x]) => x),
   },
 };
diff --git a/docs/docs/develop/html.md b/docs/docs/develop/html.md
index 25872743ef..7720cab6af 100644
--- a/docs/docs/develop/html.md
+++ b/docs/docs/develop/html.md
@@ -49,7 +49,7 @@ render() {
 }
 ```
 
-We'll also need to update `/demo/pf-cool-element.html`
+We'll also need to update `/demo/index.html`
 so that the user's name is passed into the slot that we added in `pf-cool-element.ts`:
 
 ```html
diff --git a/elements/.config/cem.yaml b/elements/.config/cem.yaml
index 9362bca3c4..a9ca07ef88 100644
--- a/elements/.config/cem.yaml
+++ b/elements/.config/cem.yaml
@@ -10,5 +10,5 @@ generate:
   noDefaultExcludes: false
   demoDiscovery:
     fileGlob: '*/demo/*.html'
-    urlPattern: pf-(?P<tag>[\w-]+)/demo/(?P<demo>[\w-]+).html
-    urlTemplate: https://patternflyelements.org/components/{tag}/demo/{demo}/
+    urlPattern: ':tag/demo/:demo.html'
+    urlTemplate: https://patternflyelements.org/components/{{.tag | alias | slug}}/demo/{{.demo | slug}}/
diff --git a/elements/pf-accordion/demo/pf-accordion.html b/elements/pf-accordion/demo/index.html
similarity index 100%
rename from elements/pf-accordion/demo/pf-accordion.html
rename to elements/pf-accordion/demo/index.html
diff --git a/elements/pf-accordion/pf-accordion-header.css b/elements/pf-accordion/pf-accordion-header.css
index cec8e35d07..6ff1d60026 100644
--- a/elements/pf-accordion/pf-accordion-header.css
+++ b/elements/pf-accordion/pf-accordion-header.css
@@ -1,15 +1,23 @@
 :host {
   --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
 
+  /**
+   * Sets the font color for the accordion header.
+   */
   color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
   background-color: var(--pf-global--BackgroundColor--100, #ffffff);
 }
 
 :host([large]) {
+  /** Sets the top padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Sets the right padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Sets the bottom padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Sets the left padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  /** Sets the font family for the accordion header. */
   --pf-c-accordion__toggle--FontFamily:
     var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
       "RedHatDisplayUpdated",
@@ -19,6 +27,7 @@
       arial,
       sans-serif
     );
+  /** Sets the font size for the accordion header. */
   --pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
   --pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);
   --pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);
@@ -47,10 +56,14 @@ a {
 .toggle:after {
   padding: 0;
   margin: 0;
+  /** Sets the background color for the accordion header toggle element. */
   background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
 }
 
 .icon {
+  /**
+   * Sets the transition animation for the accordion header.
+   */
   transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
 }
 
@@ -74,12 +87,18 @@ a {
         arial,
         sans-serif));
   font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
+  /**
+   * Sets the font weight for the accordion header.
+   */
   font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
   color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
 }
 
 .toggle[aria-expanded="true"] {
   --pf-c-accordion__toggle--after--BackgroundColor:
+    /**
+     * Sets the hover expanded before background color for the accordion header.
+     */
     var(
       --pf-c-accordion__toggle--expanded--before--BackgroundColor,
       var(
@@ -91,7 +110,13 @@ a {
 
 .toggle:after {
   top: var(--pf-c-accordion__toggle--before--Top, -1px);
+  /**
+   * Sets the sidebar width for the accordion header.
+   */
   width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
+  /**
+   * Sets the background color for the after element for the accordion header toggle element.
+   */
   background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
   content: "";
   position: absolute;
@@ -103,17 +128,26 @@ span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  /**
+   * Sets the max width for the text inside the accordion header.
+   */
   max-width: var(--pf-c-accordion__toggle-text--MaxWidth,
     calc(100% - var(--pf-global--spacer--lg, 1.5rem)));
 }
 
 .toggle[aria-expanded="true"] .icon {
+  /**
+   * Sets the expanded icon rotation degrees for the accordion header.
+   */
   rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
 }
 
 .toggle:hover,
 .toggle:active,
 .toggle:focus {
+  /**
+   * Sets the active background color for the accordion header.
+   */
   background-color:
     var(--pf-c-accordion__toggle--active--BackgroundColor,
       var(--pf-global--BackgroundColor--200, #f0f0f0));
@@ -122,6 +156,9 @@ span {
 .toggle:hover span,
 .toggle:focus span,
 .toggle:active span {
+  /**
+   * Sets the active text color for the accordion header.
+   */
   color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
 }
 
diff --git a/elements/pf-accordion/pf-accordion-header.ts b/elements/pf-accordion/pf-accordion-header.ts
index d4acc6ad62..ed59c62ba9 100644
--- a/elements/pf-accordion/pf-accordion-header.ts
+++ b/elements/pf-accordion/pf-accordion-header.ts
@@ -30,68 +30,7 @@ export class PfAccordionHeaderChangeEvent extends Event {
 
 /**
  * Accordion Header
- * @csspart text - inline element containing the heading text or slotted heading content
- * @csspart accents - container for accents within the header
- * @csspart icon - caret icon
- * @slot
- *       We expect the light DOM of the pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)
- * @slot accents
- *       These elements will appear inline with the accordion header, between the header and the chevron
- *       (or after the chevron and header in disclosure mode).
  * @fires {AccordionHeaderChangeEvent} change - when the open panels change
- * @cssprop     {<color>} [--pf-c-accordion__toggle--Color=var(--pf-global--Color--100, #151515)]
- *              Sets the font color for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--BackgroundColor=transparent]
- *              Sets the background color for the accordion header toggle element.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--after--BackgroundColor=transparent]
- *              Sets the background color for the after element for the accordion header toggle element.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- *              Sets the top padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- *              Sets the right padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- *              Sets the bottom padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- *              Sets the left padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--FontSize=var(--pf-global--FontSize--lg, 1rem)]
- *              Sets the sidebar background color for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--FontFamily=var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif)]
- *              Sets the font family for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- *              Sets the font weight for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- *              Sets the active backgrdound color for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--active-text--Color=var(--pf-global--link--Color, #0066cc)]
- *              Sets the active text color for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--active-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- *              Sets the active text font weight for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--expanded--before--BackgroundColor=var(--pf-global--link--Color, #0066cc)]
- *              Sets the hover expanded before background color for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--expanded-icon--Rotate=90deg]
- *              Sets the expanded icon rotation degrees for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]
- *              Sets the max width for the text inside the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
- *              Sets the sidebar width for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle-icon--Transition=0.2s ease-in 0s]
- *              Sets the transition animation for the accordion header.
  *
  */
 @customElement('pf-accordion-header')
@@ -136,12 +75,21 @@ export class PfAccordionHeader extends LitElement {
               class="toggle"
               @click="${this.#onClick}"
               aria-expanded="${String(!!this.expanded) as 'true' | 'false'}">
+        <!-- summary: inline element containing the heading text or slotted heading content -->
         <span part="text">${headingText ?? html`
+          <!-- summary: A heading level tag (h1, h2, h3, h4, h5, h6) -->
           <slot></slot>`}
         </span>
+        <!-- summary: container for accents within the header -->
         <span part="accents" ?hidden="${this.#slots.isEmpty('accents')}">
+          <!-- summary: Header accent elements like tag or icon
+               description: |
+                 These elements will appear inline with the accordion header,
+                 between the header and the chevron
+                 (or after the chevron and header in disclosure mode). -->
           <slot name="accents"></slot>
         </span>
+        <!-- summary: caret icon -->
         <pf-icon part="icon"
                  class="icon"
                  size="lg"
diff --git a/elements/pf-accordion/pf-accordion-panel.css b/elements/pf-accordion/pf-accordion-panel.css
index 25e90c75ba..b418e27695 100644
--- a/elements/pf-accordion/pf-accordion-panel.css
+++ b/elements/pf-accordion/pf-accordion-panel.css
@@ -4,6 +4,7 @@
   overflow: hidden;
   will-change: height;
   color: var(--pf-global--Color--100, #151515);
+  /** Background color for accordion panel */
   background-color:
     var(
       --pf-c-accordion--BackgroundColor,
@@ -12,10 +13,15 @@
 }
 
 .body {
+  /** Padding for accordion panel body */
   padding:
+    /** Top padding for panel content */
     var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
+    /** Right padding for panel content */
     var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    /** Bottom padding for panel content */
     var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
+    /** Left padding for panel content */
     var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
 }
 
@@ -25,7 +31,9 @@
   top: 0;
   bottom: 0;
   left: 0;
+  /** Before width for panel content */
   width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
+  /** Background color for panel content before element */
   background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
 }
 
@@ -50,12 +58,15 @@
 }
 
 .content {
+  /** Font color for panel content */
   color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
+  /** Font size for panel content */
   font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
 }
 
 :host([fixed]) {
   overflow-y: auto;
+  /** Maximum height for panel content when fixed */
   max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
 }
 
@@ -66,6 +77,7 @@
 
 .content[expanded],
 :host([expanded]) .content {
+  /** Sidebar color for panel when expanded */
   --pf-c-accordion__panel-body--before--BackgroundColor:
     var(
       --pf-c-accordion__panel--content-body--before--BackgroundColor,
diff --git a/elements/pf-accordion/pf-accordion-panel.ts b/elements/pf-accordion/pf-accordion-panel.ts
index 056e207f2a..545c90523a 100644
--- a/elements/pf-accordion/pf-accordion-panel.ts
+++ b/elements/pf-accordion/pf-accordion-panel.ts
@@ -9,40 +9,6 @@ import style from './pf-accordion-panel.css';
 /**
  * Accordion Panel
  * @slot - Panel content
- * @cssprop     {<color>} [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #ffffff)]
- *              Sets the background color for the panel content.
- *
- * @cssprop     {<color>} [--pf-c-accordion__panel--Color=var(--pf-global--Color--dark-200, #6a6e73)]
- *              Sets the font color for the panel content.
- *
- * @cssprop     {<length>} [--pf-c-accordion__panel--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- *              Sets the font size for the panel content.
- *
- * @cssprop     {<color>} [--pf-c-accordion__panel--content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #0066cc)]
- *              Sets the sidebar color for the panel when the context is expanded.
- *
- * @cssprop     {<length>} [--pf-c-accordion__panel--m-fixed--MaxHeight=9.375rem]
- *              Sets the maximum height for the panel content.
- *              Will only be used if the `fixed` attribute is used.
- *
- * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- *              Sets the padding top for the panel content.
- *
- * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- *              Sets the padding right for the panel content.
- *
- * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- *              Sets the padding bottom for the panel content.
- *
- * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- *              Sets the padding left for the panel content.
- *
- * @cssprop     {<color>} [--pf-c-accordion__panel-body--before--BackgroundColor=transparent]
- *              Sets the background color for the panel content.
- *
- * @cssprop     [--pf-c-accordion__panel-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
- *              Sets the before width for the panel content.
- *
  */
 @customElement('pf-accordion-panel')
 export class PfAccordionPanel extends LitElement {
diff --git a/elements/pf-accordion/pf-accordion.css b/elements/pf-accordion/pf-accordion.css
index e97465c809..cd9d61c94f 100644
--- a/elements/pf-accordion/pf-accordion.css
+++ b/elements/pf-accordion/pf-accordion.css
@@ -1,65 +1,127 @@
 :host {
+	/** BackgroundColor for the accordion */
 	--pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** PaddingTop for the toggle */
 	--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingRight for the toggle */
 	--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the toggle */
 	--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingLeft for the toggle */
 	--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** BackgroundColor for the toggle before element */
 	--pf-c-accordion__toggle--before--BackgroundColor: transparent;
+	/** Top position for the toggle before element */
 	--pf-c-accordion__toggle--before--Top: 0;
+	/** BackgroundColor for the toggle on hover */
 	--pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** BackgroundColor for the toggle on focus */
 	--pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** BackgroundColor for the toggle when active */
 	--pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** Width for the toggle before element */
 	--pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+	/** BackgroundColor for the toggle before element when expanded */
 	--pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	/** MaxWidth for the toggle text */
 	--pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+	/** Color for the toggle text on hover */
 	--pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** Color for the toggle text when active */
 	--pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** FontWeight for the toggle text when active */
 	--pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	/** Color for the toggle text on focus */
 	--pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** FontWeight for the toggle text on focus */
 	--pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	/** Color for the toggle text when expanded */
 	--pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** FontWeight for the toggle text when expanded */
 	--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	/** Transition for the toggle icon */
 	--pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+	/** Rotate value for the toggle icon when expanded */
 	--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
+	/** Color for the expanded content */
 	--pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200, #6a6e73);
+	/** FontSize for the expanded content */
 	--pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** BackgroundColor for the expanded content body before element when expanded */
 	--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	/** MaxHeight for the expanded content when fixed */
 	--pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
+	/** PaddingTop for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingRight for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingLeft for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** PaddingTop for nested expanded content body */
 	--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
+	/** BackgroundColor for the expanded content body before element */
 	--pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
+	/** Width for the expanded content body before element */
 	--pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+	/** Top position for the expanded content body before element */
 	--pf-c-accordion__expanded-content-body--before--Top: 0;
+	/** PaddingTop for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingRight for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingLeft for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** FontFamily for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+	/** FontSize for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+	/** Color for the toggle text on hover in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** Color for the toggle text when active in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** FontWeight for the toggle text when active in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Color for the toggle text on focus in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** FontWeight for the toggle text on focus in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Color for the toggle text when expanded in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** FontWeight for the toggle text when expanded in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** FontSize for the expanded content in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** Color for the expanded content in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100, #151515);
+	/** PaddingTop for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
+	/** PaddingRight for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the last child of expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	/** PaddingLeft for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** BorderTopWidth for the bordered variant */
 	--pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderTopColor for the bordered variant */
 	--pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** Top position for the toggle before element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));
+	/** BorderColor for the toggle after element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** BorderTopWidth for the toggle after element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
+	/** BorderBottomWidth for the toggle after element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderBottomWidth for the last child after element in bordered expanded content */
 	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderBottomColor for the last child after element in bordered expanded content */
 	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
 	color: var(--pf-global--Color--100, #151515);
 	background-color: var(--pf-c-accordion--BackgroundColor);
diff --git a/elements/pf-accordion/pf-accordion.ts b/elements/pf-accordion/pf-accordion.ts
index 4daaefed8c..25c9b8bebc 100644
--- a/elements/pf-accordion/pf-accordion.ts
+++ b/elements/pf-accordion/pf-accordion.ts
@@ -37,72 +37,9 @@ export class PfAccordionCollapseEvent extends Event {
 /**
  * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
  * @summary Toggle the visibility of sections of content
+ * @alias Accordion
  * @fires {AccordionExpandEvent} expand - when a panel expands
  * @fires {AccordionCollapseEvent} collapse - when a panel collapses
- * @slot
- *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.
- * @cssprop [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
- * @cssprop [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__toggle--before--BackgroundColor=transparent]
- * @cssprop [--pf-c-accordion__toggle--before--Top=0]
- * @cssprop [--pf-c-accordion__toggle--hover--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-accordion__toggle--focus--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
- * @cssprop [--pf-c-accordion__toggle--m-expanded--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]
- * @cssprop [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]
- * @cssprop [--pf-c-accordion__toggle--hover__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--active__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- * @cssprop [--pf-c-accordion__toggle-icon--Transition=.2s ease-in 0s]
- * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate=90deg]
- * @cssprop [--pf-c-accordion__expanded-content--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-accordion__expanded-content--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]
- * @cssprop [--pf-c-accordion__expanded-content--m-fixed--MaxHeight=9.375rem]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop=0]
- * @cssprop [--pf-c-accordion__expanded-content-body--before--BackgroundColor=transparent]
- * @cssprop [--pf-c-accordion__expanded-content-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
- * @cssprop [--pf-c-accordion__expanded-content-body--before--Top=0]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontFamily=var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontSize=var(--pf-global--FontSize--xl, 1.25rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--FontSize=var(--pf-global--FontSize--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop=0]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom=var(--pf-global--spacer--lg, 1.5rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]
- * @cssprop [--pf-c-accordion--m-bordered--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-accordion--m-bordered--BorderTopColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--before--Top=calc(-1 * var(--pf-global--BorderWidth--sm, 1px))]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth=0]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]
  */
 @customElement('pf-accordion')
 export class PfAccordion extends LitElement {
@@ -185,6 +122,7 @@ export class PfAccordion extends LitElement {
 
   render(): TemplateResult<1> {
     return html`
+      <!-- Place the \`pf-accordion-header\` and \`pf-accordion-panel\` elements here. -->
       <slot></slot>
     `;
   }
diff --git a/elements/pf-avatar/demo/pf-avatar.html b/elements/pf-avatar/demo/index.html
similarity index 100%
rename from elements/pf-avatar/demo/pf-avatar.html
rename to elements/pf-avatar/demo/index.html
diff --git a/elements/pf-avatar/pf-avatar.css b/elements/pf-avatar/pf-avatar.css
index 6a72785021..eb7b6aba00 100644
--- a/elements/pf-avatar/pf-avatar.css
+++ b/elements/pf-avatar/pf-avatar.css
@@ -1,20 +1,34 @@
 :host {
   display: inline-block;
+	/** Border color for avatar */
 	--pf-c-avatar--BorderColor: transparent;
+	/** Border width for avatar */
 	--pf-c-avatar--BorderWidth: 0;
+	/** Border radius for avatar */
 	--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
+	/** Width for avatar */
 	--pf-c-avatar--Width: 2.25rem;
+	/** Height for avatar */
 	--pf-c-avatar--Height: 2.25rem;
+	/** Width for small avatar */
 	--pf-c-avatar--m-sm--Width: 1.5rem;
+	/** Height for small avatar */
 	--pf-c-avatar--m-sm--Height: 1.5rem;
+	/** Width for medium avatar */
 	--pf-c-avatar--m-md--Width: 2.25rem;
+	/** Height for medium avatar */
 	--pf-c-avatar--m-md--Height: 2.25rem;
+	/** Width for large avatar */
 	--pf-c-avatar--m-lg--Width: 4.5rem;
+	/** Height for large avatar */
 	--pf-c-avatar--m-lg--Height: 4.5rem;
+	/** Width for extra large avatar */
 	--pf-c-avatar--m-xl--Width: 8rem;
+	/** Height for extra large avatar */
 	--pf-c-avatar--m-xl--Height: 8rem;
 	--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
 	--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Border color for dark avatar */
 	--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
 	--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
 	width: var(--pf-c-avatar--Width);
diff --git a/elements/pf-avatar/pf-avatar.ts b/elements/pf-avatar/pf-avatar.ts
index d4aa243830..8e84c207af 100644
--- a/elements/pf-avatar/pf-avatar.ts
+++ b/elements/pf-avatar/pf-avatar.ts
@@ -13,21 +13,8 @@ export class PfAvatarLoadEvent extends Event {
 /**
  * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
  * @summary For displaying a user's avatar image
+ * @alias Avatar
  * @fires {PfAvatarLoadEvent} load - when the avatar loads
- * @cssprop [--pf-c-avatar--Width=24px]
- * @cssprop [--pf-c-avatar--Height=24px]
- * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]
- * @cssprop [--pf-c-avatar--BorderWidth=0]
- * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]
- * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]
- * @cssprop [--pf-c-avatar--m-sm--Width=24px]
- * @cssprop [--pf-c-avatar--m-sm--Height=24px]
- * @cssprop [--pf-c-avatar--m-md--Width=36px]
- * @cssprop [--pf-c-avatar--m-md--Height=36px]
- * @cssprop [--pf-c-avatar--m-lg--Width=72px]
- * @cssprop [--pf-c-avatar--m-lg--Height=72px]
- * @cssprop [--pf-c-avatar--m-xl--Width=28px]
- * @cssprop [--pf-c-avatar--m-xl--Height=28px]
  */
 @customElement('pf-avatar')
 export class PfAvatar extends LitElement {
diff --git a/elements/pf-back-to-top/demo/pf-back-to-top.html b/elements/pf-back-to-top/demo/index.html
similarity index 100%
rename from elements/pf-back-to-top/demo/pf-back-to-top.html
rename to elements/pf-back-to-top/demo/index.html
diff --git a/elements/pf-back-to-top/pf-back-to-top.css b/elements/pf-back-to-top/pf-back-to-top.css
index 9127535ef5..2d708fee8c 100644
--- a/elements/pf-back-to-top/pf-back-to-top.css
+++ b/elements/pf-back-to-top/pf-back-to-top.css
@@ -1,18 +1,27 @@
 :host {
   display: inline-block;
   position: absolute;
+  /** Right position for back to top */
   right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));
+  /** Bottom position for back to top */
   bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));
 }
 
 [part="trigger"] {
+  /** Box shadow for back to top button */
   box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));
 
+  /** Font size for back to top button */
   --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
+  /** Border radius for back to top button */
   --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius,  var(--pf-global--BorderRadius--lg, 30em));
+  /** Top padding for back to top button */
   --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
+  /** Right padding for back to top button */
   --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** Bottom padding for back to top button */
   --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
+  /** Left padding for back to top button */
   --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
 }
 
@@ -20,12 +29,15 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /** Primary color for back to top button */
   color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));
+  /** Primary background color for back to top button */
   background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));
   text-decoration: none;
   font-size: var(--pf-c-button--FontSize);
   padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
   border-radius: var(--pf-c-button--BorderRadius);
+  /** End icon margin left for back to top button */
   gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
 }
 
diff --git a/elements/pf-back-to-top/pf-back-to-top.ts b/elements/pf-back-to-top/pf-back-to-top.ts
index 3d3da33ec9..346ea8d79f 100644
--- a/elements/pf-back-to-top/pf-back-to-top.ts
+++ b/elements/pf-back-to-top/pf-back-to-top.ts
@@ -13,23 +13,7 @@ import styles from './pf-back-to-top.css';
 /**
  * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
  * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.
- * @csspart trigger - The `<a>` or `<pf-button>` element
- * @slot icon
- *       Contains the prefix icon to display before the link or button.
- * @slot
- *       Text to display inside the link or button.
- * @cssprop {<length>} [--pf-c-back-to-top--Right=3rem`]
- * @cssprop {<length>} [--pf-c-back-to-top--Bottom=1.5rem`]
- * @cssprop [--pf-c-back-to-top--c-button--BoxShadow=0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)]
- * @cssprop {<length>} [--pf-c-button--FontSize=0.75rem]
- * @cssprop {<length>|<percentage>}  [--pf-c-button--BorderRadius=30em]
- * @cssprop {<length>} [--pf-c-button--PaddingTop=0.25rem]
- * @cssprop {<length>} [--pf-c-button--PaddingRight=0.5rem]
- * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.25rem]
- * @cssprop {<length>} [--pf-c-button--PaddingLeft=0.5rem]
- * @cssprop {<color>} [--pf-c-button--m-primary--Color=#fff]
- * @cssprop {<color>} [--pf-c-button--m-primary--BackgroundColor=#06c]
- * @cssprop {<length>} [--pf-c-button__icon--m-end--MarginLeft=0.25rem]
+ * @alias Back to Top
  */
 @customElement('pf-back-to-top')
 export class PfBackToTop extends LitElement {
@@ -112,14 +96,21 @@ export class PfBackToTop extends LitElement {
 
     if (this.href) {
       return html`
-        <a href="${this.href}" ?hidden="${!this.#visible}" part="trigger" aria-label="${ifDefined(this.#ariaLabel)}">
+        <!-- The \`<a>\` or \`<pf-button>\` element -->
+        <a href="${this.href}"
+           ?hidden="${!this.#visible}"
+           part="trigger"
+           aria-label="${ifDefined(this.#ariaLabel)}">
+          <!-- Contains the prefix icon to display before the link or button. -->
           <slot name="icon"></slot>
+          <!-- Text to display inside the link or button. -->
           <slot @slotchange="${this.#onSlotchange}"></slot>
           <pf-icon icon="angle-up" set="fas"></pf-icon>
         </a>
       `;
     } else {
       return html`
+        <!-- The \`<a>\` or \`<pf-button>\` element -->
         <pf-button
             icon="${ifDefined(this.icon)}"
             icon-set="${ifDefined(this.iconSet)}"
@@ -128,8 +119,10 @@ export class PfBackToTop extends LitElement {
             part="trigger"
             label="${ifDefined(this.#ariaLabel)}"
           >
+          <!-- Contains the prefix icon to display before the link or button. -->
           <slot name="icon" slot="icon"></slot>
           <span>
+            <!-- Text to display inside the link or button. -->
             <slot></slot>
             <pf-icon icon="angle-up" set="fas"></pf-icon>
           </span>
diff --git a/elements/pf-background-image/demo/pf-background-image.html b/elements/pf-background-image/demo/index.html
similarity index 100%
rename from elements/pf-background-image/demo/pf-background-image.html
rename to elements/pf-background-image/demo/index.html
diff --git a/elements/pf-background-image/pf-background-image.css b/elements/pf-background-image/pf-background-image.css
index 16d62e2354..027806a3e9 100644
--- a/elements/pf-background-image/pf-background-image.css
+++ b/elements/pf-background-image/pf-background-image.css
@@ -1,6 +1,7 @@
 :host {
   display: flex;
 
+  /** Background image for the element */
   --_background-image: var(--pf-c-background-image--BackgroundImage);
 }
 
@@ -23,8 +24,10 @@
   width: 100%;
   height: 100%;
   content: "";
+  /** Background color for the background image */
   background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));
   background-image: var(--_background-image);
+  /** SVG filter applied to the background image */
   filter: var(--pf-c-background-image--Filter, url("#image_overlay"));
   background-repeat:  no-repeat;
   background-size: cover;
@@ -43,24 +46,28 @@ slot[part="content"] {
 
 @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   #container::after {
+    /** Background image for 2x DPI screens */
     background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));
   }
 }
 
 @media screen and (min-width: 576px) {
   #container::after {
+    /** Background image for small screens */
     background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));
   }
 }
 
 @media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
   #container::after {
+    /** Background image for small screens with 2x DPI */
     background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));
   }
 }
 
 @media screen and (min-width: 992px) {
   #container::after {
+    /** Background image for large screens */
     background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));
   }
 }
diff --git a/elements/pf-background-image/pf-background-image.ts b/elements/pf-background-image/pf-background-image.ts
index 86ba30b9f9..1fa2627c80 100644
--- a/elements/pf-background-image/pf-background-image.ts
+++ b/elements/pf-background-image/pf-background-image.ts
@@ -11,14 +11,7 @@ import styles from './pf-background-image.css';
 /**
  * A **background image** allows you to place an image in the background of your page or area of a page.
  * @summary Allows users to place an image in the background of your page or area of a page.
- * @slot filter - Overrides the default svg filter for the background image.
- * @cssprop {<color>} [--pf-c-background-image--BackgroundColor=#151515]
- * @cssprop [--pf-c-background-image--Filter=url("#image_overlay")]
- * @cssprop --pf-c-background-image--BackgroundImage
- * @cssprop --pf-c-background-image--BackgroundImage-2x
- * @cssprop --pf-c-background-image--BackgroundImage--sm
- * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
- * @cssprop --pf-c-background-image--BackgroundImage--lg
+ * @alias Background Image
  */
 @customElement('pf-background-image')
 export class PfBackgroundImage extends LitElement {
@@ -82,6 +75,7 @@ export class PfBackgroundImage extends LitElement {
     return html`
       <div id="container" part="container" style="${styleMap(cssProps)}">
         ${!this.filter ? html`` : html`
+          <!-- Overrides the default svg filter for the background image. -->
           <slot name="filter" @slotchange=${this.#onSlotChange}>
             ${(this.#svg && this.#updated) ? this.#svg : html`
               <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
diff --git a/elements/pf-badge/demo/pf-badge.html b/elements/pf-badge/demo/index.html
similarity index 100%
rename from elements/pf-badge/demo/pf-badge.html
rename to elements/pf-badge/demo/index.html
diff --git a/elements/pf-badge/pf-badge.css b/elements/pf-badge/pf-badge.css
index 6c0d4389c6..1ff0ad30b2 100644
--- a/elements/pf-badge/pf-badge.css
+++ b/elements/pf-badge/pf-badge.css
@@ -3,36 +3,49 @@
   white-space: nowrap;
   text-align: center;
   display: inline-block;
+  /** Border radius for badge */
   border-radius: var(--pf-c-badge--BorderRadius,
     var(--pf-global--BorderRadius--lg, 180em));
+  /** Minimum width for badge */
   min-width: var(--pf-c-badge--MinWidth,
     var(--pf-global--spacer--xl, 2rem));
+  /** Left padding for badge */
   padding-left: var(--pf-c-badge--PaddingLeft,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Right padding for badge */
   padding-right: var(--pf-c-badge--PaddingRight,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Font size for badge */
   font-size: var(--pf-c-badge--FontSize,
     var(--pf-theme--font-size, 0.75em));
+  /** Font weight for badge */
   font-weight: var(--pf-c-badge--FontWeight,
     var(--pf-theme--font-weight--bold, 700));
+  /** Line height for badge */
   line-height: var(--pf-c-badge--LineHeight,
     var(--pf-global--LineHeight--md, 1.5));
+  /** Color for badge */
   color: var(--pf-c-badge--Color,
     var(--pf-global--palette--black-900, #151515));
+  /** Background color for badge */
   background-color: var(--pf-c-badge--BackgroundColor,
     var(--pf-global--palette--black-200, #f0f0f0));
 }
 
 :host([state="read"]) {
+  /** Color for read badge */
   --pf-c-badge--Color: var(--pf-c-badge--m-read--Color,
     var(--pf-global--palette--black-900, #151515));
+  /** Background color for read badge */
   --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor,
     var(--pf-global--palette--black-200, #f0f0f0));
 }
 
 :host([state="unread"]) {
+  /** Color for unread badge */
   --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color,
     var(--pf-global--palette--white, #fff));
+  /** Background color for unread badge */
   --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor,
     var(--pf-global--palette--blue-400, #06c));
 }
diff --git a/elements/pf-badge/pf-badge.ts b/elements/pf-badge/pf-badge.ts
index 48ca61df7a..3f50b336ba 100644
--- a/elements/pf-badge/pf-badge.ts
+++ b/elements/pf-badge/pf-badge.ts
@@ -6,19 +6,7 @@ import styles from './pf-badge.css';
 
 /**
  * A **badge** is used to annotate other information like a label or an object name.
- * @cssprop {<length>} [--pf-c-badge--BorderRadius=180em]
- * @cssprop {<length>} [--pf-c-badge--MinWidth=2rem]
- * @cssprop {<length>} [--pf-c-badge--PaddingLeft=0.5rem]
- * @cssprop {<length>} [--pf-c-badge--PaddingRight=0.5rem]
- * @cssprop {<length>} [--pf-c-badge--FontSize=0.85em]
- * @cssprop {<length>} [--pf-c-badge--LineHeight=1.5]
- * @cssprop {<length>} [--pf-c-badge--FontWeight=700]
- * @cssprop {<color>} [--pf-c-badge--Color=#151515]
- * @cssprop {<color>} [--pf-c-badge--BackgroundColor=#f0f0f0]
- * @cssprop {<color>} [--pf-c-badge--m-read--Color=#151515]
- * @cssprop {<color>} [--pf-c-badge--m-read--BackgroundColor=#f0f0f0]
- * @cssprop {<color>} [--pf-c-badge--m-unread--Color=#fff]
- * @cssprop {<color>} [--pf-c-badge--m-unread--BackgroundColor=#06c]
+ * @alias Badge
  */
 
 
diff --git a/elements/pf-banner/demo/pf-banner.html b/elements/pf-banner/demo/index.html
similarity index 100%
rename from elements/pf-banner/demo/pf-banner.html
rename to elements/pf-banner/demo/index.html
diff --git a/elements/pf-banner/pf-banner.css b/elements/pf-banner/pf-banner.css
index c27641a70f..3ca89aba31 100644
--- a/elements/pf-banner/pf-banner.css
+++ b/elements/pf-banner/pf-banner.css
@@ -1,25 +1,46 @@
 :host {
   display: block;
+  /** Top padding for banner */
   --pf-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right padding for banner */
   --pf-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Right padding for banner on medium screens */
   --pf-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  /** Bottom padding for banner */
   --pf-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left padding for banner */
   --pf-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Left padding for banner on medium screens */
   --pf-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  /** Font size for banner */
   --pf-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Text color for banner */
   --pf-c-banner--Color: var(--pf-global--Color--100, #151515);
+  /** Background color for banner */
   --pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255);
+  /** Link color for banner (references banner color) */
   --pf-c-banner--link--Color: var(--pf-c-banner--Color);
+  /** Link text decoration for banner */
   --pf-c-banner--link--TextDecoration: underline;
+  /** Link hover color for banner (references banner color) */
   --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
+  /** Link hover font weight for banner */
   --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+  /** Disabled link color for banner (references banner color) */
   --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
+  /** Disabled link text decoration for banner */
   --pf-c-banner--link--disabled--TextDecoration: none;
+  /** Background color for info banner */
   --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7);
+  /** Background color for danger banner */
   --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Background color for success banner */
   --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
+  /** Background color for warning banner */
   --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+  /** Z-index for sticky banner */
   --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300);
+  /** Box shadow for sticky banner */
   --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
 }
 
diff --git a/elements/pf-banner/pf-banner.ts b/elements/pf-banner/pf-banner.ts
index b6dd731dcf..b81a9b797c 100644
--- a/elements/pf-banner/pf-banner.ts
+++ b/elements/pf-banner/pf-banner.ts
@@ -20,25 +20,7 @@ export type BannerVariant = (
  * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users.
  * Banners are un-intrusive and non-dismissible.
  * @summary Allows users to display a stylized banner.
- * @cssprop {<length>} [--pf-c-banner--PaddingTop=0.25rem]
- * @cssprop {<length>} [--pf-c-banner--PaddingRight=1rem]
- * @cssprop {<length>} [--pf-c-banner--PaddingBottom=0.25rem]
- * @cssprop {<length>} [--pf-c-banner--PaddingLeft=1rem]
- * @cssprop {<length>} [--pf-c-banner--md--PaddingRight=1.5rem]
- * @cssprop {<length>} [--pf-c-banner--md--PaddingLeft=1.5rem]
- * @cssprop {<length>} [--pf-c-banner--FontSize=0.875rem]
- * @cssprop {<color>} [--pf-c-banner--BackgroundColor=#4f5255]
- * @cssprop {<color>} [--pf-c-banner--m-info--BackgroundColor=#73bcf7]
- * @cssprop {<color>} [--pf-c-banner--m-danger--BackgroundColor=#c9190b]
- * @cssprop {<color>} [--pf-c-banner--m-success--BackgroundColor=#3e8635]
- * @cssprop {<color>} [--pf-c-banner--m-warning--BackgroundColor=#f0ab00]
- * @cssprop [--pf-c-banner--m-sticky--ZIndex=300]
- * @cssprop [--pf-c-banner--m-sticky--BoxShadow=0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)]
- * @csspart container - The container of the banner
- * @slot icon
- *       Contains the labels's icon, e.g. web-icon-alert-success.
- * @slot
- *       Contains the text for the banner
+ * @alias Banner
  */
 @customElement('pf-banner')
 export class PfBanner extends LitElement {
@@ -66,11 +48,14 @@ export class PfBanner extends LitElement {
     const { variant, icon } = this;
     const hasIcon = !!icon || this.#slots.hasSlotted('icon');
     return html`
+      <!-- The container of the banner -->
       <div id="container" part="container"
             class=${classMap({ hasIcon, [variant ?? '']: !!variant })}>
+        <!-- Contains the labels's icon, e.g. web-icon-alert-success. -->
         <slot name="icon" part="icon">${!this.icon ? '' : html`
           <pf-icon icon="${this.icon}"></pf-icon>`}
         </slot>
+        <!-- Contains the text for the banner -->
         <slot id="text"></slot>
       </div>
     `;
diff --git a/elements/pf-button/demo/pf-button.html b/elements/pf-button/demo/index.html
similarity index 100%
rename from elements/pf-button/demo/pf-button.html
rename to elements/pf-button/demo/index.html
diff --git a/elements/pf-button/pf-button-tokens.css b/elements/pf-button/pf-button-tokens.css
index ce38f5eef0..ca24432b5d 100644
--- a/elements/pf-button/pf-button-tokens.css
+++ b/elements/pf-button/pf-button-tokens.css
@@ -1,39 +1,75 @@
 :host {
+	/** PaddingTop for the button */
 	--pf-c-button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	/** PaddingRight for the button */
 	--pf-c-button--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the button */
 	--pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	/** PaddingLeft for the button */
 	--pf-c-button--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** LineHeight for the button */
 	--pf-c-button--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	/** FontWeight for the button */
 	--pf-c-button--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** FontSize for the button */
 	--pf-c-button--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** BackgroundColor for the button */
 	--pf-c-button--BackgroundColor: transparent;
+	/** BorderRadius for the button */
 	--pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	/** BorderRadius for the button after element */
 	--pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	/** BorderColor for the button after element */
 	--pf-c-button--after--BorderColor: transparent;
+	/** BorderWidth for the button after element */
 	--pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderWidth for the button after element on hover */
 	--pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** BorderWidth for the button after element on focus */
 	--pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** BorderWidth for the button after element when active */
 	--pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Color for the button when disabled */
 	--pf-c-button--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
+	/** BackgroundColor for the button when disabled */
 	--pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
+	/** BorderColor for the button after element when disabled */
 	--pf-c-button--disabled--after--BorderColor: transparent;
+	/** BackgroundColor for the primary button variant */
 	--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the primary button variant */
 	--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the primary button variant on hover */
 	--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	/** Color for the primary button variant on hover */
 	--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the primary button variant on focus */
 	--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	/** Color for the primary button variant on focus */
 	--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the primary button variant when active */
 	--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	/** Color for the primary button variant when active */
 	--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the secondary button variant */
 	--pf-c-button--m-secondary--BackgroundColor: transparent;
+	/** BorderColor for the secondary button variant after element */
 	--pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the secondary button variant */
 	--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100, #06c);
+	/** BackgroundColor for the secondary button variant on hover */
 	--pf-c-button--m-secondary--hover--BackgroundColor: transparent;
+	/** BorderColor for the secondary button variant after element on hover */
 	--pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the secondary button variant on hover */
 	--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100, #06c);
+	/** BackgroundColor for the secondary button variant on focus */
 	--pf-c-button--m-secondary--focus--BackgroundColor: transparent;
+	/** BorderColor for the secondary button variant after element on focus */
 	--pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the secondary button variant on focus */
 	--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100, #06c);
+	/** BackgroundColor for the secondary button variant when active */
 	--pf-c-button--m-secondary--active--BackgroundColor: transparent;
 	--pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100, #06c);
 	--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100, #06c);
@@ -168,6 +204,8 @@
 	--pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
 	--pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
 
+  /** Internal button color property */
   --_button-color: var(--pf-c-button--m-primary--Color);
+  /** Internal button background color property */
   --_button-background-color: var(--pf-c-button--m-primary--BackgroundColor);
 }
diff --git a/elements/pf-button/pf-button.ts b/elements/pf-button/pf-button.ts
index 067de822c7..83a0ad1940 100644
--- a/elements/pf-button/pf-button.ts
+++ b/elements/pf-button/pf-button.ts
@@ -31,112 +31,7 @@ export type ButtonVariant = (
  * new location, like another page inside of a web application, or an external site
  * such as help or documentation..
  * @summary Allows users to perform an action when triggered
- * @cssprop {<length>} [--pf-c-button--FontSize=1rem]
- * @cssprop            [--pf-c-button--FontWeight=400]
- * @cssprop {<number>} [--pf-c-button--LineHeight=1.5]
- * @cssprop {<length>} [--pf-c-button--PaddingTop=0.375rem]
- * @cssprop {<length>} [--pf-c-button--PaddingLeft=1rem]
- * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.375rem]
- * @cssprop {<length>} [--pf-c-button--PaddingRight=1rem]
- * @cssprop {<length>|<percentage>} [--pf-c-button--BorderRadius=3px]
- * @cssprop {<color>}  [--pf-c-button--after--BorderColor=transparent]
- * @cssprop {<length>} [--pf-c-button--after--BorderRadius=3px]
- * @cssprop {<length>} [--pf-c-button--after--BorderWidth=1px]
- * @cssprop {<length>} [--pf-c-button--active--after--BorderWidth=2px]
- * @cssprop {<length>} [--pf-c-button--hover--after--BorderWidth=2px]
- * @cssprop {<length>} [--pf-c-button--focus--after--BorderWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--m-primary--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--BackgroundColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-primary--active--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--active--BackgroundColor=#004080]
- * @cssprop {<color>}  [--pf-c-button--m-primary--focus--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--focus--BackgroundColor=#004080]
- * @cssprop {<color>}  [--pf-c-button--m-primary--hover--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--hover--BackgroundColor=#004080]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--active--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BorderColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BorderColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BorderColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BorderColor=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BorderColor=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BorderColor=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-danger--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--BackgroundColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-danger--active--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--active--BackgroundColor=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-danger--focus--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--focus--BackgroundColor=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-danger--hover--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--hover--BackgroundColor=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--Color=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--Color=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--Color=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--Color=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-control--disabled--BackgroundColor=#f0f0f0]
- * @cssprop {<length>} [--pf-c-button--m-control--BorderRadius=0]
- * @cssprop {<length>} [--pf-c-button--m-control--after--BorderWidth=1px]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderTopColor=#f0f0f0]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderRightColor=#f0f0f0]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderBottomColor=#8a8d90]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderLeftColor=#f0f0f0]
- * @cssprop {<color>}  [--pf-c-button--m-control--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--active--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--active--BorderBottomColor=#06c]
- * @cssprop {<length>} [--pf-c-button--m-control--active--after--BorderBottomWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--m-control--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--focus--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--focus--BorderBottomColor=#06c]
- * @cssprop {<length>} [--pf-c-button--m-control--focus--after--BorderBottomWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--m-control--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--hover--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--hover--BorderBottomColor=#06c]
- * @cssprop {<length>} [--pf-c-button--m-control--hover--after--BorderBottomWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--disabled--Color=#6a6e73]
- * @cssprop {<color>}  [--pf-c-button--disabled--BackgroundColor=#d2d2d2]
- * @cssprop {<color>}  [--pf-c-button--disabled--after--BorderColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-warning--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--BackgroundColor=#f0ab00]
- * @cssprop {<color>}  [--pf-c-button--m-warning--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--active--BackgroundColor=#c58c00]
- * @cssprop {<color>}  [--pf-c-button--m-warning--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--focus--BackgroundColor=#c58c00]
- * @cssprop {<color>}  [--pf-c-button--m-warning--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--hover--BackgroundColor=#c58c00]
- * @cssprop {<color>}  [--pf-c-button--m-plain--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--Color=#6a6e73]
- * @cssprop {<color>}  [--pf-c-button--m-plain--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-plain--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-plain--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--Color=#d2d2d2]
- * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--BackgroundColor=transparent]
+ * @alias Button
  * @attr {string} [loading-label='loading'] - ARIA label for the loading indicator
  */
 @customElement('pf-button')
diff --git a/elements/pf-card/demo/pf-card.html b/elements/pf-card/demo/index.html
similarity index 100%
rename from elements/pf-card/demo/pf-card.html
rename to elements/pf-card/demo/index.html
diff --git a/elements/pf-card/pf-card.css b/elements/pf-card/pf-card.css
index 93f47a4ade..23b0b5340c 100644
--- a/elements/pf-card/pf-card.css
+++ b/elements/pf-card/pf-card.css
@@ -1,13 +1,18 @@
 :host {
+	/** BackgroundColor for the card */
 	--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** BoxShadow for the card */
 	--pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
 	--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+	/** FontFamily for the card title */
 	--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+	/** FontSize for the card title */
 	--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** FontWeight for the card title */
 	--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold, 700);
 	--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
 	--pf-c-card__body--FontSize: var(--pf-global--FontSize--md, 1rem);
@@ -61,26 +66,45 @@
 	--pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
 	--pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
 	--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200, #d2d2d2);
+	/** FontSize for the card body in compact size */
 	--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** FontSize for the card footer in compact size */
 	--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** PaddingTop for the first child in compact size */
 	--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingRight for children in compact size */
 	--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for children in compact size */
 	--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingLeft for children in compact size */
 	--pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
 	--pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the title when not last child in compact size */
 	--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** FontSize for the title in large size */
 	--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+	/** PaddingTop for the first child in large size */
 	--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingRight for children in large size */
 	--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingBottom for children in large size */
 	--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingLeft for children in large size */
 	--pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
 	--pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingBottom for the title when not last child in large size */
 	--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	/** BorderWidth for the flat variant */
 	--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderColor for the flat variant */
 	--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** BorderRadius for the rounded variant */
 	--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	/** Height for the full height variant */
 	--pf-c-card--m-full-height--Height: 100%;
+	/** BoxShadow for the plain variant */
 	--pf-c-card--m-plain--BoxShadow: none;
+	/** BackgroundColor for the plain variant */
 	--pf-c-card--m-plain--BackgroundColor: transparent;
 	--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
 	--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
diff --git a/elements/pf-card/pf-card.ts b/elements/pf-card/pf-card.ts
index 72a29419a6..250e8ca926 100644
--- a/elements/pf-card/pf-card.ts
+++ b/elements/pf-card/pf-card.ts
@@ -14,44 +14,7 @@ import style from './pf-card.css';
  * function as a preview of a detailed page. Cards may also be used in data displays
  * like card views, or for positioning content on a page.
  * @summary Gives a preview of information in a small layout
- * @slot header
- *       When included, defines the contents of a card. Card headers can contain images as well as
- *       the title of a card and an actions menu represented by the right-aligned kebab.
- *       In most cases, your card should include a header. The only exceptions are when cards being
- *       used as a layout element to create a white background behind other content.
- * @slot title
- *       Communicates the title of a card if it's not included in the header.
- *       If a card will be utilized as a selectable and clickable card, the title needs to be made as a linked text to trigger action and indicate interaction.
- * @slot - Body. Provides details about the item. A card body can include any combination of static
- *         text and/or active content.
- * @slot footer
- *       Contains external links, actions, or static text at the bottom of a card.
- * @csspart header - The container for *header* content
- * @csspart body - The container for *body* content
- * @csspart footer - The container for *footer* content
- * @cssprop {<color>} [--pf-c-card--BackgroundColor=#ffffff]
- * @cssprop {<color>} [--pf-c-card--BoxShadow=0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)]
- * @cssprop {<color>} [--pf-c-card--size-compact__body--FontSize=.875rem]
- * @cssprop {<color>} [--pf-c-card--size-compact__footer--FontSize=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--first-child--PaddingTop=1.5rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingRight=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingBottom=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingLeft=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact__title--not--last-child--PaddingBottom=.5rem]
- * @cssprop {<color>} [--pf-c-card--size-large__title--FontSize=1.25rem]
- * @cssprop {<color>} [--pf-c-card--size-large--first-child--PaddingTop=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingRight=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingBottom=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingLeft=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large__title--not--last-child--PaddingBottom=1.5rem]
- * @cssprop {<color>} [--pf-c-card--m-flat--BorderWidth=1px solid #d2d2d2]
- * @cssprop {<color>} [--pf-c-card--m-plain--BoxShadow=none]
- * @cssprop {<color>} [--pf-c-card--m-plain--BackgroundColor=transparent]
- * @cssprop {<color>} [--pf-c-card--m-rounded--BorderRadius=3px]
- * @cssprop {<color>} [--pf-c-card--m-full-height--Height=100]
- * @cssprop {<color>} [--pf-c-card__title--FontFamily="RedHatDisplayUpdated", helvetica, arial, sans-serif]
- * @cssprop {<color>} [--pf-c-card__title--FontSize=1rem]
- * @cssprop {<color>} [--pf-c-card__title--FontWeight=700]
+ * @alias Card
  */
 @customElement('pf-card')
 export class PfCard extends LitElement {
@@ -85,20 +48,40 @@ export class PfCard extends LitElement {
   render(): TemplateResult<1> {
     return html`
       <article>
+        <!-- summary: The container for *header* content -->
         <header id="header"
                 part="header"
                 class="${classMap({ empty: this.#slots.isEmpty('header') })}">
+          <!-- summary: When included, defines the contents of a card.
+               description: |
+                 Card headers can contain images as well as the title of a card and an actions menu
+                 represented by the right-aligned kebab. In most cases, your card should include a
+                 header. The only exceptions are when cards being used as a layout element to
+                 create a white background behind other content.
+          -->
           <slot name="header"></slot>
+          <!-- summary: Communicates the title of a card if it's not included in the header.
+               description: |
+                 If a card will be utilized as a selectable and clickable card, the title
+                 needs to be made as a linked text to trigger action and indicate interaction.
+          -->
           <slot id="title" name="title" ?hidden="${this.#slots.isEmpty('title')}"></slot>
         </header>
+        <!-- summary: The container for *body* content -->
         <div id="body"
              part="body"
              class="${classMap({ empty: this.#slots.isEmpty(null) })}">
+          <!-- summary: Body. Provides details about the item.
+               description: |
+                 A card body can include any combination of static text and/or active content.
+          -->
           <slot></slot>
         </div>
+        <!-- summary: The container for *footer* content -->
         <footer id="footer"
                 part="footer"
                 class="${classMap({ empty: this.#slots.isEmpty('footer') })}">
+          <!-- summary: Contains external links, actions, or static text at the bottom of a card. -->
           <slot name="footer"></slot>
         </footer>
       </article>
diff --git a/elements/pf-chip/demo/pf-chip.html b/elements/pf-chip/demo/index.html
similarity index 100%
rename from elements/pf-chip/demo/pf-chip.html
rename to elements/pf-chip/demo/index.html
diff --git a/elements/pf-chip/pf-chip-group.css b/elements/pf-chip/pf-chip-group.css
index 71a072df48..c3a5ecbf66 100644
--- a/elements/pf-chip/pf-chip-group.css
+++ b/elements/pf-chip/pf-chip-group.css
@@ -1,18 +1,33 @@
 :host {
+  /** MarginBottom for the chip group list */
   --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginRight for the chip group list */
   --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** PaddingTop for the chip group category */
   --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingRight for the chip group category */
   --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingBottom for the chip group category */
   --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingLeft for the chip group category */
   --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** BorderRadius for the chip group category */
   --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  /** BackgroundColor for the chip group category */
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  /** MarginRight for the chip group label */
   --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  /** FontSize for the chip group label */
   --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** MaxWidth for the chip group label */
   --pf-c-chip-group__label--MaxWidth: 18ch;
+  /** MarginTop for the chip group close button */
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginBottom for the chip group close button */
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginRight for chip group list items */
   --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** MarginBottom for chip group list items */
   --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);
   display: inline-flex;
   flex-wrap: wrap;
diff --git a/elements/pf-chip/pf-chip-group.ts b/elements/pf-chip/pf-chip-group.ts
index a57f79f560..16c6795797 100644
--- a/elements/pf-chip/pf-chip-group.ts
+++ b/elements/pf-chip/pf-chip-group.ts
@@ -41,21 +41,6 @@ const REMAINING_RE = /\$\{\s*remaining\s*\}/g;
  * @slot category-name
  *      Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied
  * @slot - `<pf-chip>` elements.
- * @cssprop [--pf-c-chip-group__list--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group__list--MarginRight=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-chip-group--m-category--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]
- * @cssprop [--pf-c-chip-group--m-category--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-chip-group__label--MarginRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-chip-group__label--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-chip-group__label--MaxWidth=18ch]
- * @cssprop [--pf-c-chip-group__close--MarginTop=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group__close--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group__list-item--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group__list-item--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]
  */
 @customElement('pf-chip-group')
 export class PfChipGroup extends LitElement {
diff --git a/elements/pf-chip/pf-chip.css b/elements/pf-chip/pf-chip.css
index d6bfe15670..43485a8a94 100644
--- a/elements/pf-chip/pf-chip.css
+++ b/elements/pf-chip/pf-chip.css
@@ -1,20 +1,37 @@
 :host {
+  /** Top padding for chip */
   --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right padding for chip */
   --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  /** Bottom padding for chip */
   --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left padding for chip */
   --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** Background color for chip */
   --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);
+  /** Border radius for chip */
   --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  /** Border color for chip */
   --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  /** Border width for chip */
   --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Border radius for chip border (references chip border radius) */
   --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
+  /** Text color for overflow chip */
   --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);
+  /** Background color for draggable chip */
   --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  /** Box shadow for draggable chip */
   --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
+  /** Font size for draggable chip icon */
   --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+  /** Font size for chip text */
   --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  /** Color for chip text */
   --pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);
+  /** Maximum width for chip text */
   --pf-c-chip__text--MaxWidth: 16ch;
+  /** Left margin for chip icon */
   --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
   color: var(--pf-global--Color--100, #151515);
   position: relative;
@@ -22,7 +39,9 @@
   align-items: center;
   min-width: 0;
   list-style: none;
+  /** Background color of chip */
   background-color: var(--pf-c-chip--BackgroundColor);
+  /** Border radius of chip */
   border-radius: var(--pf-c-chip--BorderRadius);
   padding:
 	  var(--pf-c-chip--PaddingTop)
@@ -47,7 +66,13 @@ div#outer {
   bottom: 0;
   left: 0;
   content: "";
-  border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
+  border:
+    /** Border width */
+    var(--pf-c-chip--before--BorderWidth)
+    solid
+    /** Border color */
+    var(--pf-c-chip--before--BorderColor);
+  /** Border radius of chip border */
   border-radius: var(--pf-c-chip--before--BorderRadius);
 }
 
@@ -57,8 +82,11 @@ span {
   text-overflow: ellipsis;
   white-space: nowrap;
   position: relative;
+  /** Maximum width of chip text */
   max-width: var(--pf-c-chip__text--MaxWidth);
+  /** Font size of chip text */
   font-size: var(--pf-c-chip__text--FontSize);
+  /** Color of chip text */
   color: var(--pf-c-chip__text--Color);
 }
 
@@ -75,6 +103,7 @@ button#outer {
 }
 
 button#outer span {
+  /** Color for overflow chip text */
   color: var(--pf-c-chip--m-overflow__text--Color);
 }
 
diff --git a/elements/pf-chip/pf-chip.ts b/elements/pf-chip/pf-chip.ts
index 393ce0f0c9..80cc03515f 100644
--- a/elements/pf-chip/pf-chip.ts
+++ b/elements/pf-chip/pf-chip.ts
@@ -15,28 +15,9 @@ export class PfChipRemoveEvent extends Event {
 
 /**
  * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
+ * @alias Chip
  * @fires {ChipRemoveEvent} remove - Fires when chip is removed
  * @fires {Event} click - when close button is clicked
- * @slot
- *      chip text
- * @csspart text - container for chip text
- * @cssprop [--pf-c-chip--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-chip--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-chip--BackgroundColor=var(--pf-global--Color--light-100, #fff)]
- * @cssprop [--pf-c-chip--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]
- * @cssprop [--pf-c-chip--before--BorderColor=var(--pf-global--BorderColor--300, #f0f0f0)]
- * @cssprop [--pf-c-chip--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-chip--before--BorderRadius=var(--pf-c-chip--BorderRadius)]
- * @cssprop [--pf-c-chip--m-overflow__text--Color=var(--pf-global--primary-color--100, #06c)]
- * @cssprop [--pf-c-chip--m-draggable--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-chip--m-draggable--BoxShadow=var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06))]
- * @cssprop [--pf-c-chip--m-draggable__icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]
- * @cssprop [--pf-c-chip__text--FontSize=var(--pf-global--FontSize--xs, 0.75rem)]
- * @cssprop [--pf-c-chip__text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-chip__text--MaxWidth=16ch]
- * @cssprop [--pf-c-chip__icon--MarginLeft=var(--pf-global--spacer--sm, 0.5rem)]
  */
 @customElement('pf-chip')
 export class PfChip extends LitElement {
@@ -65,13 +46,17 @@ export class PfChip extends LitElement {
   render(): TemplateResult<1> {
     return this.overflowChip ? html`
       <button id="outer">
+        <!-- container for chip text -->
         <span part="text">
+          <!-- chip text -->
           <slot></slot>
         </span>
       </button>
     ` : html`
       <div id="outer">
+        <!-- container for chip text -->
         <span id="chip-text" part="text">
+          <!-- chip text -->
           <slot></slot>
         </span>
         <pf-button id="close-button"
diff --git a/elements/pf-clipboard-copy/demo/pf-clipboard-copy.html b/elements/pf-clipboard-copy/demo/index.html
similarity index 100%
rename from elements/pf-clipboard-copy/demo/pf-clipboard-copy.html
rename to elements/pf-clipboard-copy/demo/index.html
diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.css b/elements/pf-clipboard-copy/pf-clipboard-copy.css
index d5c56e0c35..a0f674eb5f 100644
--- a/elements/pf-clipboard-copy/pf-clipboard-copy.css
+++ b/elements/pf-clipboard-copy/pf-clipboard-copy.css
@@ -1,28 +1,53 @@
 :host {
+	/** Transition for the toggle icon */
 	--pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
+	/** Rotate value for the toggle icon when expanded */
 	--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
+	/** PaddingTop for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingRight for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingLeft for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** BackgroundColor for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
+	/** BorderTopWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
+	/** BorderRightWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderBottomWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderLeftWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderColor for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** OutlineOffset for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+	/** PaddingTop for the inline variant */
 	--pf-c-clipboard-copy--m-inline--PaddingTop: 0;
+	/** PaddingBottom for the inline variant */
 	--pf-c-clipboard-copy--m-inline--PaddingBottom: 0;
+	/** PaddingLeft for the inline variant */
 	--pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs, 0.25rem);
+	/** BackgroundColor for the inline variant */
 	--pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** FontFamily for the code text */
 	--pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
+	/** FontSize for the code text */
 	--pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** MarginTop for actions item */
 	--pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
+	/** MarginBottom for actions item */
 	--pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
+	/** PaddingTop for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+	/** PaddingRight for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingBottom for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+	/** PaddingLeft for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
   --pf-icon--size: var(--pf-global--FontSize--md, 1rem);
 }
diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts
index 1dfbf823a7..52f6b957ab 100644
--- a/elements/pf-clipboard-copy/pf-clipboard-copy.ts
+++ b/elements/pf-clipboard-copy/pf-clipboard-copy.ts
@@ -21,34 +21,8 @@ export class PfClipboardCopyCopiedEvent extends Event {
 
 /**
  * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
- * @slot - Place content to copy here, or use the `value` attribute
- * @slot actions - Place additional action buttons here
+ * @alias Clipboard Copy
  * @fires {PfClipboardCopyCopiedEvent} copy - when the text snippet is successfully copied.
- * @cssprop [--pf-c-clipboard-copy__toggle-icon--Transition=.2s ease-in 0s]
- * @cssprop [--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate=90deg]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #fff)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderTopWidth=0]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderRightWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderLeftWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--OutlineOffset=calc(-1 * var(--pf-global--spacer--xs, 0.25rem))]
- * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingTop=0]
- * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingBottom=0]
- * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-clipboard-copy--m-inline--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-clipboard-copy__text--m-code--FontFamily=var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)]
- * @cssprop [--pf-c-clipboard-copy__text--m-code--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--MarginTop=calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))]
- * @cssprop [--pf-c-clipboard-copy__actions-item--MarginBottom=calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
  */
 @customElement('pf-clipboard-copy')
 export class PfClipboardCopy extends LitElement {
@@ -148,6 +122,7 @@ export class PfClipboardCopy extends LitElement {
             </pf-button>
             <span slot="content">${this.#copied ? this.clickTip : this.hoverTip}</span>
           </pf-tooltip>
+          <!-- Place additional action buttons here -->
           <slot name="actions"></slot>
         </div>
         <textarea .value="${this.value}"
diff --git a/elements/pf-code-block/demo/pf-code-block.html b/elements/pf-code-block/demo/index.html
similarity index 100%
rename from elements/pf-code-block/demo/pf-code-block.html
rename to elements/pf-code-block/demo/index.html
diff --git a/elements/pf-code-block/pf-code-block.css b/elements/pf-code-block/pf-code-block.css
index 29ffa9c7b2..45dd598151 100644
--- a/elements/pf-code-block/pf-code-block.css
+++ b/elements/pf-code-block/pf-code-block.css
@@ -1,7 +1,10 @@
 :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);
 }
 
@@ -11,14 +14,21 @@
 
 #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: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);
+  /** 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 {
diff --git a/elements/pf-code-block/pf-code-block.ts b/elements/pf-code-block/pf-code-block.ts
index 398328b576..aa9fe83473 100644
--- a/elements/pf-code-block/pf-code-block.ts
+++ b/elements/pf-code-block/pf-code-block.ts
@@ -6,24 +6,9 @@ import styles from './pf-code-block.css';
 
 /**
  * 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: string): string {
@@ -58,6 +43,7 @@ export 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>
diff --git a/elements/pf-dropdown/demo/pf-dropdown.html b/elements/pf-dropdown/demo/index.html
similarity index 100%
rename from elements/pf-dropdown/demo/pf-dropdown.html
rename to elements/pf-dropdown/demo/index.html
diff --git a/elements/pf-dropdown/pf-dropdown-item.css b/elements/pf-dropdown/pf-dropdown-item.css
index 6041091d97..5dfb664158 100644
--- a/elements/pf-dropdown/pf-dropdown-item.css
+++ b/elements/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)
     );
diff --git a/elements/pf-dropdown/pf-dropdown-item.ts b/elements/pf-dropdown/pf-dropdown-item.ts
index c1aaf98ddb..29a6dcecee 100644
--- a/elements/pf-dropdown/pf-dropdown-item.ts
+++ b/elements/pf-dropdown/pf-dropdown-item.ts
@@ -23,33 +23,6 @@ export 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
- *
  */
 @customElement('pf-dropdown-item')
 export class PfDropdownItem extends LitElement {
diff --git a/elements/pf-dropdown/pf-dropdown.css b/elements/pf-dropdown/pf-dropdown.css
index dd673bc166..3b1d30eeee 100644
--- a/elements/pf-dropdown/pf-dropdown.css
+++ b/elements/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);
diff --git a/elements/pf-dropdown/pf-dropdown.ts b/elements/pf-dropdown/pf-dropdown.ts
index debd667963..73ee488079 100644
--- a/elements/pf-dropdown/pf-dropdown.ts
+++ b/elements/pf-dropdown/pf-dropdown.ts
@@ -31,15 +31,7 @@ export 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
@@ -103,6 +95,7 @@ export class PfDropdown extends LitElement {
                              [alignment ?? '']: !!alignment })}"
          style="${styleMap(styles)}"
          @slotchange="${this.#onSlotchange}">
+      <!-- Custom toggle button -->
       <slot name="toggle"
             @keydown="${this.#onButtonKeydown}"
             @click="${() => this.toggle()}">
@@ -111,12 +104,15 @@ export class PfDropdown extends LitElement {
           <pf-icon icon="caret-down" size="md"></pf-icon>
         </pf-button>
       </slot>
+      <!-- when using a custom toggle, you must slot a \`<pf-dropdown-menu>\` in alongside it -->
       <slot name="menu"
             ?hidden="${!this.expanded}"
             @focusout="${this.#onMenuFocusout}"
             @keydown="${this.#onMenuKeydown}"
             @click="${this.#onSelect}">
+        <!-- The dropdown menu wrapper -->
         <pf-dropdown-menu id="menu" part="menu" ?disabled="${disabled}">
+          <!-- Must contain one or more \`<pf-dropdown-item>\` or \`<pf-dropdown-group>\` -->
           <slot></slot>
         </pf-dropdown-menu>
       </slot>
diff --git a/elements/pf-icon/demo/pf-icon.html b/elements/pf-icon/demo/index.html
similarity index 100%
rename from elements/pf-icon/demo/pf-icon.html
rename to elements/pf-icon/demo/index.html
diff --git a/elements/pf-icon/pf-icon.css b/elements/pf-icon/pf-icon.css
index 35ee1b57a2..5abec7c804 100644
--- a/elements/pf-icon/pf-icon.css
+++ b/elements/pf-icon/pf-icon.css
@@ -26,6 +26,7 @@ svg {
 :host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }
 
 #container, svg {
+  /** size of the icon */
   width: var(--pf-icon--size, var(--_size));
   height: var(--pf-icon--size, var(--_size));
   min-width: var(--pf-icon--size, var(--_size));
diff --git a/elements/pf-icon/pf-icon.ts b/elements/pf-icon/pf-icon.ts
index 5e59651acc..4bc8885513 100644
--- a/elements/pf-icon/pf-icon.ts
+++ b/elements/pf-icon/pf-icon.ts
@@ -36,11 +36,9 @@ export class IconResolveError extends ErrorEvent {
 /**
  * An **icon** component is a container that allows for icons of varying dimensions to
  * seamlessly replace each other without shifting surrounding content.
- * @slot - Slotted content is used as a fallback in case the icon doesn't load
+ * @alias Icon
  * @fires load - Fired when an icon is loaded and rendered
  * @fires error - Fired when an icon fails to load
- * @csspart fallback - Container for the fallback (i.e. slotted) content
- * @cssprop {<length>} --pf-icon--size - size of the icon
  */
 @customElement('pf-icon')
 export class PfIcon extends LitElement {
@@ -203,8 +201,13 @@ export class PfIcon extends LitElement {
   render(): TemplateResult<1> {
     const content = this.content ?? '';
     return html`
-      <div id="container" aria-hidden="true">${content}<span part="fallback"
-          ?hidden=${!!content}><slot></slot>
+      <div id="container" aria-hidden="true">${content}<!--
+         summary: Container for the fallback (i.e. slotted) content
+        -->
+        <span part="fallback"
+          ?hidden=${!!content}><!--
+           summary: Slotted content is used as a fallback in case the icon doesn't load
+        --><slot></slot>
         </span>
       </div>
     `;
diff --git a/elements/pf-jump-links/demo/pf-jump-links.html b/elements/pf-jump-links/demo/index.html
similarity index 100%
rename from elements/pf-jump-links/demo/pf-jump-links.html
rename to elements/pf-jump-links/demo/index.html
diff --git a/elements/pf-jump-links/pf-jump-links-item.css b/elements/pf-jump-links/pf-jump-links-item.css
index 7901b8f79f..a852a8e822 100644
--- a/elements/pf-jump-links/pf-jump-links-item.css
+++ b/elements/pf-jump-links/pf-jump-links-item.css
@@ -17,17 +17,23 @@ a {
   display: flex;
   cursor: pointer;
   flex: 1;
+  /** Top padding around the link */
   padding-block-start: var(--pf-c-jump-links__link--PaddingTop,
     var(--pf-global--spacer--md, 1rem));
+  /** Right padding around the link */
   padding-inline-end: var(--pf-c-jump-links__link--PaddingRight,
     var(--pf-global--spacer--md, 1rem));
+  /** Bottom padding around the link */
   padding-block-end: var(--pf-c-jump-links__link--PaddingBottom,
     var(--pf-global--spacer--md, 1rem));
+  /** Left padding around the link */
   padding-inline-start: var(--pf-c-jump-links__link--PaddingLeft,
     var(--pf-global--spacer--md, 1rem));
   text-decoration: none;
+  /** Outline offset for jump links link */
   outline-offset: var(--pf-c-jump-links__link--OutlineOffset,
     calc(-1 * var(--pf-global--spacer--sm, 0.5rem)));
+  /** Color for jump links link text */
   color: var(--pf-c-jump-links__link-text--Color,
     var(--pf-global--Color--200, #6a6e73));
 }
@@ -65,5 +71,5 @@ a:focus {
   --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor,
     var(--pf-global--primary-color--100, #06c));
   --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color,
-    pfvar(--pf-global--Color--100, #151515));
+    var(--pf-global--Color--100, #151515));
 }
diff --git a/elements/pf-jump-links/pf-jump-links-item.ts b/elements/pf-jump-links/pf-jump-links-item.ts
index 404c5644ce..474367757a 100644
--- a/elements/pf-jump-links/pf-jump-links-item.ts
+++ b/elements/pf-jump-links/pf-jump-links-item.ts
@@ -10,14 +10,6 @@ import style from './pf-jump-links-item.css';
 
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
-/**
- * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link
- * @cssprop --pf-c-jump-links__link--PaddingRight
- * @cssprop --pf-c-jump-links__link--PaddingBottom
- * @cssprop --pf-c-jump-links__link--PaddingLeft
- * @cssprop --pf-c-jump-links__link--OutlineOffset
- * @cssprop --pf-c-jump-links__link-text--Color
- */
 @customElement('pf-jump-links-item')
 export class PfJumpLinksItem extends LitElement {
   static readonly styles: CSSStyleSheet[] = [style];
diff --git a/elements/pf-jump-links/pf-jump-links-list.css b/elements/pf-jump-links/pf-jump-links-list.css
index eaef03c3e3..7fb888fcdf 100644
--- a/elements/pf-jump-links/pf-jump-links-list.css
+++ b/elements/pf-jump-links/pf-jump-links-list.css
@@ -6,10 +6,13 @@
   display: contents;
   --pf-c-jump-links__list--PaddingTop: 0;
   --pf-c-jump-links__list--PaddingBottom: 0;
+  /** Top padding around each link */
   --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Bottom padding around each link */
   --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Left padding around each link */
   --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,
     var(--pf-global--spacer--lg, 1.5rem));
 }
diff --git a/elements/pf-jump-links/pf-jump-links-list.ts b/elements/pf-jump-links/pf-jump-links-list.ts
index 001219bb71..3253f493c1 100644
--- a/elements/pf-jump-links/pf-jump-links-list.ts
+++ b/elements/pf-jump-links/pf-jump-links-list.ts
@@ -3,11 +3,6 @@ import { customElement } from 'lit/decorators/custom-element.js';
 
 import style from './pf-jump-links-list.css';
 
-/**
- * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link
- * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom
- * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft
- */
 @customElement('pf-jump-links-list')
 export class PfJumpLinksList extends LitElement {
   static readonly styles: CSSStyleSheet[] = [style];
diff --git a/elements/pf-jump-links/pf-jump-links.css b/elements/pf-jump-links/pf-jump-links.css
index eae6d4790b..9a25810914 100644
--- a/elements/pf-jump-links/pf-jump-links.css
+++ b/elements/pf-jump-links/pf-jump-links.css
@@ -16,14 +16,21 @@
 
 slot {
   position: relative;
+  /** Controls the display type of the list container */
   display: var(--pf-c-jump-links__list--Display, flex);
+  /** Controls the direction of items in the list */
   flex-direction: var(--pf-c-jump-links__list--FlexDirection, row);
+  /** Padding around the list of links */
   padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0);
+  /** Right padding for the list */
   padding-inline-end: var(--pf-c-jump-links__list--PaddingRight,
     var(--pf-global--spacer--md, 1rem));
+  /** Bottom padding for the list */
   padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0);
+  /** Left padding for the list */
   padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft,
     var(--pf-global--spacer--md, 1rem));
+  /** Controls visibility of the list */
   visibility: var(--pf-c-jump-links__list--Visibility, visible);
 }
 
@@ -35,40 +42,54 @@ slot::before {
   left: 0;
   pointer-events: none;
   content: "";
+  /** Border color for the list pseudo-element */
   border: solid var(--pf-c-jump-links__list--before--BorderColor,
     var(--pf-global--BorderColor--100, #d2d2d2));
   border-width:
+    /** Top border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderTopWidth,
       var(--pf-global--BorderWidth--sm, 1px))
+    /** Right border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderRightWidth, 0)
+    /** Bottom border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderBottomWidth, 0)
+    /** Left border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderLeftWidth, 0);
 }
 
 :host([vertical]) #container {
+  /** Top padding for vertical layout */
   --pf-c-jump-links__list--PaddingTop:
     var(--pf-c-jump-links--m-vertical__list--PaddingTop,
       var(--pf-global--spacer--md, 1rem)
     );
+  /** Right padding for vertical layout */
   --pf-c-jump-links__list--PaddingRight:
     var(--pf-c-jump-links--m-vertical__list--PaddingRight,0);
+  /** Bottom padding for vertical layout */
   --pf-c-jump-links__list--PaddingBottom:
     var(--pf-c-jump-links--m-vertical__list--PaddingBottom,
       var(--pf-global--spacer--md, 1rem)
     );
+  /** Left padding for vertical layout */
   --pf-c-jump-links__list--PaddingLeft:
     var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0);
+  /** Top border width for vertical layout */
   --pf-c-jump-links__list--before--BorderTopWidth:
     var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0);
+  /** Left border width for vertical layout */
   --pf-c-jump-links__list--before--BorderLeftWidth:
     var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth,
     var(--pf-global--BorderWidth--sm, 1px));
+  /** Top border width for current item in vertical layout */
   --pf-c-jump-links__item--m-current__link--before--BorderTopWidth:
     var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0);
+  /** Left border width for current item in vertical layout */
   --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth:
     var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth,
       var(--pf-global--BorderWidth--lg, 3px)
     );
+  /** Flex direction for vertical layout */
   --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection, column);
 }
 
@@ -88,6 +109,7 @@ slot::before {
 }
 
 :host([expandable]) {
+  /** Base margin for the toggle button */
   --pf-c-jump-links--m-expanded__toggle--MarginBottom:
     calc(var(--pf-c-jump-links__toggle--MarginBottom--base,
       calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
@@ -96,43 +118,57 @@ slot::before {
 
 summary {
   display: block;
+  /** Padding around the expandable jump links disclosure widget. */
   margin-block-start: var(--pf-c-jump-links__toggle--MarginTop,
     calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)));
+  /** Bottom margin for the toggle */
   margin-block-end: var(--pf-c-jump-links__toggle--MarginBottom,
     var(--pf-c-jump-links__toggle--MarginBottom--base,
       calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))));
+  /** Left margin for the toggle */
   margin-inline-start: var(--pf-c-jump-links__toggle--MarginLeft);
+  /** Color of the toggle text */
   color: var(--pf-c-jump-links__toggle-text--Color,
     var(--pf-global--Color--100, #151515));
+  /** Padding around the expandable jump links disclosure widget. */
   padding:
     var(--pf-c-button--PaddingTop,
       var(--pf-global--spacer--form-element, 0.375rem))
+    /** Right padding for the button */
     var(--pf-c-button--PaddingRight,
       var(--pf-global--spacer--md, 1rem))
+    /** Bottom padding for the button */
     var(--pf-c-button--PaddingBottom,
       var(--pf-global--spacer--form-element, 0.375rem))
+    /** Left padding for the button */
     var(--pf-c-button--PaddingLeft,
       var(--pf-global--spacer--md, 1rem));
 }
 
 summary pf-icon {
+  /** Rotation angle for the toggle icon */
   rotate: var(--pf-c-jump-links__toggle-icon--Rotate, 0);
+  /** Transition for the toggle icon */
   transition: var(--pf-c-jump-links__toggle-icon--Transition,
     var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));
 }
 
 summary span {
+  /** Left margin for the toggle text */
   margin-inline-start: var(--pf-c-jump-links__toggle-text--MarginLeft,
     var(--pf-global--spacer--md, 1rem));
 }
 
 :host([expanded]) #container {
+  /** Bottom margin for expanded toggle */
   --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom,
     calc(var(--pf-c-jump-links__toggle--MarginBottom--base,
       calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) +
       var(--pf-global--spacer--md, 1rem)));
+  /** Rotation for expanded toggle icon */
   --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate,
     90deg);
+  /** Color for expanded toggle icon */
   --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color,
     var(--pf-global--Color--100, #151515));
   --pf-c-jump-links__toggle-icon--Rotate: 90deg;
diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts
index 9f9ba022a7..fad3b547d8 100644
--- a/elements/pf-jump-links/pf-jump-links.ts
+++ b/elements/pf-jump-links/pf-jump-links.ts
@@ -13,45 +13,8 @@ import style from './pf-jump-links.css';
 
 /**
  * **Jump links** allow users to navigate to sections within a page.
+ * @alias Jump Links
  * @fires toggle - when the `expanded` disclosure widget is toggled
- * @slot - Place pf-jump-links-items here
- * @cssprop --pf-c-jump-links__list--Display
- * @cssprop --pf-c-jump-links__list--FlexDirection
- * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links
- * @cssprop --pf-c-jump-links__list--PaddingRight
- * @cssprop --pf-c-jump-links__list--PaddingBottom
- * @cssprop --pf-c-jump-links__list--PaddingLeft
- * @cssprop --pf-c-jump-links__list--Visibility
- * @cssprop --pf-c-jump-links__list--before--BorderColor
- * @cssprop --pf-c-jump-links__list--before--BorderTopWidth
- * @cssprop --pf-c-jump-links__list--before--BorderRightWidth
- * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth
- * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth
- * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
- * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.
- * @cssprop --pf-c-jump-links__toggle--MarginBottom
- * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
- * @cssprop --pf-c-jump-links__toggle--MarginLeft
- * @cssprop --pf-c-jump-links__toggle-text--Color
- * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.
- * @cssprop --pf-c-button--PaddingRight
- * @cssprop --pf-c-button--PaddingBottom
- * @cssprop --pf-c-button--PaddingLeft
- * @cssprop --pf-c-jump-links__toggle-icon--Rotate
- * @cssprop --pf-c-jump-links__toggle-icon--Transition
- * @cssprop --pf-c-jump-links__toggle-text--MarginLeft
- * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom
- * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate
- * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft
- * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth
- * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth
- * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth
- * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth
- * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection
  */
 @customElement('pf-jump-links')
 export class PfJumpLinks extends LitElement {
@@ -128,11 +91,13 @@ export class PfJumpLinks extends LitElement {
             <span id="label">${this.label}</span>
           </summary>
           <div role="listbox" aria-labelledby="label">
+            <!-- Place pf-jump-links-items here -->
             <slot></slot>
           </div>
         </details>` : html`
         <span id="label">${this.label}</span>
         <div role="listbox" aria-labelledby="label">
+          <!-- Place pf-jump-links-items here -->
           <slot></slot>
         </div>`}
       </nav>
diff --git a/elements/pf-label/demo/pf-label.html b/elements/pf-label/demo/index.html
similarity index 100%
rename from elements/pf-label/demo/pf-label.html
rename to elements/pf-label/demo/index.html
diff --git a/elements/pf-label/pf-label.css b/elements/pf-label/pf-label.css
index 40f770bdb5..f5489dc070 100644
--- a/elements/pf-label/pf-label.css
+++ b/elements/pf-label/pf-label.css
@@ -20,15 +20,25 @@ pf-icon, ::slotted(pf-icon) {
   text-overflow: ellipsis;
   white-space: nowrap;
   border-width: 0;
+  /** label top padding */
   padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
+  /** label left padding */
   padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
+  /** label bottom padding */
   padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
+  /** label right padding */
   padding-right: var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** label font size */
   font-size: var(--pf-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+  /** label text color */
   color: var(--pf-c-label--Color, var(--pf-global--Color--100, #151515));
+  /** label background color */
   background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+  /** label border radius */
   border-radius: var(--pf-c-label--BorderRadius, 30em);
+  /** label content max width */
   max-width: var(--pf-c-label__content--MaxWidth, 100%);
+  /** label content text color */
   color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));
 
   --pf-global--icon--FontSize--sm: 14px;
@@ -43,6 +53,7 @@ pf-icon, ::slotted(pf-icon) {
   pointer-events: none;
   content: "";
   border-radius: var(--pf-c-label--BorderRadius, 30em);
+  /** label content border width and color */
   border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));
 }
 
@@ -57,85 +68,117 @@ pf-icon, ::slotted(pf-icon) {
 }
 
 .compact {
+  /** compact label top padding */
   --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);
+  /** compact label right padding */
   --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** compact label bottom padding */
   --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);
+  /** compact label left padding */
   --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
   --pf-global--icon--FontSize--sm: 12px;
 }
 
 .blue {
+  /** blue label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));
+  /** blue label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));
+  /** blue label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4));
 }
 
 .blue.outline {
+  /** outline blue label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c)));
 }
 
 .cyan {
+  /** cyan label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));
+  /** cyan label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));
+  /** cyan label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9));
 }
 
 .cyan.outline {
+  /** outline cyan label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)))
 }
 
 .green {
+  /** green label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));
+  /** green label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));
+  /** green label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8));
 }
 
 .green.outline{
+  /** outline green label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)))
 }
 
 .orange {
+  /** orange label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));
+  /** orange label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));
+  /** orange label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678));
 }
 
 .orange.outline {
+  /** outline orange label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)))
 }
 
 .purple {
+  /** purple label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));
+  /** purple label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));
+  /** purple label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff));
 }
 
 .purple.outline {
-  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac));
+  /** outline purple label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)))
 }
 
 .red {
+  /** red label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));
+  /** red label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));
+  /** red label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b));
 }
 
 .red.outline {
+  /** outline red label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)))
 }
 
 .gold {
+  /** gold label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));
+  /** gold label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));
+  /** gold label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2));
 }
 
 .gold.outline {
+  /** outline gold label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)))
 }
 
 .outline {
+  /** outline label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);
   --pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);
 }
@@ -146,30 +189,37 @@ pf-icon, ::slotted(pf-icon) {
 }
 
 .blue .hasIcon [part=icon] {
+  /** blue label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));
 }
 
 .cyan .hasIcon [part=icon] {
+  /** cyan label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));
 }
 
 .green .hasIcon [part=icon] {
+  /** green label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));
 }
 
 .orange .hasIcon [part=icon] {
+  /** orange label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));
 }
 
 .purple .hasIcon [part=icon] {
+  /** purple label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));
 }
 
 .red .hasIcon [part=icon] {
+  /** red label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));
 }
 
 .gold .hasIcon [part=icon] {
+  /** gold label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));
 }
 
diff --git a/elements/pf-label/pf-label.ts b/elements/pf-label/pf-label.ts
index 244bb4b4fc..096aa6c7f7 100644
--- a/elements/pf-label/pf-label.ts
+++ b/elements/pf-label/pf-label.ts
@@ -19,65 +19,8 @@ export class LabelCloseEvent extends Event {
  * The **label** component allows users to add specific element captions for user
  * clarity and convenience.
  * @summary Allows users to display meta data in a stylized form.
+ * @alias Label
  * @fires {LabelCloseEvent} close - when a removable label's close button is clicked
- * @cssprop {<length>} [--pf-c-label--FontSize=0.875em]
- * @cssprop {<length>} [--pf-c-label--PaddingTop=0.25rem]
- * @cssprop {<length>} [--pf-c-label--PaddingRight=0.5rem]
- * @cssprop {<length>} [--pf-c-label--PaddingBottom=0.25rem]
- * @cssprop {<length>} [--pf-c-label--PaddingLeft=0.5rem]
- * @cssprop {<color>} [--pf-c-label--Color=#151515]
- * @cssprop {<color>} [--pf-c-label--BackgroundColor=#f5f5f5]
- * @cssprop {<length>} [--pf-c-label--BorderRadius=30em]
- * @cssprop {<length>} [--pf-c-label__content--MaxWidth=100]
- * @cssprop {<color>} [--pf-c-label__content--Color=#151515]
- * @cssprop {<length>} [--pf-c-label__content--before--BorderWidth=1px]
- * @cssprop {<color>} [--pf-c-label__content--before--BorderColor=#d2d2d2]
- * @cssprop {<color>} [--pf-c-label--m-outline__content--Color=#151515]
- * @cssprop {<color>} [--pf-c-label--m-outline--BackgroundColor=#ffffff]
- * @cssprop {<color>} [--pf-c-label--m-blue__content--Color=#002952]
- * @cssprop {<color>} [--pf-c-label--m-blue--BackgroundColor=#e7f1fa]
- * @cssprop {<color>} [--pf-c-label--m-blue__content--before--BorderColor=#bee1f4]
- * @cssprop {<color>} [--pf-c-label--m-outline--m-blue__content--Color=#06c]
- * @cssprop {<color>} [--pf-c-label--m-cyan__content--Color=#3b1f00]
- * @cssprop {<color>} [--pf-c-label--m-cyan--BackgroundColor=#f2f9f9]
- * @cssprop {<color>} [--pf-c-label--m-cyan__content--before--BorderColor=#a2d9d9]
- * @cssprop {<color>} [--pf-c-label--m-outline--m-cyan__content--Color=#005f60]
- * @cssprop {<color>} [--pf-c-label--m-green__content--Color=#1e4f18]
- * @cssprop {<color>} [--pf-c-label--m-green--BackgroundColor=#f3faf2]
- * @cssprop {<color>} [--pf-c-label--m-green__content--before--BorderColor=#bde5b8]
- * @cssprop {<color>} [--pf-c-label--m-outline--m-green__content--Color=#3e8635]
- * @cssprop {<color>} [--pf-c-label--m-orange__content--Color=#003737]
- * @cssprop {<color>} [--pf-c-label--m-orange--BackgroundColor=#fff6ec]
- * @cssprop {<color>} [--pf-c-label--m-orange__content--before--BorderColor=#f4b678]
- * @cssprop {<color>} [--pf-c-label--m-outline--m-orange__content--Color=#8f4700]
- * @cssprop {<color>} [--pf-c-label--m-purple__content--Color=#1f0066]
- * @cssprop {<color>} [--pf-c-label--m-purple--BackgroundColor=#f2f0fc]
- * @cssprop {<color>} [--pf-c-label--m-purple__content--before--BorderColor=#cbc1ff]
- * @cssprop {<color>} [--pf-c-label--m-outline--m-purple__content--Color=#6753ac]
- * @cssprop {<color>} [--pf-c-label--m-red__content--Color=#7d1007]
- * @cssprop {<color>} [--pf-c-label--m-red--BackgroundColor=#faeae8]
- * @cssprop {<color>} [--pf-c-label--m-red__content--before--BorderColor=#c9190b]
- * @cssprop {<color>} [--pf-c-label--m-outline--m-red__content--Color=#c9190b]
- * @cssprop {<color>} [--pf-c-label--m-gold__content--Color=#3d2c00]
- * @cssprop {<color>} [--pf-c-label--m-gold--BackgroundColor=#fdf7e7]
- * @cssprop {<color>} [--pf-c-label--m-gold__content--before--BorderColor=#f9e0a2]
- * @cssprop {<color>} [--pf-c-label--m-outline--m-gold__content--Color=#795600]
- * @cssprop {<color>} [--pf-c-label--m-blue__icon--Color=#06c]
- * @cssprop {<color>} [--pf-c-label--m-cyan__icon--Color=#009596]
- * @cssprop {<color>} [--pf-c-label--m-green__icon--Color=#3e8635]
- * @cssprop {<color>} [--pf-c-label--m-orange__icon--Color=#ec7a08]
- * @cssprop {<color>} [--pf-c-label--m-red__icon--Color=#c9190b]
- * @cssprop {<color>} [--pf-c-label--m-gold__icon--Color=#f0ab00]
- * @csspart icon - container for the label icon
- * @csspart close-button - container for removable labels' close button
- * @slot icon
- *       Contains the labels's icon, e.g. web-icon-alert-success.
- * @slot
- *       Must contain the text for the label.
- * @cssprop {<length>} [--pf-c-label--m-compact--PaddingTop=0]
- * @cssprop {<length>} [--pf-c-label--m-compact--PaddingRight=0.5rem]
- * @cssprop {<length>} [--pf-c-label--m-compact--PaddingBottom=0]
- * @cssprop {<length>} [--pf-c-label--m-compact--PaddingLeft=0.5rem]
  */
 @customElement('pf-label')
 export class PfLabel extends LitElement {
@@ -140,12 +83,19 @@ export class PfLabel extends LitElement {
               truncated,
               [variant ?? '']: !!variant,
               [color ?? '']: !!color })}">
+        <!-- slot:
+               summary: Contains the labels's icon, e.g. web-icon-alert-success.
+             part:
+               summary: container for the label icon
+        -->
         <slot name="icon" part="icon">
           <pf-icon ?hidden="${!icon}"
                    size="sm"
                    .icon="${this.icon || undefined as unknown as string}"></pf-icon>
         </slot>
+        <!-- summary: Must contain the text for the label. -->
         <slot id="text"></slot>
+        <!-- summary: container for removable labels' close button -->
         <span part="close-button" ?hidden=${!this.removable}>
           <pf-button plain
                      @click="${this.#onClickClose}"
diff --git a/elements/pf-modal/demo/pf-modal.html b/elements/pf-modal/demo/index.html
similarity index 100%
rename from elements/pf-modal/demo/pf-modal.html
rename to elements/pf-modal/demo/index.html
diff --git a/elements/pf-modal/pf-modal.css b/elements/pf-modal/pf-modal.css
index e3cba0bdca..df415d3880 100644
--- a/elements/pf-modal/pf-modal.css
+++ b/elements/pf-modal/pf-modal.css
@@ -19,6 +19,7 @@ section {
   left: 0;
   align-items: center;
   justify-content: center;
+  /** Z-index for modal box */
   z-index: var(--pf-c-modal-box--ZIndex,
     var(--pf-global--ZIndex--xl,
       500));
@@ -44,20 +45,25 @@ section {
   position: relative;
   margin: 0 auto;
 
+  /** Width of modal */
   width: var(--pf-c-modal-box--Width,
     calc(100% - var(--pf-global--spacer--xl,2rem)));
 
+  /** Max width of modal */
   max-width: var(--pf-c-modal-box--MaxWidth,
     calc(100% - var(--pf-global--spacer--xl,2rem)));
 
+  /** Max height of modal */
   max-height: var(--pf-c-modal-box--MaxHeight,
     calc(100% - var(--pf-global--spacer--2xl,3rem)));
 
+  /** Box shadow for modal */
   box-shadow: var(--pf-c-modal-box--BoxShadow,
     var(--pf-global--BoxShadow--xl,
       0 1rem 2rem 0 rgba(3, 3, 3, 0.16),
       0 0 0.5rem 0 rgba(3, 3, 3, 0.1)));
 
+	/** Background color for modal */
 	background-color: var(--pf-c-modal-box--BackgroundColor,
     var(--pf-global--BackgroundColor--100,
       var(--pf-global--BackgroundColor--100, #fff)));
@@ -73,16 +79,19 @@ section {
 
 :host([width="small"]) [part=dialog],
 :host([variant="small"]) [part=dialog] {
+  /** Max width for small modal */
   --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem);
 }
 
 :host([width="medium"]) [part=dialog],
 :host([variant="medium"]) [part=dialog] {
+  /** Max width for medium modal */
   --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width, 52.5rem);
 }
 
 :host([width="large"]) [part=dialog],
 :host([variant="large"]) [part=dialog] {
+  /** Max width for large modal */
   --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem);
 }
 
@@ -111,10 +120,12 @@ header {
 }
 
 header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) {
+  /** Font size for modal title */
   font-size: var(--pf-c-modal-box__title--FontSize,
     var(--pf-global--FontSize--2xl,
       1.5rem));
   font-weight: var(--pf-global--FontWeight--normal, 400);
+  /** Font family for modal title */
   font-family: var(--pf-c-modal-box__title--FontFamily,
     var(--pf-global--FontFamily--heading--sans-serif,
       var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
diff --git a/elements/pf-modal/pf-modal.ts b/elements/pf-modal/pf-modal.ts
index 74f2156422..032e5ada27 100644
--- a/elements/pf-modal/pf-modal.ts
+++ b/elements/pf-modal/pf-modal.ts
@@ -38,32 +38,9 @@ export class ModalOpenEvent extends ComposedEvent {
  * A **modal** displays important information to a user without requiring them to navigate
  * to a new page.
  * @summary Displays information or helps a user focus on a task
- * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.
- * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).
- * @slot footer - Optional footer content. Good place to put action buttons.
+ * @alias Modal
  * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.
  * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.
- * @csspart overlay - The modal overlay which lies under the dialog and above the page body
- * @csspart dialog - The dialog element
- * @csspart content - The container for the dialog content
- * @csspart header - The container for the optional dialog header
- * @csspart description - The container for the optional dialog description in the header
- * @csspart close-button - The modal's close button
- * @csspart footer - Actions footer container
- * @cssprop {<length>} [--pf-c-modal-box--ZIndex=500]
- * @cssprop {<length>} [--pf-c-modal-box--Width=calc(100 - 2rem)] - Width of the modal
- * @cssprop {<length>} [--pf-c-modal-box--MaxWidth=calc(100 - 2rem)] - Max width of the modal
- * @cssprop {<length>} [--pf-c-modal-box--m-sm--sm--MaxWidth=35rem] - Max width of the small variant modal
- * @cssprop {<length>} [--pf-c-modal-box--m-md--MaxWidth=52.5rem] - Max width of the small variant modal
- * @cssprop {<length>} [--pf-c-modal-box--m-lg--lg--MaxWidth=70rem] - Max width of the large variant modal
- * @cssprop {<length>} [--pf-c-modal-box--MaxHeight=calc(100 - 3rem)] - Max height of the modal
- * @cssprop {<length>} [--pf-c-modal-box--BoxShadow=var(--pf-global--BoxShadow--xl)] -
- * @cssprop {<length>} [--pf-c-modal-box__title--FontSize=1.5rem] -
- * @cssprop {<length>} [--pf-c-modal-box--m-align-top--MarginTop=2rem] -
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight
- * @cssprop {<color>} [--pf-c-modal-box--BackgroundColor=#fff] -
- * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings
  */
 @customElement('pf-modal')
 export class PfModal extends LitElement implements HTMLDialogElement {
@@ -124,7 +101,9 @@ export class PfModal extends LitElement implements HTMLDialogElement {
 
     return html`
       <section ?hidden=${!this.open}>
+        <!-- summary: The modal overlay which lies under the dialog and above the page body -->
         <div id="overlay" part="overlay" ?hidden=${!this.open}></div>
+        <!-- summary: The dialog element -->
         <div id="dialog"
             part="dialog"
             tabindex="0"
@@ -133,18 +112,34 @@ export class PfModal extends LitElement implements HTMLDialogElement {
             aria-label=${ifDefined(headerLabel)}
             ?hidden="${!this.open}">
           <div id="container">
+            <!-- summary: The container for the dialog content -->
             <div id="content" part="content" class=${classMap({ hasHeader, hasDescription, hasFooter })}>
+              <!-- summary: The container for the optional dialog header -->
               <header part="header">
+                <!-- summary: Heading tag
+                     description: |
+                       The header is an optional slot that appears at the top of the modal window.
+                       It should be a heading tag (h2-h6). -->
                 <slot name="header"></slot>
+                <!-- summary: The container for the optional dialog description in the header -->
                 <div part="description" ?hidden=${!hasDescription}>
                   <slot name="description"></slot>
                 </div>
               </header>
+              <!--
+                summary: Modal dialog content
+                description: |
+                  The default slot can contain any type of content. When the header is not present,
+                  this unnamed slot appear at the top of the modal window (to the left of the close
+                  button). Otherwise it will appear beneath the header. -->
               <slot></slot>
+              <!-- summary: Actions footer container -->
               <footer ?hidden=${!hasFooter} part="footer">
+                <!-- summary: Optional footer content. Good place to put action buttons. -->
                 <slot name="footer"></slot>
               </footer>
             </div>
+            <!-- summary: The modal's close button -->
             <button id="close-button"
                 part="close-button"
                 aria-label="Close dialog"
diff --git a/elements/pf-panel/demo/pf-panel.html b/elements/pf-panel/demo/index.html
similarity index 100%
rename from elements/pf-panel/demo/pf-panel.html
rename to elements/pf-panel/demo/index.html
diff --git a/elements/pf-panel/pf-panel.css b/elements/pf-panel/pf-panel.css
index 6c0774e250..6b492d9b49 100644
--- a/elements/pf-panel/pf-panel.css
+++ b/elements/pf-panel/pf-panel.css
@@ -1,33 +1,62 @@
 :host {
   /* NB: upstream sets these on the container, which is why we do not use fallbacks here. */
+  /** Width of panel */
   --pf-c-panel--Width: auto;
+  /** Minimum width of panel */
   --pf-c-panel--MinWidth: auto;
+  /** Maximum width of panel */
   --pf-c-panel--MaxWidth: none;
+  /** Z-index of panel */
   --pf-c-panel--ZIndex: auto;
+  /** Background color of panel */
   --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+  /** Box shadow of panel */
   --pf-c-panel--BoxShadow: none;
+  /** Border width of panel before element */
   --pf-c-panel--before--BorderWidth: 0;
+  /** Border color of panel before element */
   --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Border width of bordered panel before element */
   --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Box shadow of raised panel */
   --pf-c-panel--m-raised--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));
+  /** Z-index of raised panel */
   --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);
+  /** Top padding of panel header */
   --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel header */
   --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel header */
   --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel header */
   --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Maximum height of panel main */
   --pf-c-panel__main--MaxHeight: none;
+  /** Overflow of panel main */
   --pf-c-panel__main--Overflow: visible;
+  /** Top padding of panel main body */
   --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel main body */
   --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel main body */
   --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel main body */
   --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Top padding of panel footer */
   --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel footer */
   --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel footer */
   --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel footer */
   --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Box shadow of panel footer */
   --pf-c-panel__footer--BoxShadow: none;
+  /** Maximum height of scrollable panel main */
   --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
+  /** Overflow of scrollable panel main */
   --pf-c-panel--m-scrollable__main--Overflow: auto;
+  /** Box shadow of scrollable panel footer */
   --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
   position: relative;
   z-index: var(--pf-c-panel--ZIndex);
diff --git a/elements/pf-panel/pf-panel.ts b/elements/pf-panel/pf-panel.ts
index 4d5024c0f2..d645969774 100644
--- a/elements/pf-panel/pf-panel.ts
+++ b/elements/pf-panel/pf-panel.ts
@@ -11,38 +11,7 @@ import styles from './pf-panel.css';
  * be used to house other components such as fields, forms, videos, buttons, and more.
  * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
  * component, which allows you to surface information via a collapsable container.
- * @slot header - Place header content here
- * @slot - Place main content here
- * @slot footer - Place footer content here
- * @cssprop [--pf-c-panel--Width=auto]
- * @cssprop [--pf-c-panel--MinWidth=auto]
- * @cssprop [--pf-c-panel--MaxWidth=none]
- * @cssprop [--pf-c-panel--ZIndex=auto]
- * @cssprop [--pf-c-panel--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
- * @cssprop [--pf-c-panel--BoxShadow=none]
- * @cssprop [--pf-c-panel--before--BorderWidth=0]
- * @cssprop [--pf-c-panel--before--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-panel--m-bordered--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-panel--m-raised--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))]
- * @cssprop [--pf-c-panel--m-raised--ZIndex=var(--pf-global--ZIndex--sm, 200)]
- * @cssprop [--pf-c-panel__header--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__header--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__header--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__header--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main--MaxHeight=none]
- * @cssprop [--pf-c-panel__main--Overflow=visible]
- * @cssprop [--pf-c-panel__main-body--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--BoxShadow=none]
- * @cssprop [--pf-c-panel--m-scrollable__main--MaxHeight=18.75rem]
- * @cssprop [--pf-c-panel--m-scrollable__main--Overflow=auto]
- * @cssprop [--pf-c-panel--m-scrollable__footer--BoxShadow=0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)]
+ * @alias Panel
  */
 @customElement('pf-panel')
 export class PfPanel extends LitElement {
@@ -59,11 +28,14 @@ export class PfPanel extends LitElement {
     const hasFooter = this.#slots.hasSlotted('footer');
     return html`
       <header>
+        <!-- Place header content here -->
         <slot name="header" ?hidden="${!hasHeader}"></slot>
       </header>
       <hr role="presentation" ?hidden="${!hasHeader}">
+      <!-- Place main content here -->
       <slot></slot>
       <footer>
+        <!-- Place footer content here -->
         <slot name="footer" ?hidden="${!hasFooter}"></slot>
       </footer>
     `;
diff --git a/elements/pf-popover/demo/pf-popover.html b/elements/pf-popover/demo/index.html
similarity index 100%
rename from elements/pf-popover/demo/pf-popover.html
rename to elements/pf-popover/demo/index.html
diff --git a/elements/pf-popover/pf-popover.css b/elements/pf-popover/pf-popover.css
index 6e60a61ea6..d471796398 100644
--- a/elements/pf-popover/pf-popover.css
+++ b/elements/pf-popover/pf-popover.css
@@ -1,7 +1,10 @@
 :host {
   display: inline;
+  /** Width of the arrow */
   --_floating-arrow-size: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
+  /** Heading font color */
   --_header-text-color: var(--pf-c-popover__title-text--Color, inherit);
+  /** Heading icon font color */
   --_header-icon-color: var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));
   --_animation-speed: var(--pf-popover--animation-speed, 300ms);
   --_z-index: var(--pf-popover--z-index, 9999);
@@ -34,13 +37,17 @@
 #arrow {
   display: block;
   position: absolute;
+  /** Arrow background color */
   background-color: var(--pf-c-popover__arrow--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
+  /** Arrow box shadow */
   box-shadow: var(
     --pf-c-popover__arrow--BoxShadow,
     var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
   );
   content: '';
+  /** Height of the arrow */
   height: var(--pf-c-popover__arrow--Height, var(--pf-global--arrow--width-lg, 1.5625rem));
+  /** Width of the arrow */
   width: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
   rotate: 45deg;
   z-index: -1;
@@ -56,6 +63,7 @@
   left: 0;
   top: 0;
   translate: var(--_floating-content-translate);
+  /** Popover box shadow */
   box-shadow: var(
     --pf-c-popover--BoxShadow,
     var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
@@ -73,19 +81,25 @@
 
 [part='content'] {
   position: relative;
+  /** Popover padding (top, right, bottom, left) */
   padding: var(--pf-c-popover__content--PaddingTop, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-popover__content--PaddingRight, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-popover__content--PaddingBottom, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-popover__content--PaddingLeft, var(--pf-global--spacer--md, 1rem));
   word-break: break-word;
+  /** Popover line height */
   line-height: var(--pf-c-popover--line-height, 1.5);
+  /** Popover font-size */
   font-size: var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
   color: var(--pf-c-popover__content--Color, var(--pf-global--Color--100, #151515));
+  /** Popover background color */
   background-color: var(--pf-c-popover__content--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
+  /** Popover max-width */
   max-width: var(
     --pf-c-popover--MaxWidth,
     calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
   );
+  /** Popover min-width */
   min-width: var(
     --pf-c-popover--MinWidth,
     calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
@@ -96,10 +110,12 @@
 [part='close-button'] {
   cursor: pointer;
   position: absolute;
+  /** Close button right position */
   right: var(
     --pf-c-popover--c-button--Right,
     calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))
   );
+  /** Close button top position */
   top: var(
     --pf-c-popover--c-button--Top,
     calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))
@@ -107,6 +123,7 @@
 }
 
 [part='content'] > [part='close-button']:not([hidden]) ~ *:not([hidden]) {
+  /** Padding between close button and its immediate sibling */
   padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight, var(--pf-global--spacer--2xl, 3rem));
 }
 
@@ -117,6 +134,7 @@
 
 [part='icon'] {
   color: var(--_header-icon-color);
+  /** Heading icon right margin */
   margin-right: var(--pf-c-popover__title-icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
 }
 
@@ -128,6 +146,7 @@
 [part='icon'],
 [part='heading']::slotted(:is(h2, h3, h4, h5, h6)),
 [part='heading'] :is(h2, h3, h4, h5, h6) {
+  /** Header font-size */
   font-size: var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));
   font-weight: var(--pf-global--FontWeight--normal, 400);
   --pf-icon--size: var(
@@ -140,8 +159,11 @@
 [part='heading'] :is(h2, h3, h4, h5, h6) {
   color: var(--_header-text-color);
   margin-top: 0;
+  /** Header bottom margin */
   margin-bottom: var(--pf-c-popover__title--MarginBottom, var(--pf-global--spacer--sm, 0.5rem));
+  /** Header line height */
   line-height: var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));
+  /** Header font-family */
   font-family: var(
     --pf-c-popover__title--FontFamily,
     var(
@@ -162,30 +184,41 @@
 }
 
 [part='footer'] {
+  /** Footer top margin */
   margin-top: var(--pf-c-popover__footer--MarginTop, var(--pf-global--spacer--md, 1rem));
 }
 
 :host([alert-severity='default']) {
+  /** Default alert heading color */
   --_header-text-color: var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));
+  /** Default alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596));
 }
 
 :host([alert-severity='info']) {
+  /** Info alert heading color */
   --_header-text-color: var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));
+  /** Info alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3));
 }
 
 :host([alert-severity='warning']) {
+  /** Warning alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));
+  /** Warning alert heading color */
   --_header-text-color: var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600));
 }
 
 :host([alert-severity='success']) {
+  /** Success alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));
+  /** Success alert heading color */
   --_header-text-color: var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18));
 }
 
 :host([alert-severity='danger']) {
+  /** Danger alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));
+  /** Danger alert heading color */
   --_header-text-color: var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000));
 }
diff --git a/elements/pf-popover/pf-popover.ts b/elements/pf-popover/pf-popover.ts
index d2c7fbf05e..d459d46452 100644
--- a/elements/pf-popover/pf-popover.ts
+++ b/elements/pf-popover/pf-popover.ts
@@ -48,114 +48,7 @@ export class PopoverShownEvent extends ComposedEvent {
 /**
  * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
  * @summary Toggle the visibility of helpful or contextual information.
- * @slot -
- *         The default slot holds invoking element.
- *         Typically this would be an icon, button, or other small sized element.
- * @slot heading
- *       This slot renders the content that will be displayed inside of the header of the popover.
- *       Typically this would be a heading element.
- * @slot icon
- *       This slot renders the icon that will be displayed inside the header of the popover,
- *       before the heading.
- * @slot body
- *       This slot renders the content that will be displayed inside of the body of the popover.
- * @slot footer
- *       This slot renders the content that will be displayed inside of the footer of the popover.
- * @csspart container - The component wrapper
- * @csspart content - The content wrapper
- * @csspart header - The header element; only visible if both an icon annd heading are provided.
- * @csspart heading - The heading element
- * @csspart icon - The header icon
- * @csspart close-button - The close button
- * @csspart body - The container for the body content
- * @csspart footer - The container for the footer content
- * @cssprop {<length>} [--pf-c-popover__arrow--Height=1.5625rem] Height of the arrow
- * @cssprop {<length>} [--pf-c-popover__arrow--Width=1.5625rem] Width of the arrow
- * @cssprop {<color>} [--pf-c-popover__title-text--Color=inherit] Heading font color
- * @cssprop {<color>} [--pf-c-popover__title-icon--Color=#151515] Heading icon font color
- * @cssprop {<color>} [--pf-c-popover__arrow--BackgroundColor=#fff] Arrow background color
- * @cssprop [--pf-c-popover__arrow--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Arrow box shadow
- * @cssprop [--pf-c-popover--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Popover box shadow
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingTop=1rem] Popover top padding
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=1rem] Popover right padding
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingBottom=1rem]
- *          Popover bottom padding
- *
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingLeft=1rem]
- *          Popover left padding
- *
- * @cssprop {<number>} [--pf-c-popover--line-height=1.5]
- *          Popover line height
- *
- * @cssprop {<length>} [--pf-c-popover__content--FontSize=0.875rem]
- *          Popover font-size
- *
- * @cssprop {<color>} [--pf-c-popover__content--BackgroundColor=#fff]
- *          Popover background color
- *
- * @cssprop {<length>} [--pf-c-popover--MaxWidth=20.75rem]
- *          Popover max-width
- *
- * @cssprop {<length>} [--pf-c-popover--MinWidth=20.75rem]
- *          Popover min-width
- *
- * @cssprop {<number>} [--pf-c-popover--c-button--Right=`0]
- *          Close button right position
- *
- * @cssprop {<number>} [--pf-c-popover--c-button--Top=0]
- *          Close button top position
- *
- * @cssprop {<length>} [--pf-c-popover--c-button--sibling--PaddingRight=3rem]
- *          Padding between close button and its immediate sibling
- *
- * @cssprop {<length>} [--pf-c-popover__title-icon--MarginRight=0.5rem]
- *          Heading icon right margin
- *
- * @cssprop {<length>} [--pf-c-popover__title--FontSize=1rem]
- *          Header font-size
- *
- * @cssprop {<length>} [--pf-c-popover__title--MarginBottom=0.5rem]
- *          Header bottom margin
- *
- * @cssprop {<number>} [--pf-c-popover__title--LineHeight=1.5]
- *          Header line height
- *
- * @cssprop {<string>} [--pf-c-popover__title--FontFamily='RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif]
- *          Header font-family
- *
- * @cssprop {<length>} [--pf-c-popover__footer--MarginTop=1rem]
- *          Footer top margin
- *
- * @cssprop {<color>} [--pf-c-popover--m-default__title-text--Color=#003737]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-default__title-icon--Color=#009596]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-info__title-text--Color=#002952]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-info__title-icon--Color=#2b9af3]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-warning__title-text--Color=#795600]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-warning__title-icon--Color=#f0ab00]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-success__title-text--Color=#1e4f18]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-success__title-icon--Color=#3e8635]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-danger__title-text--Color=#a30000]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-danger__title-icon--Color=#c9190b]
- *          Default alert icon color
- *
+ * @alias Popover
  */
 @customElement('pf-popover')
 export class PfPopover extends LitElement {
@@ -336,6 +229,14 @@ export class PfPopover extends LitElement {
     }
 
     const headingSlotWithFallback = html`
+      <!-- slot:
+             summary: Heading content.
+             description: |
+               This slot projects content into the header of the popover.
+               Typically this would be a heading (e.g. h2, h3, etc.) element.
+           part:
+             summary: The heading element
+      -->
       <slot id="heading" name="heading" part="heading" ?hidden=${!hasHeading}>${headingContent}</slot>
     `;
 
@@ -344,9 +245,13 @@ export class PfPopover extends LitElement {
       ?? '';
 
     return html`
+      <!-- The component wrapper -->
       <div id="container"
            style="${styleMap(styles)}"
-           class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}">
+           class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}"
+           part="container">
+        <!-- The default slot holds invoking element.
+             Typically this would be an icon, button, or other small sized element. -->
         <slot id="trigger"
               @slotchange="${this.#triggerChanged}"
               @keydown="${this.#onKeydown}"
@@ -357,7 +262,9 @@ export class PfPopover extends LitElement {
                 aria-describedby="body"
                 aria-label=${ifDefined(this.label)}>
           <div id="arrow"></div>
+          <!-- The content wrapper -->
           <div id="content" part="content">
+            <!-- The close button -->
             <pf-button id="close-button"
                        part="close-button"
                        plain
@@ -370,8 +277,11 @@ export class PfPopover extends LitElement {
               </svg>
             </pf-button>
             ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html`
+            <!-- The header element; only visible if both an icon annd heading are provided. -->
             <header part="header">
+              <!-- summary: Container for the header icon -->
               <span part="icon">
+                <!-- summary: The icon in the header of the popover, before the heading. -->
                 <slot name="icon">
                   <pf-icon icon="${headerIcon}"
                            set="${ifDefined(this.iconSet)}"
@@ -381,8 +291,15 @@ export class PfPopover extends LitElement {
               <span class="visually-hidden">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}
               ${headingSlotWithFallback}
             </header>`}
+            <!-- slot:
+                   summary: body of the popover, which is hidden until the popover is activated.
+                 part:
+                   summary: The container for the body content
+            -->
             <slot id="body" part="body" name="body">${this.body ?? ''}</slot>
+            <!-- summary: The container for the footer content -->
             <footer part="footer" ?hidden=${!hasFooter}>
+              <!-- summary: optional footer content of the popover. -->
               <slot name="footer">${this.footer}</slot>
             </footer>
           </div>
diff --git a/elements/pf-progress-stepper/demo/pf-progress-stepper.html b/elements/pf-progress-stepper/demo/index.html
similarity index 100%
rename from elements/pf-progress-stepper/demo/pf-progress-stepper.html
rename to elements/pf-progress-stepper/demo/index.html
diff --git a/elements/pf-progress-stepper/pf-progress-stepper.css b/elements/pf-progress-stepper/pf-progress-stepper.css
index 7b5163e0be..6e96c6bc12 100644
--- a/elements/pf-progress-stepper/pf-progress-stepper.css
+++ b/elements/pf-progress-stepper/pf-progress-stepper.css
@@ -3,101 +3,197 @@
 }
 
 :host {
+  /** Grid auto flow for vertical layout */
   --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;
+  /** Grid template columns for vertical layout */
   --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
+  /** Top position for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
+  /** Left position for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);
+  /** Width for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
+  /** Height for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
+  /** Right border width for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Right border color for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Bottom border width for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
+  /** Bottom border color for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;
+  /** Transform for vertical step connector pseudo-element */
   --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
+  /** Top margin for vertical step main content */
   --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right margin for vertical step main content */
   --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
+  /** Bottom margin for vertical step main content */
   --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl, 2rem);
+  /** Left margin for vertical step main content */
   --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  /** Grid template columns for vertical compact layout */
   --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
+  /** Padding bottom for vertical compact step connector */
   --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Grid row for vertical compact step connector */
   --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
+  /** Right margin for vertical compact step main content */
   --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
+  /** Right margin for vertical centered step main content */
   --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;
+  /** Left margin for vertical centered step main content */
   --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;
+  /** Grid auto flow for horizontal layout */
   --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;
+  /** Grid template columns for horizontal layout */
   --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
+  /** Top position for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);
+  /** Left position for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;
+  /** Width for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
+  /** Height for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
+  /** Right border width for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;
+  /** Right border color for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;
+  /** Bottom border width for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Bottom border color for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Transform for horizontal step connector pseudo-element */
   --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
+  /** Top margin for horizontal step main content */
   --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right margin for horizontal step main content */
   --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** Bottom margin for horizontal step main content */
   --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;
+  /** Left margin for horizontal step main content */
   --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;
+  /** Grid template columns for horizontal compact layout */
   --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
+  /** Padding bottom for horizontal compact step connector */
   --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;
+  /** Grid row for horizontal compact step connector */
   --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
+  /** Grid auto flow for compact layout */
   --pf-c-progress-stepper--m-compact--GridAutoFlow: row;
+  /** Top margin for compact step main content */
   --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;
+  /** Bottom margin for compact step main content */
   --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Minimum width for compact step connector */
   --pf-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
+  /** Width for compact step icon */
   --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
+  /** Font size for compact step icon */
   --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+  /** Font size for compact step title */
   --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Font weight for compact step title */
   --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  /** Top margin for compact pficon */
   --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
+  /** Top margin for compact exclamation triangle icon */
   --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
+  /** Left position for centered step connector pseudo-element */
   --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;
+  /** Grid template columns for centered layout */
   --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
+  /** Justify content for centered step connector */
   --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
+  /** Right margin for centered step main content */
   --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left margin for centered step main content */
   --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  /** Text alignment for centered step main content */
   --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
+  /** Right margin for centered step description */
   --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
+  /** Left margin for centered step description */
   --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
+  /** Grid template rows */
   --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
+  /** Justify content for step connector */
   --pf-c-progress-stepper__step-connector--JustifyContent: start;
+  /** Z-index for step icon */
   --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs, 100);
+  /** Width of the step icon */
   --pf-c-progress-stepper__step-icon--Width: 1.75rem;
+  /** Height of the step icon */
   --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);
+  /** Font size of the step icon */
   --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--FontSize--md, 1rem);
+  /** Color of the step icon */
   --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100, #151515);
+  /** Background color of the step icon */
   --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);
+  /** Border width of the step icon */
   --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Border color of the step icon */
   --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Top margin for pficon */
   --pf-c-progress-stepper__pficon--MarginTop: 3px;
+  /** Top margin for exclamation triangle icon */
   --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
+  /** Color of the step title */
   --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100, #151515);
+  /** Text alignment of the step title */
   --pf-c-progress-stepper__step-title--TextAlign: left;
+  /** Font size of the step title */
   --pf-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md, 1rem);
+  /** Font weight of the step title */
   --pf-c-progress-stepper__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  /** Font weight for current step title */
   --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-global--FontWeight--bold, 700);
+  /** Color for current step title */
   --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100, #151515);
+  /** Color for pending step title */
   --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200, #6a6e73);
+  /** Color for danger step title */
   --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100, #c9190b);
+  /** Text decoration color for help text step title */
   --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200, #8a8d90);
+  /** Text decoration thickness for help text step title */
   --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm, 1px);
+  /** Text underline offset for help text step title */
   --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;
+  /** Text decoration color for help text step title on hover */
   --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100, #151515);
+  /** Text decoration color for help text step title on focus */
   --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100, #151515);
+  /** Color for help text step title on hover */
   --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-global--Color--100, #151515);
+  /** Color for help text step title on focus */
   --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-global--Color--100, #151515);
+  /** Color for danger help text step title on hover */
   --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-global--danger-color--200, #a30000);
+  /** Color for danger help text step title on focus */
   --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-global--danger-color--200, #a30000);
+  /** Text decoration color for danger help text step title */
   --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Text decoration color for danger help text step title on hover */
   --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--danger-color--200, #a30000);
+  /** Text decoration color for danger help text step title on focus */
   --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor: var(--pf-global--danger-color--200, #a30000);
+  /** Top margin for step description */
   --pf-c-progress-stepper__step-description--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Font size of the step description */
   --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Color of the step description */
   --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200, #6a6e73);
+  /** Text alignment of the step description */
   --pf-c-progress-stepper__step-description--TextAlign: left;
+  /** Grid auto flow (defaults to vertical) */
   --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
+  /** Grid template columns (defaults to vertical) */
   --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
+  /** Top position for step connector pseudo-element (defaults to vertical) */
   --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
   --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
   --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
diff --git a/elements/pf-progress-stepper/pf-progress-stepper.ts b/elements/pf-progress-stepper/pf-progress-stepper.ts
index e02c55b3bb..e82097e188 100644
--- a/elements/pf-progress-stepper/pf-progress-stepper.ts
+++ b/elements/pf-progress-stepper/pf-progress-stepper.ts
@@ -11,121 +11,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
 
 /**
  * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
- * @cssprop [--pf-c-progress-stepper--m-vertical--GridAutoFlow=row]
- * @cssprop [--pf-c-progress-stepper--m-vertical--GridTemplateColumns=auto 1fr]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Top=0]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Left=calc(var(--pf-c-progress-stepper__step-icon--Width) / 2)]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Width=auto]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Height=100%]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth=0]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor=transparent]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Transform=translateX(-50%)]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginRight=0]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginBottom=var(--pf-global--spacer--xl, 2rem)]
- * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns=1fr]
- * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow=auto]
- * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight=0]
- * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight=0]
- * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft=0]
- * @cssprop [--pf-c-progress-stepper--m-horizontal--GridAutoFlow=column]
- * @cssprop [--pf-c-progress-stepper--m-horizontal--GridTemplateColumns=initial]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Top=calc(var(--pf-c-progress-stepper__step-icon--Height) / 2)]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Left=0]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Width=100%]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Height=auto]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth=0]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor=unset]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform=translateY(-50%)]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom=0]
- * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft=0]
- * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns=repeat(auto-fill, 1.75rem)]
- * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom=0]
- * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow=2]
- * @cssprop [--pf-c-progress-stepper--m-compact--GridAutoFlow=row]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginTop=0]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--MinWidth=1.75rem]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--Width=1.125rem]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-progress-stepper--m-compact__pficon--MarginTop=2px]
- * @cssprop [--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop=-3px]
- * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Left=50%]
- * @cssprop [--pf-c-progress-stepper--m-center--GridTemplateColumns=1fr]
- * @cssprop [--pf-c-progress-stepper--m-center__step-connector--JustifyContent=center]
- * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper--m-center__step-main--TextAlign=center]
- * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginRight=0]
- * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginLeft=0]
- * @cssprop [--pf-c-progress-stepper--GridTemplateRows=auto 1fr]
- * @cssprop [--pf-c-progress-stepper__step-connector--JustifyContent=start]
- * @cssprop [--pf-c-progress-stepper__step-icon--ZIndex=var(--pf-global--ZIndex--xs, 100)]
- * @cssprop [--pf-c-progress-stepper__step-icon--Width=1.75rem]
- * @cssprop [--pf-c-progress-stepper__step-icon--Height=var(--pf-c-progress-stepper__step-icon--Width)]
- * @cssprop [--pf-c-progress-stepper__step-icon--FontSize=var(--pf-global--FontSize--md, 1rem)]
- * @cssprop [--pf-c-progress-stepper__step-icon--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-progress-stepper__step-icon--BackgroundColor=var(--pf-global--BackgroundColor--light-200, #fafafa)]
- * @cssprop [--pf-c-progress-stepper__step-icon--BorderWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-progress-stepper__step-icon--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-progress-stepper__pficon--MarginTop=3px]
- * @cssprop [--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop=-5px]
- * @cssprop [--pf-c-progress-stepper__step-title--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-progress-stepper__step-title--TextAlign=left]
- * @cssprop [--pf-c-progress-stepper__step-title--FontSize=var(--pf-global--FontSize--md, 1rem)]
- * @cssprop [--pf-c-progress-stepper__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--FontWeight=var(--pf-global--FontWeight--bold, 700)]
- * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-progress-stepper__step--m-pending__step-title--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--Color=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor=var(--pf-global--BorderColor--200, #8a8d90)]
- * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset=0.25rem]
- * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color=var(--pf-global--danger-color--200, #a30000)]
- * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color=var(--pf-global--danger-color--200, #a30000)]
- * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--danger-color--200, #a30000)]
- * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor=var(--pf-global--danger-color--200, #a30000)]
- * @cssprop [--pf-c-progress-stepper__step-description--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-progress-stepper__step-description--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-progress-stepper__step-description--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-progress-stepper__step-description--TextAlign=left]
- * @cssprop [--pf-c-progress-stepper--GridAutoFlow=var(--pf-c-progress-stepper--m-vertical--GridAutoFlow)]
- * @cssprop [--pf-c-progress-stepper--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--Top=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--Left=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--Width=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--Height=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor)]
- * @cssprop [--pf-c-progress-stepper__step-connector--before--Transform=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform)]
- * @cssprop [--pf-c-progress-stepper__step-main--MarginTop=var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop)]
- * @cssprop [--pf-c-progress-stepper__step-main--MarginRight=var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight)]
- * @cssprop [--pf-c-progress-stepper__step-main--MarginBottom=var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom)]
- * @cssprop [--pf-c-progress-stepper__step-main--MarginLeft=var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft)]
- * @cssprop [--pf-c-progress-stepper--m-compact--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns)]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--GridRow=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow)]
- * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom)]
- * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Content=none]
- * @cssprop [--pf-c-progress-stepper--m-center__step-main--before--Content='']
- * @cssprop [--pf-c-progress-stepper__step-connector--before--Content='']
- * @cssprop [--pf-c-progress-stepper__step-main--before--Content=none]
+ * @alias Progress Stepper
  */
 @customElement('pf-progress-stepper')
 export class PfProgressStepper extends LitElement {
diff --git a/elements/pf-progress/demo/pf-progress.html b/elements/pf-progress/demo/index.html
similarity index 100%
rename from elements/pf-progress/demo/pf-progress.html
rename to elements/pf-progress/demo/index.html
diff --git a/elements/pf-progress/pf-progress.css b/elements/pf-progress/pf-progress.css
index 0a9343caf3..dd32a0e915 100644
--- a/elements/pf-progress/pf-progress.css
+++ b/elements/pf-progress/pf-progress.css
@@ -8,24 +8,43 @@
   --_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity: #f0ab0033;  /* WARNING: not a recognized token value */
   --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33;  /* WARNING: not a recognized token value */
 
+  /** Gap between sections of progress bar */
   --pf-c-progress--GridGap: var(--pf-global--spacer--md, 1rem);
+  /** Color of progress bar */
   --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc);
+  /** Height of progress bar */
   --pf-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem);
+  /** Background color of progress bar */
   --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff);
+  /** Color of status icon */
   --pf-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515);
+  /** Margin left of status icon */
   --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** Height of progress bar indicator */
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
+  /** Background color of progress bar indicator */
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  /** Background color of progress bar when variant is success */
   --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
+  /** Background color of progress bar when variant is warning */
   --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+  /** Background color of progress bar when variant is danger */
   --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Color of status icon when variant is success */
   --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+  /** Color of status icon when variant is warning */
   --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+  /** Color of status icon when variant is danger */
   --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+  /** Color of progress bar measure when variant is success and measure location is inside */
   --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff);
+  /** Font size of progress bar measure when measure location is outside */
   --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Height of progress bar when size is small */
   --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem);
+  /** Font size of progress bar description when size is small */
   --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Height of progress bar when size is large */
   --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem);
   display: grid;
   align-items: end;
diff --git a/elements/pf-progress/pf-progress.ts b/elements/pf-progress/pf-progress.ts
index 9746bb0dd1..973b8d02d9 100644
--- a/elements/pf-progress/pf-progress.ts
+++ b/elements/pf-progress/pf-progress.ts
@@ -17,63 +17,7 @@ const ICONS = new Map(Object.entries({
 /**
  * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
  * @summary Display completion status of ongoing process or task.
- * @cssprop {<length>} [--pf-c-progress--GridGap=1rem]
- *          Gap between the sections of the progress bar.
- *
- * @cssprop {<color>} [--pf-c-progress__bar--before--BackgroundColor=#06c]
- *          Color of the progress bar.
- *
- * @cssprop {<length>} [--pf-c-progress__bar--Height=1rem]
- *          Height of the progress bar.
- *
- * @cssprop {<color>} [--pf-c-progress__bar--BackgroundColor=#ffffff]
- *          Background color of the progress bar.
- *
- * @cssprop {<color>} [--pf-c-progress__status-icon--Color=#151515]
- *          Color of the status icon.
- *
- * @cssprop {<length>} [--pf-c-progress__status-icon--MarginLeft=0.5rem]
- *          Margin left of the status icon.
- *
- * @cssprop {<length>} [--pf-c-progress__indicator--Height=1rem]
- *          Height of the progress bar indicator.
- *
- * @cssprop {<color>} [--pf-c-progress__indicator--BackgroundColor=#ffffff]
- *          Background color of the progress bar indicator.
- *
- * @cssprop {<color>} [--pf-c-progress--m-success__bar--BackgroundColor=#3e8635]
- *          Background color of the progress bar when variant is success.
- *
- * @cssprop {<color>} [--pf-c-progress--m-warning__bar--BackgroundColor=#f0ab00]
- *          Background color of the progress bar when variant is warning.
- *
- * @cssprop {<color>} [--pf-c-progress--m-danger__bar--BackgroundColor=#c9190b]
- *          Background color of the progress bar when variant is danger.
- *
- * @cssprop {<color>} [--pf-c-progress--m-success__status-icon--Color=#3e8635]
- *          Color of the status icon when variant is success.
- *
- * @cssprop {<color>} [--pf-c-progress--m-warning__status-icon--Color=#f0ab00]
- *          Color of the status icon when variant is warning.
- *
- * @cssprop {<color>} [--pf-c-progress--m-danger__status-icon--Color=#c9190b]
- *          Color of the status icon when variant is danger.
- *
- * @cssprop {<color>} [--pf-c-progress--m-success--m-inside__measure--Color=#ffffff]
- *          Color of the progress bar measure when variant is success and measure location is inside.
- *
- * @cssprop {<length>} [--pf-c-progress--m-outside__measure--FontSize=0.875rem]
- *          Font size of the progress bar measure when measure location is outside.
- *
- * @cssprop {<length>} [--pf-c-progress--m-sm__bar--Height=0.5rem]
- *          Height of the progress bar when the size is small.
- *
- * @cssprop {<length>} [--pf-c-progress--m-sm__description--FontSize=0.875rem]
- *          Font size of the progress bar description when the size is small.
- *
- * @cssprop {<length>} [--pf-c-progress--m-lg__bar--Height=1.5rem]
- *          Height of the progress bar when the size is large.
- *
+ * @alias Progress
  */
 @customElement('pf-progress')
 export class PfProgress extends LitElement {
diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/index.html
similarity index 100%
rename from elements/pf-search-input/demo/pf-search-input.html
rename to elements/pf-search-input/demo/index.html
diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index 5a3bdef385..9a37f81ec5 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -26,7 +26,7 @@ import '@patternfly/elements/pf-search-input/pf-search-input.js';
 #### Search Input
 
 {% htmlexample %}
-  {% renderFile "./elements/pf-search-input/demo/pf-search-input.html" %}
+  {% renderFile "./elements/pf-search-input/demo/index.html" %}
 {% endhtmlexample %}
 
 #### Search Input Form
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 46c6e35178..fe0fb9a192 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -34,6 +34,7 @@ export class PfSearchChangeEvent extends Event {
  * remove the current input, allowing users to start a new search quickly.
  *
  * @summary Allows users to search through a list for specific search terms
+ * @alias Search Input
  *
  * @fires open - when the menu toggles open
  * @fires close - when the menu toggles closed
diff --git a/elements/pf-select/demo/pf-select.html b/elements/pf-select/demo/index.html
similarity index 100%
rename from elements/pf-select/demo/pf-select.html
rename to elements/pf-select/demo/index.html
diff --git a/elements/pf-select/docs/pf-select.md b/elements/pf-select/docs/pf-select.md
index 8240b19038..e784e783bd 100644
--- a/elements/pf-select/docs/pf-select.md
+++ b/elements/pf-select/docs/pf-select.md
@@ -26,7 +26,7 @@ Focus on options using arrow keys or
 by typing the first character of an option.
 
 {% htmlexample %}
-  {% renderFile "./elements/pf-select/demo/pf-select.html" %}
+  {% renderFile "./elements/pf-select/demo/index.html" %}
 {% endhtmlexample %}
 
 #### Single with description
diff --git a/elements/pf-select/pf-select.css b/elements/pf-select/pf-select.css
index 2101395f6f..27a383ecbd 100644
--- a/elements/pf-select/pf-select.css
+++ b/elements/pf-select/pf-select.css
@@ -6,161 +6,317 @@
   --_pf-option-checkboxes-display: none;
   --_pf-option-svg-display: block;
 	--_pf-option-selected-background-color: var(--rh-color-gray-20, #e0e0e0);
+	/** Select toggle top padding */
 	--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	/** Select toggle right padding */
 	--pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select toggle bottom padding */
 	--pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	/** Select toggle left padding */
 	--pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select toggle minimum width */
 	--pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
+	/** Select toggle font size */
 	--pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** Select toggle font weight */
 	--pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Select toggle line height */
 	--pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	/** Select toggle background color */
 	--pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Select toggle border top width */
 	--pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Select toggle border right width */
 	--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Select toggle border bottom width */
 	--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Select toggle border left width */
 	--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Select toggle border width */
 	--pf-c-select__toggle--before--BorderWidth: initial;
+	/** Select toggle border top color */
 	--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	/** Select toggle border right color */
 	--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	/** Select toggle border bottom color */
 	--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	/** Select toggle border left color */
 	--pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	/** Select toggle text color */
 	--pf-c-select__toggle--Color: var(--pf-global--Color--100, #151515);
+	/** Select toggle hover border bottom color */
 	--pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	/** Select toggle focus border bottom color */
 	--pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	/** Select toggle focus border bottom width */
 	--pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Select toggle active border bottom color */
 	--pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	/** Select toggle active border bottom width */
 	--pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Select toggle expanded border bottom color */
 	--pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	/** Select toggle expanded border bottom width */
 	--pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Select toggle disabled background color */
 	--pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+	/** Select toggle plain border color */
 	--pf-c-select__toggle--m-plain--before--BorderColor: transparent;
+	/** Select toggle placeholder color */
 	--pf-c-select__toggle--m-placeholder--Color: transparent;
+	/** Select invalid state toggle border bottom color */
 	--pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	/** Select invalid state toggle border bottom width */
 	--pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Select invalid state toggle hover border bottom color */
 	--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	/** Select invalid state toggle focus border bottom color */
 	--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	/** Select invalid state toggle active border bottom color */
 	--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	/** Select invalid state toggle expanded border bottom color */
 	--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	/** Select invalid state toggle status icon color */
 	--pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+	/** Select success state toggle border bottom color */
 	--pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	/** Select success state toggle border bottom width */
 	--pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Select success state toggle hover border bottom color */
 	--pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	/** Select success state toggle focus border bottom color */
 	--pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	/** Select success state toggle active border bottom color */
 	--pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	/** Select success state toggle expanded border bottom color */
 	--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	/** Select success state toggle status icon color */
 	--pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+	/** Select warning state toggle border bottom color */
 	--pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	/** Select warning state toggle border bottom width */
 	--pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Select warning state toggle hover border bottom color */
 	--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	/** Select warning state toggle focus border bottom color */
 	--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	/** Select warning state toggle active border bottom color */
 	--pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	/** Select warning state toggle expanded border bottom color */
 	--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	/** Select warning state toggle status icon color */
 	--pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+	/** Select toggle wrapper not last child right margin */
 	--pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+	/** Select toggle wrapper maximum width */
 	--pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+	/** Select toggle wrapper chip group top margin */
 	--pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;
+	/** Select toggle wrapper chip group bottom margin */
 	--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;
+	/** Select typeahead toggle flex basis */
 	--pf-c-select__toggle-typeahead--FlexBasis: 10em;
+	/** Select typeahead toggle background color */
 	--pf-c-select__toggle-typeahead--BackgroundColor: transparent;
+	/** Select typeahead toggle top border */
 	--pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm, 1px) solid transparent;
+	/** Select typeahead toggle right border */
 	--pf-c-select__toggle-typeahead--BorderRight: none;
+	/** Select typeahead toggle left border */
 	--pf-c-select__toggle-typeahead--BorderLeft: none;
+	/** Select typeahead toggle minimum width */
 	--pf-c-select__toggle-typeahead--MinWidth: 7.5rem;
+	/** Select typeahead toggle focus bottom padding */
 	--pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md));
+	/** Select toggle placeholder text color */
 	--pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	/** Select toggle icon left margin */
 	--pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	/** Select toggle badge left padding */
 	--pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select toggle status icon left margin */
 	--pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	/** Select toggle status icon color */
 	--pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
+	/** Select toggle arrow left margin */
 	--pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	/** Select toggle arrow right margin */
 	--pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select toggle arrow with clear left margin */
 	--pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select toggle arrow top expanded rotation */
 	--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
+	/** Select plain toggle arrow color */
 	--pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Select plain hover toggle arrow color */
 	--pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
+	/** Select toggle clear right padding */
 	--pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select toggle clear left padding */
 	--pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** Select toggle clear button left padding */
 	--pf-c-select__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select toggle button text color */
 	--pf-c-select__toggle-button--Color: var(--pf-global--Color--100, #151515);
+	/** Select menu background color */
 	--pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
+	/** Select menu box shadow */
 	--pf-c-select__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));
+	/** Select menu top padding */
 	--pf-c-select__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu bottom padding */
 	--pf-c-select__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu top position */
 	--pf-c-select__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
+	/** Select menu z-index */
 	--pf-c-select__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
+	/** Select menu width */
 	--pf-c-select__menu--Width: auto;
+	/** Select menu minimum width */
 	--pf-c-select__menu--MinWidth: 100%;
+	/** Select menu top transform Y */
 	--pf-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
+	/** Select list item loading top padding */
 	--pf-c-select__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu item top padding */
 	--pf-c-select__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu item right padding */
 	--pf-c-select__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** Select menu item selected right padding */
 	--pf-c-select__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
+	/** Select menu item bottom padding */
 	--pf-c-select__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu item left padding */
 	--pf-c-select__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** Select menu item font size */
 	--pf-c-select__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** Select menu item font weight */
 	--pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Select menu item line height */
 	--pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	/** Select menu item text color */
 	--pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
+	/** Select menu item disabled text color */
 	--pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	/** Select menu item width */
 	--pf-c-select__menu-item--Width: 100%;
+	/** Select menu item hover background color */
 	--pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	/** Select menu item focus background color */
 	--pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	/** Select menu item disabled background color */
 	--pf-c-select__menu-item--disabled--BackgroundColor: transparent;
+	/** Select menu item link width */
 	--pf-c-select__menu-item--m-link--Width: auto;
+	/** Select menu item link hover background color */
 	--pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
+	/** Select menu item link focus background color */
 	--pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
+	/** Select menu item action color */
 	--pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Select menu item action hover color */
 	--pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
+	/** Select menu item action focus color */
 	--pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
+	/** Select menu item action disabled color */
 	--pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+	/** Select menu item action width */
 	--pf-c-select__menu-item--m-action--Width: auto;
+	/** Select menu item action font size */
 	--pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	/** Select menu item action hover background color */
 	--pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
+	/** Select menu item action focus background color */
 	--pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
+	/** Select menu item hover action color */
 	--pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Select menu item favorite action color */
 	--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Select menu item favorite action hover color */
 	--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
+	/** Select menu item favorite action focus color */
 	--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
+	/** Select menu wrapper favorite action color */
 	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
+	/** Select menu wrapper favorite action hover color */
 	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
+	/** Select menu wrapper favorite action focus color */
 	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
+	/** Select menu item load color */
 	--pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
+	/** Select menu item icon color */
 	--pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
+	/** Select menu item icon font size */
 	--pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	/** Select menu item icon right position */
 	--pf-c-select__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
+	/** Select menu item icon top position */
 	--pf-c-select__menu-item-icon--Top: 50%;
+	/** Select menu item icon transform Y */
 	--pf-c-select__menu-item-icon--TranslateY: -50%;
+	/** Select menu item action icon minimum height */
 	--pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));
+	/** Select menu item match font weight */
 	--pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
+	/** Select menu search top padding */
 	--pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu search right padding */
 	--pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	/** Select menu search bottom padding */
 	--pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** Select menu search left padding */
 	--pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
+	/** Select menu group top padding */
 	--pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu group title top padding */
 	--pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);
+	/** Select menu group title right padding */
 	--pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	/** Select menu group title bottom padding */
 	--pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
+	/** Select menu group title left padding */
 	--pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
+	/** Select menu group title font size */
 	--pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	/** Select menu group title font weight */
 	--pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Select menu group title color */
 	--pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	/** Select menu item count left margin */
 	--pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	/** Select menu item count font size */
 	--pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** Select menu item count color */
 	--pf-c-select__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Select menu item disabled count color */
 	--pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	/** Select menu item description font size */
 	--pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	/** Select menu item description color */
 	--pf-c-select__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Select menu item description right padding */
 	--pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	/** Select menu item main right padding */
 	--pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	/** Select menu item selected main right padding */
 	--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
+	/** Select menu footer box shadow */
 	--pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Select menu footer top padding */
 	--pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** Select menu footer right padding */
 	--pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** Select menu footer bottom padding */
 	--pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** Select menu footer left padding */
 	--pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** Select menu footer top margin */
 	--pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu footer bottom margin */
 	--pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
+	/** Select menu divider top margin */
 	--pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Select menu divider bottom margin */
 	--pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
 }
 
diff --git a/elements/pf-select/pf-select.ts b/elements/pf-select/pf-select.ts
index e32edb14d7..32420b52fe 100644
--- a/elements/pf-select/pf-select.ts
+++ b/elements/pf-select/pf-select.ts
@@ -36,166 +36,9 @@ export class PfSelectChangeEvent extends Event {
  * A select component consists of a toggle control to open and close a menu of actions or links.
  * Selects differ from dropdowns in that they persist selection,
  * whereas dropdowns are typically used to present a list of actions or links.
- * @slot - insert `pf-option` and/or `pf-option-groups` here
- * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.
+ * @alias Select
  * @fires open - when the menu toggles open
  * @fires close - when the menu toggles closed
- * @cssprop [--pf-c-select__toggle--PaddingTop=var(--pf-global--spacer--form-element, 0.375rem)]
- * @cssprop [--pf-c-select__toggle--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__toggle--PaddingBottom=var(--pf-global--spacer--form-element, 0.375rem)]
- * @cssprop [--pf-c-select__toggle--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__toggle--MinWidth=var(--pf-global--target-size--MinWidth, 44px)]
- * @cssprop [--pf-c-select__toggle--FontSize=var(--pf-global--FontSize--md, 1rem)]
- * @cssprop [--pf-c-select__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-select__toggle--LineHeight=var(--pf-global--LineHeight--md, 1.5)]
- * @cssprop [--pf-c-select__toggle--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
- * @cssprop [--pf-c-select__toggle--before--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-select__toggle--before--BorderRightWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-select__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-select__toggle--before--BorderLeftWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-select__toggle--before--BorderWidth=initial]
- * @cssprop [--pf-c-select__toggle--before--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)]
- * @cssprop [--pf-c-select__toggle--before--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)]
- * @cssprop [--pf-c-select__toggle--before--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)]
- * @cssprop [--pf-c-select__toggle--before--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)]
- * @cssprop [--pf-c-select__toggle--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__toggle--hover--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-select__toggle--focus--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-select__toggle--focus--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-select__toggle--active--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-select__toggle--active--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-select__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-select__toggle--m-expanded--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-select__toggle--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)]
- * @cssprop [--pf-c-select__toggle--m-plain--before--BorderColor=transparent]
- * @cssprop [--pf-c-select__toggle--m-placeholder--Color=transparent]
- * @cssprop [--pf-c-select--m-invalid__toggle--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-select--m-invalid__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-select--m-invalid__toggle-status-icon--Color=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-select--m-success__toggle--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-select--m-success__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-select--m-success__toggle--hover--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-select--m-success__toggle--focus--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-select--m-success__toggle--active--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-select--m-success__toggle-status-icon--Color=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-select--m-warning__toggle--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-select--m-warning__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-select--m-warning__toggle--active--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-select--m-warning__toggle-status-icon--Color=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-select__toggle-wrapper--not-last-child--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-select__toggle-wrapper--MaxWidth=calc(100% - var(--pf-global--spacer--lg, 1.5rem))]
- * @cssprop [--pf-c-select__toggle-wrapper--c-chip-group--MarginTop=0.3125rem]
- * @cssprop [--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom=0.3125rem]
- * @cssprop [--pf-c-select__toggle-typeahead--FlexBasis=10em]
- * @cssprop [--pf-c-select__toggle-typeahead--BackgroundColor=transparent]
- * @cssprop [--pf-c-select__toggle-typeahead--BorderTop=var(--pf-global--BorderWidth--sm, 1px) solid transparent]
- * @cssprop [--pf-c-select__toggle-typeahead--BorderRight=none]
- * @cssprop [--pf-c-select__toggle-typeahead--BorderLeft=none]
- * @cssprop [--pf-c-select__toggle-typeahead--MinWidth=7.5rem]
- * @cssprop [--pf-c-select__toggle-typeahead--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md))]
- * @cssprop [--pf-c-select__toggle--m-placeholder__toggle-text--Color=var(--pf-global--Color--dark-200, #6a6e73)]
- * @cssprop [--pf-c-select__toggle-icon--toggle-text--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-select__toggle-badge--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__toggle-status-icon--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-select__toggle-status-icon--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__toggle-arrow--MarginLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__toggle-arrow--MarginRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__toggle-arrow--with-clear--MarginLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate=180deg]
- * @cssprop [--pf-c-select--m-plain__toggle-arrow--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-select--m-plain--hover__toggle-arrow--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__toggle-clear--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__toggle-clear--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__toggle-clear--toggle-button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__toggle-button--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__menu--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #fff)]
- * @cssprop [--pf-c-select__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))]
- * @cssprop [--pf-c-select__menu--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu--Top=calc(100% + var(--pf-global--spacer--xs, 0.25rem))]
- * @cssprop [--pf-c-select__menu--ZIndex=var(--pf-global--ZIndex--sm, 200)]
- * @cssprop [--pf-c-select__menu--Width=auto]
- * @cssprop [--pf-c-select__menu--MinWidth=100%]
- * @cssprop [--pf-c-select__menu--m-top--TranslateY=calc(-100% - var(--pf-global--spacer--xs, 0.25rem))]
- * @cssprop [--pf-c-select__list-item--m-loading--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu-item--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu-item--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-item--m-selected--PaddingRight=var(--pf-global--spacer--2xl, 3rem)]
- * @cssprop [--pf-c-select__menu-item--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu-item--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-item--FontSize=var(--pf-global--FontSize--md, 1rem)]
- * @cssprop [--pf-c-select__menu-item--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-select__menu-item--LineHeight=var(--pf-global--LineHeight--md, 1.5)]
- * @cssprop [--pf-c-select__menu-item--Color=var(--pf-global--Color--dark-100, #151515)]
- * @cssprop [--pf-c-select__menu-item--disabled--Color=var(--pf-global--Color--dark-200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item--Width=100%]
- * @cssprop [--pf-c-select__menu-item--hover--BackgroundColor=var(--pf-global--BackgroundColor--light-300, #f0f0f0)]
- * @cssprop [--pf-c-select__menu-item--focus--BackgroundColor=var(--pf-global--BackgroundColor--light-300, #f0f0f0)]
- * @cssprop [--pf-c-select__menu-item--disabled--BackgroundColor=transparent]
- * @cssprop [--pf-c-select__menu-item--m-link--Width=auto]
- * @cssprop [--pf-c-select__menu-item--m-link--hover--BackgroundColor=transparent]
- * @cssprop [--pf-c-select__menu-item--m-link--focus--BackgroundColor=transparent]
- * @cssprop [--pf-c-select__menu-item--m-action--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item--m-action--hover--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__menu-item--m-action--focus--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__menu-item--m-action--disabled--Color=var(--pf-global--disabled-color--200, #d2d2d2)]
- * @cssprop [--pf-c-select__menu-item--m-action--Width=auto]
- * @cssprop [--pf-c-select__menu-item--m-action--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]
- * @cssprop [--pf-c-select__menu-item--m-action--hover--BackgroundColor=transparent]
- * @cssprop [--pf-c-select__menu-item--m-action--focus--BackgroundColor=transparent]
- * @cssprop [--pf-c-select__menu-item--hover__menu-item--m-action--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item--m-favorite-action--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item--m-favorite-action--hover--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__menu-item--m-favorite-action--focus--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color=var(--pf-global--palette--gold-400, #f0ab00)]
- * @cssprop [--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color=var(--pf-global--palette--gold-500, #c58c00)]
- * @cssprop [--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color=var(--pf-global--palette--gold-500, #c58c00)]
- * @cssprop [--pf-c-select__menu-item--m-load--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-select__menu-item-icon--Color=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-select__menu-item-icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]
- * @cssprop [--pf-c-select__menu-item-icon--Right=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-item-icon--Top=50%]
- * @cssprop [--pf-c-select__menu-item-icon--TranslateY=-50%]
- * @cssprop [--pf-c-select__menu-item-action-icon--MinHeight=calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight))]
- * @cssprop [--pf-c-select__menu-item--match--FontWeight=var(--pf-global--FontWeight--bold, 700)]
- * @cssprop [--pf-c-select__menu-search--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu-search--PaddingRight=var(--pf-c-select__menu-item--PaddingRight)]
- * @cssprop [--pf-c-select__menu-search--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-search--PaddingLeft=var(--pf-c-select__menu-item--PaddingLeft)]
- * @cssprop [--pf-c-select__menu-group--menu-group--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu-group-title--PaddingTop=var(--pf-c-select__menu-item--PaddingTop)]
- * @cssprop [--pf-c-select__menu-group-title--PaddingRight=var(--pf-c-select__menu-item--PaddingRight)]
- * @cssprop [--pf-c-select__menu-group-title--PaddingBottom=var(--pf-c-select__menu-item--PaddingBottom)]
- * @cssprop [--pf-c-select__menu-group-title--PaddingLeft=var(--pf-c-select__menu-item--PaddingLeft)]
- * @cssprop [--pf-c-select__menu-group-title--FontSize=var(--pf-global--FontSize--xs, 0.75rem)]
- * @cssprop [--pf-c-select__menu-group-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-select__menu-group-title--Color=var(--pf-global--Color--dark-200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item-count--MarginLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-item-count--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-select__menu-item-count--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item--disabled__menu-item-count--Color=var(--pf-global--Color--dark-200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item-description--FontSize=var(--pf-global--FontSize--xs, 0.75rem)]
- * @cssprop [--pf-c-select__menu-item-description--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-select__menu-item-description--PaddingRight=var(--pf-c-select__menu-item--PaddingRight)]
- * @cssprop [--pf-c-select__menu-item-main--PaddingRight=var(--pf-c-select__menu-item--PaddingRight)]
- * @cssprop [--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight=var(--pf-c-select__menu-item--m-selected--PaddingRight)]
- * @cssprop [--pf-c-select__menu-footer--BoxShadow=var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))]
- * @cssprop [--pf-c-select__menu-footer--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-footer--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-footer--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-footer--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-select__menu-footer--MarginTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select__menu-footer--MarginBottom=calc(var(--pf-global--spacer--sm, 0.5rem) * -1)]
- * @cssprop [--pf-c-select-menu--c-divider--MarginTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-select-menu--c-divider--MarginBottom=var(--pf-global--spacer--sm, 0.5rem)]
  */
 @customElement('pf-select')
 export class PfSelect extends LitElement {
@@ -395,8 +238,9 @@ export class PfSelect extends LitElement {
                        ?inert="${placeholderIsInert}"
                        aria-hidden="${ifDefined(placeholderIsInert ? undefined : String(!!hasSelection))}"
                        ?hidden="${!placeholder && this.#slots.isEmpty('placeholder')}"
-            ><slot name="placeholder">${placeholder ?? ''}</slot></pf-option>
+            ><!-- placeholder text for the select. Overrides the \`placeholder\` attribute. --><slot name="placeholder">${placeholder ?? ''}</slot></pf-option>
             ${this.#combobox.renderItemsToShadowRoot()}
+            <!-- insert \`pf-option\` and/or \`pf-option-groups\` here -->
             <slot ?hidden="${hideLightDomItems}"></slot>
           </div>
         </div>
diff --git a/elements/pf-spinner/demo/pf-spinner.html b/elements/pf-spinner/demo/index.html
similarity index 100%
rename from elements/pf-spinner/demo/pf-spinner.html
rename to elements/pf-spinner/demo/index.html
diff --git a/elements/pf-spinner/pf-spinner.css b/elements/pf-spinner/pf-spinner.css
index 94eb582847..c9d3990ef0 100644
--- a/elements/pf-spinner/pf-spinner.css
+++ b/elements/pf-spinner/pf-spinner.css
@@ -11,15 +11,20 @@
 
 svg {
   overflow: hidden;
+  /** Width for spinner */
   width: var(--pf-c-spinner--Width,
+    /** Diameter for spinner */
     var(--pf-c-spinner--diameter,
       var(--pf-global--icon--FontSize--xl, 3.375rem)));
+  /** Height for spinner */
   height: var(--pf-c-spinner--Height,
     var(--pf-c-spinner--diameter,
       var(--pf-global--icon--FontSize--xl, 3.375rem)));
   animation:
     pf-c-spinner-animation-rotate
+    /** Animation duration for spinner */
     calc(var(--pf-c-spinner--AnimationDuration, 1.4s) * 2)
+    /** Animation timing function for spinner */
     var(--pf-c-spinner--AnimationTimingFunction, linear) infinite;
 }
 
@@ -30,30 +35,37 @@ circle {
   stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
+  /** Color for spinner */
   stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));
+  /** Stroke width for spinner */
   stroke-width: var(--pf-c-spinner--stroke-width, 10);
   animation:
     pf-c-spinner-animation-dash
     var(--pf-c-spinner--AnimationDuration, 1.4s)
+    /** Path animation timing function for spinner */
     var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
 }
 
 :host([size="sm"]) svg {
+  /** Diameter for small spinner */
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter,
     var(--pf-global--icon--FontSize--sm, 0.625rem));
 }
 
 :host([size="md"]) svg {
+  /** Diameter for medium spinner */
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter,
     var(--pf-global--icon--FontSize--md, 1.125rem));
 }
 
 :host([size="lg"]) svg {
+  /** Diameter for large spinner */
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter,
     var(--pf-global--icon--FontSize--lg, 1.5rem));
 }
 
 :host([size="xl"]) svg {
+  /** Diameter for extra large spinner */
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,
     var(--pf-global--icon--FontSize--xl, 3.375rem));
 }
@@ -73,6 +85,7 @@ circle {
     transform: rotate(0);
   }
   15% {
+    /** Path stroke width for spinner */
     stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth, 10) - 4);
   }
   40% {
diff --git a/elements/pf-spinner/pf-spinner.ts b/elements/pf-spinner/pf-spinner.ts
index 146e5629bd..62f906825a 100644
--- a/elements/pf-spinner/pf-spinner.ts
+++ b/elements/pf-spinner/pf-spinner.ts
@@ -10,20 +10,7 @@ import styles from './pf-spinner.css';
 /**
  * A **spinner** is used to indicate to users that an action is in progress. For actions
  * that may take a long time, use a progress bar instead.
- * @cssprop {<length>} [--pf-c-spinner--diameter=3.375rem]
- * @cssprop {<length>} [--pf-c-spinner--Width=3.375rem]
- * @cssprop {<length>} [--pf-c-spinner--Height=3.375rem]
- * @cssprop {<color>}  [--pf-c-spinner--Color=#06c]
- * @cssprop {<length>} [--pf-c-spinner--m-sm--diameter=0.625rem]
- * @cssprop {<length>} [--pf-c-spinner--m-md--diameter=1.125rem]
- * @cssprop {<length>} [--pf-c-spinner--m-lg--diameter=1.5rem]
- * @cssprop {<length>} [--pf-c-spinner--m-xl--diameter=3.375rem]
- * @cssprop {<time>}   [--pf-c-spinner--AnimationDuration=1.4s]
- * @cssprop {<string>} [--pf-c-spinner--AnimationTimingFunction=linear]
- * @cssprop {<number>} [--pf-c-spinner--stroke-width=10]
- * @cssprop {<color>}  [--pf-c-spinner__path--Stroke=#06c]
- * @cssprop {<number>} [--pf-c-spinner__path--StrokeWidth=10]
- * @cssprop {<string>} [--pf-c-spinner__path--AnimationTimingFunction=ease-in-out]
+ * @alias Spinner
  */
 
 @customElement('pf-spinner')
diff --git a/elements/pf-switch/demo/pf-switch.html b/elements/pf-switch/demo/index.html
similarity index 100%
rename from elements/pf-switch/demo/pf-switch.html
rename to elements/pf-switch/demo/index.html
diff --git a/elements/pf-switch/pf-switch.css b/elements/pf-switch/pf-switch.css
index ead9880a74..de39871647 100644
--- a/elements/pf-switch/pf-switch.css
+++ b/elements/pf-switch/pf-switch.css
@@ -12,21 +12,26 @@ svg {
 }
 
 :host([checked]) #container {
+  /** Color of the label when switch is checked */
   color: var(--pf-c-switch__input--checked__label--Color,
     var(--pf-global--Color--dark-100, #151515));
+  /** Background color of the toggle when switch is checked */
   background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,
     var(--pf-global--primary-color--100, #06c));
 }
 
 :host([checked]) #container::before {
+  /** Translation of the toggle knob when checked */
   translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,
     calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
 }
 
 :host(:is(:focus,:focus-within)) #container {
+  /** Focus outline width */
   outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,
     var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,
       var(--pf-global--primary-color--100, #06c));
+  /** Focus outline offset */
   outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,
     var(--pf-global--spacer--sm, 0.5rem));
 }
@@ -39,13 +44,16 @@ svg {
 :host(:disabled) #container {
   cursor: not-allowed;
 
+  /** Color of the label when switch is disabled */
   color: var(--pf-c-switch__input--disabled__label--Color,
     var(--pf-global--disabled-color--100, #6a6e73));
+  /** Background color when switch is disabled */
   background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,
     var(--pf-global--disabled-color--200, #d2d2d2));
 }
 
 :host(:disabled) #container::before {
+  /** Background color of the toggle knob when disabled */
   background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,
     var(--pf-global--palette--black-150, #f5f5f5));
 }
@@ -63,6 +71,7 @@ svg {
   position: relative;
   display: inline-flex;
   align-items: center;
+  /** Width of the toggle */
   width: var(--pf-c-switch__toggle--Width,
     calc(var(--pf-c-switch__toggle--Height,
       calc(var(--pf-c-switch--FontSize,
@@ -74,8 +83,10 @@ svg {
     calc(var(--pf-c-switch--FontSize,
       var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
         var(--pf-global--LineHeight--md, 1.5))));
+  /** Background color of the toggle */
   background-color: var(--pf-c-switch__toggle--BackgroundColor,
     var(--pf-global--palette--black-500, #8a8d90));
+  /** Border radius of the toggle */
   border-radius: var(--pf-c-switch__toggle--BorderRadius,
     var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,
       var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
@@ -86,6 +97,7 @@ svg {
   position: absolute;
   display: block;
   content: "";
+  /** Top position of the toggle knob */
   top: var(--pf-c-switch__toggle--before--Top,
     calc((var(--pf-c-switch__toggle--Height,
       calc(var(--pf-c-switch--FontSize,
@@ -94,6 +106,7 @@ svg {
             var(--pf-c-switch__toggle--before--Width,
               calc(var(--pf-c-switch--FontSize,
                 var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));
+  /** Left position of the toggle knob */
   left: var(--pf-c-switch__toggle--before--Left,
     var(--pf-c-switch__toggle--before--Top,
       calc((var(--pf-c-switch__toggle--Height,
@@ -103,30 +116,39 @@ svg {
               var(--pf-c-switch__toggle--before--Width,
                 calc(var(--pf-c-switch--FontSize,
                   var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));
+  /** Width of the toggle knob */
   width: var(--pf-c-switch__toggle--before--Width,
     calc(var(--pf-c-switch--FontSize,
       var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
+  /** Height of the toggle knob */
   height: var(--pf-c-switch__toggle--before--Height,
     var(--pf-c-switch__toggle--before--Width,
       calc(var(--pf-c-switch--FontSize,
         var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))));
+  /** Background color of the toggle knob */
   background-color: var(--pf-c-switch__toggle--before--backgroundcolor,
     var(--pf-global--backgroundcolor--100, #fff));
+  /** Border radius of the toggle knob */
   border-radius: var(--pf-c-switch__toggle--before--BorderRadius,
     var(--pf-global--BorderRadius--lg, 30em));
+  /** Box shadow of the toggle knob */
   box-shadow: var(--pf-c-switch__toggle--before--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)));
+  /** Transition of the toggle knob */
   transition: var(--pf-c-switch__toggle--before--Transition,
     var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s));
 }
 
 svg {
+  /** Horizontal margin of the toggle icon */
   margin-inline: var(--pf-c-switch__toggle-icon--Left,
     calc(var(--pf-c-switch--FontSize,
       var(--pf-global--FontSize--md, 1rem)) * .4));
+  /** Font size of the toggle icon */
   font-size: var(--pf-c-switch__toggle-icon--FontSize,
     calc(var(--pf-c-switch--FontSize,
       var(--pf-global--FontSize--md, 1rem)) * .625));
+  /** Color of the toggle icon */
   color: var(--pf-c-switch__toggle-icon--Color,
     var(--pf-global--Color--light-100, #fff));
 }
diff --git a/elements/pf-switch/pf-switch.ts b/elements/pf-switch/pf-switch.ts
index 1717408d7e..6b87fe359d 100644
--- a/elements/pf-switch/pf-switch.ts
+++ b/elements/pf-switch/pf-switch.ts
@@ -10,37 +10,8 @@ import styles from './pf-switch.css';
  * A **switch** toggles the state of a setting (between on and off). Switches and
  * checkboxes can often be used interchangeably, but the switch provides a more
  * explicit, visible representation on a setting.
+ * @alias Switch
  * @fires {Event} change - Fires when the switch selection changes.
- * @cssprop [--pf-c-switch--FontSize=1rem]
- * @cssprop {<length>} [--pf-c-switch--ColumnGap=1rem]
- * @cssprop [--pf-c-switch__toggle-icon--FontSize=calc(1rem * .625)]
- * @cssprop {<color>} [--pf-c-switch__toggle-icon--Color=#fff]
- * @cssprop {<length>} [--pf-c-switch__toggle-icon--Left=1rem]
- * @cssprop {<length>} [--pf-c-switch__toggle-icon--Offset=0.125rem]
- * @cssprop {<number>} [--pf-c-switch--LineHeight=1.5]
- * @cssprop {<length>} [--pf-c-switch--Height=auto]
- * @cssprop {<color>} [--pf-c-switch__input--checked__toggle--BackgroundColor=#06c]
- * @cssprop {<length>} [--pf-c-switch__input--checked__toggle--before--TranslateX=calc(100 + 0.125rem)]
- * @cssprop {<color>} [--pf-c-switch__input--checked__label--Color=#151515]
- * @cssprop {<color>} [--pf-c-switch__input--not-checked__label--Color=#6a6e73]
- * @cssprop {<color>} [--pf-c-switch__input--disabled__label--Color=#6a6e73]
- * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--BackgroundColor=#d2d2d2]
- * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--before--BackgroundColor=#f5f5f5]
- * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineWidth=2px]
- * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineOffset=0.5rem]
- * @cssprop {<color>} [--pf-c-switch__input--focus__toggle--OutlineColor=#06c]
- * @cssprop {<length>} [--pf-c-switch__toggle--Height=calc(1rem * 1.5)]
- * @cssprop {<color>} [--pf-c-switch__toggle--BackgroundColor=#8a8d90]
- * @cssprop {<length>} [--pf-c-switch__toggle--BorderRadius=calc(1rem * 1.5)]
- * @cssprop {<length>} [--pf-c-switch__toggle--before--Width=calc(1rem - 0.125rem)]
- * @cssprop {<length>} [--pf-c-switch__toggle--before--Height=calc(1rem - 0.125rem)]
- * @cssprop {<length>} [--pf-c-switch__toggle--before--Top=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`]
- * @cssprop {<length>} [--pf-c-switch__toggle--before--Left=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)]
- * @cssprop {<color>} [--pf-c-switch__toggle--before--BackgroundColor=#fff]
- * @cssprop {<length>} [--pf-c-switch__toggle--before--BorderRadius=30em]
- * @cssprop [--pf-c-switch__toggle--before--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)]
- * @cssprop [--pf-c-switch__toggle--before--Transition=transform .25s ease 0s]
- * @cssprop {<length>} [--pf-c-switch__toggle--Width=calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))]
  */
 
 @customElement('pf-switch')
diff --git a/elements/pf-table/demo/pf-table.html b/elements/pf-table/demo/index.html
similarity index 100%
rename from elements/pf-table/demo/pf-table.html
rename to elements/pf-table/demo/index.html
diff --git a/elements/pf-table/docs/pf-table.md b/elements/pf-table/docs/pf-table.md
index 89a907882a..9abe34a129 100644
--- a/elements/pf-table/docs/pf-table.md
+++ b/elements/pf-table/docs/pf-table.md
@@ -19,7 +19,7 @@
 
   Simple table using composable components
 
-  {% htmlexample src="../demo/pf-table.html" %}{% endhtmlexample %}
+  {% htmlexample src="../demo/index.html" %}{% endhtmlexample %}
 
   ### Sortable
 
diff --git a/elements/pf-table/pf-table.css b/elements/pf-table/pf-table.css
index db48ef6ce8..53b1f661ae 100644
--- a/elements/pf-table/pf-table.css
+++ b/elements/pf-table/pf-table.css
@@ -1,206 +1,409 @@
 :host {
+	/** Table background color */
 	--pf-c-table--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Table border color */
 	--pf-c-table--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** Table border base width */
 	--pf-c-table--border-width--base: var(--pf-global--BorderWidth--sm, 1px);
+	/** Table caption font size */
 	--pf-c-table-caption--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** Table caption color */
 	--pf-c-table-caption--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Table caption top padding */
 	--pf-c-table-caption--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** Table caption right padding */
 	--pf-c-table-caption--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+	/** Table caption bottom padding */
 	--pf-c-table-caption--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** Table caption left padding */
 	--pf-c-table-caption--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** Table XL caption right padding */
 	--pf-c-table-caption--xl--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** Table XL caption left padding */
 	--pf-c-table-caption--xl--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** Table head cell font size */
 	--pf-c-table--thead--cell--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** Table head cell font weight */
 	--pf-c-table--thead--cell--FontWeight: var(--pf-global--FontWeight--bold, 700);
+	/** Table body cell padding top */
 	--pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+	/** Table body cell padding bottom */
 	--pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg);
+	/** Table row top base box shadow */
 	--pf-c-table--tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
+	/** Table cell base padding */
 	--pf-c-table--cell--Padding--base: var(--pf-global--spacer--md, 1rem);
+	/** Table cell font size */
 	--pf-c-table--cell--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** Table cell font weight */
 	--pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Table cell color */
 	--pf-c-table--cell--Color: var(--pf-global--Color--100, #151515);
+	/** Table cell top padding */
 	--pf-c-table--cell--PaddingTop: var(--pf-c-table--cell--Padding--base);
+	/** Table cell right padding */
 	--pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--Padding--base);
+	/** Table cell bottom padding */
 	--pf-c-table--cell--PaddingBottom: var(--pf-c-table--cell--Padding--base);
+	/** Table cell left padding */
 	--pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
+	/** Table cell last child left padding */
 	--pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** Table cell last child right padding */
 	--pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** Table XL cell last child left padding */
 	--pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** Table XL cell last child right padding */
 	--pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+	/** Table row first cell offset reset cell left padding */
 	--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
+	/** Table cell min width */
 	--pf-c-table--cell--MinWidth: 0;
+	/** Table cell max width */
 	--pf-c-table--cell--MaxWidth: none;
+	/** Table cell width */
 	--pf-c-table--cell--Width: auto;
+	/** Table cell overflow */
 	--pf-c-table--cell--Overflow: visible;
+	/** Table cell text overflow */
 	--pf-c-table--cell--TextOverflow: clip;
+	/** Table cell white space */
 	--pf-c-table--cell--WhiteSpace: normal;
+	/** Table cell word break */
 	--pf-c-table--cell--WordBreak: normal;
+	/** Table cell before right border width */
 	--pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Table cell before right border color */
 	--pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** Table cell before left border width */
 	--pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Table cell before left border color */
 	--pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** Help cell minimum width */
 	--pf-c-table--cell--m-help--MinWidth: 11ch;
+	/** Help cell maximum width */
 	--pf-c-table--m-truncate--cell--MaxWidth: 1px;
+	/** Truncated cell minimum width */
 	--pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft));
+	/** Cell visible display */
 	--pf-c-table--cell--hidden-visible--Display: table-cell;
+	/** Toggle button top margin */
 	--pf-c-table__toggle--c-button--MarginTop: calc(0.375rem * -1);
+	/** Toggle button bottom margin */
 	--pf-c-table__toggle--c-button--MarginBottom: calc(0.375rem * -1);
+	/** Toggle button icon rotation */
 	--pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
+	/** Toggle button icon transition */
 	--pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
+	/** Expanded toggle button icon rotation */
 	--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
+	/** Button background color */
 	--pf-c-table__button--BackgroundColor: transparent;
+	/** Button color */
 	--pf-c-table__button--Color: var(--pf-global--Color--100, #151515);
+	/** Button hover color */
 	--pf-c-table__button--hover--Color: var(--pf-global--Color--100, #151515);
+	/** Button focus color */
 	--pf-c-table__button--focus--Color: var(--pf-global--Color--100, #151515);
+	/** Button active color */
 	--pf-c-table__button--active--Color: var(--pf-global--Color--100, #151515);
+	/** Button outline offset */
 	--pf-c-table__button--OutlineOffset: calc(var(--pf-global--BorderWidth--lg, 3px) * -1);
+	/** Compact toggle top padding */
 	--pf-c-table--m-compact__toggle--PaddingTop: 0;
+	/** Compact toggle bottom padding */
 	--pf-c-table--m-compact__toggle--PaddingBottom: 0;
+	/** Check input top margin */
 	--pf-c-table__check--input--MarginTop: 0.25rem;
+	/** Check input font size */
 	--pf-c-table__check--input--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** Favorite cell color */
 	--pf-c-table--cell--m-favorite--Color: var(--pf-global--Color--light-300, #d2d2d2);
+	/** Favorite button color */
 	--pf-c-table__favorite--c-button--Color: var(--pf-global--Color--light-300, #d2d2d2);
+	/** Favorite button font size */
 	--pf-c-table__favorite--c-button--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** Favorite button top margin */
 	--pf-c-table__favorite--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	/** Favorite button right margin */
 	--pf-c-table__favorite--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1);
+	/** Favorite button bottom margin */
 	--pf-c-table__favorite--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	/** Favorite button left margin */
 	--pf-c-table__favorite--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);
+	/** Favorited button color */
 	--pf-c-table__favorite--m-favorited--c-button--Color: var(--pf-global--palette--gold-400, #f0ab00);
+	/** Favorite sort button text color */
 	--pf-c-table__sort--m-favorite__button__text--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Favorite sort button hover text color */
 	--pf-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-global--Color--100, #151515);
+	/** Favorite sort button focus text color */
 	--pf-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-global--Color--100, #151515);
+	/** Favorite sort button active text color */
 	--pf-c-table__sort--m-favorite__button--active__text--Color: var(--pf-global--Color--100, #151515);
+	/** Draggable button top margin */
 	--pf-c-table__draggable--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	/** Draggable button right margin */
 	--pf-c-table__draggable--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1);
+	/** Draggable button bottom margin */
 	--pf-c-table__draggable--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	/** Draggable button left margin */
 	--pf-c-table__draggable--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);
+	/** Ghost row opacity */
 	--pf-c-table__tr--m-ghost-row--Opacity: .4;
+	/** Ghost row background color */
 	--pf-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Action top padding */
 	--pf-c-table__action--PaddingTop: 0;
+	/** Action right padding */
 	--pf-c-table__action--PaddingRight: 0;
+	/** Action bottom padding */
 	--pf-c-table__action--PaddingBottom: 0;
+	/** Action left padding */
 	--pf-c-table__action--PaddingLeft: 0;
+	/** Inline edit action top padding */
 	--pf-c-table__inline-edit-action--PaddingTop: 0;
+	/** Inline edit action right padding */
 	--pf-c-table__inline-edit-action--PaddingRight: 0;
+	/** Inline edit action bottom padding */
 	--pf-c-table__inline-edit-action--PaddingBottom: 0;
+	/** Inline edit action left padding */
 	--pf-c-table__inline-edit-action--PaddingLeft: 0;
+	/** Expandable row transition */
 	--pf-c-table__expandable-row--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+	/** Expandable row max height */
 	--pf-c-table__expandable-row--MaxHeight: 28.125rem;
+	/** Expandable row content transition */
 	--pf-c-table__expandable-row-content--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+	/** Expandable row content top padding */
 	--pf-c-table__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+	/** Expandable row content bottom padding */
 	--pf-c-table__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	/** Expandable row after top */
 	--pf-c-table__expandable-row--after--Top: calc(var(--pf-c-table--border-width--base) * -1);
+	/** Expandable row after bottom */
 	--pf-c-table__expandable-row--after--Bottom: calc(var(--pf-c-table--border-width--base) * -1);
+	/** Expandable row after base border width */
 	--pf-c-table__expandable-row--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px);
+	/** Expandable row after left border width */
 	--pf-c-table__expandable-row--after--BorderLeftWidth: 0;
+	/** Expandable row after border color */
 	--pf-c-table__expandable-row--after--BorderColor: var(--pf-global--active-color--100, #06c);
+	/** Inline icon right margin */
 	--pf-c-table__icon-inline--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** Sort button minimum width */
 	--pf-c-table__sort--MinWidth: calc(6ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft) + var(--pf-c-table__sort-indicator--MarginLeft));
+	/** Sort button top padding */
 	--pf-c-table__sort__button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	/** Sort button right padding */
 	--pf-c-table__sort__button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** Sort button bottom padding */
 	--pf-c-table__sort__button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	/** Sort button left padding */
 	--pf-c-table__sort__button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	/** Sort button top margin */
 	--pf-c-table__sort__button--MarginTop: calc(var(--pf-c-table__sort__button--PaddingTop) * -1);
+	/** Sort button bottom margin */
 	--pf-c-table__sort__button--MarginBottom: calc(var(--pf-c-table__sort__button--PaddingBottom) * -1);
+	/** Sort button left margin */
 	--pf-c-table__sort__button--MarginLeft: calc(var(--pf-c-table__sort__button--PaddingLeft) * -1);
+	/** Sort button color */
 	--pf-c-table__sort__button--Color: var(--pf-global--Color--100, #151515);
+	/** Selected sort button color */
 	--pf-c-table__sort--m-selected__button--Color: var(--pf-global--active-color--100, #06c);
+	/** Help button minimum width */
 	--pf-c-table__sort--m-help--MinWidth: 15ch;
+	/** Sort button text color */
 	--pf-c-table__sort__button__text--Color: currentcolor;
+	/** Sort button hover text color */
 	--pf-c-table__sort__button--hover__text--Color: currentcolor;
+	/** Sort button focus text color */
 	--pf-c-table__sort__button--focus__text--Color: currentcolor;
+	/** Sort button active text color */
 	--pf-c-table__sort__button--active__text--Color: currentcolor;
+	/** Sort indicator color */
 	--pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+	/** Sort indicator left margin */
 	--pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	/** Selected sort indicator color */
 	--pf-c-table__sort--m-selected__sort-indicator--Color: var(--pf-global--active-color--100, #06c);
+	/** Sort button hover sort indicator color */
 	--pf-c-table__sort__button--hover__sort-indicator--Color: var(--pf-global--Color--100, #151515);
+	/** Sort button active sort indicator color */
 	--pf-c-table__sort__button--active__sort-indicator--Color: var(--pf-global--Color--100, #151515);
+	/** Sort button focus sort indicator color */
 	--pf-c-table__sort__button--focus__sort-indicator--Color: var(--pf-global--Color--100, #151515);
+	/** Header cell help minimum width */
 	--pf-c-table--th--m-help--MinWidth: 11ch;
+	/** Help column left margin */
 	--pf-c-table__column-help--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	/** Help column translate y axis */
 	--pf-c-table__column-help--TranslateY: 0.125rem;
+	/** Help column button top margin */
 	--pf-c-table__column-help--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	/** Help column button bottom margin */
 	--pf-c-table__column-help--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	/** Help column button right padding */
 	--pf-c-table__column-help--c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** Help column button left margin */
 	--pf-c-table__column-help--c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	/** Compound expansion toggle button color */
 	--pf-c-table__compound-expansion-toggle__button--Color: var(--pf-global--active-color--100, #06c);
+	/** Compound expansion hover toggle button color */
 	--pf-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-global--link--Color--hover, #004080);
+	/** Compound expansion focus toggle button color */
 	--pf-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-global--link--Color--hover, #004080);
+	/** Compound expansion active toggle button color */
 	--pf-c-table__compound-expansion-toggle__button--active--Color: var(--pf-global--link--Color--hover, #004080);
+	/** Compound expansion toggle button before border width */
 	--pf-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-global--BorderWidth--sm, 1px);
+	/** Compound expansion toggle button before border color */
 	--pf-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** Compound expansion toggle button before right border width */
 	--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
+	/** Compound expansion toggle button before left border width */
 	--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
+	/** Compound expansion toggle button before bottom */
 	--pf-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+	/** Compound expansion toggle button before left */
 	--pf-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+	/** Compound expansion toggle button after base border width */
 	--pf-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px);
+	/** Compound expansion toggle button after border color */
 	--pf-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	/** Compound expansion toggle button after top border width */
 	--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
+	/** Compound expansion toggle button after top */
 	--pf-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+	/** Compound expansion toggle button after left */
 	--pf-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+	/** Compact header cell top padding */
 	--pf-c-table--m-compact-th--PaddingTop: calc(var(--pf-global--spacer--sm, 0.5rem) + var(--pf-global--spacer--xs));
+	/** Compact header cell bottom padding */
 	--pf-c-table--m-compact-th--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** Compact cell top padding */
 	--pf-c-table--m-compact--cell--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** Compact cell right padding */
 	--pf-c-table--m-compact--cell--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** Compact cell bottom padding */
 	--pf-c-table--m-compact--cell--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** Compact cell left padding */
 	--pf-c-table--m-compact--cell--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	/** Compact cell first child left padding */
 	--pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** Compact cell first child right padding */
 	--pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** Compact cell first child XL left padding */
 	--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** Compact cell first child XL right padding */
 	--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+	/** Compact font size */
 	--pf-c-table--m-compact--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** Compact expandable row content top padding */
 	--pf-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+	/** Compact expandable row content right padding */
 	--pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+	/** Compact expandable row content bottom padding */
 	--pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	/** Compact expandable row content left padding */
 	--pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** Nested first child right padding */
 	--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+	/** Nested first child left padding */
 	--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
+	/** Expandable row expanded bottom border color */
 	--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** Hoverable table row top box shadow */
 	--pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+	/** Hoverable table row background color */
 	--pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
+	/** Hoverable table row box shadow */
 	--pf-c-table--tr--m-hoverable--BoxShadow: none;
+	/** Hoverable table row outline offset */
 	--pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+	/** Hoverable table row hover box shadow */
 	--pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Hoverable table row hover background color */
 	--pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Hoverable table row focus box shadow */
 	--pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Hoverable table row focus background color */
 	--pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Hoverable table row active box shadow */
 	--pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Hoverable table row active background color */
 	--pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Hoverable table row selected box shadow */
 	--pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table row top box shadow */
 	--pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+	/** Selected table row background color */
 	--pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Selected table row box shadow */
 	--pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table row outline offset */
 	--pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+	/** Selected table row after left border width */
 	--pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
+	/** Selected table row after left border color */
 	--pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c);
+	/** Selected table row box shadow */
 	--pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table row hover box shadow */
 	--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table row hover box shadow */
 	--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Hoverable table body top box shadow */
 	--pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+	/** Hoverable table body box shadow */
 	--pf-c-table--tbody--m-hoverable--BoxShadow: none;
+	/** Hoverable table body background color */
 	--pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
+	/** Hoverable table body outline offset */
 	--pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+	/** Hoverable table body hover box shadow */
 	--pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Hoverable table body hover background color */
 	--pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Hoverable table body focus box shadow */
 	--pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Hoverable table body focus background color */
 	--pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Hoverable table body active box shadow */
 	--pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Hoverable table body active background color */
 	--pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Hoverable table body expanded border color */
 	--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400, #73bcf7);
+	/** Hoverable table body selected table row box shadow */
 	--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table body background color */
 	--pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Selected table body top box shadow */
 	--pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+	/** Selected table body box shadow */
 	--pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table body outline offset */
 	--pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+	/** Selected table body after left border width */
 	--pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
+	/** Selected table body after left border color */
 	--pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c);
+	/** Selected table body selected box shadow */
 	--pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table body hover selected box shadow */
 	--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Selected table body hover box shadow */
 	--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	/** Table head nested column header button outline offset */
 	--pf-c-table--thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
+	/** Table head nested column header row top padding */
 	--pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+	/** Table head nested column header row bottom padding */
 	--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+	/** Subhead color */
 	--pf-c-table__subhead--Color: var(--pf-global--Color--200, #6a6e73);
+	/** Striped row background color */
 	--pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
 	color: var(--pf-global--Color--100);
   display: inline-grid;
@@ -209,13 +412,21 @@
 
 @media (max-width: 768px) {
   :host {
+    /** Cell top padding */
     --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop, 0);
+    /** Cell right padding */
     --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight, 0);
+    /** Cell bottom padding */
     --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom, 0);
+    /** Cell left padding */
     --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft, 0);
+    /** Favorite button top margin */
     --pf-c-table__favorite--c-button--MarginTop: auto;
+    /** Favorite button right margin */
     --pf-c-table__favorite--c-button--MarginRight: auto;
+    /** Favorite button bottom margin */
     --pf-c-table__favorite--c-button--MarginBottom: auto;
+    /** Favorite button left margin */
     --pf-c-table__favorite--c-button--MarginLeft: auto;
     display: grid;
     border: none;
diff --git a/elements/pf-table/pf-table.ts b/elements/pf-table/pf-table.ts
index 94034a1ee1..e8ca4591e6 100644
--- a/elements/pf-table/pf-table.ts
+++ b/elements/pf-table/pf-table.ts
@@ -28,641 +28,7 @@ const rowQuery = [
 
 /**
  * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.
- * @slot
- *       The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements.
- * @cssprop {<color>} [--pf-c-table--BackgroundColor=#fff]
- *          Table background color
- *
- * @cssprop {<color>} [--pf-c-table--BorderColor=#d2d2d2]
- *          Table border color
- *
- * @cssprop {<dimension>} [--pf-c-table--border-width--base=1px]
- *          Table border base width
- *
- * @cssprop {<dimension>} [--pf-c-table-caption--FontSize=0.875rem]
- *          Table caption font size
- *
- * @cssprop {<color>} [--pf-c-table-caption--Color=#6a6e73]
- *          Table caption color
- *
- * @cssprop {<dimension>} [--pf-c-table-caption--PaddingTop=1rem]
- *          Table caption top padding
- *
- * @cssprop {<dimension>} [--pf-c-table-caption--PaddingRight=1.5rem]
- *          Table caption right padding
- *
- * @cssprop {<dimension>} [--pf-c-table-caption--PaddingBottom=1rem]
- *          Table caption bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table-caption--PaddingLeft=1.5rem]
- *          Table caption left padding
- *
- * @cssprop {<length>} [--pf-c-table-caption--xl--PaddingRight=1rem]
- *          Table XL caption right padding
- *
- * @cssprop {<dimension>} [--pf-c-table-caption--xl--PaddingLeft=1rem]
- *          Table XL caption left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--thead--cell--FontSize=0.875rem]
- *          Table head cell font size
- *
- * @cssprop {<number>} [--pf-c-table--thead--cell--FontWeight=700]
- *          Table head cell font weight
- *
- * @cssprop {<dimension>} [--pf-c-table--tbody--cell--PaddingTop=1.5rem]
- *          Table body cell padding top
- *
- * @cssprop {<dimension>} [--pf-c-table--tbody--cell--PaddingBottom=1.5rem]
- *          Table body cell padding bottom
- *
- * @cssprop {<color>} [--pf-c-table--tr--BoxShadow--top--base=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Table row top base box shadow
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--Padding--base=1rem]
- *          Table cell base padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--FontSize=1rem]
- *          Table cell font size
- *
- * @cssprop {<number>} [--pf-c-table--cell--FontWeight=400]
- *          Table cell font weight
- *
- * @cssprop {<color>} [--pf-c-table--cell--Color=#151515]
- *          Table cell color
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingTop=1rem]
- *          Table cell top padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingRight=1rem]
- *          Table cell right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingBottom=1rem]
- *          Table cell bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingLeft=1rem]
- *          Table cell left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--PaddingLeft=1rem]
- *          Table cell last child left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--PaddingRight=1rem]
- *          Table cell last child right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--xl--PaddingLeft=1.5rem]
- *          Table XL cell last child left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--xl--PaddingRight=1.5rem]
- *          Table XL cell last child right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft=1rem]
- *          Table row first cell offset reset cell left padding
- *
- * @cssprop {<length>} [--pf-c-table--cell--MinWidth=0]
- *          Table cell min width
- *
- * @cssprop {<length>} [--pf-c-table--cell--MaxWidth=none]
- *          Table cell max width
- *
- * @cssprop {<length>} [--pf-c-table--cell--Width=auto]
- *          Table cell width
- *
- * @cssprop {<overflow>} [--pf-c-table--cell--Overflow=visible]
- *          Table cell overflow
- *
- * @cssprop {<>} [--pf-c-table--cell--TextOverflow=clip]
- *          Table cell text overflow
- *
- * @cssprop {<>} [--pf-c-table--cell--WhiteSpace=normal]
- *          Table cell white space
- *
- * @cssprop {<>} [--pf-c-table--cell--WordBreak=normal]
- *          Table cell word break
- *
- * @cssprop {<length>} [--pf-c-table--cell--m-border-right--before--BorderRightWidth=1px]
- *          Table cell before right border width
- *
- * @cssprop {<color>} [--pf-c-table--cell--m-border-right--before--BorderRightColor=#d2d2d2]
- *          Table cell before right border color
- *
- * @cssprop {<length>} [--pf-c-table--cell--m-border-left--before--BorderLeftWidth=1px]
- *          Table cell before left border width
- *
- * @cssprop {<color>} [--pf-c-table--cell--m-border-left--before--BorderLeftColor=#d2d2d2]
- *          Table cell before left border color
- *
- * @cssprop {<length>} [--pf-c-table--cell--m-help--MinWidth=11ch]
- *          Help cell minimum width
- *
- * @cssprop {<length>} [--pf-c-table--m-truncate--cell--MaxWidth=1px]
- *          Help cell maximum width
- *
- * @cssprop {<calc-sum>} [--pf-c-table--m-truncate--cell--MinWidth=calc(5ch + 1rem + 1rem)]
- *          Truncated cell minimum width
- *
- * @cssprop {<>} [--pf-c-table--cell--hidden-visible--Display=grid]
- *          Cell visible display
- *
- * @cssprop {<calc-product>} [--pf-c-table__toggle--c-button--MarginTop=calc(0.375rem * -1)]
- *          Toggle button top margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__toggle--c-button--MarginBottom=calc(0.375rem * -1)]
- *          Toggle button bottom margin
- *
- * @cssprop {<>} [--pf-c-table__toggle--c-button__toggle-icon--Rotate=270deg]
- *          Toggle button icon rotation
- *
- * @cssprop {<>} [--pf-c-table__toggle--c-button__toggle-icon--Transition=.2s ease-in 0s]
- *          Toggle button icon transition
- *
- * @cssprop {<>} [--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate=360deg]
- *          Expanded toggle button icon rotation
- *
- * @cssprop {<color>} [--pf-c-table__button--BackgroundColor=transparent]
- *          Button background color
- *
- * @cssprop {<color>} [--pf-c-table__button--Color=#151515]
- *          Button color
- *
- * @cssprop {<color>} [--pf-c-table__button--hover--Color=#151515]
- *          Button hover color
- *
- * @cssprop {<color>} [--pf-c-table__button--focus--Color=#151515]
- *          Button focus color
- *
- * @cssprop {<color>} [--pf-c-table__button--active--Color=#151515]
- *          Button active color
- *
- * @cssprop {<calc-sum>} [--pf-c-table__button--OutlineOffset=calc(3px * -1)]
- *          Button outline offset
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact__toggle--PaddingTop=0]
- *          Compact toggle top padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact__toggle--PaddingBottom=0]
- *          Compacy toggle bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table__check--input--MarginTop=0.25rem]
- *          Check input top margin
- *
- * @cssprop {<dimension>} [--pf-c-table__check--input--FontSize=1rem]
- *          Check input font size
- *
- * @cssprop {<color>} [--pf-c-table--cell--m-favorite--Color=#d2d2d2]
- *          Favorite cell color
- *
- * @cssprop {<color>} [--pf-c-table__favorite--c-button--Color=#d2d2d2]
- *          Favorite button color
- *
- * @cssprop {<dimension>} [--pf-c-table__favorite--c-button--FontSize=0.875rem]
- *          Favorite button font size
- *
- * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginTop=calc(0.375rem * -1)]
- *          Favorite button top margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginRight=calc(1rem * -1)]
- *          Favorite button right margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginBottom=calc(0.375rem * -1)]
- *          Favorite button bottom margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginLeft=calc(1rem * -1)]
- *          Favorite button left margin
- *
- * @cssprop {<color>} [--pf-c-table__favorite--m-favorited--c-button--Color=#f0ab00]
- *          Favorited button color
- *
- * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button__text--Color=#6a6e73]
- *          Favorite sort button text color
- *
- * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--hover__text--Color=#151515]
- *          Favorite sort button hover text color
- *
- * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--focus__text--Color=#151515]
- *          Favorite sort button focus text color
- *
- * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--active__text--Color=#151515]
- *          Favorite sort button active text color
- *
- * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginTop=calc(0.375rem * -1)]
- *          Draggable button top margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginRight=calc(1rem * -1)]
- *          Draggable button right margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginBottom=calc(0.375rem * -1)]
- *          Draggable button bottom margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginLeft=calc(1rem * -1)]
- *          Draggable button left margin
- *
- * @cssprop {<dimension>} [--pf-c-table__tr--m-ghost-row--Opacity=.4]
- *          Ghost row opacity
- *
- * @cssprop {<color>} [--pf-c-table__tr--m-ghost-row--BackgroundColor=#fff]
- *          Ghost row background color
- *
- * @cssprop {<dimension>} [--pf-c-table__action--PaddingTop=0]
- *          Action top padding
- *
- * @cssprop {<dimension>} [--pf-c-table__action--PaddingRight=0]
- *          Action right padding
- *
- * @cssprop {<dimension>} [--pf-c-table__action--PaddingBottom=0]
- *          Action bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table__action--PaddingLeft=0]
- *          Action left padding
- *
- * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingTop=0]
- *          Inline edit action top padding
- *
- * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingRight=0]
- *          Inline edit action right padding
- *
- * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingBottom=0]
- *          Inline edit action bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingLeft=0]
- *          Inline edit action left padding
- *
- * @cssprop {<>} [--pf-c-table__expandable-row--Transition=all 250ms cubic-bezier(.42, 0, .58, 1)]
- *          Expandable row transition
- *
- * @cssprop {<length>} [--pf-c-table__expandable-row--MaxHeight=28.125rem]
- *          Expandable row max height
- *
- * @cssprop {<>} [--pf-c-table__expandable-row-content--Transition=all 250ms cubic-bezier(.42, 0, .58, 1)]
- *          Expandable row content transition
- *
- * @cssprop {<dimension>} [--pf-c-table__expandable-row-content--PaddingTop=1.5rem]
- *          Expandable row content top padding
- *
- * @cssprop {<dimension>} [--pf-c-table__expandable-row-content--PaddingBottom=1.5rem]
- *          Expandable row content bottom padding
- *
- * @cssprop {<calc-product>} [--pf-c-table__expandable-row--after--Top=calc(1px * -1)]
- *          Expandable row after top
- *
- * @cssprop {<calc-product>} [--pf-c-table__expandable-row--after--Bottom=calc(1px * -1)]
- *          Expandable row after bottom
- *
- * @cssprop {<length>} [--pf-c-table__expandable-row--after--border-width--base=3px]
- *          Expandable row after base border width
- *
- * @cssprop {<length>} [--pf-c-table__expandable-row--after--BorderLeftWidth=0]
- *          Expandable row after left border width
- *
- * @cssprop {<color>} [--pf-c-table__expandable-row--after--BorderColor=#06c]
- *          Expandable row after border color
- *
- * @cssprop {<dimension>} [--pf-c-table__icon-inline--MarginRight=0.5rem]
- *          Inline icon right margin
- *
- * @cssprop {<calc-sum>} [--pf-c-table__sort--MinWidth=calc(6ch + 1rem + 1rem + 1rem)]
- *          Sort button minimum width
- *
- * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingTop=0.375rem]
- *          Sort button top padding
- *
- * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingRight=0.5rem]
- *          Sort button right padding
- *
- * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingBottom=0.375rem]
- *          Sort button bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingLeft=0.5rem]
- *          Sort button left padding
- *
- * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginTop=calc(0.375rem * -1)]
- *          Sort button top margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginBottom=calc(0.375rem * -1)]
- *          Sort button bottom margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginLeft=calc(0.5rem * -1)]
- *          Sort button left margin
- *
- * @cssprop {<color>} [--pf-c-table__sort__button--Color=#151515]
- *          Sort button color
- *
- * @cssprop {<color>} [--pf-c-table__sort--m-selected__button--Color=#06c]
- *          Selected sort button color
- *
- * @cssprop {<length>} [--pf-c-table__sort--m-help--MinWidth=15ch]
- *          Help button minimum width
- *
- * @cssprop {<color>} [--pf-c-table__sort__button__text--Color=currentcolor]
- *          Sort button text color
- *
- * @cssprop {<color>} [--pf-c-table__sort__button--hover__text--Color=currencolor]
- *          Sort button hover text color
- *
- * @cssprop {<color>} [--pf-c-table__sort__button--focus__text--Color=currentcolor]
- *          Sort button focus text color
- *
- * @cssprop {<color>} [--pf-c-table__sort__button--active__text--Color=currentcolor]
- *          Sort button active text color
- *
- * @cssprop {<color>} [--pf-c-table__sort-indicator--Color=#d2d2d2]
- *          Sort inidcator color
- *
- * @cssprop {<calc-sum>} [--pf-c-table__sort-indicator--MarginLeft=calc(6ch + 1rem + 1rem + 1rem)]
- *          Sort inidcator left margin
- *
- * @cssprop {<color>} [--pf-c-table__sort--m-selected__sort-indicator--Color=#06c]
- *          Selected sort inidcator color
- *
- * @cssprop {<color>} [--pf-c-table__sort__button--hover__sort-indicator--Color=#151515]
- *          Sort button hover sort indicator color
- *
- * @cssprop {<color>} [--pf-c-table__sort__button--active__sort-indicator--Color=#151515]
- *          Sort button hover active sort indicator color
- *
- * @cssprop {<color>} [--pf-c-table__sort__button--focus__sort-indicator--Color=#151515]
- *          Sort button hover focus sort indicator color
- *
- * @cssprop {<length>} [--pf-c-table--th--m-help--MinWidth=11ch]
- *          Header cell help minimum width
- *
- * @cssprop {<dimension>} [--pf-c-table__column-help--MarginLeft=0.25rem]
- *          Help column left magin
- *
- * @cssprop {<dimension>} [--pf-c-table__column-help--TranslateY=0.125rem]
- *          Help column translate y axis
- *
- * @cssprop {<calc-product>} [--pf-c-table__column-help--c-button--MarginTop=calc(0.375rem * -1)]
- *          Help column button top margin
- *
- * @cssprop {<calc-product>} [--pf-c-table__column-help--c-button--MarginBottom=calc(0.375rem * -1)]
- *          Help column button bottom margin
- *
- * @cssprop {<dimension>} [--pf-c-table__column-help--c-button--PaddingRight=0.5rem]
- *          Help column button right padding
- *
- * @cssprop {<dimension>} [--pf-c-table__column-help--c-button--PaddingLeft=0.5rem]
- *          Help column button left margin
- *
- * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--Color=#06c]
- *          Compound expansion toggle button color
- *
- * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--hover--Color=#004080]
- *          Compound expansion hover toggle button color
- *
- * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--focus--Color=#004080]
- *          Compound expansion focus toggle button color
- *
- * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--active--Color=#004080]
- *          Compound expansion active toggle button color
- *
- * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--border-width--base=1px]
- *          Compound expansion toggle button before border width
- *
- * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--before--BorderColor=#d2d2d2]
- *          Compound expansion toggle button before border color
- *
- * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth=0]
- *          Compound expansion toggle button before right border width
- *
- * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth=0]
- *          Compound expansion toggle button before left border width
- *
- * @cssprop {<calc-product>} [--pf-c-table__compound-expansion-toggle__button--before--Bottom=calc(1px * -1)]
- *          Compound expansion toggle button before bottom
- *
- * @cssprop {<calc-product>} [--pf-c-table__compound-expansion-toggle__button--before--Left=calc(1px * -1)]
- *          Compound expansion toggle button before left
- *
- * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--after--border-width--base=3px]
- *          Compound expansion toggle button after base border width
- *
- * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--after--BorderColor=#06c]
- *          Compound expansion toggle button after border color
- *
- * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth=0]
- *          Compound expansion toggle button after top border width
- *
- * @cssprop {<calc-sum>} [--pf-c-table__compound-expansion-toggle__button--after--Top=calc(1px * -1)]
- *          Compound expansion toggle button after top
- *
- * @cssprop {<calc-sum>} [--pf-c-table__compound-expansion-toggle__button--after--Left=calc(1px * -1)]
- *          Compound expansion toggle button after left
- *
- * @cssprop {<calc-sum>} [--pf-c-table--m-compact-th--PaddingTop=calc(0.5rem + 0.25rem)]
- *          Compact header cell top padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact-th--PaddingBottom=0.5rem]
- *          Compact header cell bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingTop=0.5rem]
- *          Compact cell top padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingRight=0.5rem]
- *          Compact cell right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingBottom=0.5rem]
- *          Compact cell bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingLeft=0.5rem]
- *          Compact cell left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--PaddingLeft=1rem]
- *          Compact cell first child left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--PaddingRight=1rem]
- *          Compact XLcell first child right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft=1.5rem]
- *          Compact cell first child XL left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight=1.5rem]
- *          Compact cell first child XL right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact--FontSize=0.875rem]
- *          Compact font size
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingTop=1.5rem]
- *          Compact expandable row content top padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingRight=1.5rem]
- *          Compact expandable row content right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingBottom=1.5rem]
- *          Compact expandable row content bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingLeft=1.5rem]
- *          Compact expandable row content left padding
- *
- * @cssprop {<dimension>} [--pf-c-table--nested--first-last-child--PaddingRight=1rem]
- *          Nested first child right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--nested--first-last-child--PaddingLeft=1rem]
- *          Nested first child left padding
- *
- * @cssprop {<color>} [--pf-c-table__expandable-row--m-expanded--BorderBottomColor=#d2d2d2]
- *          Expandable row expanded bottom border color
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Hoverable table row top box shadow
- *
- * @cssprop {<dimension>} [--pf-c-table--tr--m-hoverable--BackgroundColor=transparent]
- *          Hoverable table row background color
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Hoverable table row box shadow
- *
- * @cssprop {<calc-sum>} [--pf-c-table--tr--m-hoverable--OutlineOffset=calc(-1 * 0.25rem)]
- *          Hoverable table row outline offset
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table row hover box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--hover--BackgroundColor=#fff]
- *          Hoverable table row hover background color
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--focus--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table row focus box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--focus--BackgroundColor=#fff]
- *          Hoverable table row focus background color
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--active--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table row active box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--active--BackgroundColor=#fff]
- *          Hoverable table row active background color
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table row selected box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-selected--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Selected table row top box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-selected--BackgroundColor=#fff]
- *          Selected table row background color
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-selected--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Selected table row box shadow
- *
- * @cssprop {<calc-sum>} [--pf-c-table--tr--m-selected--OutlineOffset=calc(-1 * 0.25rem)]
- *          Selected table row outline offset
- *
- * @cssprop {<length>} [--pf-c-table--tr--m-selected--after--BorderLeftWidth=3px]
- *          Selected table row after left border width
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-selected--after--BorderLeftColor=#06c]
- *          Selected table row after left border color
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-selected--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Selected table row box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Selected table row hover box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Selected table row hover box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Hoverable table body top box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Hoverable table body box shadow
- *
- * @cssprop {<dimension>} [--pf-c-table--tbody--m-hoverable--BackgroundColor=transparent]
- *          Hoverable table body background color
- *
- * @cssprop {<calc-sum>} [--pf-c-table--tbody--m-hoverable--OutlineOffset=calc(-1 * 0.25rem)]
- *          Hoverable table body outline offset
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table body hover box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--hover--BackgroundColor=#fff]
- *          Hoverable table body hover background color
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--focus--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table body focus box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--focus--BackgroundColor=#fff]
- *          Hoverable table body focus background color
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--active--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table body active box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--active--BackgroundColor=#fff]
- *          Hoverable table body active background color
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor=#73bcf7]
- *          Hoverable table body expanded border color
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Hoverable table body selected table row box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BackgroundColor=#fff]
- *          Selected table body background color
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Selected table body top box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]
- *          Selected table body box shadow
- *
- * @cssprop {<calc-product>} [--pf-c-table--tbody--m-selected--OutlineOffset=calc(-1 * 0.25rem)]
- *          Selected table body outline offset
- *
- * @cssprop {<length>} [--pf-c-table--tbody--m-selected--after--BorderLeftWidth=3px]
- *          Selected table body after left border width
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-selected--after--BorderLeftColor=#06c]
- *          Selected table body after left border color
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-selected--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Selected table body selected box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Selected table body hover selected box shadow
- *
- * @cssprop {<color>} [--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]
- *          Selected table body hover box shadow
- *
- * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--button--OutlineOffset=-0.1875rem]
- *          Table head nested column header button outline offset
- *
- * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--tr--PaddingTop=0.25rem]
- *          Table head nested column header row top padding
- *
- * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom=0.25rem]
- *          Table head nested column header row bottom padding
- *
- * @cssprop {<color>} [--pf-c-table__subhead--Color=#6a6e73]
- *          Subhead color
- *
- * @cssprop {<color>} [--pf-c-table--m-striped__tr--BackgroundColor=#fafafa]
- *          Striped row background color
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingTop=1rem]
- *          Cell top padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingRight=1rem]
- *          Cell right padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingBottom=1rem]
- *          Cell bottom padding
- *
- * @cssprop {<dimension>} [--pf-c-table--cell--PaddingLeft=1rem]
- *          Cell left padding
- *
- * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginTop=calc(0.375rem * -1)]
- *          Favorite button top margin
- *
- * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginRight=calc(1rem * -1)]
- *          Favorite button right margin
- *
- * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginBottom=calc(0.375rem * -1)]
- *          Favorite button bottom margin
- *
- * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginLeft=calc(1rem * -1)]
- *          Favorite button left margin
- *
+ * @alias Table
  */
 @customElement('pf-table')
 export class PfTable extends LitElement {
@@ -686,6 +52,7 @@ export class PfTable extends LitElement {
     const hasExpandableRow = !!this.querySelector?.('pf-tr[expandable]');
     const coeffRows = hasExpandableRow ? '1' : '0';
     return html`
+      <!-- The default slot can hold an optional \`pf-caption\` element and a combination of \`pf-tr\`, \`pf-thead\`, or \`pf-tbody\` elements. -->
       <slot @slotchange="${this.#onSlotchange}"
             @request-expand="${this.#onRequestExpand}"
             @request-sort="${this.#onRequestSort}"
diff --git a/elements/pf-tabs/demo/pf-tabs.html b/elements/pf-tabs/demo/index.html
similarity index 100%
rename from elements/pf-tabs/demo/pf-tabs.html
rename to elements/pf-tabs/demo/index.html
diff --git a/elements/pf-tabs/pf-tab-panel.css b/elements/pf-tabs/pf-tab-panel.css
index e7da6b0e29..0e2213448e 100644
--- a/elements/pf-tabs/pf-tab-panel.css
+++ b/elements/pf-tabs/pf-tab-panel.css
@@ -7,5 +7,6 @@
 }
 
 :host([box="light"]) {
+  /** Background color for light tab content */
   background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
 }
diff --git a/elements/pf-tabs/pf-tab-panel.ts b/elements/pf-tabs/pf-tab-panel.ts
index a5cf07f175..e8ddc72808 100644
--- a/elements/pf-tabs/pf-tab-panel.ts
+++ b/elements/pf-tabs/pf-tab-panel.ts
@@ -11,8 +11,6 @@ import styles from './pf-tab-panel.css';
 
 /**
  * @slot - Tab panel content
- * @cssprop {<color>} [--pf-c-tab-content--m-light-300=#f0f0f0]
- * @csspart container - container for the panel content
  */
 @customElement('pf-tab-panel')
 export class PfTabPanel extends LitElement {
@@ -23,7 +21,11 @@ export class PfTabPanel extends LitElement {
 
   render(): TemplateResult<1> {
     return html`
-      <slot></slot>
+      <!-- container for the panel content -->
+      <div part="container">
+        <!-- Tab panel content -->
+        <slot></slot>
+      </div>
     `;
   }
 
diff --git a/elements/pf-tabs/pf-tab.css b/elements/pf-tabs/pf-tab.css
index 2c7aae877a..8e4f59027a 100644
--- a/elements/pf-tabs/pf-tab.css
+++ b/elements/pf-tabs/pf-tab.css
@@ -10,8 +10,11 @@
 }
 
 .active {
+  /** Current tab text color */
   --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));
+  /** Current tab border color */
   --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));
+  /** Current tab border width */
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
@@ -40,18 +43,24 @@ slot[name="icon"] {
   text-decoration: none;
   cursor: pointer;
   align-items: center;
+  /** Tab icon and text spacing */
   gap: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));
   line-height: var(--pf-global--LineHeight--md, 1.5);
   color: var(--pf-global--Color--100, #151515);
+  /** Tab padding (top and bottom) */
   padding:
     var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  /** Tab font size */
   font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));
+  /** Tab text color */
   color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));
+  /** Tab outline offset */
   outline-offset: var(--pf-c-tabs__link--OutlineOffset, calc(-1 * 0.375rem));
   --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
+  /** Tab background color */
   background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);
 }
 
@@ -71,25 +80,42 @@ slot[name="icon"] {
 }
 
 #button::before {
+  /** Tab top border width */
   border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);
+  /** Tab right border width */
   border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);
+  /** Tab bottom border width */
   border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);
+  /** Tab left border width */
   border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);
+  /** Tab top border color */
   border-block-start-color: var(--pf-c-tabs__link--before--BorderTopColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Tab right border color */
   border-inline-end-color: var(--pf-c-tabs__link--before--BorderRightColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Tab bottom border color */
   border-block-end-color: var(--pf-c-tabs__link--before--BorderBottomColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Tab left border color */
   border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
 }
 
 #button::after {
+  /** Tab after element top position */
   top: var(--pf-c-tabs__link--after--Top, auto);
+  /** Tab after element right position */
   right: var(--pf-c-tabs__link--after--Right, 0);
+  /** Tab after element bottom position */
   bottom: var(--pf-c-tabs__link--after--Bottom, 0);
+  /** Tab before element left position */
   left: var(--pf-c-tabs__link--before--Left, 0);
+  /** Tab after element border color */
   border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));
+  /** Tab after element top border width */
   border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);
+  /** Tab after element right border width */
   border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);
+  /** Tab after element bottom border width */
   border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);
+  /** Tab after element left border width */
   border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);
 }
 
@@ -154,20 +180,27 @@ slot[name="icon"] {
 }
 
 :host(:first-of-type) .box.active #button::before {
+  /** Box style first tab top border width */
   border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Box style first tab left border width */
   border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
 :host(:last-of-type) .box.active #button::before {
+  /** Box style last tab right border width */
   border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
 :host([disabled]) #button,
 :host([aria-disabled="true"]) #button {
   --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));
+  /** Disabled tab background color */
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+  /** Disabled tab right border width */
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);
+  /** Disabled tab bottom border width */
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Disabled tab left border width */
   --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);
   --pf-c-tabs__link--after--BorderWidth: 0;
 }
diff --git a/elements/pf-tabs/pf-tab.ts b/elements/pf-tabs/pf-tab.ts
index 601daa5e9d..9b89452670 100644
--- a/elements/pf-tabs/pf-tab.ts
+++ b/elements/pf-tabs/pf-tab.ts
@@ -16,46 +16,6 @@ import styles from './pf-tab.css';
 
 /**
  * Tab
- * @slot icon
- *       Can contain an `<svg>` or `<pf-icon>`
- * @slot
- *       Tab title text
- * @csspart button - button element
- * @csspart icon - span container for the icon
- * @csspart text - span container for the title text
- * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth=1px]
- * @cssprop     {<color>} [--pf-c-tabs__link--BackgroundColor=#f0f0f0]
- * @cssprop     {<color>} [--pf-c-tabs__link--disabled--BackgroundColor=#d2d2d2]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderTopWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderBottomWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderLeftWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderRightWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderRightWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Top=auto]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Right=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Bottom=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--Left=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--PaddingTop=1rem]
- * @cssprop     {<length>} [--pf-c-tabs__link--PaddingBottom=1rem]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderBottomWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderLeftWidth=1px]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderTopColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderRightColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderBottomColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderLeftColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs__link--FontSize=1rem]
- * @cssprop     {<color>}   [--pf-c-tabs__link--Color=#6a6e73]
- * @cssprop     {<length>}  [--pf-c-tabs__link--OutlineOffset=-0.375rem]
- * @cssprop     {<color>}  [--pf-c-tabs__link--after--BorderColor=#b8bbbe]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderTopWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderRightWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderBottomWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderLeftWidth=0]
- * @cssprop     {<color>} [--pf-c-tabs__item--m-current__link--Color=#151515]
- * @cssprop     {<color>}   [--pf-c-tabs__item--m-current__link--after--BorderColor=#06c]
- * @cssprop     {<length>}  [--pf-c-tabs__item--m-current__link--after--BorderWidth=3px]
- * @cssprop     {<length>} [--pf-c-tabs__link--child--MarginRight=1rem]
  * @fires {TabExpandEvent} expand - when a tab expands
  */
 @customElement('pf-tab')
@@ -107,13 +67,23 @@ export class PfTab extends LitElement {
     const dark = box === 'dark';
     const icons = isServer ? [] : this.icons;
     return html`
+      <!-- button element -->
       <div id="button"
            part="button"
            class="${classMap({ active, box: !!box, dark, light, fill, vertical })}">
+        <!-- slot:
+               summary: Can contain an \`<svg>\` or \`<pf-icon>\`
+             part:
+               summary: container for the icon
+        -->
         <slot name="icon"
               part="icon"
               ?hidden="${!icons?.length}"
               @slotchange="${() => this.requestUpdate()}"></slot>
+        <!-- slot:
+               summary: Tab title text
+             part:
+               summary: container for the tab text -->
         <slot part="text"></slot>
       </div>
     `;
diff --git a/elements/pf-tabs/pf-tabs.css b/elements/pf-tabs/pf-tabs.css
index 95e5a1aaaf..04ef6081be 100644
--- a/elements/pf-tabs/pf-tabs.css
+++ b/elements/pf-tabs/pf-tabs.css
@@ -86,16 +86,24 @@ button:disabled {
 }
 
 [part="tabs-container"] {
+  /** Width of the tabs container */
   width: var(--pf-c-tabs--Width, auto);
+  /** Inset spacing for tabs */
   padding-inline-end: var(--pf-c-tabs--inset, 0);
+  /** Inset spacing for tabs */
   padding-inline-start: var(--pf-c-tabs--inset, 0);
 }
 
 [part="tabs-container"]::before {
+  /** Border color for tabs container pseudo-element */
   border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  /** Top border width */
   border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);
+  /** Right border width */
   border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);
+  /** Bottom border width */
   border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Left border width */
   border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);
 }
 
@@ -150,6 +158,7 @@ button:disabled {
   position: relative;
   flex-direction: column;
   flex-grow: 1;
+  /** Maximum width for vertical tabs */
   max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);
 }
 
@@ -158,9 +167,13 @@ button:disabled {
   right: auto;
   border-style: solid;
   border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Top border width for vertical tabs */
   border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);
+  /** Right border width for vertical tabs */
   border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);
+  /** Bottom border width for vertical tabs */
   border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);
+  /** Left border width for vertical tabs */
   border-inline-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
@@ -202,28 +215,40 @@ button:disabled {
 }
 
 [part="tabs"] {
+  /** Display type for the tabs list */
   display: var(--pf-c-tabs__list--Display, flex);
 }
 
 button {
+  /** Width of the scroll buttons */
   width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));
+  /** Color of the scroll buttons */
   color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));
+  /** Background color of the scroll buttons */
   background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
+  /** Outline offset for scroll buttons */
   outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));
   transition:
+    /** Transition duration for margin changes */
     margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),
+    /** Transition duration for transform changes */
     translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);
   --pf-icon--size: 16px;
 }
 
 button:hover {
+  /** Hover color for scroll buttons */
   --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));
 }
 
 button::before {
+  /** Border color for scroll button pseudo-elements */
   border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Right border width for scroll button pseudo-elements */
   border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);
+  /** Bottom border width for scroll button pseudo-elements */
   border-block-end-width: var(--pf-c-tabs__scroll-button--before--BorderBottomWidth, var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Left border width for scroll button pseudo-elements */
   border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);
 }
 
@@ -238,6 +263,7 @@ button:nth-of-type(2) {
 }
 
 button:disabled {
+  /** Color for disabled scroll buttons */
   --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));
 }
 
diff --git a/elements/pf-tabs/pf-tabs.ts b/elements/pf-tabs/pf-tabs.ts
index fd481f255e..980d1d3d3a 100644
--- a/elements/pf-tabs/pf-tabs.ts
+++ b/elements/pf-tabs/pf-tabs.ts
@@ -24,40 +24,7 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
 /**
  * **Tabs** allow users to navigate between views within the same page or context.
- * @csspart container - outer container
- * @csspart tabs-container - tabs container
- * @csspart tabs - tablist
- * @csspart panels - panels
- * @slot tab - Must contain one or more `<pf-tab>`
- * @slot - Must contain one or more `<pf-panel>`
- * @cssprop     {<length>} [--pf-c-tabs--Width=auto]
- * @cssprop     {<length>} [--pf-c-tabs--inset=0]
- * @cssprop     {<color>}   [--pf-c-tabs--before--BorderColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs--before--BorderTopWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--before--BorderRightWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--before--BorderBottomWidth=1px]
- * @cssprop     {<length>}  [--pf-c-tabs--before---BorderLeftWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical--MaxWidth=15.625rem]
- * @cssprop     {<color>}   [--pf-c-tabs--m-vertical__list--before--BorderColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderTopWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderRightWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderBottomWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderLeftWidth=1px]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical--m-box--inset=2rem]
- * @cssprop     {<display>} [--pf-c-tabs__list--Display=flex]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--Width=3rem]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--Color=#151515]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--BackgroundColor=#ffffff]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--OutlineOffset=-0.25rem]
- * @cssprop     {<time>}    [--pf-c-tabs__scroll-button--TransitionDuration--margin=.125s]
- * @cssprop     {<time>}    [--pf-c-tabs__scroll-button--TransitionDuration--transform=.125s]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--hover--Color=#06c]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--before--BorderColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderRightWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderBottomWidth=1px]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderLeftWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--border-width--base=1px]
- * @cssprop     {<color>} [--pf-c-tabs__scroll-button--disabled--Color=#d2d2d2]
+ * @alias Tabs
  */
 @customElement('pf-tabs')
 export class PfTabs extends LitElement {
@@ -199,8 +166,10 @@ export class PfTabs extends LitElement {
 
   render(): TemplateResult<1> {
     return html`
+      <!-- outer container -->
       <div part="container"
            class="${classMap({ overflow: this.#overflow.showScrollButtons })}">
+        <!-- tabs container -->
         <div part="tabs-container">${!this.#overflow.showScrollButtons ? '' : html`
           <button id="previousTab" tabindex="-1"
               aria-label="${this.labelScrollLeft}"
@@ -208,7 +177,9 @@ export class PfTabs extends LitElement {
               @click="${this.#scrollLeft}">
             <pf-icon icon="angle-left" set="fas" loading="eager"></pf-icon>
           </button>`}
+          <!-- tablist -->
           <div id="tabs" part="tabs" role="tablist">
+            <!-- Must contain one or more \`<pf-tab>\` -->
             <slot name="tab" @slotchange="${this.#onSlotChange}" @scroll="${this.#overflow.onScroll}"></slot>
           </div>
           ${!this.#overflow.showScrollButtons ? '' : html`
@@ -219,6 +190,12 @@ export class PfTabs extends LitElement {
             <pf-icon icon="angle-right" set="fas" loading="eager"></pf-icon>
           </button>`}
         </div>
+        <!--
+          slot:
+            summary: Must contain one or more \`<pf-panel>\`
+          part:
+            summary: panels
+        -->
         <slot part="panels"></slot>
       </div>
     `;
diff --git a/elements/pf-text-area/demo/pf-text-area.html b/elements/pf-text-area/demo/index.html
similarity index 100%
rename from elements/pf-text-area/demo/pf-text-area.html
rename to elements/pf-text-area/demo/index.html
diff --git a/elements/pf-text-area/pf-text-area.css b/elements/pf-text-area/pf-text-area.css
index ee79d455b1..fc32f08d25 100644
--- a/elements/pf-text-area/pf-text-area.css
+++ b/elements/pf-text-area/pf-text-area.css
@@ -2,130 +2,255 @@
   display: block;
 
   /* .pf-c-form-control */
+  /** Form control text color */
   --pf-c-form-control--Color: var(--pf-global--Color--100, #151515);
+  /** Form control font size */
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md, 1rem);
+  /** Form control line height */
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+  /** Form control border width */
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Form control top border color */
   --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  /** Form control right border color */
   --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  /** Form control bottom border color */
   --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  /** Form control left border color */
   --pf-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  /** Form control border radius */
   --pf-c-form-control--BorderRadius: 0;
+  /** Form control background color */
   --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+  /** Form control width */
   --pf-c-form-control--Width: 100%;
+  /** Form control height */
   --pf-c-form-control--Height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
+  /** Form control base inset */
   --pf-c-form-control--inset--base: var(--pf-global--spacer--sm, 0.5rem);
+  /** Form control top padding */
   --pf-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm));
+  /** Form control bottom padding */
   --pf-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm));
+  /** Form control right padding */
   --pf-c-form-control--PaddingRight: var(--pf-c-form-control--inset--base);
+  /** Form control left padding */
   --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--inset--base);
+  /** Form control hover bottom border color */
   --pf-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+  /** Form control focus bottom border width */
   --pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Form control focus bottom padding */
   --pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
+  /** Form control focus bottom border color */
   --pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+  /** Form control expanded bottom border width */
   --pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Form control expanded bottom padding */
   --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
+  /** Form control expanded bottom border color */
   --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+  /** Form control placeholder color */
   --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  /** Form control placeholder child color */
   --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100, #151515);
+  /** Form control disabled color */
   --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
+  /** Form control disabled background color */
   --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+  /** Form control disabled border color */
   --pf-c-form-control--disabled--BorderColor: transparent;
+  /** Form control readonly background color */
   --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+  /** Form control readonly hover bottom border color */
   --pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  /** Form control readonly focus bottom padding */
   --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm));
+  /** Form control readonly focus bottom border width */
   --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Form control readonly focus bottom border color */
   --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  /** Form control readonly plain background color */
   --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
+  /** Form control readonly plain base inset */
   --pf-c-form-control--readonly--m-plain--inset--base: 0;
+  /** Form control success bottom border width */
   --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Form control success bottom padding */
   --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth));
+  /** Form control success bottom border color */
   --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  /** Form control success right padding */
   --pf-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+  /** Form control success background X position */
   --pf-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
+  /** Form control success background Y position */
   --pf-c-form-control--success--BackgroundPositionY: center;
+  /** Form control success background position */
   --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY);
+  /** Form control success background X size */
   --pf-c-form-control--success--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+  /** Form control success background Y size */
   --pf-c-form-control--success--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  /** Form control success background size */
   --pf-c-form-control--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY);
+  /** Form control success background URL */
   --pf-c-form-control--success--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
+  /** Form control warning bottom border width */
   --pf-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Form control warning bottom padding */
   --pf-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth));
+  /** Form control warning bottom border color */
   --pf-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  /** Form control warning right padding */
   --pf-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+  /** Form control warning background X position */
   --pf-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem));
+  /** Form control warning background Y position */
   --pf-c-form-control--m-warning--BackgroundPositionY: center;
+  /** Form control warning background position */
   --pf-c-form-control--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY);
+  /** Form control warning background X size */
   --pf-c-form-control--m-warning--BackgroundSizeX: 1.25rem;
+  /** Form control warning background Y size */
   --pf-c-form-control--m-warning--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  /** Form control warning background size */
   --pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY);
+  /** Form control warning background URL */
   --pf-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+  /** Form control invalid bottom border width */
   --pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Form control invalid bottom padding */
   --pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth));
+  /** Form control invalid bottom border color */
   --pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Form control invalid right padding */
   --pf-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+  /** Form control invalid background X position */
   --pf-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
+  /** Form control invalid background Y position */
   --pf-c-form-control--invalid--BackgroundPositionY: center;
+  /** Form control invalid background position */
   --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY);
+  /** Form control invalid background X size */
   --pf-c-form-control--invalid--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+  /** Form control invalid background Y size */
   --pf-c-form-control--invalid--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  /** Form control invalid background size */
   --pf-c-form-control--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY);
+  /** Form control invalid background URL */
   --pf-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+  /** Form control invalid exclamation background */
   --pf-c-form-control--invalid--exclamation--Background: var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat;
+  /** Form control invalid background */
   --pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background);
+  /** Form control search left padding */
   --pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
+  /** Form control search background position */
   --pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);
+  /** Form control search background size */
   --pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);
+  /** Form control search background URL */
   --pf-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
+  /** Form control icon right padding */
   --pf-c-form-control--m-icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
+  /** Form control icon background URL */
   --pf-c-form-control--m-icon--BackgroundUrl: none;
+  /** Form control icon background X position */
   --pf-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-c-form-control--inset--base));
+  /** Form control icon background Y position */
   --pf-c-form-control--m-icon--BackgroundPositionY: center;
+  /** Form control icon background X size */
   --pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+  /** Form control icon background Y size */
   --pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  /** Form control icon spacer */
   --pf-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm, 0.5rem);
+  /** Form control icon padding right */
   --pf-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
+  /** Form control icon background X position */
   --pf-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX));
+  /** Form control icon invalid background URL */
   --pf-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+  /** Form control icon invalid background position */
   --pf-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+  /** Form control icon invalid background size */
   --pf-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+  /** Form control icon success background URL */
   --pf-c-form-control--m-icon--success--BackgroundUrl: var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+  /** Form control icon success background position */
   --pf-c-form-control--m-icon--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+  /** Form control icon success background size */
   --pf-c-form-control--m-icon--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+  /** Form control icon warning background URL */
   --pf-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+  /** Form control icon warning background position */
   --pf-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+  /** Form control icon warning background size */
   --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+  /** Form control calendar background URL */
   --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
+  /** Form control clock background URL */
   --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
+  /** Form control select right padding */
   --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
+  /** Form control select left padding */
   --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth));
+  /** Form control select background URL */
   --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
+  /** Form control select background size */
   --pf-c-form-control__select--BackgroundSize: .625em;
+  /** Form control select background X position */
   --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px);
+  /** Form control select background Y position */
   --pf-c-form-control__select--BackgroundPositionY: center;
+  /** Form control select background position */
   --pf-c-form-control__select--BackgroundPosition: var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY);
+  /** Form control select success right padding */
   --pf-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+  /** Form control select success background position */
   --pf-c-form-control__select--success--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
+  /** Form control select warning right padding */
   --pf-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+  /** Form control select warning background position */
   --pf-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);
+  /** Form control select invalid right padding */
   --pf-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+  /** Form control select invalid background position */
   --pf-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
+  /** Form control textarea width */
   --pf-c-form-control--textarea--Width: var(--pf-c-form-control--Width);
+  /** Form control textarea height */
   --pf-c-form-control--textarea--Height: auto;
+  /** Form control textarea success background Y position */
   --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+  /** Form control textarea warning background Y position */
   --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+  /** Form control textarea invalid background Y position */
   --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+  /** Form control icon sprite success background URL */
   --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success);
+  /** Form control icon sprite warning background URL */
   --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning);
+  /** Form control icon sprite invalid background URL */
   --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid);
+  /** Form control icon sprite select background URL */
   --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select);
+  /** Form control icon sprite search background URL */
   --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search);
+  /** Form control icon sprite calendar background URL */
   --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar);
+  /** Form control icon sprite clock background URL */
   --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock);
+  /** Form control icon sprite select background size */
   --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
+  /** Form control icon sprite select background X position */
   --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 7px);
+  /** Form control icon sprite select success background position */
   --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg));
+  /** Form control icon sprite select warning background position */
   --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg) + 0.0625rem);
+  /** Form control icon sprite select invalid background position */
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg));
 }
 
diff --git a/elements/pf-text-area/pf-text-area.ts b/elements/pf-text-area/pf-text-area.ts
index 54d058f496..951bf58644 100644
--- a/elements/pf-text-area/pf-text-area.ts
+++ b/elements/pf-text-area/pf-text-area.ts
@@ -11,131 +11,7 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 /**
  * A **text area** component is used for entering a paragraph of text that is longer than one line.
- * @cssprop [--pf-c-form-control--Color=var(--pf-global--Color--100, #151515)] -
- * @cssprop [--pf-c-form-control--FontSize=var(--pf-global--FontSize--md, 1rem)] -
- * @cssprop [--pf-c-form-control--LineHeight=var(--pf-global--LineHeight--md, 1.5)] -
- * @cssprop [--pf-c-form-control--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)] -
- * @cssprop [--pf-c-form-control--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -
- * @cssprop [--pf-c-form-control--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--BorderRadius=0] -
- * @cssprop [--pf-c-form-control--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)] -
- * @cssprop [--pf-c-form-control--Width=100] -
- * @cssprop [--pf-c-form-control--Height=calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom))] -
- * @cssprop [--pf-c-form-control--inset--base=var(--pf-global--spacer--sm, 0.5rem)] -
- * @cssprop [--pf-c-form-control--PaddingTop=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -
- * @cssprop [--pf-c-form-control--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -
- * @cssprop [--pf-c-form-control--PaddingRight=var(--pf-c-form-control--inset--base)] -
- * @cssprop [--pf-c-form-control--PaddingLeft=var(--pf-c-form-control--inset--base)] -
- * @cssprop [--pf-c-form-control--hover--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -
- * @cssprop [--pf-c-form-control--focus--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--focus--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -
- * @cssprop [--pf-c-form-control--m-expanded--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--m-expanded--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--m-expanded--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -
- * @cssprop [--pf-c-form-control--placeholder--Color=var(--pf-global--Color--dark-200, #6a6e73)] -
- * @cssprop [--pf-c-form-control--placeholder--child--Color=var(--pf-global--Color--100, #151515)] -
- * @cssprop [--pf-c-form-control--disabled--Color=var(--pf-global--disabled-color--100, #6a6e73)] -
- * @cssprop [--pf-c-form-control--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--disabled--BorderColor=transparent] -
- * @cssprop [--pf-c-form-control--readonly--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--readonly--hover--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -
- * @cssprop [--pf-c-form-control--readonly--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -
- * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)] -
- * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -
- * @cssprop [--pf-c-form-control--readonly--m-plain--BackgroundColor=transparent] -
- * @cssprop [--pf-c-form-control--readonly--m-plain--inset--base=0] -
- * @cssprop [--pf-c-form-control--success--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--success--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--success--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)] -
- * @cssprop [--pf-c-form-control--success--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--success--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -
- * @cssprop [--pf-c-form-control--success--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--success--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--success--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--success--BackgroundUrl
- * @cssprop [--pf-c-form-control--m-warning--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--m-warning--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--m-warning--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)] -
- * @cssprop [--pf-c-form-control--m-warning--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionX=calc(100 - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeX=1.25rem] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--m-warning--BackgroundUrl -
- * @cssprop [--pf-c-form-control--invalid--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--invalid--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--invalid--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)] -
- * @cssprop [--pf-c-form-control--invalid--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--invalid--BackgroundUrl -
- * @cssprop [--pf-c-form-control--invalid--exclamation--Background=var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat] -
- * @cssprop [--pf-c-form-control--invalid--Background=var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)] -
- * @cssprop [--pf-c-form-control--m-search--PaddingLeft=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--m-search--BackgroundPosition=var(--pf-c-form-control--PaddingRight)] -
- * @cssprop [--pf-c-form-control--m-search--BackgroundSize=var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-search--BackgroundUrl=] -
- * @cssprop [--pf-c-form-control--m-icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundUrl=none] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionX=calc(100 - var(--pf-c-form-control--inset--base))] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-icon--icon--spacer=var(--pf-global--spacer--sm, 0.5rem)] -
- * @cssprop [--pf-c-form-control--m-icon--icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -
- * @cssprop [--pf-c-form-control--m-icon--icon--BackgroundPositionX=calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))] -
- * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundUrl=var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -
- * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -
- * @cssprop [--pf-c-form-control--m-icon--success--BackgroundUrl=var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -
- * @cssprop [--pf-c-form-control--m-icon--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-icon--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -
- * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundUrl=var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -
- * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--m-calendar--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-clock--BackgroundUrl -
- * @cssprop [--pf-c-form-control__select--PaddingRight=calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))] -
- * @cssprop [--pf-c-form-control__select--PaddingLeft=calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))] -
- * @cssprop --pf-c-form-control__select--BackgroundUrl -
- * @cssprop [--pf-c-form-control__select--BackgroundSize=.625em] -
- * @cssprop [--pf-c-form-control__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px)] -
- * @cssprop [--pf-c-form-control__select--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control__select--BackgroundPosition=var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control__select--success--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -
- * @cssprop [--pf-c-form-control__select--success--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -
- * @cssprop [--pf-c-form-control__select--m-warning--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -
- * @cssprop [--pf-c-form-control__select--m-warning--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -
- * @cssprop [--pf-c-form-control__select--invalid--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -
- * @cssprop [--pf-c-form-control__select--invalid--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -
- * @cssprop [--pf-c-form-control--textarea--Width=var(--pf-c-form-control--Width)] -
- * @cssprop [--pf-c-form-control--textarea--Height=auto] -
- * @cssprop [--pf-c-form-control--textarea--success--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -
- * @cssprop [--pf-c-form-control--textarea--m-warning--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -
- * @cssprop [--pf-c-form-control--textarea--invalid--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -
- * @cssprop --pf-c-form-control--m-icon-sprite--success--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite__select--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundSize=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 7px)] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem))] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))] -
+ * @alias Text Area
  */
 @customElement('pf-text-area')
 export class PfTextArea extends LitElement {
diff --git a/elements/pf-text-input/demo/pf-text-input.html b/elements/pf-text-input/demo/index.html
similarity index 100%
rename from elements/pf-text-input/demo/pf-text-input.html
rename to elements/pf-text-input/demo/index.html
diff --git a/elements/pf-text-input/pf-text-input.css b/elements/pf-text-input/pf-text-input.css
index c75f854c70..ae00a2b26c 100644
--- a/elements/pf-text-input/pf-text-input.css
+++ b/elements/pf-text-input/pf-text-input.css
@@ -1,130 +1,256 @@
 :host {
+	/** Form control text color */
 	--pf-c-form-control--Color: var(--pf-global--Color--100, #151515);
+	/** Form control font size */
 	--pf-c-form-control--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** Form control line height */
 	--pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	/** Form control border width */
 	--pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Form control top border color */
 	--pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	/** Form control right border color */
 	--pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	/** Form control bottom border color */
 	--pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	/** Form control left border color */
 	--pf-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	/** Form control border radius */
 	--pf-c-form-control--BorderRadius: 0;
+	/** Form control background color */
 	--pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** Form control width */
 	--pf-c-form-control--Width: 100%;
+	/** Form control height */
 	--pf-c-form-control--Height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
+	/** Form control base inset */
 	--pf-c-form-control--inset--base: var(--pf-global--spacer--sm, 0.5rem);
+	/** Form control top padding */
 	--pf-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));
+	/** Form control bottom padding */
 	--pf-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));
+	/** Form control right padding */
 	--pf-c-form-control--PaddingRight: var(--pf-c-form-control--inset--base);
+	/** Form control left padding */
 	--pf-c-form-control--PaddingLeft: var(--pf-c-form-control--inset--base);
+	/** Form control hover bottom border color */
 	--pf-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+	/** Form control focus bottom border width */
 	--pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Form control focus bottom padding */
 	--pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
+	/** Form control focus bottom border color */
 	--pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+	/** Form control expanded bottom border width */
 	--pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Form control expanded bottom padding */
 	--pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
+	/** Form control expanded bottom border color */
 	--pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+	/** Form control placeholder color */
 	--pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	/** Form control placeholder child color */
 	--pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100, #151515);
+	/** Form control disabled color */
 	--pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
+	/** Form control disabled background color */
 	--pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+	/** Form control disabled border color */
 	--pf-c-form-control--disabled--BorderColor: transparent;
+	/** Form control readonly background color */
 	--pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+	/** Form control readonly hover bottom border color */
 	--pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	/** Form control readonly focus bottom padding */
 	--pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));
+	/** Form control readonly focus bottom border width */
 	--pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Form control readonly focus bottom border color */
 	--pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	/** Form control readonly plain background color */
 	--pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
+	/** Form control readonly plain base inset */
 	--pf-c-form-control--readonly--m-plain--inset--base: 0;
+	/** Form control success bottom border width */
 	--pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Form control success bottom padding */
 	--pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth));
+	/** Form control success bottom border color */
 	--pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	/** Form control success right padding */
 	--pf-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	/** Form control success background X position */
 	--pf-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
+	/** Form control success background Y position */
 	--pf-c-form-control--success--BackgroundPositionY: center;
+	/** Form control success background position */
 	--pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY);
+	/** Form control success background X size */
 	--pf-c-form-control--success--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+	/** Form control success background Y size */
 	--pf-c-form-control--success--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+	/** Form control success background size */
 	--pf-c-form-control--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY);
+	/** Form control success background URL */
 	--pf-c-form-control--success--BackgroundUrl: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%235ba352" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/%3E%3C/svg%3E');
+	/** Form control warning bottom border width */
 	--pf-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Form control warning bottom padding */
 	--pf-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth));
+	/** Form control warning bottom border color */
 	--pf-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	/** Form control warning right padding */
 	--pf-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	/** Form control warning background X position */
 	--pf-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem));
+	/** Form control warning background Y position */
 	--pf-c-form-control--m-warning--BackgroundPositionY: center;
+	/** Form control warning background position */
 	--pf-c-form-control--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY);
+	/** Form control warning background X size */
 	--pf-c-form-control--m-warning--BackgroundSizeX: 1.25rem;
+	/** Form control warning background Y size */
 	--pf-c-form-control--m-warning--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+	/** Form control warning background size */
 	--pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY);
+	/** Form control warning background URL */
 	--pf-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+	/** Form control invalid bottom border width */
 	--pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Form control invalid bottom padding */
 	--pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth));
+	/** Form control invalid bottom border color */
 	--pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	/** Form control invalid right padding */
 	--pf-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	/** Form control invalid background X position */
 	--pf-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
+	/** Form control invalid background Y position */
 	--pf-c-form-control--invalid--BackgroundPositionY: center;
+	/** Form control invalid background position */
 	--pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY);
+	/** Form control invalid background X size */
 	--pf-c-form-control--invalid--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+	/** Form control invalid background Y size */
 	--pf-c-form-control--invalid--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+	/** Form control invalid background size */
 	--pf-c-form-control--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY);
+	/** Form control invalid background URL */
 	--pf-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+	/** Form control invalid exclamation background */
 	--pf-c-form-control--invalid--exclamation--Background: var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat;
+	/** Form control invalid background */
 	--pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background);
+	/** Form control search left padding */
 	--pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
+	/** Form control search background position */
 	--pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);
+	/** Form control search background size */
 	--pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);
+	/** Form control search background URL */
 	--pf-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
+	/** Form control icon right padding */
 	--pf-c-form-control--m-icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
+	/** Form control icon background URL */
 	--pf-c-form-control--m-icon--BackgroundUrl: none;
+	/** Form control icon background X position */
 	--pf-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-c-form-control--inset--base));
+	/** Form control icon background Y position */
 	--pf-c-form-control--m-icon--BackgroundPositionY: center;
+	/** Form control icon background X size */
 	--pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+	/** Form control icon background Y size */
 	--pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+	/** Form control icon spacer */
 	--pf-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm, 0.5rem);
+	/** Form control icon right padding with validation */
 	--pf-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
+	/** Form control icon background X position with validation */
 	--pf-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX));
+	/** Form control icon invalid background URL */
 	--pf-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+	/** Form control icon invalid background position */
 	--pf-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+	/** Form control icon invalid background size */
 	--pf-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+	/** Form control icon success background URL */
 	--pf-c-form-control--m-icon--success--BackgroundUrl: var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+	/** Form control icon success background position */
 	--pf-c-form-control--m-icon--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+	/** Form control icon success background size */
 	--pf-c-form-control--m-icon--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+	/** Form control icon warning background URL */
 	--pf-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+	/** Form control icon warning background position */
 	--pf-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+	/** Form control icon warning background size */
 	--pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+	/** Form control calendar background URL */
 	--pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
+	/** Form control clock background URL */
 	--pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
+	/** Select right padding */
 	--pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
+	/** Select left padding */
 	--pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth));
+	/** Select background URL */
 	--pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
+	/** Select background size */
 	--pf-c-form-control__select--BackgroundSize: .625em;
+	/** Select background X position */
 	--pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px);
+	/** Select background Y position */
 	--pf-c-form-control__select--BackgroundPositionY: center;
+	/** Select background position */
 	--pf-c-form-control__select--BackgroundPosition: var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY);
+	/** Select success right padding */
 	--pf-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+	/** Select success background position */
 	--pf-c-form-control__select--success--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
+	/** Select warning right padding */
 	--pf-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+	/** Select warning background position */
 	--pf-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);
+	/** Select invalid right padding */
 	--pf-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+	/** Select invalid background position */
 	--pf-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
+	/** Textarea width */
 	--pf-c-form-control--textarea--Width: var(--pf-c-form-control--Width);
+	/** Textarea height */
 	--pf-c-form-control--textarea--Height: auto;
+	/** Textarea success background Y position */
 	--pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+	/** Textarea warning background Y position */
 	--pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+	/** Textarea invalid background Y position */
 	--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+	/** Icon sprite success background URL */
 	--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success);
+	/** Icon sprite warning background URL */
 	--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning);
+	/** Icon sprite invalid background URL */
 	--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid);
+	/** Icon sprite select background URL */
 	--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select);
+	/** Icon sprite search background URL */
 	--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search);
+	/** Icon sprite calendar background URL */
 	--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar);
+	/** Icon sprite clock background URL */
 	--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock);
+	/** Icon sprite select background size */
 	--pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
+	/** Icon sprite select background X position */
 	--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 7px);
+	/** Icon sprite select success background position */
 	--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem));
+	/** Icon sprite select warning background position */
 	--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);
+	/** Icon sprite select invalid background position */
 	--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem));
   /* NB: this var doesn't exist in pf react */
+  /** Error text status color */
   --pf-c-form-control__error-text--m-status--Color: var(--pf-global--danger-color--100, #c9190b);
 
   display: inline-block;
diff --git a/elements/pf-text-input/pf-text-input.ts b/elements/pf-text-input/pf-text-input.ts
index 9f2867fb36..296099ed3a 100644
--- a/elements/pf-text-input/pf-text-input.ts
+++ b/elements/pf-text-input/pf-text-input.ts
@@ -10,132 +10,7 @@ import styles from './pf-text-input.css';
 
 /**
  * A **text input** is used to gather free-form text from a user.
- * @cssprop [--pf-c-form-control--Color=var(--pf-global--Color--100, #151515)] -
- * @cssprop [--pf-c-form-control--FontSize=var(--pf-global--FontSize--md, 1rem)] -
- * @cssprop [--pf-c-form-control--LineHeight=var(--pf-global--LineHeight--md, 1.5)] -
- * @cssprop [--pf-c-form-control--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)] -
- * @cssprop [--pf-c-form-control--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -
- * @cssprop [--pf-c-form-control--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--BorderRadius=0] -
- * @cssprop [--pf-c-form-control--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)] -
- * @cssprop [--pf-c-form-control--Width=100] -
- * @cssprop [--pf-c-form-control--Height=calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom))] -
- * @cssprop [--pf-c-form-control--inset--base=var(--pf-global--spacer--sm, 0.5rem)] -
- * @cssprop [--pf-c-form-control--PaddingTop=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -
- * @cssprop [--pf-c-form-control--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -
- * @cssprop [--pf-c-form-control--PaddingRight=var(--pf-c-form-control--inset--base)] -
- * @cssprop [--pf-c-form-control--PaddingLeft=var(--pf-c-form-control--inset--base)] -
- * @cssprop [--pf-c-form-control--hover--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -
- * @cssprop [--pf-c-form-control--focus--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--focus--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -
- * @cssprop [--pf-c-form-control--m-expanded--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--m-expanded--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--m-expanded--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -
- * @cssprop [--pf-c-form-control--placeholder--Color=var(--pf-global--Color--dark-200, #6a6e73)] -
- * @cssprop [--pf-c-form-control--placeholder--child--Color=var(--pf-global--Color--100, #151515)] -
- * @cssprop [--pf-c-form-control--disabled--Color=var(--pf-global--disabled-color--100, #6a6e73)] -
- * @cssprop [--pf-c-form-control--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--disabled--BorderColor=transparent] -
- * @cssprop [--pf-c-form-control--readonly--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -
- * @cssprop [--pf-c-form-control--readonly--hover--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -
- * @cssprop [--pf-c-form-control--readonly--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -
- * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)] -
- * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -
- * @cssprop [--pf-c-form-control--readonly--m-plain--BackgroundColor=transparent] -
- * @cssprop [--pf-c-form-control--readonly--m-plain--inset--base=0] -
- * @cssprop [--pf-c-form-control--success--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--success--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--success--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)] -
- * @cssprop [--pf-c-form-control--success--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--success--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -
- * @cssprop [--pf-c-form-control--success--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--success--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--success--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--success--BackgroundUrl -
- * @cssprop [--pf-c-form-control--m-warning--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--m-warning--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--m-warning--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)] -
- * @cssprop [--pf-c-form-control--m-warning--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionX=calc(100 - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeX=1.25rem] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--m-warning--BackgroundUrl -
- * @cssprop [--pf-c-form-control--invalid--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -
- * @cssprop [--pf-c-form-control--invalid--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))] -
- * @cssprop [--pf-c-form-control--invalid--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)] -
- * @cssprop [--pf-c-form-control--invalid--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--invalid--BackgroundUrl -
- * @cssprop [--pf-c-form-control--invalid--exclamation--Background=var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat] -
- * @cssprop [--pf-c-form-control--invalid--Background=var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)] -
- * @cssprop [--pf-c-form-control--m-search--PaddingLeft=var(--pf-global--spacer--xl, 2rem)] -
- * @cssprop [--pf-c-form-control--m-search--BackgroundPosition=var(--pf-c-form-control--PaddingRight)] -
- * @cssprop [--pf-c-form-control--m-search--BackgroundSize=var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)] -
- * @cssprop --pf-c-form-control--m-search--BackgroundUrl -
- * @cssprop [--pf-c-form-control--m-icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundUrl=none] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionX=calc(100 - var(--pf-c-form-control--inset--base))] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-icon--icon--spacer=var(--pf-global--spacer--sm, 0.5rem)] -
- * @cssprop [--pf-c-form-control--m-icon--icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -
- * @cssprop [--pf-c-form-control--m-icon--icon--BackgroundPositionX=calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))] -
- * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundUrl=var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -
- * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -
- * @cssprop [--pf-c-form-control--m-icon--success--BackgroundUrl=var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -
- * @cssprop [--pf-c-form-control--m-icon--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-icon--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -
- * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundUrl=var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -
- * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -
- * @cssprop --pf-c-form-control--m-calendar--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-clock--BackgroundUrl -
- * @cssprop [--pf-c-form-control__select--PaddingRight=calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))] -
- * @cssprop [--pf-c-form-control__select--PaddingLeft=calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))] -
- * @cssprop --pf-c-form-control__select--BackgroundUrl -
- * @cssprop [--pf-c-form-control__select--BackgroundSize=.625em] -
- * @cssprop [--pf-c-form-control__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px)] -
- * @cssprop [--pf-c-form-control__select--BackgroundPositionY=center] -
- * @cssprop [--pf-c-form-control__select--BackgroundPosition=var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)] -
- * @cssprop [--pf-c-form-control__select--success--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -
- * @cssprop [--pf-c-form-control__select--success--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -
- * @cssprop [--pf-c-form-control__select--m-warning--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -
- * @cssprop [--pf-c-form-control__select--m-warning--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -
- * @cssprop [--pf-c-form-control__select--invalid--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -
- * @cssprop [--pf-c-form-control__select--invalid--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -
- * @cssprop [--pf-c-form-control--textarea--Width=var(--pf-c-form-control--Width)] -
- * @cssprop [--pf-c-form-control--textarea--Height=auto] -
- * @cssprop [--pf-c-form-control--textarea--success--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -
- * @cssprop [--pf-c-form-control--textarea--m-warning--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -
- * @cssprop [--pf-c-form-control--textarea--invalid--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -
- * @cssprop --pf-c-form-control--m-icon-sprite--success--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite__select--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl -
- * @cssprop --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl -
- * @cssprop [--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl=url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock)] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundSize=var(--pf-c-form-control--FontSize)] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 7px)] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem))] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -
- * @cssprop [--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))] -
- * @cssprop [--pf-c-form-control__error-text--m-status--Color=var(--pf-global--danger-color--100, #c9190b)] -
+ * @alias Text Input
  */
 @customElement('pf-text-input')
 export class PfTextInput extends LitElement {
diff --git a/elements/pf-tile/demo/pf-tile.html b/elements/pf-tile/demo/index.html
similarity index 100%
rename from elements/pf-tile/demo/pf-tile.html
rename to elements/pf-tile/demo/index.html
diff --git a/elements/pf-tile/pf-tile.css b/elements/pf-tile/pf-tile.css
index c2ceff6020..85edb09418 100644
--- a/elements/pf-tile/pf-tile.css
+++ b/elements/pf-tile/pf-tile.css
@@ -1,18 +1,26 @@
 :host {
   position: relative;
   display: inline-grid;
-  padding: var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))
-          var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))
-          var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))
-          var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
+  padding: 
+    /** Top padding for tile */
+    var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))
+    /** Right padding for tile */
+    var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))
+    /** Bottom padding for tile */
+    var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))
+    /** Left padding for tile */
+    var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
   text-align: center;
   cursor: pointer;
+  /** Background color for tile */
   background-color: var(--pf-c-tile--BackgroundColor,
                     var(--pf-global--BackgroundColor--100,
                     var(--pf-global--BackgroundColor--light-100), #ffffff));
   grid-template-rows: -webkit-min-content;
   grid-template-rows: min-content;
+  /** Transition animation for tile */
   transition: var(--pf-c-tile--Transition, none);
+  /** Vertical translation for tile */
   transform: translateY(var(--pf-c-tile--TranslateY, 0));
 }
 
@@ -28,18 +36,25 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
-          solid
-          var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  border: 
+    /** Border width for tile */
+    var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
+    solid
+    /** Border color for tile */
+    var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
 }
 
 :host::after {
   right: 0;
   bottom: 0;
   left: 0;
+  /** Height of tile bottom accent */
   height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));
+  /** Background color of tile bottom accent */
   background-color: var(--pf-c-tile--after--BackgroundColor, transparent);
+  /** Transition animation for tile bottom accent */
   transition: var(--pf-c-tile--after--Transition, none);
+  /** Scale Y and translate Y transform for tile bottom accent */
   transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));
 }
 
@@ -87,6 +102,7 @@
 }
 
 [part="title"] {
+  /** Color for tile title */
   color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));
 }
 
@@ -96,10 +112,13 @@
 }
 
 [part="icon"] {
-  --_icon-size: var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));
+  /** Font size for tile icon */
+  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-global--icon--FontSize--md, 1.125rem));
   --pf-icon--size: var(--_icon-size);
+  /** Right margin for tile icon */
   margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
   font-size: var(--_icon-size);
+  /** Color for tile icon */
   color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));
 }
 
@@ -118,6 +137,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /** Bottom margin for stacked tile icon */
   margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));
 }
 
diff --git a/elements/pf-tile/pf-tile.ts b/elements/pf-tile/pf-tile.ts
index e5313357f0..b59133664f 100644
--- a/elements/pf-tile/pf-tile.ts
+++ b/elements/pf-tile/pf-tile.ts
@@ -15,32 +15,9 @@ export type StackedSize = (
  * [selectable card](../card/). However, tiles are used specifically when the user is selecting
  * a static option, whereas a selectable card triggers an action or opens a quickstart
  * or sidebar to provide additional information.
- * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
- * @slot title          - the title of the tile should be a heading
- * @slot                - The content should be a paragraph
- * @csspart icon        - container for the icon
- * @csspart title       - container for the title
- * @csspart body        - container for the body content
+ * @alias Tile
  * @attr {'boolean'} selected       - selected variant
  * @attr {'md'|'lg'|null} stacked   - stacked variant
- * @cssprop   {<length>} [--pf-c-tile--PaddingTop=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile--PaddingRight=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile--PaddingBottom=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile--PaddingLeft=1.5rem]
- * @cssprop   {<color>} [--pf-c-tile--BackgroundColor=#FFFFFF]
- * @cssprop   [--pf-c-tile--Transition=none]
- * @cssprop   [--pf-c-tile--TranslateY=0]
- * @cssprop   {<length>} [--pf-c-tile--before--BorderWidth=1px]
- * @cssprop   {<color>} [--pf-c-tile--before--BorderColor=#444548]
- * @cssprop   {<length>} [--pf-c-tile--after--Height=3px]
- * @cssprop   {<color>} [--pf-c-tile--after--BackgroundColor=transparent]
- * @cssprop   [--pf-c-tile--after--Transition=none]
- * @cssprop   [--pf-c-tile--after--ScaleY=1]
- * @cssprop   {<color>} [--pf-c-tile__title--Color=#06c]
- * @cssprop   {<color>} [--pf-c-tile__icon--Color=#06c]
- * @cssprop   {<length>} [--pf-c-tile__icon--MarginRight=0]
- * @cssprop   {<length>} [--pf-c-tile__icon--FontSize=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile__header--m-stacked__icon--MarginBottom=0.25rem]
  */
 @customElement('pf-tile')
 export class PfTile extends LitElement {
@@ -53,14 +30,20 @@ export class PfTile extends LitElement {
   override render(): TemplateResult<1> {
     return html`
       <div part="header">
+        <!-- container for the icon -->
         <div part="icon">
+          <!-- Icon expects a \`<pf-icon>\` or \`<svg>\` -->
           <slot id="icon" name="icon"></slot>
         </div>
+        <!-- container for the title -->
         <div part="title">
+          <!-- the title of the tile should be a heading -->
           <slot id="title" name="title"></slot>
         </div>
       </div>
+      <!-- container for the body content -->
       <div part="body">
+        <!-- The content should be a paragraph -->
         <slot id="body"></slot>
       </div>
     `;
diff --git a/elements/pf-timestamp/demo/pf-timestamp.html b/elements/pf-timestamp/demo/index.html
similarity index 100%
rename from elements/pf-timestamp/demo/pf-timestamp.html
rename to elements/pf-timestamp/demo/index.html
diff --git a/elements/pf-timestamp/pf-timestamp.ts b/elements/pf-timestamp/pf-timestamp.ts
index 2229106228..f8d86aad4f 100644
--- a/elements/pf-timestamp/pf-timestamp.ts
+++ b/elements/pf-timestamp/pf-timestamp.ts
@@ -19,6 +19,7 @@ const BooleanStringConverter: ComplexAttributeConverter = {
 
 /**
  * A **timestamp** provides consistent formats for displaying date and time values.
+ * @alias Timestamp
  */
 @customElement('pf-timestamp')
 export class PfTimestamp extends LitElement {
diff --git a/elements/pf-tooltip/demo/pf-tooltip.html b/elements/pf-tooltip/demo/index.html
similarity index 100%
rename from elements/pf-tooltip/demo/pf-tooltip.html
rename to elements/pf-tooltip/demo/index.html
diff --git a/elements/pf-tooltip/pf-tooltip.css b/elements/pf-tooltip/pf-tooltip.css
index 8a017283c2..85342283d2 100644
--- a/elements/pf-tooltip/pf-tooltip.css
+++ b/elements/pf-tooltip/pf-tooltip.css
@@ -10,6 +10,7 @@
   display: inline-flex;
   position: relative;
   max-width: 100%;
+  /** Tooltip arrow width */
   --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);
 }
 
@@ -35,12 +36,16 @@
   top: 0;
   left: 0;
   will-change: opacity;
+  /** Sets the font color for the tooltip content */
   line-height: var(--pf-c-tooltip--line-height, 1.5);
+  /** Maximum width for the tooltip */
   max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);
+  /** Box shadow for the tooltip */
   box-shadow: var(--pf-c-tooltip--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)));
+  /** Tooltip padding (top, right, bottom, left) */
   padding:
     var(--pf-c-tooltip__content--PaddingTop,
       var(--pf-global--spacer--sm, 0.5rem))
@@ -50,10 +55,13 @@
       var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tooltip__content--PaddingLeft,
       var(--pf-global--spacer--sm, 0.5rem));
+  /** Font size for the tooltip content */
   font-size: var(--pf-c-tooltip__content--FontSize,
     var(--pf-global--FontSize--sm, 0.875rem));
+  /** Sets the font color for the tooltip content */
   color: var(--pf-c-tooltip__content--Color,
     var(--pf-global--Color--light-100, #ffffff));
+  /** Sets the background color for the tooltip content */
   background-color: var(--pf-c-tooltip__content--BackgroundColor,
     var(--pf-global--BackgroundColor--dark-100, #151515));
 }
diff --git a/elements/pf-tooltip/pf-tooltip.ts b/elements/pf-tooltip/pf-tooltip.ts
index f89beba20d..c4632c8202 100644
--- a/elements/pf-tooltip/pf-tooltip.ts
+++ b/elements/pf-tooltip/pf-tooltip.ts
@@ -23,85 +23,7 @@ const ExitEvents = ['focusout', 'blur', 'mouseleave'];
  * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
  * @summary Toggle the visibility of helpful or contextual information.
- * @slot
- *       This slot wraps around the element that should be used to invoke the tooltip content to display.
- *       Typically this would be an icon, button, or other small sized element.
- * @slot content
- *       This slot renders the content that will be displayed inside of the tooltip.
- *       Typically this would include a string of text without any additional elements.
- *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
- * @cssprop     {<color>} [--pf-c-tooltip__content--BackgroundColor=#1b1d21]
- *              Sets the background color for the tooltip content.
- *
- * @cssprop     {<color>} [--pf-c-tooltip__content--Color=#e0e0e0]
- *              Sets the font color for the tooltip content.
- *
- * @cssprop     {<number>} [--pf-c-tooltip--line-height=1.5]
- *              Sets the font color for the tooltip content.
- *
- * @cssprop     {<length>} [--pf-c-tooltip--MaxWidth=18.75rem]
- *              Maximum width for the tooltip.
- *
- * @cssprop     [--pf-c-tooltip--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)]
- *              Box shadow for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingTop=0.5rem]
- *              Top padding for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingRight=0.5rem]
- *              Right padding for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingBottom=0.5rem]
- *              Bottom padding for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingLeft=0.5rem]
- *              Left Padding for the tooltip.
- *
- * @cssprop     [--pf-c-tooltip__content--FontSize=0.875rem]
- *              Font size for the tooltip content.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__arrow--Width=0.5rem]
- *              Tooltip arrow width.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__arrow--Height=0.5rem]
- *              Tooltip arrow height.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateX=-50]
- *              Positions the tooltip arrow along the x axis for `top` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateY=50]
- *              Positions the tooltip arrow along the y axis for `top` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-top--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateX=-50]
- *              Positions the tooltip arrow along the x axis for `right` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateY=-50]
- *              Positions the tooltip arrow along the y axis for `right` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-right--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateX=-50]
- *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateY=-50]
- *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-bottom--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateX=50]
- *              Positions the tooltip arrow along the x axis for `left` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateY=-50]
- *              Positions the tooltip arrow along the y axis for `left` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-left--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
- *
+ * @alias Tooltip
  */
 @customElement('pf-tooltip')
 export class PfTooltip extends LitElement {
@@ -187,9 +109,11 @@ export class PfTooltip extends LitElement {
         <div role="tooltip"
              style="${styleMap({ display })}"
              aria-labelledby="tooltip">
+          <!-- This slot wraps around the element that should be used to invoke the tooltip content to display. Typically this would be an icon, button, or other small sized element. -->
           <slot id="invoker" @slotchange="${this.#invokerChanged}"></slot>
         </div>
         <div ?inert="${!open}">
+          <!-- This slot renders the content that will be displayed inside of the tooltip. Typically this would include a string of text without any additional elements. -->
           <slot id="tooltip" name="content">${this.content}</slot>
         </div>
       </div>
diff --git a/package-lock.json b/package-lock.json
index b930cc82d7..670d312fce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@lit/react": "^1.0.5",
         "@octokit/core": "^6.1.2",
         "@patternfly/patternfly": "^4.224.5",
-        "@pwrs/cem": "^0.2.14",
+        "@pwrs/cem": "^0.3.0",
         "@rhds/elements": "^1.4.5",
         "@types/koa__router": "^12.0.4",
         "@types/node": "^22.15.32",
@@ -50,10 +50,10 @@
       "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.23.1",
         "@esbuild/linux-x64": "^0.23.1",
-        "@pwrs/cem-darwin-arm64": "^0.2.14",
-        "@pwrs/cem-darwin-x64": "^0.2.14",
-        "@pwrs/cem-linux-arm64": "^0.2.14",
-        "@pwrs/cem-linux-x64": "^0.2.14",
+        "@pwrs/cem-darwin-arm64": "^0.3.0",
+        "@pwrs/cem-darwin-x64": "^0.3.0",
+        "@pwrs/cem-linux-arm64": "^0.3.0",
+        "@pwrs/cem-linux-x64": "^0.3.0",
         "@rollup/rollup-darwin-arm64": "^4.21.0"
       }
     },
@@ -2908,9 +2908,9 @@
       }
     },
     "node_modules/@pwrs/cem": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem/-/cem-0.2.14.tgz",
-      "integrity": "sha512-Z7AqS0qGZDsNOrVDkJSozaph/8KPrtMsceqzPacGev6Li1iCgXxOEBQdNStbRe/Z8jHWrMJyj9roTzKsRlZmrA==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem/-/cem-0.3.0.tgz",
+      "integrity": "sha512-g3A2TlI86vxuJuh/FGjOJGoMCk23/kt4Qgd3lrf+3ccTdUdu2OOw7efzPEcGI3CZdAlB6v8JQi+S5prAgAyv3g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -2920,18 +2920,18 @@
         "node": ">=22.0.0"
       },
       "optionalDependencies": {
-        "@pwrs/cem-darwin-arm64": "0.2.14",
-        "@pwrs/cem-darwin-x64": "0.2.14",
-        "@pwrs/cem-linux-arm64": "0.2.14",
-        "@pwrs/cem-linux-x64": "0.2.14",
-        "@pwrs/cem-win32-arm64": "0.2.14",
-        "@pwrs/cem-win32-x64": "0.2.14"
+        "@pwrs/cem-darwin-arm64": "0.3.0",
+        "@pwrs/cem-darwin-x64": "0.3.0",
+        "@pwrs/cem-linux-arm64": "0.3.0",
+        "@pwrs/cem-linux-x64": "0.3.0",
+        "@pwrs/cem-win32-arm64": "0.3.0",
+        "@pwrs/cem-win32-x64": "0.3.0"
       }
     },
     "node_modules/@pwrs/cem-darwin-arm64": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-arm64/-/cem-darwin-arm64-0.2.14.tgz",
-      "integrity": "sha512-5LSa3AZDJ8hRGBKWWQx1jG9AIX4GiXwnejaSb3m9H4QplEM53gCeOtDVi2tUdrWUaWSa4jkCIqbcBLk0ouZzfw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-arm64/-/cem-darwin-arm64-0.3.0.tgz",
+      "integrity": "sha512-EufvApZSQygjjtx/GCrnkXAtLLKtm7fy7RUQIrx9xLzxSfg+ivsMGJZm9WdKTGHzvrb2QraElZnN6OPYQmnM+g==",
       "cpu": [
         "arm64"
       ],
@@ -2945,9 +2945,9 @@
       }
     },
     "node_modules/@pwrs/cem-darwin-x64": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-x64/-/cem-darwin-x64-0.2.14.tgz",
-      "integrity": "sha512-olyVHNNDZ/yFD/+F1pEp0vVwPyDIKskDSSXMOAjN93FbnrlBjCWKRqV46xvegpXlgu5BpK2zayCWzhIrDc6Kgw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-x64/-/cem-darwin-x64-0.3.0.tgz",
+      "integrity": "sha512-fNeJC3bvhvYQ/t/JrVHFbkoeyUNj2Kq9Gl/mZ7I8NVZGsgLE8/x3csxe1kFysKTXlWsgmy/oq7KCERjABmXZHA==",
       "cpu": [
         "x64"
       ],
@@ -2961,9 +2961,9 @@
       }
     },
     "node_modules/@pwrs/cem-linux-arm64": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-arm64/-/cem-linux-arm64-0.2.14.tgz",
-      "integrity": "sha512-+NbvjhZh4D59xeZ1lreHn5CVE2Ik1kbpdCLWJOGh7cxR9G264I15FBExqGuD1GFH9dkkt5H0XlIfYQ15mjN83w==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-arm64/-/cem-linux-arm64-0.3.0.tgz",
+      "integrity": "sha512-ayGKg4hzjBukMoaD+BAh+JxiqclmRnPRFbdGamvaj8BG2QsW4AXelKPr/rWspn+c1kvBNy+rvbxV8gz9v3I18Q==",
       "cpu": [
         "arm64"
       ],
@@ -2977,9 +2977,9 @@
       }
     },
     "node_modules/@pwrs/cem-linux-x64": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-x64/-/cem-linux-x64-0.2.14.tgz",
-      "integrity": "sha512-5XDRR+nO7xEuR61AB4vp/4k/NBbH4rvTqGg7wiEpempRK4791zODodkzhQswCcfdEZDqD4c4q7FqtQX06bzOyg==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-x64/-/cem-linux-x64-0.3.0.tgz",
+      "integrity": "sha512-TdRvLwfrmnKD77j2Ltak7a/1/HQ/rjIraLqaAQ6yGs80eaddhI77FSdN4451oafGRU0HtzVGWfELRByoR1SM/A==",
       "cpu": [
         "x64"
       ],
@@ -2993,9 +2993,9 @@
       }
     },
     "node_modules/@pwrs/cem-win32-arm64": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-arm64/-/cem-win32-arm64-0.2.14.tgz",
-      "integrity": "sha512-t80RdOliVBT/rghUJKxEdDJtMnjRZhOcUFY9ET1DEvCcnpUZbXjnSllw53OcpQY5YXCq0GyhLNGBEgkZ1OpjMQ==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-arm64/-/cem-win32-arm64-0.3.0.tgz",
+      "integrity": "sha512-hCY6FiaHM4kn9v+ab39+DUcmGRy9D3Lm0DxMU3JPY+fybJWxY9KDCy4H/Gm/YBmsmXFIDQeyjCG2ZUp/NT3APA==",
       "cpu": [
         "arm64"
       ],
@@ -3010,9 +3010,9 @@
       }
     },
     "node_modules/@pwrs/cem-win32-x64": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-x64/-/cem-win32-x64-0.2.14.tgz",
-      "integrity": "sha512-dsL7MWn5JcTFSL1sI3O65ou6VP3cMntUc0pESaR0H1hwp9NpcI+It9cUgkjEZRASEZcglMkfUVrop0mDzinTBg==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-x64/-/cem-win32-x64-0.3.0.tgz",
+      "integrity": "sha512-95aBtvCqfgb0VsJ5dX3DQsHruCAx4CF/YWQ8gp92DxwqmUh6byfRRmu/+A3dATTVkMTz/uV+qO/EzoBfQS0zBw==",
       "cpu": [
         "x64"
       ],
diff --git a/package.json b/package.json
index aeaad72049..f231efe893 100644
--- a/package.json
+++ b/package.json
@@ -290,7 +290,7 @@
     "@lit/react": "^1.0.5",
     "@octokit/core": "^6.1.2",
     "@patternfly/patternfly": "^4.224.5",
-    "@pwrs/cem": "^0.2.14",
+    "@pwrs/cem": "^0.3.0",
     "@rhds/elements": "^1.4.5",
     "@types/koa__router": "^12.0.4",
     "@types/node": "^22.15.32",
@@ -316,10 +316,10 @@
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "^0.23.1",
     "@esbuild/linux-x64": "^0.23.1",
-    "@pwrs/cem-darwin-arm64": "^0.2.14",
-    "@pwrs/cem-darwin-x64": "^0.2.14",
-    "@pwrs/cem-linux-arm64": "^0.2.14",
-    "@pwrs/cem-linux-x64": "^0.2.14",
+    "@pwrs/cem-darwin-arm64": "^0.3.0",
+    "@pwrs/cem-darwin-x64": "^0.3.0",
+    "@pwrs/cem-linux-arm64": "^0.3.0",
+    "@pwrs/cem-linux-x64": "^0.3.0",
     "@rollup/rollup-darwin-arm64": "^4.21.0"
   },
   "workspaces": [
diff --git a/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs b/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs
index c7465d8db5..fd1be3b444 100644
--- a/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs
+++ b/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs
@@ -1,5 +1,5 @@
 // @ts-check
-const { join } = require('node:path');
+const { join, sep } = require('node:path');
 const { existsSync } = require('node:fs');
 const { glob } = require('glob');
 const { stat, rm } = require('node:fs/promises');
@@ -63,7 +63,7 @@ module.exports = function configFunction(eleventyConfig, pluginOpts = {}) {
     const options = { ...getPfeConfig(), ...pluginOpts };
     if (runMode === 'build') {
       const files = await glob(`${dir.output}/${options.site.componentSubpath}/*/demo/*`);
-      const htmls = files.filter(x => x.endsWith('.html') && !x.endsWith('/index.html'));
+      const htmls = files.filter(x => x.endsWith('.html') && !x.endsWith(`${sep}index.html`));
       for (const file of htmls) {
         const dir = file.replace(/\.html$/, '');
         if (await isDir(dir)) {
@@ -77,7 +77,7 @@ module.exports = function configFunction(eleventyConfig, pluginOpts = {}) {
   //            components/jazz-hands/demo/special-name/index.html
   // Here, we rewrite the subresource links so they point to the right files.
   eleventyConfig.addTransform('reroute-special-demo-subresources', function(content) {
-    if (this.inputPath.endsWith('/demos.html')) {
+    if (this.inputPath.endsWith(`${sep}demos.html`)) {
       const [, one, , three, four] = this.outputPath.split('/');
       if (one === 'components' && three === 'demo' && four !== 'index.html') {
         const cheerio = require('cheerio');
diff --git a/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts b/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts
index f12848a82f..d70a27f199 100644
--- a/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts
+++ b/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts
@@ -16,7 +16,7 @@ import type {
   Slot,
 } from 'custom-elements-manifest/schema';
 
-import { join, normalize } from 'node:path';
+import path, { join, normalize } from 'node:path';
 import { readFileSync } from 'node:fs';
 
 import { getAllPackages } from './get-all-packages.js';
@@ -314,14 +314,15 @@ export class Manifest {
       // strict removes all special characters from slug
       slug = slugify(slug, { strict: true, lower: true });
       const primaryElementName = deslugify(slug, options.rootDir);
-      const filePath =
-        demo.source?.href.replace(
-          options.sourceControlURLPrefix,
-          `${join(options.rootDir, options.elementsDir)}/`,
-        ) ?? '';
-      const [last = ''] = filePath.split('/').reverse();
+      const filePath = path.normalize(
+        path.posix.join(
+          options.rootDir,
+          options.elementsDir,
+          decodeURIComponent(demo.source?.href.replace(options.sourceControlURLPrefix, '') ?? ''),
+        ));
+      const [last = ''] = filePath.split(path.sep).reverse();
       const filename = last.replace('.html', '');
-      const isMainElementDemo = this.getTagNames().includes(filename);
+      const isMainElementDemo = filename === 'index';
       const title = isMainElementDemo ? options.aliases[tagName] ?? prettyTag(tagName) : last
           .replace(/(?:^|[-/\s])\w/g, x => x.toUpperCase())
           .replace(/-/g, ' ')
diff --git a/tools/pfe-tools/dev-server/plugins/dev-server-templates.ts b/tools/pfe-tools/dev-server/plugins/dev-server-templates.ts
index 43e0c915fc..5c49258dfb 100644
--- a/tools/pfe-tools/dev-server/plugins/dev-server-templates.ts
+++ b/tools/pfe-tools/dev-server/plugins/dev-server-templates.ts
@@ -3,7 +3,7 @@ import type { DemoRecord } from '../../custom-elements-manifest/lib/Manifest.js'
 import type { Context, Next } from 'koa';
 
 import { readFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
+import path, { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import nunjucks from 'nunjucks';
@@ -39,8 +39,7 @@ async function getDemos(config: PfeDevServerInternalConfig) {
               manifest.getDemoMetadata(tagName, config as PfeDevServerInternalConfig)
                   .filter(demo => demo.filePath?.includes(tagName))
                   .map(demo => {
-                    if (demo.filePath?.endsWith(`${tagName}.html`)
-                    || demo.filePath?.endsWith('/index.html')) {
+                    if (demo.filePath?.endsWith(`${path.sep}index.html`)) {
                       return {
                         ...demo,
                         permalink: `${dirname(demo.permalink)}/`,