@patternfly/elements 4.1.0 → 4.2.0

package/pf-panel/pf-panel.js

@@ -5,7 +5,206 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const styles = css `:host {\n  /* NB: upstream sets these on the container, which is why we do not use fallbacks here. */\n  --pf-c-panel--Width: auto;\n  --pf-c-panel--MinWidth: auto;\n  --pf-c-panel--MaxWidth: none;\n  --pf-c-panel--ZIndex: auto;\n  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n  --pf-c-panel--BoxShadow: none;\n  --pf-c-panel--before--BorderWidth: 0;\n  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);\n  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main--MaxHeight: none;\n  --pf-c-panel__main--Overflow: visible;\n  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--BoxShadow: none;\n  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;\n  --pf-c-panel--m-scrollable__main--Overflow: auto;\n  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);\n  position: relative;\n  z-index: var(--pf-c-panel--ZIndex);\n  width: var(--pf-c-panel--Width);\n  min-width: var(--pf-c-panel--MinWidth);\n  max-width: var(--pf-c-panel--MaxWidth);\n  background-color: var(--pf-c-panel--BackgroundColor);\n  box-shadow: var(--pf-c-panel--BoxShadow);\n  display: block;\n}\n\n:host([variant="bordered"])::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  border:\n  var(--pf-c-panel--m-bordered--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))\n    solid\n    var(--pf-c-panel--before--BorderColor,\n      var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([variant="raised"])::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  box-shadow: var(--pf-c-panel--m-raised--BoxShadow, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n  z-index: var(--pf-c-panel--m-raised--ZIndex, var(--pf-global--ZIndex--sm, 200));\n}\n\n:host([variant="raised"]) {\n  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,\n    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  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex,\n    var(--pf-global--ZIndex--sm, 200));\n}\n\n:host([scrollable]) {\n  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);\n  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);\n  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot {\n  display: block;\n}\n\nslot:not([name]) {\n  max-height: var(--pf-c-panel__main--MaxHeight);\n  overflow: var(--pf-c-panel__main--Overflow);\n  padding:\n    var(--pf-c-panel__main-body--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n}\n\nslot[name="header"] {\n  padding:\n    var(--pf-c-panel__header--PaddingTop)\n    var(--pf-c-panel__header--PaddingRight)\n    var(--pf-c-panel__header--PaddingBottom)\n    var(--pf-c-panel__header--PaddingLeft);\n}\n\nslot[name="footer"] {\n  padding:\n    var(--pf-c-panel__footer--PaddingTop)\n    var(--pf-c-panel__footer--PaddingRight)\n    var(--pf-c-panel__footer--PaddingBottom)\n    var(--pf-c-panel__footer--PaddingLeft);\n  box-shadow: var(--pf-c-panel__footer--BoxShadow);\n}\n\nhr {\n  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);\n  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);\n  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);\n  --pf-c-divider--after--FlexBasis: 100%;\n  --pf-c-divider--after--Inset: 0%;\n  --pf-c-divider--m-vertical--after--FlexBasis: 100%;\n  --pf-c-divider--m-horizontal--Display: flex;\n  --pf-c-divider--m-horizontal--FlexDirection: row;\n  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);\n  --pf-c-divider--m-horizontal--after--Width: auto;\n  --pf-c-divider--m-vertical--Display: inline-flex;\n  --pf-c-divider--m-vertical--FlexDirection: column;\n  --pf-c-divider--m-vertical--after--Height: auto;\n  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);\n  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);\n  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);\n  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);\n  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);\n  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);\n  width: 100%;\n  height: auto;\n  display: var(--pf-c-divider--Display);\n  flex-direction: var(--pf-c-divider--FlexDirection);\n  align-items: center;\n  align-self: stretch;\n  flex-shrink: 0;\n  justify-content: center;\n  border: 0;\n}\n\nhr::after {\n  align-self: stretch;\n  width: var(--pf-c-divider--after--Width);\n  height: var(--pf-c-divider--after--Height);\n  content: "";\n  background-color: var(--pf-c-divider--after--BackgroundColor);\n  justify-self: center;\n  padding: 0;\n  margin: 0;\n  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):first-of-type) {\n  margin-block-start: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):last-of-type) {\n  margin-block-end: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):is(:last-of-type, :first-of-type)) {\n  margin-block: 0;\n}\n`;
+const styles = css `:host {
+  /* NB: upstream sets these on the container, which is why we do not use fallbacks here. */
+  /** Width of panel */
+  --pf-c-panel--Width: auto;
+  /** Minimum width of panel */
+  --pf-c-panel--MinWidth: auto;
+  /** Maximum width of panel */
+  --pf-c-panel--MaxWidth: none;
+  /** Z-index of panel */
+  --pf-c-panel--ZIndex: auto;
+  /** Background color of panel */
+  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+  /** Box shadow of panel */
+  --pf-c-panel--BoxShadow: none;
+  /** Border width of panel before element */
+  --pf-c-panel--before--BorderWidth: 0;
+  /** Border color of panel before element */
+  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Border width of bordered panel before element */
+  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Box shadow of raised panel */
+  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+  /** Z-index of raised panel */
+  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);
+  /** Top padding of panel header */
+  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel header */
+  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel header */
+  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel header */
+  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Maximum height of panel main */
+  --pf-c-panel__main--MaxHeight: none;
+  /** Overflow of panel main */
+  --pf-c-panel__main--Overflow: visible;
+  /** Top padding of panel main body */
+  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel main body */
+  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel main body */
+  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel main body */
+  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Top padding of panel footer */
+  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel footer */
+  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel footer */
+  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel footer */
+  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Box shadow of panel footer */
+  --pf-c-panel__footer--BoxShadow: none;
+  /** Maximum height of scrollable panel main */
+  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
+  /** Overflow of scrollable panel main */
+  --pf-c-panel--m-scrollable__main--Overflow: auto;
+  /** Box shadow of scrollable panel footer */
+  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
+  position: relative;
+  z-index: var(--pf-c-panel--ZIndex);
+  width: var(--pf-c-panel--Width);
+  min-width: var(--pf-c-panel--MinWidth);
+  max-width: var(--pf-c-panel--MaxWidth);
+  background-color: var(--pf-c-panel--BackgroundColor);
+  box-shadow: var(--pf-c-panel--BoxShadow);
+  display: block;
+}
+
+:host([variant="bordered"])::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border:
+  var(--pf-c-panel--m-bordered--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
+    solid
+    var(--pf-c-panel--before--BorderColor,
+      var(--pf-global--BorderColor--100, #d2d2d2));
+}
+
+:host([variant="raised"])::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  box-shadow: var(--pf-c-panel--m-raised--BoxShadow, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+  z-index: var(--pf-c-panel--m-raised--ZIndex, var(--pf-global--ZIndex--sm, 200));
+}
+
+:host([variant="raised"]) {
+  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,
+    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
+  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex,
+    var(--pf-global--ZIndex--sm, 200));
+}
+
+:host([scrollable]) {
+  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
+  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
+  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+slot {
+  display: block;
+}
+
+slot:not([name]) {
+  max-height: var(--pf-c-panel__main--MaxHeight);
+  overflow: var(--pf-c-panel__main--Overflow);
+  padding:
+    var(--pf-c-panel__main-body--PaddingTop,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-panel__main-body--PaddingRight,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-panel__main-body--PaddingBottom,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-panel__main-body--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem));
+}
+
+slot[name="header"] {
+  padding:
+    var(--pf-c-panel__header--PaddingTop)
+    var(--pf-c-panel__header--PaddingRight)
+    var(--pf-c-panel__header--PaddingBottom)
+    var(--pf-c-panel__header--PaddingLeft);
+}
+
+slot[name="footer"] {
+  padding:
+    var(--pf-c-panel__footer--PaddingTop)
+    var(--pf-c-panel__footer--PaddingRight)
+    var(--pf-c-panel__footer--PaddingBottom)
+    var(--pf-c-panel__footer--PaddingLeft);
+  box-shadow: var(--pf-c-panel__footer--BoxShadow);
+}
+
+hr {
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
+  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
+  --pf-c-divider--after--FlexBasis: 100%;
+  --pf-c-divider--after--Inset: 0%;
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
+  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  width: 100%;
+  height: auto;
+  display: var(--pf-c-divider--Display);
+  flex-direction: var(--pf-c-divider--FlexDirection);
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  justify-content: center;
+  border: 0;
+}
+
+hr::after {
+  align-self: stretch;
+  width: var(--pf-c-divider--after--Width);
+  height: var(--pf-c-divider--after--Height);
+  content: "";
+  background-color: var(--pf-c-divider--after--BackgroundColor);
+  justify-self: center;
+  padding: 0;
+  margin: 0;
+  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
+}
+
+::slotted(:is(p, h1, h2, h3, h4, h5, h6):first-of-type) {
+  margin-block-start: 0;
+}
+
+::slotted(:is(p, h1, h2, h3, h4, h5, h6):last-of-type) {
+  margin-block-end: 0;
+}
+
+::slotted(:is(p, h1, h2, h3, h4, h5, h6):is(:last-of-type, :first-of-type)) {
+  margin-block: 0;
+}
+`;
 let PfPanel = class PfPanel extends LitElement {
     constructor() {
         super(...arguments);
@@ -17,11 +216,14 @@ let PfPanel = class PfPanel extends LitElement {
         const hasFooter = __classPrivateFieldGet(this, _PfPanel_slots, "f").hasSlotted('footer');
         return html `
       <header>
+        <!-- Place header content here -->
         <slot name="header" ?hidden="${!hasHeader}"></slot>
       </header>
       <hr role="presentation" ?hidden="${!hasHeader}">
+      <!-- Place main content here -->
       <slot></slot>
       <footer>
+        <!-- Place footer content here -->
         <slot name="footer" ?hidden="${!hasFooter}"></slot>
       </footer>
     `;
@@ -29,7 +231,7 @@ let PfPanel = class PfPanel extends LitElement {
 };
 _PfPanel_slots = new WeakMap();
 PfPanel.styles = [styles];
-PfPanel.version = "4.1.0";
+PfPanel.version = "4.2.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfPanel.prototype, "scrollable", void 0);

package/pf-panel/pf-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.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;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AA2C9E,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;;IAE5D,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;;uCAEwB,CAAC,SAAS;;yCAER,CAAC,SAAS;;;uCAGZ,CAAC,SAAS;;KAE5C,CAAC;IACJ,CAAC;;;AArBe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEP;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiC;AALlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * The **panel** component is a container that supports flexible content layouts. It can\n * be used to house other components such as fields, forms, videos, buttons, and more.\n * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)\n * component, which allows you to surface information via a collapsable container.\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n * @cssprop [--pf-c-panel--Width=auto]\n * @cssprop [--pf-c-panel--MinWidth=auto]\n * @cssprop [--pf-c-panel--MaxWidth=none]\n * @cssprop [--pf-c-panel--ZIndex=auto]\n * @cssprop [--pf-c-panel--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]\n * @cssprop [--pf-c-panel--BoxShadow=none]\n * @cssprop [--pf-c-panel--before--BorderWidth=0]\n * @cssprop [--pf-c-panel--before--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-panel--m-bordered--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-panel--m-raised--BoxShadow=var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))]\n * @cssprop [--pf-c-panel--m-raised--ZIndex=var(--pf-global--ZIndex--sm, 200)]\n * @cssprop [--pf-c-panel__header--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__header--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__header--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__header--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main--MaxHeight=none]\n * @cssprop [--pf-c-panel__main--Overflow=visible]\n * @cssprop [--pf-c-panel__main-body--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--BoxShadow=none]\n * @cssprop [--pf-c-panel--m-scrollable__main--MaxHeight=18.75rem]\n * @cssprop [--pf-c-panel--m-scrollable__main--Overflow=auto]\n * @cssprop [--pf-c-panel--m-scrollable__footer--BoxShadow=0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)]\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised' | 'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render(): TemplateResult<1> {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <header>\n        <slot name=\"header\" ?hidden=\"${!hasHeader}\"></slot>\n      </header>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <slot></slot>\n      <footer>\n        <slot name=\"footer\" ?hidden=\"${!hasFooter}\"></slot>\n      </footer>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.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;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAY9E,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;;IAE5D,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;;;uCAGwB,CAAC,SAAS;;yCAER,CAAC,SAAS;;;;;uCAKZ,CAAC,SAAS;;KAE5C,CAAC;IACJ,CAAC;;;AAxBe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEP;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiC;AALlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * The **panel** component is a container that supports flexible content layouts. It can\n * be used to house other components such as fields, forms, videos, buttons, and more.\n * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)\n * component, which allows you to surface information via a collapsable container.\n * @alias Panel\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised' | 'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render(): TemplateResult<1> {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <header>\n        <!-- Place header content here -->\n        <slot name=\"header\" ?hidden=\"${!hasHeader}\"></slot>\n      </header>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <!-- Place main content here -->\n      <slot></slot>\n      <footer>\n        <!-- Place footer content here -->\n        <slot name=\"footer\" ?hidden=\"${!hasFooter}\"></slot>\n      </footer>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}

package/pf-popover/pf-popover.css

@@ -1,7 +1,10 @@
 :host {
   display: inline;
+  /** Width of the arrow */
   --_floating-arrow-size: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
+  /** Heading font color */
   --_header-text-color: var(--pf-c-popover__title-text--Color, inherit);
+  /** Heading icon font color */
   --_header-icon-color: var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));
   --_animation-speed: var(--pf-popover--animation-speed, 300ms);
   --_z-index: var(--pf-popover--z-index, 9999);
@@ -34,13 +37,17 @@
 #arrow {
   display: block;
   position: absolute;
+  /** Arrow background color */
   background-color: var(--pf-c-popover__arrow--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
+  /** Arrow box shadow */
   box-shadow: var(
     --pf-c-popover__arrow--BoxShadow,
     var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
   );
   content: '';
+  /** Height of the arrow */
   height: var(--pf-c-popover__arrow--Height, var(--pf-global--arrow--width-lg, 1.5625rem));
+  /** Width of the arrow */
   width: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
   rotate: 45deg;
   z-index: -1;
@@ -56,6 +63,7 @@
   left: 0;
   top: 0;
   translate: var(--_floating-content-translate);
+  /** Popover box shadow */
   box-shadow: var(
     --pf-c-popover--BoxShadow,
     var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
@@ -73,19 +81,25 @@
 
 [part='content'] {
   position: relative;
+  /** Popover padding (top, right, bottom, left) */
   padding: var(--pf-c-popover__content--PaddingTop, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-popover__content--PaddingRight, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-popover__content--PaddingBottom, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-popover__content--PaddingLeft, var(--pf-global--spacer--md, 1rem));
   word-break: break-word;
+  /** Popover line height */
   line-height: var(--pf-c-popover--line-height, 1.5);
+  /** Popover font-size */
   font-size: var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
   color: var(--pf-c-popover__content--Color, var(--pf-global--Color--100, #151515));
+  /** Popover background color */
   background-color: var(--pf-c-popover__content--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
+  /** Popover max-width */
   max-width: var(
     --pf-c-popover--MaxWidth,
     calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
   );
+  /** Popover min-width */
   min-width: var(
     --pf-c-popover--MinWidth,
     calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
@@ -96,10 +110,12 @@
 [part='close-button'] {
   cursor: pointer;
   position: absolute;
+  /** Close button right position */
   right: var(
     --pf-c-popover--c-button--Right,
     calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))
   );
+  /** Close button top position */
   top: var(
     --pf-c-popover--c-button--Top,
     calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))
@@ -107,6 +123,7 @@
 }
 
 [part='content'] > [part='close-button']:not([hidden]) ~ *:not([hidden]) {
+  /** Padding between close button and its immediate sibling */
   padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight, var(--pf-global--spacer--2xl, 3rem));
 }
 
@@ -117,6 +134,7 @@
 
 [part='icon'] {
   color: var(--_header-icon-color);
+  /** Heading icon right margin */
   margin-right: var(--pf-c-popover__title-icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
 }
 
@@ -128,6 +146,7 @@
 [part='icon'],
 [part='heading']::slotted(:is(h2, h3, h4, h5, h6)),
 [part='heading'] :is(h2, h3, h4, h5, h6) {
+  /** Header font-size */
   font-size: var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));
   font-weight: var(--pf-global--FontWeight--normal, 400);
   --pf-icon--size: var(
@@ -140,8 +159,11 @@
 [part='heading'] :is(h2, h3, h4, h5, h6) {
   color: var(--_header-text-color);
   margin-top: 0;
+  /** Header bottom margin */
   margin-bottom: var(--pf-c-popover__title--MarginBottom, var(--pf-global--spacer--sm, 0.5rem));
+  /** Header line height */
   line-height: var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));
+  /** Header font-family */
   font-family: var(
     --pf-c-popover__title--FontFamily,
     var(
@@ -162,30 +184,41 @@
 }
 
 [part='footer'] {
+  /** Footer top margin */
   margin-top: var(--pf-c-popover__footer--MarginTop, var(--pf-global--spacer--md, 1rem));
 }
 
 :host([alert-severity='default']) {
+  /** Default alert heading color */
   --_header-text-color: var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));
+  /** Default alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596));
 }
 
 :host([alert-severity='info']) {
+  /** Info alert heading color */
   --_header-text-color: var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));
+  /** Info alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3));
 }
 
 :host([alert-severity='warning']) {
+  /** Warning alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));
+  /** Warning alert heading color */
   --_header-text-color: var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600));
 }
 
 :host([alert-severity='success']) {
+  /** Success alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));
+  /** Success alert heading color */
   --_header-text-color: var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18));
 }
 
 :host([alert-severity='danger']) {
+  /** Danger alert icon color */
   --_header-icon-color: var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));
+  /** Danger alert heading color */
   --_header-text-color: var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000));
 }

package/pf-popover/pf-popover.d.ts

@@ -19,114 +19,7 @@ export declare class PopoverShownEvent extends ComposedEvent {
 /**
  * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
  * @summary Toggle the visibility of helpful or contextual information.
- * @slot -
- *         The default slot holds invoking element.
- *         Typically this would be an icon, button, or other small sized element.
- * @slot heading
- *       This slot renders the content that will be displayed inside of the header of the popover.
- *       Typically this would be a heading element.
- * @slot icon
- *       This slot renders the icon that will be displayed inside the header of the popover,
- *       before the heading.
- * @slot body
- *       This slot renders the content that will be displayed inside of the body of the popover.
- * @slot footer
- *       This slot renders the content that will be displayed inside of the footer of the popover.
- * @csspart container - The component wrapper
- * @csspart content - The content wrapper
- * @csspart header - The header element; only visible if both an icon annd heading are provided.
- * @csspart heading - The heading element
- * @csspart icon - The header icon
- * @csspart close-button - The close button
- * @csspart body - The container for the body content
- * @csspart footer - The container for the footer content
- * @cssprop {<length>} [--pf-c-popover__arrow--Height=1.5625rem] Height of the arrow
- * @cssprop {<length>} [--pf-c-popover__arrow--Width=1.5625rem] Width of the arrow
- * @cssprop {<color>} [--pf-c-popover__title-text--Color=inherit] Heading font color
- * @cssprop {<color>} [--pf-c-popover__title-icon--Color=#151515] Heading icon font color
- * @cssprop {<color>} [--pf-c-popover__arrow--BackgroundColor=#fff] Arrow background color
- * @cssprop [--pf-c-popover__arrow--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Arrow box shadow
- * @cssprop [--pf-c-popover--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Popover box shadow
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingTop=1rem] Popover top padding
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=1rem] Popover right padding
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingBottom=1rem]
- *          Popover bottom padding
- *
- * @cssprop {<length>} [--pf-c-tooltip__content--PaddingLeft=1rem]
- *          Popover left padding
- *
- * @cssprop {<number>} [--pf-c-popover--line-height=1.5]
- *          Popover line height
- *
- * @cssprop {<length>} [--pf-c-popover__content--FontSize=0.875rem]
- *          Popover font-size
- *
- * @cssprop {<color>} [--pf-c-popover__content--BackgroundColor=#fff]
- *          Popover background color
- *
- * @cssprop {<length>} [--pf-c-popover--MaxWidth=20.75rem]
- *          Popover max-width
- *
- * @cssprop {<length>} [--pf-c-popover--MinWidth=20.75rem]
- *          Popover min-width
- *
- * @cssprop {<number>} [--pf-c-popover--c-button--Right=`0]
- *          Close button right position
- *
- * @cssprop {<number>} [--pf-c-popover--c-button--Top=0]
- *          Close button top position
- *
- * @cssprop {<length>} [--pf-c-popover--c-button--sibling--PaddingRight=3rem]
- *          Padding between close button and its immediate sibling
- *
- * @cssprop {<length>} [--pf-c-popover__title-icon--MarginRight=0.5rem]
- *          Heading icon right margin
- *
- * @cssprop {<length>} [--pf-c-popover__title--FontSize=1rem]
- *          Header font-size
- *
- * @cssprop {<length>} [--pf-c-popover__title--MarginBottom=0.5rem]
- *          Header bottom margin
- *
- * @cssprop {<number>} [--pf-c-popover__title--LineHeight=1.5]
- *          Header line height
- *
- * @cssprop {<string>} [--pf-c-popover__title--FontFamily='RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif]
- *          Header font-family
- *
- * @cssprop {<length>} [--pf-c-popover__footer--MarginTop=1rem]
- *          Footer top margin
- *
- * @cssprop {<color>} [--pf-c-popover--m-default__title-text--Color=#003737]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-default__title-icon--Color=#009596]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-info__title-text--Color=#002952]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-info__title-icon--Color=#2b9af3]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-warning__title-text--Color=#795600]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-warning__title-icon--Color=#f0ab00]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-success__title-text--Color=#1e4f18]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-success__title-icon--Color=#3e8635]
- *          Default alert icon color
- *
- * @cssprop {<color>} [--pf-c-popover--m-danger__title-text--Color=#a30000]
- *          Default alert heading color
- *
- * @cssprop {<color>} [--pf-c-popover--m-danger__title-icon--Color=#c9190b]
- *          Default alert icon color
- *
+ * @alias Popover
  */
 export declare class PfPopover extends LitElement {
     #private;