@patternfly/elements 4.1.0 → 4.3.0

package/pf-popover/pf-popover.js

@@ -14,7 +14,231 @@ import { bound } from '@patternfly/pfe-core/decorators/bound.js';
 import { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: inline;\n  --_floating-arrow-size: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));\n  --_header-text-color: var(--pf-c-popover__title-text--Color, inherit);\n  --_header-icon-color: var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));\n  --_animation-speed: var(--pf-popover--animation-speed, 300ms);\n  --_z-index: var(--pf-popover--z-index, 9999);\n}\n\n.visually-hidden {\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n#container {\n  display: inline-flex;\n  position: relative;\n}\n\n#trigger {\n  display: inline-block;\n  position: relative;\n}\n\n#arrow {\n  display: block;\n  position: absolute;\n  background-color: var(--pf-c-popover__arrow--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));\n  box-shadow: var(\n    --pf-c-popover__arrow--BoxShadow,\n    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  );\n  content: '';\n  height: var(--pf-c-popover__arrow--Height, var(--pf-global--arrow--width-lg, 1.5625rem));\n  width: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));\n  rotate: 45deg;\n  z-index: -1;\n  pointer-events: none;\n}\n\n#popover {\n  display: block;\n  position: absolute;\n  opacity: 0;\n  z-index: -1;\n  transition: visibility 0s, opacity var(--_animation-speed) cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;\n  left: 0;\n  top: 0;\n  translate: var(--_floating-content-translate);\n  box-shadow: var(\n    --pf-c-popover--BoxShadow,\n    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  );\n  border: 0;\n  padding: 0;\n  visibility: hidden;\n}\n\n#popover[open] {\n  opacity: 1;\n  z-index: var(--_z-index);\n  visibility: visible;\n}\n\n[part='content'] {\n  position: relative;\n  padding: var(--pf-c-popover__content--PaddingTop, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-popover__content--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-popover__content--PaddingBottom, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-popover__content--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  word-break: break-word;\n  line-height: var(--pf-c-popover--line-height, 1.5);\n  font-size: var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-popover__content--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-popover__content--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));\n  max-width: var(\n    --pf-c-popover--MaxWidth,\n    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)\n  );\n  min-width: var(\n    --pf-c-popover--MinWidth,\n    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)\n  );\n  width: max-content;\n}\n\n[part='close-button'] {\n  cursor: pointer;\n  position: absolute;\n  right: var(\n    --pf-c-popover--c-button--Right,\n    calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))\n  );\n  top: var(\n    --pf-c-popover--c-button--Top,\n    calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))\n  );\n}\n\n[part='content'] > [part='close-button']:not([hidden]) ~ *:not([hidden]) {\n  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight, var(--pf-global--spacer--2xl, 3rem));\n}\n\n[part='header'] {\n  display: flex;\n  align-items: baseline;\n}\n\n[part='icon'] {\n  color: var(--_header-icon-color);\n  margin-right: var(--pf-c-popover__title-icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));\n}\n\n[part='icon'] ::slotted(*),\n[part='icon'] * {\n  vertical-align: -0.125em;\n}\n\n[part='icon'],\n[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),\n[part='heading'] :is(h2, h3, h4, h5, h6) {\n  font-size: var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  --pf-icon--size: var(\n    --pf-c-popover__title--FontSize,\n    var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))\n  );\n}\n\n[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),\n[part='heading'] :is(h2, h3, h4, h5, h6) {\n  color: var(--_header-text-color);\n  margin-top: 0;\n  margin-bottom: var(--pf-c-popover__title--MarginBottom, var(--pf-global--spacer--sm, 0.5rem));\n  line-height: var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));\n  font-family: var(\n    --pf-c-popover__title--FontFamily,\n    var(\n      --pf-global--FontFamily--heading--sans-serif,\n      'RedHatDisplay',\n      'Overpass',\n      overpass,\n      helvetica,\n      arial,\n      sans-serif\n    )\n  );\n}\n\n[part='body'] {\n  display: block;\n  word-wrap: break-word;\n}\n\n[part='footer'] {\n  margin-top: var(--pf-c-popover__footer--MarginTop, var(--pf-global--spacer--md, 1rem));\n}\n\n:host([alert-severity='default']) {\n  --_header-text-color: var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));\n  --_header-icon-color: var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596));\n}\n\n:host([alert-severity='info']) {\n  --_header-text-color: var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));\n  --_header-icon-color: var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3));\n}\n\n:host([alert-severity='warning']) {\n  --_header-icon-color: var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));\n  --_header-text-color: var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600));\n}\n\n:host([alert-severity='success']) {\n  --_header-icon-color: var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));\n  --_header-text-color: var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18));\n}\n\n:host([alert-severity='danger']) {\n  --_header-icon-color: var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));\n  --_header-text-color: var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000));\n}\n`;
+const styles = css `: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);
+}
+
+.visually-hidden {
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#container {
+  display: inline-flex;
+  position: relative;
+}
+
+#trigger {
+  display: inline-block;
+  position: relative;
+}
+
+#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;
+  pointer-events: none;
+}
+
+#popover {
+  display: block;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  transition: visibility 0s, opacity var(--_animation-speed) cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
+  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))
+  );
+  border: 0;
+  padding: 0;
+  visibility: hidden;
+}
+
+#popover[open] {
+  opacity: 1;
+  z-index: var(--_z-index);
+  visibility: visible;
+}
+
+[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)
+  );
+  width: max-content;
+}
+
+[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))
+  );
+}
+
+[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));
+}
+
+[part='header'] {
+  display: flex;
+  align-items: baseline;
+}
+
+[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));
+}
+
+[part='icon'] ::slotted(*),
+[part='icon'] * {
+  vertical-align: -0.125em;
+}
+
+[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(
+    --pf-c-popover__title--FontSize,
+    var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))
+  );
+}
+
+[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),
+[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(
+      --pf-global--FontFamily--heading--sans-serif,
+      'RedHatDisplay',
+      'Overpass',
+      overpass,
+      helvetica,
+      arial,
+      sans-serif
+    )
+  );
+}
+
+[part='body'] {
+  display: block;
+  word-wrap: break-word;
+}
+
+[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));
+}
+`;
 export class PopoverHideEvent extends ComposedEvent {
     constructor() {
         super('hide');
@@ -100,15 +324,27 @@ let PfPopover = class PfPopover extends LitElement {
                 break;
         }
         const headingSlotWithFallback = html `
+      <!-- slot:
+             summary: Heading content.
+             description: |
+               This slot projects content into the header of the popover.
+               Typically this would be a heading (e.g. h2, h3, etc.) element.
+           part:
+             summary: The heading element
+      -->
       <slot id="heading" name="heading" part="heading" ?hidden=${!hasHeading}>${headingContent}</slot>
     `;
         const headerIcon = this.icon
             ?? PfPopover.alertIcons.get(this.alertSeverity)
             ?? '';
         return html `
+      <!-- The component wrapper -->
       <div id="container"
            style="${styleMap(styles)}"
-           class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}">
+           class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}"
+           part="container">
+        <!-- The default slot holds invoking element.
+             Typically this would be an icon, button, or other small sized element. -->
         <slot id="trigger"
               @slotchange="${__classPrivateFieldGet(this, _PfPopover_instances, "m", _PfPopover_triggerChanged)}"
               @keydown="${__classPrivateFieldGet(this, _PfPopover_onKeydown, "f")}"
@@ -119,7 +355,9 @@ let PfPopover = class PfPopover extends LitElement {
                 aria-describedby="body"
                 aria-label=${ifDefined(this.label)}>
           <div id="arrow"></div>
+          <!-- The content wrapper -->
           <div id="content" part="content">
+            <!-- The close button -->
             <pf-button id="close-button"
                        part="close-button"
                        plain
@@ -132,8 +370,11 @@ let PfPopover = class PfPopover extends LitElement {
               </svg>
             </pf-button>
             ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html `
+            <!-- The header element; only visible if both an icon annd heading are provided. -->
             <header part="header">
+              <!-- summary: Container for the header icon -->
               <span part="icon">
+                <!-- summary: The icon in the header of the popover, before the heading. -->
                 <slot name="icon">
                   <pf-icon icon="${headerIcon}"
                            set="${ifDefined(this.iconSet)}"
@@ -143,8 +384,15 @@ let PfPopover = class PfPopover extends LitElement {
               <span class="visually-hidden">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}
               ${headingSlotWithFallback}
             </header>`}
+            <!-- slot:
+                   summary: body of the popover, which is hidden until the popover is activated.
+                 part:
+                   summary: The container for the body content
+            -->
             <slot id="body" part="body" name="body">${this.body ?? ''}</slot>
+            <!-- summary: The container for the footer content -->
             <footer part="footer" ?hidden=${!hasFooter}>
+              <!-- summary: optional footer content of the popover. -->
               <slot name="footer">${this.footer}</slot>
             </footer>
           </div>
@@ -260,7 +508,7 @@ PfPopover.alertIcons = new Map(Object.entries({
         });
     }
 })();
-PfPopover.version = "4.1.0";
+PfPopover.version = "4.3.0";
 __decorate([
     property({ reflect: true })
 ], PfPopover.prototype, "position", void 0);

package/pf-popover/pf-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-popover.js","sourceRoot":"","sources":["pf-popover.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { LitElement, nothing, html, type PropertyValues, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\nimport { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-popover.css';\n\ntype HeadingLevel = 2 | 3 | 4 | 5 | 6;\n\ntype AlertSeverity = 'default' | 'info' | 'warning' | 'success' | 'danger';\n\nexport class PopoverHideEvent extends ComposedEvent {\n  constructor() {\n    super('hide');\n  }\n}\n\nexport class PopoverHiddenEvent extends ComposedEvent {\n  constructor() {\n    super('hidden');\n  }\n}\n\nexport class PopoverShowEvent extends ComposedEvent {\n  constructor() {\n    super('show');\n  }\n}\n\nexport class PopoverShownEvent extends ComposedEvent {\n  constructor() {\n    super('shown');\n  }\n}\n\n/**\n * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.\n * @summary Toggle the visibility of helpful or contextual information.\n * @slot -\n *         The default slot holds invoking element.\n *         Typically this would be an icon, button, or other small sized element.\n * @slot heading\n *       This slot renders the content that will be displayed inside of the header of the popover.\n *       Typically this would be a heading element.\n * @slot icon\n *       This slot renders the icon that will be displayed inside the header of the popover,\n *       before the heading.\n * @slot body\n *       This slot renders the content that will be displayed inside of the body of the popover.\n * @slot footer\n *       This slot renders the content that will be displayed inside of the footer of the popover.\n * @csspart container - The component wrapper\n * @csspart content - The content wrapper\n * @csspart header - The header element; only visible if both an icon annd heading are provided.\n * @csspart heading - The heading element\n * @csspart icon - The header icon\n * @csspart close-button - The close button\n * @csspart body - The container for the body content\n * @csspart footer - The container for the footer content\n * @cssprop {<length>} [--pf-c-popover__arrow--Height=1.5625rem] Height of the arrow\n * @cssprop {<length>} [--pf-c-popover__arrow--Width=1.5625rem] Width of the arrow\n * @cssprop {<color>} [--pf-c-popover__title-text--Color=inherit] Heading font color\n * @cssprop {<color>} [--pf-c-popover__title-icon--Color=#151515] Heading icon font color\n * @cssprop {<color>} [--pf-c-popover__arrow--BackgroundColor=#fff] Arrow background color\n * @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\n * @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\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingTop=1rem] Popover top padding\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=1rem] Popover right padding\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingBottom=1rem]\n *          Popover bottom padding\n *\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingLeft=1rem]\n *          Popover left padding\n *\n * @cssprop {<number>} [--pf-c-popover--line-height=1.5]\n *          Popover line height\n *\n * @cssprop {<length>} [--pf-c-popover__content--FontSize=0.875rem]\n *          Popover font-size\n *\n * @cssprop {<color>} [--pf-c-popover__content--BackgroundColor=#fff]\n *          Popover background color\n *\n * @cssprop {<length>} [--pf-c-popover--MaxWidth=20.75rem]\n *          Popover max-width\n *\n * @cssprop {<length>} [--pf-c-popover--MinWidth=20.75rem]\n *          Popover min-width\n *\n * @cssprop {<number>} [--pf-c-popover--c-button--Right=`0]\n *          Close button right position\n *\n * @cssprop {<number>} [--pf-c-popover--c-button--Top=0]\n *          Close button top position\n *\n * @cssprop {<length>} [--pf-c-popover--c-button--sibling--PaddingRight=3rem]\n *          Padding between close button and its immediate sibling\n *\n * @cssprop {<length>} [--pf-c-popover__title-icon--MarginRight=0.5rem]\n *          Heading icon right margin\n *\n * @cssprop {<length>} [--pf-c-popover__title--FontSize=1rem]\n *          Header font-size\n *\n * @cssprop {<length>} [--pf-c-popover__title--MarginBottom=0.5rem]\n *          Header bottom margin\n *\n * @cssprop {<number>} [--pf-c-popover__title--LineHeight=1.5]\n *          Header line height\n *\n * @cssprop {<string>} [--pf-c-popover__title--FontFamily='RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif]\n *          Header font-family\n *\n * @cssprop {<length>} [--pf-c-popover__footer--MarginTop=1rem]\n *          Footer top margin\n *\n * @cssprop {<color>} [--pf-c-popover--m-default__title-text--Color=#003737]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-default__title-icon--Color=#009596]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-info__title-text--Color=#002952]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-info__title-icon--Color=#2b9af3]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-warning__title-text--Color=#795600]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-warning__title-icon--Color=#f0ab00]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-success__title-text--Color=#1e4f18]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-success__title-icon--Color=#3e8635]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-danger__title-text--Color=#a30000]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-danger__title-icon--Color=#c9190b]\n *          Default alert icon color\n *\n */\n@customElement('pf-popover')\nexport class PfPopover extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  private static instances = new Set<PfPopover>();\n\n  private static alertIcons = new Map(Object.entries({\n    default: 'bell',\n    info: 'circle-info',\n    success: 'circle-check',\n    warning: 'triangle-exclamation',\n    danger: 'circle-exclamation',\n  } satisfies Record<AlertSeverity, string>) as [AlertSeverity, string][]);\n\n  static {\n    if (!isServer) {\n      document.addEventListener('click', function(event) {\n        for (const instance of PfPopover.instances) {\n          if (!instance.noOutsideClick) {\n            instance.#outsideClick(event);\n          }\n        }\n      });\n    }\n  }\n\n  /**\n   * Indicates the initial popover position.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is `top`.\n   */\n  @property({ reflect: true }) position: Placement = 'top';\n\n  /**\n   * The content rendered in the popover's heading.\n   */\n  @property({ reflect: true }) heading?: string;\n\n  /**\n   * The content rendered in the popover's body.\n   */\n  @property({ reflect: true }) body?: string;\n\n  /**\n   * The content rendered in the popover's footer.\n   */\n  @property({ reflect: true }) footer?: string;\n\n  /**\n   * The icon placed before the popover's heading.\n   */\n  @property({ reflect: true }) icon?: string;\n\n  /**\n   * The accessible label for the popover. This is required if the no heading is set.\n   */\n  @property({ reflect: true }) label?: string;\n\n  /**\n   * The distance to set between the popover and its trigger element.\n   */\n  @property({ type: Number, reflect: true }) distance?: number;\n\n  /**\n   * The flip order when flip is enabled and the initial position is not possible.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is [oppositePlacement], where only the opposite placement is tried.\n   */\n  @property({\n    attribute: 'flip-behavior',\n    converter: StringListConverter,\n  }) flipBehavior?: Placement[];\n\n  /**\n   * Disable the flip behavior. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-flip' }) noFlip = false;\n\n  /**\n   * The heading level to use for the popover's header. The default is `h6`.\n   */\n  @property({\n    type: Number,\n    reflect: true,\n    attribute: 'heading-level',\n  }) headingLevel?: HeadingLevel;\n\n  /**\n   * Indicates which icon set to use for the header's icon.\n   * The default is `fas` (Font Awesome Free Solid).\n   */\n  @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n  /**\n   * Hide the close button. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' }) hideClose?: boolean;\n\n  /**\n   * Indicates the severity variant to use for the alert popover.\n   * There are five options: `default`, `info`, `warning`, `success`, and `danger`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity' }) alertSeverity?: AlertSeverity;\n\n  /**\n   * The accessible label for the popover's close button. The default is `Close popover`.\n   */\n  @property({ reflect: true, attribute: 'accessible-close-label' }) accessibleCloseLabel?: string;\n\n  /**\n   * @deprecated do not use the color-palette attribute, which was added by mistake. use context-providing containers (e.g. rh-card) instead\n   */\n  @deprecation({\n    alias: 'accessible-close-label',\n    attribute: 'close-label',\n  }) closeButtonLabel?: string;\n\n  /**\n   * The text announced by the screen reader to indicate the popover's severity.\n   * The default is `${alertSeverity} alert:`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity-text' }) alertSeverityText?: string;\n\n  /**\n   * Don't hide the popover when clicking ouside of it.\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'no-outside-click',\n  }) noOutsideClick?: boolean;\n\n  /**\n   * The ID of the element to attach the popover to.\n   */\n  @property({ reflect: true }) trigger?: string;\n\n  @query('#popover') private _popover!: HTMLDialogElement;\n  @query('#trigger') private _slottedTrigger?: HTMLElement | null;\n  @query('#arrow') private _arrow!: HTMLDivElement;\n\n  /** True before the show animation begins and after the hide animation ends */\n  #hideDialog = true;\n\n  #referenceTrigger?: HTMLElement | null = null;\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._popover,\n    arrow: () => this._arrow,\n    invoker: () => this.#referenceTrigger || this._slottedTrigger,\n  });\n\n  #slots = new SlotController(this, null, 'icon', 'heading', 'body', 'footer');\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('keydown', this.#onKeydown);\n    }\n  }\n\n  render(): TemplateResult<1> {\n    const { alignment, anchor, styles } = this.#float;\n    const hasFooter = this.#slots.hasSlotted('footer') || !!this.footer;\n    const hasHeading = this.#slots.hasSlotted('heading') || !!this.heading;\n    const hasIcon = this.#slots.hasSlotted('icon') || !!this.icon || !!this.alertSeverity;\n\n    // https://github.com/asyncLiz/minify-html-literals/issues/37\n    let headingContent = html`<h6>${this.heading ?? ''}</h6>`;\n    switch (this.headingLevel) {\n      case 2: headingContent = html`<h2>${this.heading ?? ''}</h2>`; break;\n      case 3: headingContent = html`<h3>${this.heading ?? ''}</h3>`; break;\n      case 4: headingContent = html`<h4>${this.heading ?? ''}</h4>`; break;\n      case 5: headingContent = html`<h5>${this.heading ?? ''}</h5>`; break;\n    }\n\n    const headingSlotWithFallback = html`\n      <slot id=\"heading\" name=\"heading\" part=\"heading\" ?hidden=${!hasHeading}>${headingContent}</slot>\n    `;\n\n    const headerIcon = this.icon\n      ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity)\n      ?? '';\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}\">\n        <slot id=\"trigger\"\n              @slotchange=\"${this.#triggerChanged}\"\n              @keydown=\"${this.#onKeydown}\"\n              @click=\"${this.toggle}\"></slot>\n        <dialog id=\"popover\"\n                ?hidden=\"${this.#hideDialog}\"\n                aria-labelledby=\"heading\"\n                aria-describedby=\"body\"\n                aria-label=${ifDefined(this.label)}>\n          <div id=\"arrow\"></div>\n          <div id=\"content\" part=\"content\">\n            <pf-button id=\"close-button\"\n                       part=\"close-button\"\n                       plain\n                       label=\"${this.accessibleCloseLabel ?? this.closeButtonLabel ?? 'Close popover'}\"\n                       @click=\"${this.hide}\"\n                       @keydown=\"${this.#onKeydown}\"\n                       ?hidden=\"${this.hideClose}\">\n              <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n              </svg>\n            </pf-button>\n            ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n            <header part=\"header\">\n              <span part=\"icon\">\n                <slot name=\"icon\">\n                  <pf-icon icon=\"${headerIcon}\"\n                           set=\"${ifDefined(this.iconSet)}\"\n                           size=\"md\"></pf-icon>\n                </slot>\n              </span>${!this.alertSeverity ? nothing : html`\n              <span class=\"visually-hidden\">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}\n              ${headingSlotWithFallback}\n            </header>`}\n            <slot id=\"body\" part=\"body\" name=\"body\">${this.body ?? ''}</slot>\n            <footer part=\"footer\" ?hidden=${!hasFooter}>\n              <slot name=\"footer\">${this.footer}</slot>\n            </footer>\n          </div>\n        </dialog>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    PfPopover.instances.delete(this);\n    this.#referenceTrigger?.removeEventListener('click', this.toggle);\n    this.#referenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n  }\n\n  #getReferenceTrigger() {\n    if (isServer || !this.trigger) {\n      return null;\n    } else {\n      return (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger);\n    }\n  }\n\n  #triggerChanged() {\n    const oldReferenceTrigger = this.#referenceTrigger;\n    this.#referenceTrigger = this.#getReferenceTrigger();\n    if (oldReferenceTrigger !== this.#referenceTrigger) {\n      oldReferenceTrigger?.removeEventListener('click', this.toggle);\n      oldReferenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n      this.#referenceTrigger?.addEventListener('click', this.toggle);\n      this.#referenceTrigger?.addEventListener('keydown', this.#onKeydown);\n    }\n  }\n\n  #onKeydown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.hide();\n        return;\n      case 'Enter':\n        if (event.target === this.#referenceTrigger || event.target === this._slottedTrigger) {\n          event.preventDefault();\n          this.show();\n        }\n        return;\n    }\n  };\n\n  #outsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this) && !path.includes(this.#referenceTrigger as HTMLElement)) {\n      this.hide();\n    }\n  }\n\n  /**\n   * Removes event listeners from the old trigger element and attaches\n   * them to the new trigger element.\n   * @param changed changed props\n   */\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('trigger')) {\n      this.#triggerChanged();\n    }\n  }\n\n  /**\n   * Toggle the popover\n   */\n  @bound async toggle(): Promise<void> {\n    if (this.#float.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Opens the popover\n   */\n  @bound async show(): Promise<void> {\n    this.#hideDialog = false;\n    this.requestUpdate();\n    this.dispatchEvent(new PopoverShowEvent());\n    await this.updateComplete;\n    await this.#float.show({\n      offset: this.distance ?? 25,\n      placement: this.position,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n    this._popover?.show();\n    this.dispatchEvent(new PopoverShownEvent());\n    PfPopover.instances.add(this);\n  }\n\n  /**\n   * Closes the popover\n   */\n  @bound async hide(): Promise<void> {\n    this.dispatchEvent(new PopoverHideEvent());\n    await this.#float.hide();\n    this._popover?.close();\n    this.dispatchEvent(new PopoverHiddenEvent());\n    PfPopover.instances.delete(this);\n    this.#hideDialog = true;\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-popover': PfPopover;\n  }\n}\n"]}
+{"version":3,"file":"pf-popover.js","sourceRoot":"","sources":["pf-popover.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { LitElement, nothing, html, type PropertyValues, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\nimport { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-popover.css';\n\ntype HeadingLevel = 2 | 3 | 4 | 5 | 6;\n\ntype AlertSeverity = 'default' | 'info' | 'warning' | 'success' | 'danger';\n\nexport class PopoverHideEvent extends ComposedEvent {\n  constructor() {\n    super('hide');\n  }\n}\n\nexport class PopoverHiddenEvent extends ComposedEvent {\n  constructor() {\n    super('hidden');\n  }\n}\n\nexport class PopoverShowEvent extends ComposedEvent {\n  constructor() {\n    super('show');\n  }\n}\n\nexport class PopoverShownEvent extends ComposedEvent {\n  constructor() {\n    super('shown');\n  }\n}\n\n/**\n * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.\n * @summary Toggle the visibility of helpful or contextual information.\n * @alias Popover\n */\n@customElement('pf-popover')\nexport class PfPopover extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  private static instances = new Set<PfPopover>();\n\n  private static alertIcons = new Map(Object.entries({\n    default: 'bell',\n    info: 'circle-info',\n    success: 'circle-check',\n    warning: 'triangle-exclamation',\n    danger: 'circle-exclamation',\n  } satisfies Record<AlertSeverity, string>) as [AlertSeverity, string][]);\n\n  static {\n    if (!isServer) {\n      document.addEventListener('click', function(event) {\n        for (const instance of PfPopover.instances) {\n          if (!instance.noOutsideClick) {\n            instance.#outsideClick(event);\n          }\n        }\n      });\n    }\n  }\n\n  /**\n   * Indicates the initial popover position.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is `top`.\n   */\n  @property({ reflect: true }) position: Placement = 'top';\n\n  /**\n   * The content rendered in the popover's heading.\n   */\n  @property({ reflect: true }) heading?: string;\n\n  /**\n   * The content rendered in the popover's body.\n   */\n  @property({ reflect: true }) body?: string;\n\n  /**\n   * The content rendered in the popover's footer.\n   */\n  @property({ reflect: true }) footer?: string;\n\n  /**\n   * The icon placed before the popover's heading.\n   */\n  @property({ reflect: true }) icon?: string;\n\n  /**\n   * The accessible label for the popover. This is required if the no heading is set.\n   */\n  @property({ reflect: true }) label?: string;\n\n  /**\n   * The distance to set between the popover and its trigger element.\n   */\n  @property({ type: Number, reflect: true }) distance?: number;\n\n  /**\n   * The flip order when flip is enabled and the initial position is not possible.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is [oppositePlacement], where only the opposite placement is tried.\n   */\n  @property({\n    attribute: 'flip-behavior',\n    converter: StringListConverter,\n  }) flipBehavior?: Placement[];\n\n  /**\n   * Disable the flip behavior. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-flip' }) noFlip = false;\n\n  /**\n   * The heading level to use for the popover's header. The default is `h6`.\n   */\n  @property({\n    type: Number,\n    reflect: true,\n    attribute: 'heading-level',\n  }) headingLevel?: HeadingLevel;\n\n  /**\n   * Indicates which icon set to use for the header's icon.\n   * The default is `fas` (Font Awesome Free Solid).\n   */\n  @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n  /**\n   * Hide the close button. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' }) hideClose?: boolean;\n\n  /**\n   * Indicates the severity variant to use for the alert popover.\n   * There are five options: `default`, `info`, `warning`, `success`, and `danger`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity' }) alertSeverity?: AlertSeverity;\n\n  /**\n   * The accessible label for the popover's close button. The default is `Close popover`.\n   */\n  @property({ reflect: true, attribute: 'accessible-close-label' }) accessibleCloseLabel?: string;\n\n  /**\n   * @deprecated do not use the color-palette attribute, which was added by mistake. use context-providing containers (e.g. rh-card) instead\n   */\n  @deprecation({\n    alias: 'accessible-close-label',\n    attribute: 'close-label',\n  }) closeButtonLabel?: string;\n\n  /**\n   * The text announced by the screen reader to indicate the popover's severity.\n   * The default is `${alertSeverity} alert:`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity-text' }) alertSeverityText?: string;\n\n  /**\n   * Don't hide the popover when clicking ouside of it.\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'no-outside-click',\n  }) noOutsideClick?: boolean;\n\n  /**\n   * The ID of the element to attach the popover to.\n   */\n  @property({ reflect: true }) trigger?: string;\n\n  @query('#popover') private _popover!: HTMLDialogElement;\n  @query('#trigger') private _slottedTrigger?: HTMLElement | null;\n  @query('#arrow') private _arrow!: HTMLDivElement;\n\n  /** True before the show animation begins and after the hide animation ends */\n  #hideDialog = true;\n\n  #referenceTrigger?: HTMLElement | null = null;\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._popover,\n    arrow: () => this._arrow,\n    invoker: () => this.#referenceTrigger || this._slottedTrigger,\n  });\n\n  #slots = new SlotController(this, null, 'icon', 'heading', 'body', 'footer');\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('keydown', this.#onKeydown);\n    }\n  }\n\n  render(): TemplateResult<1> {\n    const { alignment, anchor, styles } = this.#float;\n    const hasFooter = this.#slots.hasSlotted('footer') || !!this.footer;\n    const hasHeading = this.#slots.hasSlotted('heading') || !!this.heading;\n    const hasIcon = this.#slots.hasSlotted('icon') || !!this.icon || !!this.alertSeverity;\n\n    // https://github.com/asyncLiz/minify-html-literals/issues/37\n    let headingContent = html`<h6>${this.heading ?? ''}</h6>`;\n    switch (this.headingLevel) {\n      case 2: headingContent = html`<h2>${this.heading ?? ''}</h2>`; break;\n      case 3: headingContent = html`<h3>${this.heading ?? ''}</h3>`; break;\n      case 4: headingContent = html`<h4>${this.heading ?? ''}</h4>`; break;\n      case 5: headingContent = html`<h5>${this.heading ?? ''}</h5>`; break;\n    }\n\n    const headingSlotWithFallback = html`\n      <!-- slot:\n             summary: Heading content.\n             description: |\n               This slot projects content into the header of the popover.\n               Typically this would be a heading (e.g. h2, h3, etc.) element.\n           part:\n             summary: The heading element\n      -->\n      <slot id=\"heading\" name=\"heading\" part=\"heading\" ?hidden=${!hasHeading}>${headingContent}</slot>\n    `;\n\n    const headerIcon = this.icon\n      ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity)\n      ?? '';\n\n    return html`\n      <!-- The component wrapper -->\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}\"\n           part=\"container\">\n        <!-- The default slot holds invoking element.\n             Typically this would be an icon, button, or other small sized element. -->\n        <slot id=\"trigger\"\n              @slotchange=\"${this.#triggerChanged}\"\n              @keydown=\"${this.#onKeydown}\"\n              @click=\"${this.toggle}\"></slot>\n        <dialog id=\"popover\"\n                ?hidden=\"${this.#hideDialog}\"\n                aria-labelledby=\"heading\"\n                aria-describedby=\"body\"\n                aria-label=${ifDefined(this.label)}>\n          <div id=\"arrow\"></div>\n          <!-- The content wrapper -->\n          <div id=\"content\" part=\"content\">\n            <!-- The close button -->\n            <pf-button id=\"close-button\"\n                       part=\"close-button\"\n                       plain\n                       label=\"${this.accessibleCloseLabel ?? this.closeButtonLabel ?? 'Close popover'}\"\n                       @click=\"${this.hide}\"\n                       @keydown=\"${this.#onKeydown}\"\n                       ?hidden=\"${this.hideClose}\">\n              <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n              </svg>\n            </pf-button>\n            ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n            <!-- The header element; only visible if both an icon annd heading are provided. -->\n            <header part=\"header\">\n              <!-- summary: Container for the header icon -->\n              <span part=\"icon\">\n                <!-- summary: The icon in the header of the popover, before the heading. -->\n                <slot name=\"icon\">\n                  <pf-icon icon=\"${headerIcon}\"\n                           set=\"${ifDefined(this.iconSet)}\"\n                           size=\"md\"></pf-icon>\n                </slot>\n              </span>${!this.alertSeverity ? nothing : html`\n              <span class=\"visually-hidden\">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}\n              ${headingSlotWithFallback}\n            </header>`}\n            <!-- slot:\n                   summary: body of the popover, which is hidden until the popover is activated.\n                 part:\n                   summary: The container for the body content\n            -->\n            <slot id=\"body\" part=\"body\" name=\"body\">${this.body ?? ''}</slot>\n            <!-- summary: The container for the footer content -->\n            <footer part=\"footer\" ?hidden=${!hasFooter}>\n              <!-- summary: optional footer content of the popover. -->\n              <slot name=\"footer\">${this.footer}</slot>\n            </footer>\n          </div>\n        </dialog>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    PfPopover.instances.delete(this);\n    this.#referenceTrigger?.removeEventListener('click', this.toggle);\n    this.#referenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n  }\n\n  #getReferenceTrigger() {\n    if (isServer || !this.trigger) {\n      return null;\n    } else {\n      return (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger);\n    }\n  }\n\n  #triggerChanged() {\n    const oldReferenceTrigger = this.#referenceTrigger;\n    this.#referenceTrigger = this.#getReferenceTrigger();\n    if (oldReferenceTrigger !== this.#referenceTrigger) {\n      oldReferenceTrigger?.removeEventListener('click', this.toggle);\n      oldReferenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n      this.#referenceTrigger?.addEventListener('click', this.toggle);\n      this.#referenceTrigger?.addEventListener('keydown', this.#onKeydown);\n    }\n  }\n\n  #onKeydown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.hide();\n        return;\n      case 'Enter':\n        if (event.target === this.#referenceTrigger || event.target === this._slottedTrigger) {\n          event.preventDefault();\n          this.show();\n        }\n        return;\n    }\n  };\n\n  #outsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this) && !path.includes(this.#referenceTrigger as HTMLElement)) {\n      this.hide();\n    }\n  }\n\n  /**\n   * Removes event listeners from the old trigger element and attaches\n   * them to the new trigger element.\n   * @param changed changed props\n   */\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('trigger')) {\n      this.#triggerChanged();\n    }\n  }\n\n  /**\n   * Toggle the popover\n   */\n  @bound async toggle(): Promise<void> {\n    if (this.#float.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Opens the popover\n   */\n  @bound async show(): Promise<void> {\n    this.#hideDialog = false;\n    this.requestUpdate();\n    this.dispatchEvent(new PopoverShowEvent());\n    await this.updateComplete;\n    await this.#float.show({\n      offset: this.distance ?? 25,\n      placement: this.position,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n    this._popover?.show();\n    this.dispatchEvent(new PopoverShownEvent());\n    PfPopover.instances.add(this);\n  }\n\n  /**\n   * Closes the popover\n   */\n  @bound async hide(): Promise<void> {\n    this.dispatchEvent(new PopoverHideEvent());\n    await this.#float.hide();\n    this._popover?.close();\n    this.dispatchEvent(new PopoverHiddenEvent());\n    PfPopover.instances.delete(this);\n    this.#hideDialog = true;\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-popover': PfPopover;\n  }\n}\n"]}

package/pf-progress/pf-progress.css

@@ -8,24 +8,43 @@
   --_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity: #f0ab0033;  /* WARNING: not a recognized token value */
   --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33;  /* WARNING: not a recognized token value */
 
+  /** Gap between sections of progress bar */
   --pf-c-progress--GridGap: var(--pf-global--spacer--md, 1rem);
+  /** Color of progress bar */
   --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc);
+  /** Height of progress bar */
   --pf-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem);
+  /** Background color of progress bar */
   --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff);
+  /** Color of status icon */
   --pf-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515);
+  /** Margin left of status icon */
   --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** Height of progress bar indicator */
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
+  /** Background color of progress bar indicator */
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  /** Background color of progress bar when variant is success */
   --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
+  /** Background color of progress bar when variant is warning */
   --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+  /** Background color of progress bar when variant is danger */
   --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Color of status icon when variant is success */
   --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+  /** Color of status icon when variant is warning */
   --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+  /** Color of status icon when variant is danger */
   --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+  /** Color of progress bar measure when variant is success and measure location is inside */
   --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff);
+  /** Font size of progress bar measure when measure location is outside */
   --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Height of progress bar when size is small */
   --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem);
+  /** Font size of progress bar description when size is small */
   --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Height of progress bar when size is large */
   --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem);
   display: grid;
   align-items: end;

package/pf-progress/pf-progress.d.ts

@@ -3,63 +3,7 @@ import { LitElement } from 'lit';
 /**
  * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
  * @summary Display completion status of ongoing process or task.
- * @cssprop {<length>} [--pf-c-progress--GridGap=1rem]
- *          Gap between the sections of the progress bar.
- *
- * @cssprop {<color>} [--pf-c-progress__bar--before--BackgroundColor=#06c]
- *          Color of the progress bar.
- *
- * @cssprop {<length>} [--pf-c-progress__bar--Height=1rem]
- *          Height of the progress bar.
- *
- * @cssprop {<color>} [--pf-c-progress__bar--BackgroundColor=#ffffff]
- *          Background color of the progress bar.
- *
- * @cssprop {<color>} [--pf-c-progress__status-icon--Color=#151515]
- *          Color of the status icon.
- *
- * @cssprop {<length>} [--pf-c-progress__status-icon--MarginLeft=0.5rem]
- *          Margin left of the status icon.
- *
- * @cssprop {<length>} [--pf-c-progress__indicator--Height=1rem]
- *          Height of the progress bar indicator.
- *
- * @cssprop {<color>} [--pf-c-progress__indicator--BackgroundColor=#ffffff]
- *          Background color of the progress bar indicator.
- *
- * @cssprop {<color>} [--pf-c-progress--m-success__bar--BackgroundColor=#3e8635]
- *          Background color of the progress bar when variant is success.
- *
- * @cssprop {<color>} [--pf-c-progress--m-warning__bar--BackgroundColor=#f0ab00]
- *          Background color of the progress bar when variant is warning.
- *
- * @cssprop {<color>} [--pf-c-progress--m-danger__bar--BackgroundColor=#c9190b]
- *          Background color of the progress bar when variant is danger.
- *
- * @cssprop {<color>} [--pf-c-progress--m-success__status-icon--Color=#3e8635]
- *          Color of the status icon when variant is success.
- *
- * @cssprop {<color>} [--pf-c-progress--m-warning__status-icon--Color=#f0ab00]
- *          Color of the status icon when variant is warning.
- *
- * @cssprop {<color>} [--pf-c-progress--m-danger__status-icon--Color=#c9190b]
- *          Color of the status icon when variant is danger.
- *
- * @cssprop {<color>} [--pf-c-progress--m-success--m-inside__measure--Color=#ffffff]
- *          Color of the progress bar measure when variant is success and measure location is inside.
- *
- * @cssprop {<length>} [--pf-c-progress--m-outside__measure--FontSize=0.875rem]
- *          Font size of the progress bar measure when measure location is outside.
- *
- * @cssprop {<length>} [--pf-c-progress--m-sm__bar--Height=0.5rem]
- *          Height of the progress bar when the size is small.
- *
- * @cssprop {<length>} [--pf-c-progress--m-sm__description--FontSize=0.875rem]
- *          Font size of the progress bar description when the size is small.
- *
- * @cssprop {<length>} [--pf-c-progress--m-lg__bar--Height=1.5rem]
- *          Height of the progress bar when the size is large.
- *
+ * @alias Progress
  */
 export declare class PfProgress extends LitElement {
     #private;