docs: new demo syntax

.changeset/cold-tools-follow.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/elements": patch
+---
+
+Use inline slot documentation instead of JSDoc
+

.changeset/little-lizards-jog.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+Adjust dev server for new cem output
+

docs/components/demos.11tydata.cjs

@@ -1,24 +1,9 @@
-const { dirname } = require('path');
 module.exports = {
   templateEngineOverride: 'njk',
   permalink: '{{ demo.permalink }}',
   pagination: {
     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),
   },
 };

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

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}}/

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));
 }
 

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"

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,

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 {