@patternfly/elements 1.0.0

package/pf-card/BaseCard.css

@@ -0,0 +1,36 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+article {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+[part=header] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+[part=body] ::slotted(:not([slot]):first-of-type) {
+  margin-block-start: 0;
+}
+
+[part=body] ::slotted(:not([slot]):last-of-type) {
+  margin-block-end: 0;
+}
+
+[part=footer] {
+  display: flex;
+  gap: 0.5em;
+  inset-block-end: 0;
+}
+
+.empty {
+  display: none;
+}
+

package/pf-card/BaseCard.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+/**
+ * This element creates a header, body, and footer region in which to place
+ * content or other components.
+ *
+ * @summary Gives a preview of information in a small layout
+ *
+ * @slot header
+ *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).
+ *       An icon, svg, or use of the icon component are also valid in this region.
+ * @slot - Any content that is not designated for the header or footer slot, will go to this slot.
+ * @slot footer
+ *       Use this slot for anything that you want to be stuck to the base of the card.
+ *
+ * @csspart header - The container for *header* content
+ * @csspart body - The container for *body* content
+ * @csspart footer - The container for *footer* content
+ */
+export declare abstract class BaseCard extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    protected slots: SlotController;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/pf-card/BaseCard.js

@@ -0,0 +1,51 @@
+import { LitElement, html } from 'lit';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { css } from "lit";
+const style = css `:host {\n  display: flex;\n  flex-direction: column;\n}\n\narticle {\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n[part=header] {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n[part=body] ::slotted(:not([slot]):first-of-type) {\n  margin-block-start: 0;\n}\n\n[part=body] ::slotted(:not([slot]):last-of-type) {\n  margin-block-end: 0;\n}\n\n[part=footer] {\n  display: flex;\n  gap: 0.5em;\n  inset-block-end: 0;\n}\n\n.empty {\n  display: none;\n}\n\n`;
+/**
+ * This element creates a header, body, and footer region in which to place
+ * content or other components.
+ *
+ * @summary Gives a preview of information in a small layout
+ *
+ * @slot header
+ *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).
+ *       An icon, svg, or use of the icon component are also valid in this region.
+ * @slot - Any content that is not designated for the header or footer slot, will go to this slot.
+ * @slot footer
+ *       Use this slot for anything that you want to be stuck to the base of the card.
+ *
+ * @csspart header - The container for *header* content
+ * @csspart body - The container for *body* content
+ * @csspart footer - The container for *footer* content
+ */
+export class BaseCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.slots = new SlotController(this, 'header', null, 'footer');
+    }
+    render() {
+        return html `
+      <article>
+        <header id="header"
+                part="header"
+                class="${classMap({ empty: !this.slots.hasSlotted('header') })}">
+          <slot name="header"></slot>
+        </header>
+        <div id="body"
+             part="body"
+             class="${classMap({ empty: !this.querySelector(':not([slot])') })}">
+          <slot></slot>
+        </div>
+        <footer id="footer"
+                part="footer"
+                class="${classMap({ empty: !this.slots.hasSlotted('footer') })}">
+          <slot name="footer"></slot>
+        </footer>
+      </article>
+    `;
+    }
+}
+BaseCard.styles = [style];
+//# sourceMappingURL=BaseCard.js.map

package/pf-card/BaseCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCard.js","sourceRoot":"","sources":["BaseCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;;;AAIvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU;IAAjD;;QAGY,UAAK,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAuBvE,CAAC;IArBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;sBAKxD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC;;;;;yBAKrD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;KAIzE,CAAC;IACJ,CAAC;;AAxBe,eAAM,GAAG,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import { LitElement, html } from 'lit';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './BaseCard.css';\n\n/**\n * This element creates a header, body, and footer region in which to place\n * content or other components.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n *       An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n *       Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n */\nexport abstract class BaseCard extends LitElement {\n  static readonly styles = [style];\n\n  protected slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    return html`\n      <article>\n        <header id=\"header\"\n                part=\"header\"\n                class=\"${classMap({ empty: !this.slots.hasSlotted('header') })}\">\n          <slot name=\"header\"></slot>\n        </header>\n        <div id=\"body\"\n             part=\"body\"\n             class=\"${classMap({ empty: !this.querySelector(':not([slot])') })}\">\n          <slot></slot>\n        </div>\n        <footer id=\"footer\"\n                part=\"footer\"\n                class=\"${classMap({ empty: !this.slots.hasSlotted('footer') })}\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </article>\n    `;\n  }\n}\n"]}

package/pf-card/demo/demo.css

@@ -0,0 +1,44 @@
+[data-demo] {
+  display: contents;
+}
+
+main {
+  padding: 2em;
+  background: #eeeeee;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content 1fr;
+}
+
+@media (min-width: 800px) {
+  main {
+    grid-template-columns: 1fr 4fr;
+    grid-template-rows: 1fr;
+  }
+}
+
+form {
+  display: grid;
+  grid-template-columns: max-content auto;
+  grid-auto-rows: max-content;
+  gap: 1em;
+}
+
+pf-card {
+  max-width: 50%;
+  margin: 0 auto;
+}
+
+.resize {
+  padding: 2em;
+  resize: vertical;
+  overflow: auto;
+  min-height: 40vh;
+  background: repeating-linear-gradient(
+    45deg,
+    #fff,
+    #fff 10px,
+    #eee 10px,
+    #eee 20px
+  );
+}

package/pf-card/demo/pf-card.js

@@ -0,0 +1,23 @@
+import '@patternfly/elements/pf-card/pf-card.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-switch/pf-switch.js';
+
+const form = document.getElementById('card-settings');
+const card = document.querySelector('pf-card');
+
+form.addEventListener('change', function(event) {
+  const { checked } = event.target;
+  const { attribute } = event.target.dataset;
+  switch (attribute) {
+    case 'flat':
+    case 'rounded':
+    case 'plain':
+    case 'full-height':
+      card.toggleAttribute(attribute, checked);
+      break;
+    case 'size':
+      card.setAttribute('size', form.querySelector('label[for="size"]:not([hidden])').textContent.toLowerCase());
+      break;
+  }
+});
+

package/pf-card/pf-card.css

@@ -0,0 +1,73 @@
+:host {
+  background-color: var(--pf-c-card--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
+  box-shadow: var(--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)));
+}
+
+:host([size="compact"]) {
+  --_pf-c-card__body--FontSize: var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));
+  --_pf-c-card__footer--FontSize: var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));
+  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));
+  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));
+  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));
+  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem));
+}
+
+:host([size="large"]) {
+  --pf-c-card__title--FontSize: var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));
+  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));
+  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));
+  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));
+  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));
+  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));
+}
+
+:host([flat]) {
+  --pf-c-card--BoxShadow: none;
+  border: var(--pf-c-card--m-flat--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid var(--pf-c-card--m-flat--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+}
+
+:host([plain]) {
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow, none);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor, transparent);
+}
+
+:host([rounded]) {
+  border-radius: var(--pf-c-card--m-rounded--BorderRadius, var(--pf-global--BorderRadius--sm, 3px));
+}
+
+:host([full-height]) {
+  height: var(--pf-c-card--m-full-height--Height, 100%);
+  --_pf-c-card__body--FullHeight--Flex: 1 1 auto;
+}
+
+[part="header"],
+[part="body"],
+[part="footer"] {
+  padding-inline-start: var(--_pf-c-card--child--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
+  padding-inline-end: var(--_pf-c-card--child--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));
+  padding-block-end: var(--_pf-c-card--child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));
+}
+
+[part="body"] {
+  font-size: var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));
+  flex: var(--_pf-c-card__body--FullHeight--Flex, initial);
+}
+
+header {
+  padding-block-start: var(--_pf-c-card--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));
+  padding-block-end: var(--_pf-c-card__title--not--last-child--PaddingBottom, var(--pf-global--spacer--md, 1rem));
+}
+
+header ::slotted(*) {
+  font-family: var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif));
+  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem));
+  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700));
+  margin-block: 0;
+}
+
+[part="footer"] {
+  font-size: var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));
+  margin-block-start: auto;
+}
+

package/pf-card/pf-card.d.ts

@@ -0,0 +1,70 @@
+import { BaseCard } from './BaseCard.js';
+/**
+ * This element creates a header, body, and footer region in which to place
+ * content or other components.
+ *
+ * @summary Gives a preview of information in a small layout
+ *
+ * @slot header
+ *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).
+ *       An icon, svg, or use of the icon component are also valid in this region.
+ * @slot - Any content that is not designated for the header or footer slot, will go to this slot.
+ * @slot footer
+ *       Use this slot for anything that you want to be stuck to the base of the card.
+ *
+ * @csspart header - The container for *header* content
+ * @csspart body - The container for *body* content
+ * @csspart footer - The container for *footer* content
+ *
+ *
+ * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}
+ * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}
+ * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact__footer--FontSize {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--first-child--PaddingTop {@default `1.5rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingRight {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingBottom {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingLeft {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact__title--not--last-child--PaddingBottom {@default `.5rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large__title--FontSize {@default `1.25rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--first-child--PaddingTop {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingRight {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingBottom {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingLeft {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large__title--not--last-child--PaddingBottom {@default `1.5rem`}
+ * @cssproperty {<color>} --pf-c-card--m-flat--BorderWidth {@default `1px solid #d2d2d2`}
+ * @cssproperty {<color>} --pf-c-card--m-plain--BoxShadow {@default `none`}
+ * @cssproperty {<color>} --pf-c-card--m-plain--BackgroundColor {@default `transparent`}
+ * @cssproperty {<color>} --pf-c-card--m-rounded--BorderRadius {@default `3px`}
+ * @cssproperty {<color>} --pf-c-card--m-full-height--Height {@default `100%`}
+ * @cssproperty {<color>} --pf-c-card__title--FontFamily {@default `"RedHatDisplayUpdated", helvetica, arial, sans-serif`}
+ * @cssproperty {<color>} --pf-c-card__title--FontSize {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}
+ */
+export declare class PfCard extends BaseCard {
+    static readonly styles: import("lit").CSSResult[];
+    /**
+     * Optionally provide a size for the card and the card contents.
+     * The default is set to `undefined` and provides default styles.
+     * Compact provides styles which decreases the padding between the sections.
+     * Large provides styles which increases the padding between the sections and the font size for the title, header, and footer.
+     */
+    size?: 'compact' | 'large';
+    /**
+    * Optionally apply a border radius for the drop shadow and/or border.
+    */
+    rounded: boolean;
+    /**
+   * Optionally allow the card to take up the full height of the parent element.
+   */
+    fullHeight: boolean;
+    /**
+     * Optionally remove the border on the card container.
+     */
+    plain: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-card': PfCard;
+    }
+}

package/pf-card/pf-card.js

@@ -0,0 +1,82 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { css } from "lit";
+const style = css `:host {\n  background-color: var(--pf-c-card--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  box-shadow: var(--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)));\n}\n\n:host([size="compact"]) {\n  --_pf-c-card__body--FontSize: var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));\n  --_pf-c-card__footer--FontSize: var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem));\n}\n\n:host([size="large"]) {\n  --pf-c-card__title--FontSize: var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n:host([flat]) {\n  --pf-c-card--BoxShadow: none;\n  border: var(--pf-c-card--m-flat--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid var(--pf-c-card--m-flat--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([plain]) {\n  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow, none);\n  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor, transparent);\n}\n\n:host([rounded]) {\n  border-radius: var(--pf-c-card--m-rounded--BorderRadius, var(--pf-global--BorderRadius--sm, 3px));\n}\n\n:host([full-height]) {\n  height: var(--pf-c-card--m-full-height--Height, 100%);\n  --_pf-c-card__body--FullHeight--Flex: 1 1 auto;\n}\n\n[part="header"],\n[part="body"],\n[part="footer"] {\n  padding-inline-start: var(--_pf-c-card--child--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  padding-inline-end: var(--_pf-c-card--child--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card--child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="body"] {\n  font-size: var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));\n  flex: var(--_pf-c-card__body--FullHeight--Flex, initial);\n}\n\nheader {\n  padding-block-start: var(--_pf-c-card--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card__title--not--last-child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n}\n\nheader ::slotted(*) {\n  font-family: var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif));\n  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700));\n  margin-block: 0;\n}\n\n[part="footer"] {\n  font-size: var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));\n  margin-block-start: auto;\n}\n\n`;
+import { BaseCard } from './BaseCard.js';
+/**
+ * This element creates a header, body, and footer region in which to place
+ * content or other components.
+ *
+ * @summary Gives a preview of information in a small layout
+ *
+ * @slot header
+ *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).
+ *       An icon, svg, or use of the icon component are also valid in this region.
+ * @slot - Any content that is not designated for the header or footer slot, will go to this slot.
+ * @slot footer
+ *       Use this slot for anything that you want to be stuck to the base of the card.
+ *
+ * @csspart header - The container for *header* content
+ * @csspart body - The container for *body* content
+ * @csspart footer - The container for *footer* content
+ *
+ *
+ * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}
+ * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}
+ * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact__footer--FontSize {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--first-child--PaddingTop {@default `1.5rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingRight {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingBottom {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingLeft {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card--size-compact__title--not--last-child--PaddingBottom {@default `.5rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large__title--FontSize {@default `1.25rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--first-child--PaddingTop {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingRight {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingBottom {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingLeft {@default `2rem`}
+ * @cssproperty {<color>} --pf-c-card--size-large__title--not--last-child--PaddingBottom {@default `1.5rem`}
+ * @cssproperty {<color>} --pf-c-card--m-flat--BorderWidth {@default `1px solid #d2d2d2`}
+ * @cssproperty {<color>} --pf-c-card--m-plain--BoxShadow {@default `none`}
+ * @cssproperty {<color>} --pf-c-card--m-plain--BackgroundColor {@default `transparent`}
+ * @cssproperty {<color>} --pf-c-card--m-rounded--BorderRadius {@default `3px`}
+ * @cssproperty {<color>} --pf-c-card--m-full-height--Height {@default `100%`}
+ * @cssproperty {<color>} --pf-c-card__title--FontFamily {@default `"RedHatDisplayUpdated", helvetica, arial, sans-serif`}
+ * @cssproperty {<color>} --pf-c-card__title--FontSize {@default `1rem`}
+ * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}
+ */
+let PfCard = class PfCard extends BaseCard {
+    constructor() {
+        super(...arguments);
+        /**
+        * Optionally apply a border radius for the drop shadow and/or border.
+        */
+        this.rounded = false;
+        /**
+       * Optionally allow the card to take up the full height of the parent element.
+       */
+        this.fullHeight = false;
+        /**
+         * Optionally remove the border on the card container.
+         */
+        this.plain = false;
+    }
+};
+PfCard.styles = [...BaseCard.styles, style];
+__decorate([
+    property({ reflect: true })
+], PfCard.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfCard.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-height' })
+], PfCard.prototype, "fullHeight", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfCard.prototype, "plain", void 0);
+PfCard = __decorate([
+    customElement('pf-card')
+], PfCard);
+export { PfCard };
+//# sourceMappingURL=pf-card.js.map

package/pf-card/pf-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card.js","sourceRoot":"","sources":["pf-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;;;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAWL;;UAEE;QAC0C,YAAO,GAAG,KAAK,CAAC;QAE5D;;SAEC;QACqE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;IAC5D,CAAC;;AAxBiB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAQxB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA4B;AAKZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAiB;AAKU;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CAAoB;AAK7C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAxB/C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAyBlB;SAzBY,MAAM","sourcesContent":["import { customElement, property } from 'lit/decorators.js';\n\nimport style from './pf-card.css';\nimport { BaseCard } from './BaseCard.js';\n\n/**\n * This element creates a header, body, and footer region in which to place\n * content or other components.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n *       An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n *       Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n *\n *\n * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}\n * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__footer--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--first-child--PaddingTop {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingRight {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingBottom {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingLeft {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__title--not--last-child--PaddingBottom {@default `.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--FontSize {@default `1.25rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--first-child--PaddingTop {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingRight {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingBottom {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingLeft {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--not--last-child--PaddingBottom {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--m-flat--BorderWidth {@default `1px solid #d2d2d2`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BoxShadow {@default `none`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BackgroundColor {@default `transparent`}\n * @cssproperty {<color>} --pf-c-card--m-rounded--BorderRadius {@default `3px`}\n * @cssproperty {<color>} --pf-c-card--m-full-height--Height {@default `100%`}\n * @cssproperty {<color>} --pf-c-card__title--FontFamily {@default `\"RedHatDisplayUpdated\", helvetica, arial, sans-serif`}\n * @cssproperty {<color>} --pf-c-card__title--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}\n */\n@customElement('pf-card')\nexport class PfCard extends BaseCard {\n  static readonly styles = [...BaseCard.styles, style];\n\n  /**\n   * Optionally provide a size for the card and the card contents.\n   * The default is set to `undefined` and provides default styles.\n   * Compact provides styles which decreases the padding between the sections.\n   * Large provides styles which increases the padding between the sections and the font size for the title, header, and footer.\n   */\n  @property({ reflect: true }) size?: 'compact' | 'large';\n\n  /**\n  * Optionally apply a border radius for the drop shadow and/or border.\n  */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  /**\n * Optionally allow the card to take up the full height of the parent element.\n */\n  @property({ type: Boolean, reflect: true, attribute: 'full-height' }) fullHeight = false;\n\n  /**\n   * Optionally remove the border on the card container.\n   */\n  @property({ type: Boolean, reflect: true }) plain = false;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-card': PfCard;\n  }\n}\n"]}

package/pf-card/test/pf-card.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-card/test/pf-card.e2e.js

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-card';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-card.e2e.js.map

package/pf-card/test/pf-card.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card.e2e.js","sourceRoot":"","sources":["pf-card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-card';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-card/test/pf-card.spec.d.ts

@@ -0,0 +1 @@
+import '@patternfly/pfe-tools/test/stub-logger.js';

package/pf-card/test/pf-card.spec.js

@@ -0,0 +1,153 @@
+import { expect, html, aTimeout } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import '@patternfly/pfe-tools/test/stub-logger.js';
+import { PfCard } from '@patternfly/elements/pf-card/pf-card.js';
+describe('<pf-card>', function () {
+    it('should upgrade', async function () {
+        expect(await createFixture(html `<pf-card></pf-card>`))
+            .to.be.an.instanceof(customElements.get('pf-card'))
+            .and
+            .to.be.an.instanceof(PfCard);
+    });
+    describe('with header and footer content', function () {
+        let element;
+        let origHeight;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-card id="card1">
+          <h2 slot="header">Card 1</h2>
+          <p>This is pf-card.</p>
+          <span slot="footer">Text in footer</span>
+        </pf-card>`);
+        });
+        beforeEach(function () {
+            const { height } = element.getBoundingClientRect();
+            origHeight = height;
+        });
+        describe('size', function () {
+            describe('unset', function () {
+                it('should have default sizing for card parts', function () {
+                    expect(getComputedStyle(element.querySelector('p'), 'body font-size').getPropertyValue('font-size')).to.equal('16px');
+                    expect(getComputedStyle(element.querySelector('[slot=footer]'), 'footer font-size').getPropertyValue('font-size')).to.equal('16px');
+                });
+            });
+            describe('compact', function () {
+                beforeEach(async function () {
+                    element.setAttribute('size', 'compact');
+                });
+                it('should be smaller', function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(origHeight, 'height').to.be.greaterThan(height);
+                });
+            });
+            describe('large', function () {
+                beforeEach(async function () {
+                    element.setAttribute('size', 'large');
+                });
+                it('should have larger font sizes for body, footer, more padding for header', function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(origHeight, 'height').to.be.lessThan(height);
+                    expect(getComputedStyle(element.querySelector('p'), 'body font-size').getPropertyValue('font-size'))
+                        .to.equal('16px');
+                    expect(getComputedStyle(element.querySelector('[slot=footer]'), 'footer font-size').getPropertyValue('font-size'))
+                        .to.equal('16px');
+                });
+            });
+        });
+        describe('rounded', function () {
+            describe('unset', function () {
+                it('should have default border radius', function () {
+                    expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('0px');
+                });
+            });
+            describe('is set', function () {
+                it('should have 3px border radius', async function () {
+                    element.setAttribute('rounded', '');
+                    await element.updateComplete;
+                    expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('3px');
+                });
+            });
+        });
+        describe('flat', function () {
+            describe('unset', function () {
+                it('should have default box shadow and border (none)', function () {
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.equal('none');
+                    expect(getComputedStyle(element).getPropertyValue('border')).to.equal('0px none rgb(0, 0, 0)');
+                });
+            });
+            describe('is set', function () {
+                it('should not have a box shadow and should have an added border', async function () {
+                    element.setAttribute('flat', '');
+                    await element.updateComplete;
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');
+                    expect(getComputedStyle(element).getPropertyValue('border')).not.to.equal('none');
+                });
+            });
+        });
+        describe('full-height', function () {
+            describe('is not set', function () {
+                it('should not be taller', async function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(height).to.equal(origHeight);
+                });
+            });
+            describe('is set', function () {
+                beforeEach(async function () {
+                    element.toggleAttribute('full-height', true);
+                    await element.updateComplete;
+                });
+                it('should be taller', async function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(height).to.be.greaterThan(origHeight);
+                });
+            });
+        });
+        describe('plain', function () {
+            describe('unset', function () {
+                it('should have the default box shadow and background-color', function () {
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.be.undefined;
+                    expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgb(255, 255, 255)');
+                });
+            });
+            describe('is set', function () {
+                it('should have transparent background color and no box shadow', async function () {
+                    element.setAttribute('plain', '');
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');
+                    expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgba(0, 0, 0, 0)');
+                });
+            });
+        });
+        describe('accessible', function () {
+            it('should be accessible in both the light and shadow dom', async function () {
+                expect(element).to.be.accessible();
+            });
+            // TODO: this has been flaky. revisit later
+            // it('should have an article element wrapper in the shadow dom', async function() {
+            //   const snapshot = await a11ySnapshot();
+            //   const foundNode = findAccessibilityNode(snapshot, node => node.role === 'WebArea');
+            //   expect(foundNode, 'A node with the supplied name has been found.').to.not.be.null;
+            // });
+        });
+    });
+    it(`should render a header and footer when content for those slots are added dynamically`, async function () {
+        const element = await createFixture(html `
+      <pf-card id="dynamicHeaderFooter">
+        This is the card
+      </pf-card>`);
+        const header = document.createElement('h2');
+        header.setAttribute('slot', 'header');
+        header.textContent = 'Card Header';
+        const footer = document.createElement('div');
+        footer.setAttribute('slot', 'footer');
+        footer.textContent = 'This is the footer';
+        element.prepend(header);
+        element.appendChild(footer);
+        await aTimeout(50);
+        const cardHeaderSlot = element.shadowRoot.querySelector('slot[name="header"]');
+        const cardFooterSlot = element.shadowRoot.querySelector('slot[name="footer"]');
+        await aTimeout(50);
+        expect(cardHeaderSlot.assignedNodes().length).to.equal(1);
+        expect(cardFooterSlot.assignedNodes().length).to.equal(1);
+    });
+});
+//# sourceMappingURL=pf-card.spec.js.map

package/pf-card/test/pf-card.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card.spec.js","sourceRoot":"","sources":["pf-card.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, aTimeout } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nimport { PfCard } from '@patternfly/elements/pf-card/pf-card.js';\n\ndescribe('<pf-card>', function() {\n  it('should upgrade', async function() {\n    expect(await createFixture<PfCard>(html`<pf-card></pf-card>`))\n      .to.be.an.instanceof(customElements.get('pf-card'))\n      .and\n      .to.be.an.instanceof(PfCard);\n  });\n\n  describe('with header and footer content', function() {\n    let element: PfCard;\n    let origHeight: number;\n\n    beforeEach(async function() {\n      element = await createFixture<PfCard>(html`\n        <pf-card id=\"card1\">\n          <h2 slot=\"header\">Card 1</h2>\n          <p>This is pf-card.</p>\n          <span slot=\"footer\">Text in footer</span>\n        </pf-card>`);\n    });\n\n    beforeEach(function() {\n      const { height } = element.getBoundingClientRect();\n      origHeight = height;\n    });\n\n    describe('size', function() {\n      describe('unset', function() {\n        it('should have default sizing for card parts', function() {\n          expect(getComputedStyle(element.querySelector('p')!, 'body font-size').getPropertyValue('font-size')).to.equal('16px');\n          expect(getComputedStyle(element.querySelector('[slot=footer]')!, 'footer font-size').getPropertyValue('font-size')).to.equal('16px');\n        });\n      });\n\n      describe('compact', function() {\n        beforeEach(async function() {\n          element.setAttribute('size', 'compact');\n        });\n        it('should be smaller', function() {\n          const { height } = element.getBoundingClientRect();\n          expect(origHeight, 'height').to.be.greaterThan(height);\n        });\n      });\n\n      describe('large', function() {\n        beforeEach(async function() {\n          element.setAttribute('size', 'large');\n        });\n        it('should have larger font sizes for body, footer, more padding for header', function() {\n          const { height } = element.getBoundingClientRect();\n          expect(origHeight, 'height').to.be.lessThan(height);\n          expect(getComputedStyle(element.querySelector('p')!, 'body font-size').getPropertyValue('font-size'))\n            .to.equal('16px');\n          expect(getComputedStyle(element.querySelector('[slot=footer]')!, 'footer font-size').getPropertyValue('font-size'))\n            .to.equal('16px');\n        });\n      });\n    });\n\n    describe('rounded', function() {\n      describe('unset', function() {\n        it('should have default border radius', function() {\n          expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('0px');\n        });\n      });\n\n      describe('is set', function() {\n        it('should have 3px border radius', async function() {\n          element.setAttribute('rounded', '');\n          await element.updateComplete;\n          expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('3px');\n        });\n      });\n    });\n\n    describe('flat', function() {\n      describe('unset', function() {\n        it('should have default box shadow and border (none)', function() {\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.equal('none');\n          expect(getComputedStyle(element).getPropertyValue('border')).to.equal('0px none rgb(0, 0, 0)');\n        });\n      });\n\n      describe('is set', function() {\n        it('should not have a box shadow and should have an added border', async function() {\n          element.setAttribute('flat', '');\n          await element.updateComplete;\n\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');\n          expect(getComputedStyle(element).getPropertyValue('border')).not.to.equal('none');\n        });\n      });\n    });\n\n    describe('full-height', function() {\n      describe('is not set', function() {\n        it('should not be taller', async function() {\n          const { height } = element.getBoundingClientRect();\n          expect(height).to.equal(origHeight);\n        });\n      });\n\n      describe('is set', function() {\n        beforeEach(async function() {\n          element.toggleAttribute('full-height', true);\n          await element.updateComplete;\n        });\n\n        it('should be taller', async function() {\n          const { height } = element.getBoundingClientRect();\n          expect(height).to.be.greaterThan(origHeight);\n        });\n      });\n    });\n\n    describe('plain', function() {\n      describe('unset', function() {\n        it('should have the default box shadow and background-color', function() {\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.be.undefined;\n          expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgb(255, 255, 255)');\n        });\n      });\n      describe('is set', function() {\n        it('should have transparent background color and no box shadow', async function() {\n          element.setAttribute('plain', '');\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');\n          expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgba(0, 0, 0, 0)');\n        });\n      });\n    });\n\n    describe('accessible', function() {\n      it('should be accessible in both the light and shadow dom', async function() {\n        expect(element).to.be.accessible();\n      });\n      // TODO: this has been flaky. revisit later\n      // it('should have an article element wrapper in the shadow dom', async function() {\n      //   const snapshot = await a11ySnapshot();\n      //   const foundNode = findAccessibilityNode(snapshot, node => node.role === 'WebArea');\n      //   expect(foundNode, 'A node with the supplied name has been found.').to.not.be.null;\n      // });\n    });\n  });\n\n  it(`should render a header and footer when content for those slots are added dynamically`, async function() {\n    const element = await createFixture<PfCard>(html`\n      <pf-card id=\"dynamicHeaderFooter\">\n        This is the card\n      </pf-card>`);\n\n    const header = document.createElement('h2');\n    header.setAttribute('slot', 'header');\n    header.textContent = 'Card Header';\n\n    const footer = document.createElement('div');\n    footer.setAttribute('slot', 'footer');\n    footer.textContent = 'This is the footer';\n\n    element.prepend(header);\n    element.appendChild(footer);\n\n    await aTimeout(50);\n\n    const cardHeaderSlot =\n      element.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"header\"]')!;\n    const cardFooterSlot =\n      element.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"footer\"]')!;\n\n    await aTimeout(50);\n\n    expect(cardHeaderSlot.assignedNodes().length).to.equal(1);\n    expect(cardFooterSlot.assignedNodes().length).to.equal(1);\n  });\n});\n"]}