@patternfly/elements 3.0.1 → 4.0.0

package/pf-card/pf-card.css

@@ -1,73 +1,202 @@
 :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)));
+	--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--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);
+	--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+	--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--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);
+	--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);
+	--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+	--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
+	--pf-c-card--m-hoverable--hover--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));
+	--pf-c-card--m-selectable--hover--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));
+	--pf-c-card--m-selectable--focus--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));
+	--pf-c-card--m-selectable--active--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));
+	--pf-c-card--m-selectable--m-selected--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));
+	--pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg, 3px);
+	--pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-card--m-hoverable-raised--hover--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));
+	--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--before--Right: 0;
+	--pf-c-card--m-selectable-raised--before--Bottom: 0;
+	--pf-c-card--m-selectable-raised--before--Left: 0;
+	--pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl, 4px);
+	--pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
+	--pf-c-card--m-selectable-raised--before--Transition: none;
+	--pf-c-card--m-selectable-raised--before--ScaleY: 1;
+	--pf-c-card--m-selectable-raised--before--TranslateY: 0;
+	--pf-c-card--m-selectable-raised--hover--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));
+	--pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--focus--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));
+	--pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--active--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));
+	--pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-card--m-selectable-raised--m-selected-raised--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));
+	--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
+	--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
+	--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+	--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs, 100);
+	--pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
+	--pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);
+	--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);
+	--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--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);
+	--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+	--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);
+	--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);
+	--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	--pf-c-card--m-full-height--Height: 100%;
+	--pf-c-card--m-plain--BoxShadow: none;
+	--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);
+	--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
+	--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100, #06c);
+  display: flex;
+  flex-direction: column;
+	background-color: var(--pf-c-card--BackgroundColor);
+	box-shadow: var(--pf-c-card--BoxShadow);
 }
 
-: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));
+[hidden],
+.empty {
+  display: none !important;
 }
 
-: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));
+header {
+  padding-block-start: var(--pf-c-card--first-child--PaddingTop);
+  padding-block-end: var(--pf-c-card__title--not--last-child--PaddingBottom);
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
 }
 
-: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));
-}
+header ::slotted(*) {
+  margin-block: 0 !important;
 
-: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);
+  font-family: var(--pf-c-card__title--FontFamily) !important;
+  font-size: var(--pf-c-card__title--FontSize) !important;
+  font-weight: var(--pf-c-card__title--FontWeight) !important;
 }
 
-:host([rounded]) {
-  border-radius: var(--pf-c-card--m-rounded--BorderRadius, var(--pf-global--BorderRadius--sm, 3px));
+header ::slotted(pf-dropdown) {
+  margin-inline-start: auto;
 }
 
-:host([full-height]) {
-  height: var(--pf-c-card--m-full-height--Height, 100%);
-  --_pf-c-card__body--FullHeight--Flex: 1 1 auto;
+article {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 [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));
+  padding-inline-start: var(--pf-c-card--child--PaddingLeft);
+  padding-inline-end: var(--pf-c-card--child--PaddingRight);
+  padding-block-end: var(--pf-c-card--child--PaddingBottom);
+}
+
+#title {
+  display: block;
+  flex: 1 0 100%;
+  padding-block-start: var(--pf-c-card__title--not--last-child--PaddingBottom);
 }
 
 [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);
+  font-size: var(--pf-c-card__body--FontSize);
+  flex: var(--pf-c-card__body--FullHeight--Flex);
 }
 
-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));
+[part="body"] ::slotted(:not([slot]):first-of-type) {
+  margin-block-start: 0 !important;
 }
 
-header ::slotted(*) {
-  font-family: var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif)) !important;
-  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem)) !important;
-  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700)) !important;
-  margin-block: 0 !important;
+[part="body"] ::slotted(:not([slot]):last-of-type) {
+  margin-block-end: 0 !important;
 }
 
 [part="footer"] {
-  font-size: var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));
   margin-block-start: auto;
+  display: flex;
+  gap: 0.5em;
+  inset-block-end: 0;
+  font-size: var(--pf-c-card__footer--FontSize);
+}
+
+:host([size="compact"]) {
+	--pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
+	--pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
+	--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);
+	--pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);
+	--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);
+	--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);
+	--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);
+	--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
+}
+
+:host([size="large"]) {
+	--pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
+	--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
+	--pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
+	--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
+	--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);
+	--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);
+	--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);
+}
+
+:host([flat]) {
+  --pf-c-card--BoxShadow: none;
+  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
+}
+
+:host([plain]) {
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
+}
+
+:host([rounded]) {
+  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
+}
+
+:host([full-height]) {
+  height: var(--pf-c-card--m-full-height--Height);
+  --pf-c-card__body--FullHeight--Flex: 1 1 auto;
 }
 

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

@@ -1,50 +1,52 @@
-import { BaseCard } from './BaseCard.js';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * A **card** is a square or rectangular container that can contain any kind of content.
  * Cards symbolize units of information, and each one acts as an entry point for
  * users to access more details. For example, in dashboards and catalog views, cards
  * 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
- *       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.
+ *       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
- *       Use this slot for anything that you want to be stuck to the base of the card.
- *
+ *       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
- *
- *
- * @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`}
+ * @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]
  */
-export declare class PfCard extends BaseCard {
+export declare class PfCard extends LitElement {
+    #private;
     static readonly styles: CSSStyleSheet[];
     /**
      * Optionally provide a size for the card and the card contents.
@@ -54,17 +56,18 @@ export declare class PfCard extends BaseCard {
      */
     size?: 'compact' | 'large';
     /**
-    * Optionally apply a border radius for the drop shadow and/or border.
-    */
+     * 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.
-   */
+     * 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;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-card/pf-card.js

@@ -1,72 +1,55 @@
-import { __decorate } from "tslib";
+var _PfCard_slots;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.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)) !important;\n  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem)) !important;\n  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700)) !important;\n  margin-block: 0 !important;\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';
-/**
- * A **card** is a square or rectangular container that can contain any kind of content.
- * Cards symbolize units of information, and each one acts as an entry point for
- * users to access more details. For example, in dashboards and catalog views, cards
- * 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
- *       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 {
+const style = css `:host {\n\t--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--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\t--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);\n\t--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold, 700);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card__body--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);\n\t--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));\n\t--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;\n\t--pf-c-card--m-hoverable--hover--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));\n\t--pf-c-card--m-selectable--hover--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));\n\t--pf-c-card--m-selectable--focus--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));\n\t--pf-c-card--m-selectable--active--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));\n\t--pf-c-card--m-selectable--m-selected--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));\n\t--pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-card--m-hoverable-raised--hover--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));\n\t--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--before--Right: 0;\n\t--pf-c-card--m-selectable-raised--before--Bottom: 0;\n\t--pf-c-card--m-selectable-raised--before--Left: 0;\n\t--pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl, 4px);\n\t--pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;\n\t--pf-c-card--m-selectable-raised--before--Transition: none;\n\t--pf-c-card--m-selectable-raised--before--ScaleY: 1;\n\t--pf-c-card--m-selectable-raised--before--TranslateY: 0;\n\t--pf-c-card--m-selectable-raised--hover--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));\n\t--pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--focus--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));\n\t--pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--active--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));\n\t--pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--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));\n\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);\n\t--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));\n\t--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs, 100);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;\n\t--pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);\n\t--pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-card--m-non-selectable-raised--before--ScaleY: 2;\n\t--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);\n\t--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n\t--pf-c-card--m-full-height--Height: 100%;\n\t--pf-c-card--m-plain--BoxShadow: none;\n\t--pf-c-card--m-plain--BackgroundColor: transparent;\n\t--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;\n\t--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100, #06c);\n  display: flex;\n  flex-direction: column;\n\tbackground-color: var(--pf-c-card--BackgroundColor);\n\tbox-shadow: var(--pf-c-card--BoxShadow);\n}\n\n[hidden],\n.empty {\n  display: none !important;\n}\n\nheader {\n  padding-block-start: var(--pf-c-card--first-child--PaddingTop);\n  padding-block-end: var(--pf-c-card__title--not--last-child--PaddingBottom);\n  display: flex;\n  flex-flow: row wrap;\n  align-items: center;\n}\n\nheader ::slotted(*) {\n  margin-block: 0 !important;\n\n  font-family: var(--pf-c-card__title--FontFamily) !important;\n  font-size: var(--pf-c-card__title--FontSize) !important;\n  font-weight: var(--pf-c-card__title--FontWeight) !important;\n}\n\nheader ::slotted(pf-dropdown) {\n  margin-inline-start: auto;\n}\n\narticle {\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n[part="header"],\n[part="body"],\n[part="footer"] {\n  padding-inline-start: var(--pf-c-card--child--PaddingLeft);\n  padding-inline-end: var(--pf-c-card--child--PaddingRight);\n  padding-block-end: var(--pf-c-card--child--PaddingBottom);\n}\n\n#title {\n  display: block;\n  flex: 1 0 100%;\n  padding-block-start: var(--pf-c-card__title--not--last-child--PaddingBottom);\n}\n\n[part="body"] {\n  font-size: var(--pf-c-card__body--FontSize);\n  flex: var(--pf-c-card__body--FullHeight--Flex);\n}\n\n[part="body"] ::slotted(:not([slot]):first-of-type) {\n  margin-block-start: 0 !important;\n}\n\n[part="body"] ::slotted(:not([slot]):last-of-type) {\n  margin-block-end: 0 !important;\n}\n\n[part="footer"] {\n  margin-block-start: auto;\n  display: flex;\n  gap: 0.5em;\n  inset-block-end: 0;\n  font-size: var(--pf-c-card__footer--FontSize);\n}\n\n:host([size="compact"]) {\n\t--pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);\n\t--pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);\n\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);\n\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);\n\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);\n\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);\n}\n\n:host([size="large"]) {\n\t--pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);\n\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);\n\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);\n\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);\n\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);\n}\n\n:host([flat]) {\n  --pf-c-card--BoxShadow: none;\n  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);\n}\n\n:host([plain]) {\n  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);\n  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);\n}\n\n:host([rounded]) {\n  border-radius: var(--pf-c-card--m-rounded--BorderRadius);\n}\n\n:host([full-height]) {\n  height: var(--pf-c-card--m-full-height--Height);\n  --pf-c-card__body--FullHeight--Flex: 1 1 auto;\n}\n\n`;
+let PfCard = class PfCard extends LitElement {
     constructor() {
         super(...arguments);
         /**
-        * Optionally apply a border radius for the drop shadow and/or border.
-        */
+         * 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.
-       */
+         * 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_slots.set(this, new SlotController(this, 'header', 'title', null, 'footer'));
+    }
+    render() {
+        return html `
+      <article>
+        <header id="header"
+                part="header"
+                class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('header') })}">
+          <slot name="header"></slot>
+          <slot id="title" name="title" ?hidden="${__classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('title')}"></slot>
+        </header>
+        <div id="body"
+             part="body"
+             class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty(null) })}">
+          <slot></slot>
+        </div>
+        <footer id="footer"
+                part="footer"
+                class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('footer') })}">
+          <slot name="footer"></slot>
+        </footer>
+      </article>
+    `;
     }
 };
-PfCard.styles = [...BaseCard.styles, style];
+_PfCard_slots = new WeakMap();
+PfCard.styles = [style];
+PfCard.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfCard.prototype, "size", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-card.js","sourceRoot":"","sources":["pf-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;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,AAA9B,CAA+B;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","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-card.css';\nimport { BaseCard } from './BaseCard.js';\n\n/**\n * A **card** is a square or rectangular container that can contain any kind of content.\n * Cards symbolize units of information, and each one acts as an entry point for\n * users to access more details. For example, in dashboards and catalog views, cards\n * function as a preview of a detailed page. Cards may also be used in data displays\n * like card views, or for positioning content on a page.\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"]}
+{"version":3,"file":"pf-card.js","sourceRoot":"","sources":["pf-card.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAmD9E,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAWL;;WAEG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D;;WAEG;QACmE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;QAE1D,wBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;;IAErE,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;;mDAExB,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,OAAO,CAAC;;;;sBAIzD,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;yBAK3C,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;KAItE,CAAC;IACJ,CAAC;;;AAhDe,aAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAQrB;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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-card.css';\n\n/**\n * A **card** is a square or rectangular container that can contain any kind of content.\n * Cards symbolize units of information, and each one acts as an entry point for\n * users to access more details. For example, in dashboards and catalog views, cards\n * function as a preview of a detailed page. Cards may also be used in data displays\n * like card views, or for positioning content on a page.\n * @summary Gives a preview of information in a small layout\n * @slot header\n *       When included, defines the contents of a card. Card headers can contain images as well as\n *       the title of a card and an actions menu represented by the right-aligned kebab.\n *       In most cases, your card should include a header. The only exceptions are when cards being\n *       used as a layout element to create a white background behind other content.\n * @slot title\n *       Communicates the title of a card if it's not included in the header.\n *       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.\n * @slot - Body. Provides details about the item. A card body can include any combination of static\n *         text and/or active content.\n * @slot footer\n *       Contains external links, actions, or static text at the bottom of a card.\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 * @cssprop {<color>} [--pf-c-card--BackgroundColor=#ffffff]\n * @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)]\n * @cssprop {<color>} [--pf-c-card--size-compact__body--FontSize=.875rem]\n * @cssprop {<color>} [--pf-c-card--size-compact__footer--FontSize=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--first-child--PaddingTop=1.5rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingRight=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingBottom=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingLeft=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact__title--not--last-child--PaddingBottom=.5rem]\n * @cssprop {<color>} [--pf-c-card--size-large__title--FontSize=1.25rem]\n * @cssprop {<color>} [--pf-c-card--size-large--first-child--PaddingTop=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingRight=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingBottom=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingLeft=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large__title--not--last-child--PaddingBottom=1.5rem]\n * @cssprop {<color>} [--pf-c-card--m-flat--BorderWidth=1px solid #d2d2d2]\n * @cssprop {<color>} [--pf-c-card--m-plain--BoxShadow=none]\n * @cssprop {<color>} [--pf-c-card--m-plain--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-card--m-rounded--BorderRadius=3px]\n * @cssprop {<color>} [--pf-c-card--m-full-height--Height=100]\n * @cssprop {<color>} [--pf-c-card__title--FontFamily=\"RedHatDisplayUpdated\", helvetica, arial, sans-serif]\n * @cssprop {<color>} [--pf-c-card__title--FontSize=1rem]\n * @cssprop {<color>} [--pf-c-card__title--FontWeight=700]\n */\n@customElement('pf-card')\nexport class PfCard extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [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  #slots = new SlotController(this, 'header', 'title', null, 'footer');\n\n  render(): TemplateResult<1> {\n    return html`\n      <article>\n        <header id=\"header\"\n                part=\"header\"\n                class=\"${classMap({ empty: this.#slots.isEmpty('header') })}\">\n          <slot name=\"header\"></slot>\n          <slot id=\"title\" name=\"title\" ?hidden=\"${this.#slots.isEmpty('title')}\"></slot>\n        </header>\n        <div id=\"body\"\n             part=\"body\"\n             class=\"${classMap({ empty: this.#slots.isEmpty(null) })}\">\n          <slot></slot>\n        </div>\n        <footer id=\"footer\"\n                part=\"footer\"\n                class=\"${classMap({ empty: this.#slots.isEmpty('footer') })}\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </article>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-card': PfCard;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-card';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-card.e2e.js.map

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

@@ -1 +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"]}
+{"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;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,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;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.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  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-chip/pf-chip-group.css

@@ -80,12 +80,15 @@ svg {
   height: var(--pf-global--FontSize--sm, 14px);
 }
 
-.offscreen {
-  position: absolute;
-  left: -99999;
-  width: 0;
-  height: 0;
-  opacity: 0;
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
   overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }