@patternfly/elements 2.4.0 → 3.0.1

package/pf-popover/pf-popover.js

@@ -1,4 +1,4 @@
-var _PfPopover_instances, _PfPopover_referenceTrigger, _PfPopover_float, _PfPopover_slots, _PfPopover_getReferenceTrigger, _PfPopover_triggerChanged, _PfPopover_outsideClick;
+var _PfPopover_instances, _PfPopover_hideDialog, _PfPopover_referenceTrigger, _PfPopover_float, _PfPopover_slots, _PfPopover_getReferenceTrigger, _PfPopover_triggerChanged, _PfPopover_onKeydown, _PfPopover_outsideClick;
 var PfPopover_1;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, nothing, html } from 'lit';
@@ -14,7 +14,8 @@ 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{display:inline;--_floating-arrow-size:var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));--_header-text-color:var(--pf-c-popover__title-text--Color, inherit);--_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;background-color:var(--pf-c-popover__arrow--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));box-shadow:var(--pf-c-popover__arrow--BoxShadow,var(--pf-global--BoxShadow--lg,0 .5rem 1rem 0 rgba(3,3,3,.16),0 0 .375rem 0 rgba(3,3,3,.08)));content:'';height:var(--pf-c-popover__arrow--Height,var(--pf-global--arrow--width-lg,1.5625rem));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(.54, 1.5, .38, 1.11) 0s;left:0;top:0;translate:var(--_floating-content-translate);box-shadow:var(--pf-c-popover--BoxShadow,var(--pf-global--BoxShadow--lg,0 .5rem 1rem 0 rgba(3,3,3,.16),0 0 .375rem 0 rgba(3,3,3,.08)));border:0;padding:0;visibility:hidden}#popover[open]{opacity:1;z-index:var(--_z-index);visibility:visible}[part=content]{position:relative;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;line-height:var(--pf-c-popover--line-height, 1.5);font-size:var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-popover__content--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-popover__content--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));max-width:var(--pf-c-popover--MaxWidth,calc(var(--pf-c-popover__content--PaddingLeft,1rem) + var(--pf-c-popover__content--PaddingRight,1rem) + 18.75rem));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;right:var(--pf-c-popover--c-button--Right,calc(var(--pf-c-popover__content--PaddingRight,1rem) - var(--pf-global--spacer--md,1rem)));top:var(--pf-c-popover--c-button--Top,calc(var(--pf-c-popover__content--PaddingTop,1rem) - var(--pf-global--spacer--form-element,.375rem)))}[part=content]>[part=close-button]:not([hidden])~:not([hidden]){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);margin-right:var(--pf-c-popover__title-icon--MarginRight,var(--pf-global--spacer--sm,.5rem))}[part=icon] *,[part=icon] ::slotted(*){vertical-align:-.125em}[part=heading] :is(h2,h3,h4,h5,h6),[part=heading]::slotted(:is(h2,h3,h4,h5,h6)),[part=icon]{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(\n    --pf-c-popover__title--FontSize,\n    var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))\n  )}[part=heading] :is(h2,h3,h4,h5,h6),[part=heading]::slotted(:is(h2,h3,h4,h5,h6)){color:var(--_header-text-color);margin-top:0;margin-bottom:var(--pf-c-popover__title--MarginBottom,var(--pf-global--spacer--sm,.5rem));line-height:var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));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  )}[part=body]{display:block;word-wrap:break-word}[part=footer]{margin-top:var(--pf-c-popover__footer--MarginTop,var(--pf-global--spacer--md,1rem))}:host([alert-severity=default]){--_header-text-color:var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));--_header-icon-color:var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596))}:host([alert-severity=info]){--_header-text-color:var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));--_header-icon-color:var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3))}:host([alert-severity=warning]){--_header-icon-color:var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));--_header-text-color:var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600))}:host([alert-severity=success]){--_header-icon-color:var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));--_header-text-color:var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18))}:host([alert-severity=danger]){--_header-icon-color:var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));--_header-text-color:var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000))}`;
+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`;
+import { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';
 const headingLevels = [2, 3, 4, 5, 6];
 export class PopoverHideEvent extends ComposedEvent {
     constructor() {
@@ -38,9 +39,7 @@ export 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.
@@ -54,7 +53,6 @@ export class PopoverShownEvent extends ComposedEvent {
  *       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.
@@ -63,7 +61,6 @@ export class PopoverShownEvent extends ComposedEvent {
  * @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
  *          Height of the arrow
  *          {@default `1.5625rem`}
@@ -172,7 +169,7 @@ export class PopoverShownEvent extends ComposedEvent {
  */
 let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         _PfPopover_instances.add(this);
         /**
          * Indicates the initial popover position.
@@ -185,6 +182,8 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
          * Disable the flip behavior. The default is `false`.
          */
         this.noFlip = false;
+        /** True before the show animation begins and after the hide animation ends */
+        _PfPopover_hideDialog.set(this, true);
         _PfPopover_referenceTrigger.set(this, null);
         _PfPopover_float.set(this, new FloatingDOMController(this, {
             content: () => this._popover,
@@ -192,10 +191,22 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
             invoker: () => __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f") || this._slottedTrigger,
         }));
         _PfPopover_slots.set(this, new SlotController(this, null, 'icon', 'heading', 'body', 'footer'));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('keydown', this.onKeydown);
+        _PfPopover_onKeydown.set(this, (event) => {
+            switch (event.key) {
+                case 'Escape':
+                case 'Esc':
+                    event.preventDefault();
+                    this.hide();
+                    return;
+                case 'Enter':
+                    if (event.target === __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f") || event.target === this._slottedTrigger) {
+                        event.preventDefault();
+                        this.show();
+                    }
+                    return;
+            }
+        });
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _PfPopover_onKeydown, "f"));
     }
     render() {
         const { alignment, anchor, styles } = __classPrivateFieldGet(this, _PfPopover_float, "f");
@@ -221,42 +232,47 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
         const headingSlotWithFallback = html `
       <slot id="heading" name="heading" part="heading" ?hidden=${!hasHeading}>${headingContent}</slot>
     `;
-        const header = !(hasHeading && hasIcon) ? headingSlotWithFallback : html `
-      <header part="header">
-        <span part="icon">
-          <slot name="icon">
-            <pf-icon icon="${this.icon ?? PfPopover_1.alertIcons.get(this.alertSeverity) ?? ''}"
-                     set="${ifDefined(this.iconSet)}"
-                     size="md"></pf-icon>
-          </slot>
-        </span>${!this.alertSeverity ? nothing : html `
-        <span class="visually-hidden">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}
-        ${headingSlotWithFallback}
-      </header>
-    `;
+        const headerIcon = this.icon
+            ?? PfPopover_1.alertIcons.get(this.alertSeverity)
+            ?? '';
         return html `
       <div id="container"
            style="${styleMap(styles)}"
            class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}">
         <slot id="trigger"
               @slotchange="${__classPrivateFieldGet(this, _PfPopover_instances, "m", _PfPopover_triggerChanged)}"
-              @keydown=${this.onKeydown}
-              @click=${this.toggle}></slot>
-        <dialog id="popover" aria-labelledby="heading" aria-describedby="body" aria-label=${ifDefined(this.label)}>
+              @keydown="${__classPrivateFieldGet(this, _PfPopover_onKeydown, "f")}"
+              @click="${this.toggle}"></slot>
+        <dialog id="popover"
+                ?hidden="${__classPrivateFieldGet(this, _PfPopover_hideDialog, "f")}"
+                aria-labelledby="heading"
+                aria-describedby="body"
+                aria-label=${ifDefined(this.label)}>
           <div id="arrow"></div>
           <div id="content" part="content">
             <pf-button id="close-button"
                        part="close-button"
                        plain
-                       label="${this.closeButtonLabel ?? 'Close popover'}"
+                       label="${this.accessibleCloseLabel ?? this.closeButtonLabel ?? 'Close popover'}"
                        @click="${this.hide}"
-                       @keydown="${this.onKeydown}"
+                       @keydown="${__classPrivateFieldGet(this, _PfPopover_onKeydown, "f")}"
                        ?hidden="${this.hideClose}">
               <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
                 <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"/>
               </svg>
             </pf-button>
-            ${header}
+            ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html `
+            <header part="header">
+              <span part="icon">
+                <slot name="icon">
+                  <pf-icon icon="${headerIcon}"
+                           set="${ifDefined(this.iconSet)}"
+                           size="md"></pf-icon>
+                </slot>
+              </span>${!this.alertSeverity ? nothing : html `
+              <span class="visually-hidden">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}
+              ${headingSlotWithFallback}
+            </header>`}
             <slot id="body" part="body" name="body">${this.body ?? ''}</slot>
             <footer part="footer" ?hidden=${!hasFooter}>
               <slot name="footer">${this.footer}</slot>
@@ -270,22 +286,7 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
         super.disconnectedCallback();
         PfPopover_1.instances.delete(this);
         __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('click', this.toggle);
-        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('keydown', this.onKeydown);
-    }
-    onKeydown(event) {
-        switch (event.key) {
-            case 'Escape':
-            case 'Esc':
-                event.preventDefault();
-                this.hide();
-                return;
-            case 'Enter':
-                if (event.target === __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f") || event.target === this._slottedTrigger) {
-                    event.preventDefault();
-                    this.show();
-                }
-                return;
-        }
+        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('keydown', __classPrivateFieldGet(this, _PfPopover_onKeydown, "f"));
     }
     /**
      * Removes event listeners from the old trigger element and attaches
@@ -306,6 +307,8 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
      * Opens the popover
      */
     async show() {
+        __classPrivateFieldSet(this, _PfPopover_hideDialog, false, "f");
+        this.requestUpdate();
         this.dispatchEvent(new PopoverShowEvent());
         await this.updateComplete;
         await __classPrivateFieldGet(this, _PfPopover_float, "f").show({
@@ -327,11 +330,15 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
         this._popover?.close();
         this.dispatchEvent(new PopoverHiddenEvent());
         PfPopover_1.instances.delete(this);
+        __classPrivateFieldSet(this, _PfPopover_hideDialog, true, "f");
+        this.requestUpdate();
     }
 };
+_PfPopover_hideDialog = new WeakMap();
 _PfPopover_referenceTrigger = new WeakMap();
 _PfPopover_float = new WeakMap();
 _PfPopover_slots = new WeakMap();
+_PfPopover_onKeydown = new WeakMap();
 _PfPopover_instances = new WeakSet();
 _PfPopover_getReferenceTrigger = function _PfPopover_getReferenceTrigger() {
     const root = this.getRootNode();
@@ -342,9 +349,9 @@ _PfPopover_triggerChanged = function _PfPopover_triggerChanged() {
     __classPrivateFieldSet(this, _PfPopover_referenceTrigger, __classPrivateFieldGet(this, _PfPopover_instances, "m", _PfPopover_getReferenceTrigger).call(this), "f");
     if (oldReferenceTrigger !== __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")) {
         oldReferenceTrigger?.removeEventListener('click', this.toggle);
-        oldReferenceTrigger?.removeEventListener('keydown', this.onKeydown);
+        oldReferenceTrigger?.removeEventListener('keydown', __classPrivateFieldGet(this, _PfPopover_onKeydown, "f"));
         __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.addEventListener('click', this.toggle);
-        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.addEventListener('keydown', this.onKeydown);
+        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.addEventListener('keydown', __classPrivateFieldGet(this, _PfPopover_onKeydown, "f"));
     }
 };
 _PfPopover_outsideClick = function _PfPopover_outsideClick(event) {
@@ -402,7 +409,11 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'no-flip' })
 ], PfPopover.prototype, "noFlip", void 0);
 __decorate([
-    property({ type: Number, reflect: true, attribute: 'heading-level' })
+    property({
+        type: Number,
+        reflect: true,
+        attribute: 'heading-level',
+    })
 ], PfPopover.prototype, "headingLevel", void 0);
 __decorate([
     property({ reflect: true, attribute: 'icon-set' })
@@ -414,7 +425,13 @@ __decorate([
     property({ reflect: true, attribute: 'alert-severity' })
 ], PfPopover.prototype, "alertSeverity", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'close-label' })
+    property({ reflect: true, attribute: 'accessible-close-label' })
+], PfPopover.prototype, "accessibleCloseLabel", void 0);
+__decorate([
+    deprecation({
+        alias: 'accessible-close-label',
+        attribute: 'close-label',
+    })
 ], PfPopover.prototype, "closeButtonLabel", void 0);
 __decorate([
     property({ reflect: true, attribute: 'alert-severity-text' })
@@ -438,9 +455,6 @@ __decorate([
 __decorate([
     query('#arrow')
 ], PfPopover.prototype, "_arrow", void 0);
-__decorate([
-    bound
-], PfPopover.prototype, "onKeydown", null);
 __decorate([
     bound
 ], PfPopover.prototype, "toggle", null);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-popover.js","sourceRoot":"","sources":["pf-popover.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAElF,OAAO,6CAA6C,CAAC;;;AAGrD,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAC;AAM/C,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IACjD;QACE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;CACF;AAED,MAAM,OAAO,kBAAmB,SAAQ,aAAa;IACnD;QACE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClB,CAAC;CACF;AAED,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IACjD;QACE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;CACF;AAED,MAAM,OAAO,iBAAkB,SAAQ,aAAa;IAClD;QACE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqIG;AAEH,IAAa,SAAS,iBAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;;QAuBE;;;;;WAKG;QAC0B,aAAQ,GAAc,KAAK,CAAC;QA2CzD;;WAEG;QAC+D,WAAM,GAAG,KAAK,CAAC;QAqDjF,sCAAyC,IAAI,EAAC;QAE9C,2BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC5B,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM;YACxB,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAA,IAAI,mCAAkB,IAAI,IAAI,CAAC,eAAe;SAC9D,CAAC,EAAC;QAEH,2BAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAC;IAoK/E,CAAC;IAlKC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,wBAAO,CAAC;QAClD,MAAM,SAAS,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QACpE,MAAM,UAAU,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACvE,MAAM,OAAO,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAEtF,6DAA6D;QAC7D,IAAI,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;QAC1D,QAAQ,IAAI,CAAC,YAAY,EAAE;YACzB,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;SACtE;QAED,MAAM,uBAAuB,GAAG,IAAI,CAAA;iEACyB,CAAC,UAAU,IAAI,cAAc;KACzF,CAAC;QAEF,MAAM,MAAM,GAAG,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;6BAI/C,IAAI,CAAC,IAAI,IAAI,WAAS,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,aAA8B,CAAC,IAAI,EAAE;4BACjF,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;iBAGlC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;wCACb,IAAI,CAAC,iBAAiB,IAAI,GAAG,IAAI,CAAC,aAAa,SAAS,SAAS;UAC/F,uBAAuB;;KAE5B,CAAC;QAEF,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;oBAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;6BAEjD,uBAAA,IAAI,uDAAgB;yBACxB,IAAI,CAAC,SAAS;uBAChB,IAAI,CAAC,MAAM;4FAC0D,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;gCAMjF,IAAI,CAAC,gBAAgB,IAAI,eAAe;iCACvC,IAAI,CAAC,IAAI;mCACP,IAAI,CAAC,SAAS;kCACf,IAAI,CAAC,SAAS;;;;;cAKlC,MAAM;sDACkC,IAAI,CAAC,IAAI,IAAI,EAAE;4CACzB,CAAC,SAAS;oCAClB,IAAI,CAAC,MAAM;;;;;KAK1C,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,WAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjC,uBAAA,IAAI,mCAAkB,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAClE,uBAAA,IAAI,mCAAkB,EAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACzE,CAAC;IAmBc,SAAS,CAAC,KAAoB;QAC3C,QAAQ,KAAK,CAAC,GAAG,EAAE;YACjB,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACZ,OAAO;YACT,KAAK,OAAO;gBACV,IAAI,KAAK,CAAC,MAAM,KAAK,uBAAA,IAAI,mCAAkB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,eAAe,EAAE;oBACpF,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,EAAE,CAAC;iBACb;gBACD,OAAO;SACV;IACH,CAAC;IASD;;;OAGG;IACM,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,uBAAA,IAAI,uDAAgB,MAApB,IAAI,CAAkB,CAAC;SACxB;IACH,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,MAAM;QACjB,uBAAA,IAAI,wBAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/C,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;QAC3C,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,CAAC;YACrB,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE;YAC3B,SAAS,EAAE,IAAI,CAAC,QAAQ;YACxB,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM;YAClB,kBAAkB,EAAE,IAAI,CAAC,YAAY;SACtC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,EAAE,CAAC,CAAC;QAC5C,WAAS,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;QAC3C,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;QAC7C,WAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;;;;;;;IAlFC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;IACzD,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClE,CAAC;;IAIC,MAAM,mBAAmB,GAAG,uBAAA,IAAI,mCAAkB,CAAC;IACnD,uBAAA,IAAI,+BAAqB,uBAAA,IAAI,4DAAqB,MAAzB,IAAI,CAAuB,MAAA,CAAC;IACrD,IAAI,mBAAmB,KAAK,uBAAA,IAAI,mCAAkB,EAAE;QAClD,mBAAmB,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,mBAAmB,EAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACpE,uBAAA,IAAI,mCAAkB,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,uBAAA,IAAI,mCAAkB,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;KACrE;AACH,CAAC;2DAkBa,KAAiB;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAA,IAAI,mCAAiC,CAAC,EAAE;QACjF,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;AACH,CAAC;AA7Pe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEnB,mBAAS,GAAG,IAAI,GAAG,EAAa,AAAvB,CAAwB;AAEjC,oBAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IACjD,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,sBAAsB;IAC/B,MAAM,EAAE,oBAAoB;CACW,CAA8B,CAAC,AAN/C,CAMgD;AAEzE;IACE,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAS,KAAK;QAC/C,KAAK,MAAM,QAAQ,IAAI,WAAS,CAAC,SAAS,EAAE;YAC1C,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE;gBAC5B,uBAAA,QAAQ,qDAAc,MAAtB,QAAQ,EAAe,KAAK,CAAC,CAAC;aAC/B;SACF;IACH,CAAC,CAAC,CAAC;AACL,CAAC,GAAA,CAAA;AAQ4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA6B;AAK5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAKjB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAKd;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAKhB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAKd;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAKD;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAmB;AAW1D;IAHF,QAAQ,CAAC;QACR,SAAS,EAAE,eAAe;QAC1B,SAAS,EAAE,mBAAmB;KAC/B,CAAC;+CAA4B;AAKoC;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;yCAAgB;AAKV;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CAA6B;AAM/C;IAAnD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;0CAAkB;AAKA;IAApE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAqB;AAM/B;IAAzD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAA+B;AAKjC;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;mDAA2B;AAMlB;IAA9D,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;oDAA4B;AASvF;IAJF,QAAQ,CAAC;QACR,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,kBAAkB;KAC9B,CAAC;iDAA0B;AAKC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAEnB;IAA1B,KAAK,CAAC,UAAU,CAAC;2CAAsC;AAC7B;IAA1B,KAAK,CAAC,UAAU,CAAC;kDAA8C;AACvC;IAAxB,KAAK,CAAC,QAAQ,CAAC;yCAAiC;AA2GlC;IAAd,KAAK;0CAcL;AAsBY;IAAZ,KAAK;uCAEL;AAKY;IAAZ,KAAK;qCAYL;AAKY;IAAZ,KAAK;qCAML;AA3SU,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA4SrB;SA5SY,SAAS","sourcesContent":["import { LitElement, nothing, html, type PropertyValues } 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 { bound } from '@patternfly/pfe-core/decorators/bound.js';\nimport { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';\nimport type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport styles from './pf-popover.css';\n\nconst headingLevels = [2, 3, 4, 5, 6] as const;\n\ntype HeadingLevel = (typeof headingLevels)[number];\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 *\n * @summary Toggle the visibility of helpful or contextual information.\n *\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 *\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 *\n * @cssprop {<length>} --pf-c-popover__arrow--Height\n *          Height of the arrow\n *          {@default `1.5625rem`}\n * @cssprop {<length>} --pf-c-popover__arrow--Width\n *          Width of the arrow\n *          {@default `1.5625rem`}\n * @cssprop {<color>} --pf-c-popover__title-text--Color\n *          Heading font color\n *          {@default `inherit`}\n * @cssprop {<color>} --pf-c-popover__title-icon--Color\n *          Heading icon font color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor\n *          Arrow background color\n *          {@default `#fff`}\n * @cssprop --pf-c-popover__arrow--BoxShadow\n *          Arrow box shadow\n *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop --pf-c-popover--BoxShadow\n *          Popover box shadow\n *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingTop\n *          Popover top padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight\n *          Popover right padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom\n *          Popover bottom padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft\n *          Popover left padding\n *          {@default `1rem`}\n * @cssprop {<number>} --pf-c-popover--line-height\n *          Popover line height\n *          {@default `1.5`}\n * @cssprop {<length>} --pf-c-popover__content--FontSize\n *          Popover font-size\n *          {@default `0.875rem`}\n * @cssprop {<color>} --pf-c-popover__content--BackgroundColor\n *          Popover background color\n *          {@default `#fff`}\n * @cssprop {<length>} --pf-c-popover--MaxWidth\n *          Popover max-width\n *          {@default `20.75rem`}\n * @cssprop {<length>} --pf-c-popover--MinWidth\n *          Popover min-width\n *          {@default `20.75rem`}\n * @cssprop {<number>} --pf-c-popover--c-button--Right\n *          Close button right position\n *          {@default `0}\n * @cssprop {<number>} --pf-c-popover--c-button--Top\n *          Close button top position\n *          {@default `0`}\n * @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight\n *          Padding between close button and its immediate sibling\n *          {@default `3rem`}\n * @cssprop {<length>} --pf-c-popover__title-icon--MarginRight\n *          Heading icon right margin\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-popover__title--FontSize\n *          Header font-size\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-popover__title--MarginBottom\n *          Header bottom margin\n *          {@default `0.5rem`}\n * @cssprop {<number>} --pf-c-popover__title--LineHeight\n *          Header line height\n *          {@default `1.5`}\n * @cssprop {<string>} --pf-c-popover__title--FontFamily\n *          Header font-family\n *          {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}\n * @cssprop {<length>} --pf-c-popover__footer--MarginTop\n *          Footer top margin\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-text--Color\n *          Default alert heading color\n *          {@default `#003737`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color\n *          Default alert icon color\n *          {@default `#009596`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-text--Color\n *          Default alert heading color\n *          {@default `#002952`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color\n *          Default alert icon color\n *          {@default `#2b9af3`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color\n *          Default alert heading color\n *          {@default `#795600`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color\n *          Default alert icon color\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-text--Color\n *          Default alert heading color\n *          {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color\n *          Default alert icon color\n *          {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color\n *          Default alert heading color\n *          {@default `#a30000`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color\n *          Default alert icon color\n *          {@default `#c9190b`}\n */\n@customElement('pf-popover')\nexport class PfPopover extends LitElement {\n  static readonly styles = [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    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   * 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({ type: Number, reflect: true, attribute: 'heading-level' }) 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: 'close-label' }) 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  #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  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n  }\n\n  render() {\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 header = !(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n      <header part=\"header\">\n        <span part=\"icon\">\n          <slot name=\"icon\">\n            <pf-icon icon=\"${this.icon ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) ?? ''}\"\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    `;\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\" aria-labelledby=\"heading\" aria-describedby=\"body\" 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.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            ${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() {\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    const root = this.getRootNode() as Document | ShadowRoot;\n    return !this.trigger ? null : root.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  @bound private 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   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('trigger')) {\n      this.#triggerChanged();\n    }\n  }\n\n  /**\n   * Toggle the popover\n   */\n  @bound async toggle() {\n    this.#float.open ? this.hide() : this.show();\n  }\n\n  /**\n   * Opens the popover\n   */\n  @bound async show() {\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() {\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  }\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":";;;AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAElF,OAAO,6CAA6C,CAAC;;;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAE7E,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAC;AAM/C,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IACjD;QACE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;CACF;AAED,MAAM,OAAO,kBAAmB,SAAQ,aAAa;IACnD;QACE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClB,CAAC;CACF;AAED,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IACjD;QACE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;CACF;AAED,MAAM,OAAO,iBAAkB,SAAQ,aAAa;IAClD;QACE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiIG;AAEI,IAAM,SAAS,iBAAf,MAAM,SAAU,SAAQ,UAAU;IAyJvC;QACE,KAAK,EAAE,CAAC;;QAnIV;;;;;WAKG;QAC0B,aAAQ,GAAc,KAAK,CAAC;QA2CzD;;WAEG;QAC+D,WAAM,GAAG,KAAK,CAAC;QAiEjF,8EAA8E;QAC9E,gCAAc,IAAI,EAAC;QAEnB,sCAAyC,IAAI,EAAC;QAE9C,2BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC5B,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM;YACxB,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAA,IAAI,mCAAkB,IAAI,IAAI,CAAC,eAAe;SAC9D,CAAC,EAAC;QAEH,2BAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAC;QAqG7E,+BAAa,CAAC,KAAoB,EAAE,EAAE;YACpC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,QAAQ,CAAC;gBACd,KAAK,KAAK;oBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,EAAE,CAAC;oBACZ,OAAO;gBACT,KAAK,OAAO;oBACV,IAAI,KAAK,CAAC,MAAM,KAAK,uBAAA,IAAI,mCAAkB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,eAAe,EAAE,CAAC;wBACrF,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,IAAI,CAAC,IAAI,EAAE,CAAC;oBACd,CAAC;oBACD,OAAO;YACX,CAAC;QACH,CAAC,EAAC;QA/GA,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,wBAAO,CAAC;QAClD,MAAM,SAAS,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QACpE,MAAM,UAAU,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACvE,MAAM,OAAO,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAEtF,6DAA6D;QAC7D,IAAI,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;QAC1D,QAAQ,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1B,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;QACvE,CAAC;QAED,MAAM,uBAAuB,GAAG,IAAI,CAAA;iEACyB,CAAC,UAAU,IAAI,cAAc;KACzF,CAAC;QAEF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI;eACvB,WAAS,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,aAA8B,CAAC;eAC7D,EAAE,CAAC;QAER,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;oBAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;6BAEjD,uBAAA,IAAI,uDAAgB;0BACvB,uBAAA,IAAI,4BAAW;wBACjB,IAAI,CAAC,MAAM;;2BAER,uBAAA,IAAI,6BAAY;;;6BAGd,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;gCAMlB,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,gBAAgB,IAAI,eAAe;iCACpE,IAAI,CAAC,IAAI;mCACP,uBAAA,IAAI,4BAAW;kCAChB,IAAI,CAAC,SAAS;;;;;cAKlC,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;mCAIpC,UAAU;kCACX,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;uBAGlC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;8CACb,IAAI,CAAC,iBAAiB,IAAI,GAAG,IAAI,CAAC,aAAa,SAAS,SAAS;gBAC/F,uBAAuB;sBACjB;sDACgC,IAAI,CAAC,IAAI,IAAI,EAAE;4CACzB,CAAC,SAAS;oCAClB,IAAI,CAAC,MAAM;;;;;KAK1C,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,WAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjC,uBAAA,IAAI,mCAAkB,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAClE,uBAAA,IAAI,mCAAkB,EAAE,mBAAmB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;IAC1E,CAAC;IAyCD;;;OAGG;IACM,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,uBAAA,IAAI,uDAAgB,MAApB,IAAI,CAAkB,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,MAAM;QACjB,uBAAA,IAAI,wBAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/C,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,IAAI;QACf,uBAAA,IAAI,yBAAe,KAAK,MAAA,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;QAC3C,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,CAAC;YACrB,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE;YAC3B,SAAS,EAAE,IAAI,CAAC,QAAQ;YACxB,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM;YAClB,kBAAkB,EAAE,IAAI,CAAC,YAAY;SACtC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,EAAE,CAAC,CAAC;QAC5C,WAAS,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;QAC3C,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;QAC7C,WAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjC,uBAAA,IAAI,yBAAe,IAAI,MAAA,CAAC;QACxB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;;;;;;;IArFC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;IACzD,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClE,CAAC;;IAGC,MAAM,mBAAmB,GAAG,uBAAA,IAAI,mCAAkB,CAAC;IACnD,uBAAA,IAAI,+BAAqB,uBAAA,IAAI,4DAAqB,MAAzB,IAAI,CAAuB,MAAA,CAAC;IACrD,IAAI,mBAAmB,KAAK,uBAAA,IAAI,mCAAkB,EAAE,CAAC;QACnD,mBAAmB,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,mBAAmB,EAAE,mBAAmB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;QACrE,uBAAA,IAAI,mCAAkB,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,uBAAA,IAAI,mCAAkB,EAAE,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;IACvE,CAAC;AACH,CAAC;2DAkBa,KAAiB;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAA,IAAI,mCAAiC,CAAC,EAAE,CAAC;QAClF,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;AACH,CAAC;AAhRe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEnB,mBAAS,GAAG,IAAI,GAAG,EAAa,AAAvB,CAAwB;AAEjC,oBAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IACjD,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,sBAAsB;IAC/B,MAAM,EAAE,oBAAoB;CACW,CAA8B,CAAC,AAN/C,CAMgD;AAEzE;IACE,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAS,KAAK;QAC/C,KAAK,MAAM,QAAQ,IAAI,WAAS,CAAC,SAAS,EAAE,CAAC;YAC3C,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;gBAC7B,uBAAA,QAAQ,qDAAc,MAAtB,QAAQ,EAAe,KAAK,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,GAAA,CAAA;AAQ4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA6B;AAK5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAKjB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAKd;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAKhB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAKd;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAKD;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAmB;AAW1D;IAHF,QAAQ,CAAC;QACR,SAAS,EAAE,eAAe;QAC1B,SAAS,EAAE,mBAAmB;KAC/B,CAAC;+CAA4B;AAKoC;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;yCAAgB;AAS9E;IAJF,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,eAAe;KAC3B,CAAC;+CAA6B;AAMqB;IAAnD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;0CAAkB;AAKA;IAApE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAqB;AAM/B;IAAzD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAA+B;AAKtB;IAAjE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;uDAA+B;AAQ7F;IAHF,WAAW,CAAC;QACX,KAAK,EAAE,wBAAwB;QAC/B,SAAS,EAAE,aAAa;KACzB,CAAC;mDAA2B;AAMkC;IAA9D,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;oDAA4B;AASvF;IAJF,QAAQ,CAAC;QACR,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,kBAAkB;KAC9B,CAAC;iDAA0B;AAKC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAEnB;IAA1B,KAAK,CAAC,UAAU,CAAC;2CAAsC;AAC7B;IAA1B,KAAK,CAAC,UAAU,CAAC;kDAA8C;AACvC;IAAxB,KAAK,CAAC,QAAQ,CAAC;yCAAiC;AAsJpC;IAAZ,KAAK;uCAEL;AAKY;IAAZ,KAAK;qCAcL;AAKY;IAAZ,KAAK;qCAQL;AAlUU,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmUrB","sourcesContent":["import { LitElement, nothing, html, type PropertyValues } 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 { bound } from '@patternfly/pfe-core/decorators/bound.js';\nimport { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';\nimport type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport styles from './pf-popover.css';\nimport { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';\n\nconst headingLevels = [2, 3, 4, 5, 6] as const;\n\ntype HeadingLevel = (typeof headingLevels)[number];\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\n *          Height of the arrow\n *          {@default `1.5625rem`}\n * @cssprop {<length>} --pf-c-popover__arrow--Width\n *          Width of the arrow\n *          {@default `1.5625rem`}\n * @cssprop {<color>} --pf-c-popover__title-text--Color\n *          Heading font color\n *          {@default `inherit`}\n * @cssprop {<color>} --pf-c-popover__title-icon--Color\n *          Heading icon font color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor\n *          Arrow background color\n *          {@default `#fff`}\n * @cssprop --pf-c-popover__arrow--BoxShadow\n *          Arrow box shadow\n *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop --pf-c-popover--BoxShadow\n *          Popover box shadow\n *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingTop\n *          Popover top padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight\n *          Popover right padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom\n *          Popover bottom padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft\n *          Popover left padding\n *          {@default `1rem`}\n * @cssprop {<number>} --pf-c-popover--line-height\n *          Popover line height\n *          {@default `1.5`}\n * @cssprop {<length>} --pf-c-popover__content--FontSize\n *          Popover font-size\n *          {@default `0.875rem`}\n * @cssprop {<color>} --pf-c-popover__content--BackgroundColor\n *          Popover background color\n *          {@default `#fff`}\n * @cssprop {<length>} --pf-c-popover--MaxWidth\n *          Popover max-width\n *          {@default `20.75rem`}\n * @cssprop {<length>} --pf-c-popover--MinWidth\n *          Popover min-width\n *          {@default `20.75rem`}\n * @cssprop {<number>} --pf-c-popover--c-button--Right\n *          Close button right position\n *          {@default `0}\n * @cssprop {<number>} --pf-c-popover--c-button--Top\n *          Close button top position\n *          {@default `0`}\n * @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight\n *          Padding between close button and its immediate sibling\n *          {@default `3rem`}\n * @cssprop {<length>} --pf-c-popover__title-icon--MarginRight\n *          Heading icon right margin\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-popover__title--FontSize\n *          Header font-size\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-popover__title--MarginBottom\n *          Header bottom margin\n *          {@default `0.5rem`}\n * @cssprop {<number>} --pf-c-popover__title--LineHeight\n *          Header line height\n *          {@default `1.5`}\n * @cssprop {<string>} --pf-c-popover__title--FontFamily\n *          Header font-family\n *          {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}\n * @cssprop {<length>} --pf-c-popover__footer--MarginTop\n *          Footer top margin\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-text--Color\n *          Default alert heading color\n *          {@default `#003737`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color\n *          Default alert icon color\n *          {@default `#009596`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-text--Color\n *          Default alert heading color\n *          {@default `#002952`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color\n *          Default alert icon color\n *          {@default `#2b9af3`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color\n *          Default alert heading color\n *          {@default `#795600`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color\n *          Default alert icon color\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-text--Color\n *          Default alert heading color\n *          {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color\n *          Default alert icon color\n *          {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color\n *          Default alert heading color\n *          {@default `#a30000`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color\n *          Default alert icon color\n *          {@default `#c9190b`}\n */\n@customElement('pf-popover')\nexport class PfPopover extends LitElement {\n  static readonly styles = [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    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   * 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    this.addEventListener('keydown', this.#onKeydown);\n  }\n\n  render() {\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() {\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    const root = this.getRootNode() as Document | ShadowRoot;\n    return !this.trigger ? null : root.getElementById(this.trigger);\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   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('trigger')) {\n      this.#triggerChanged();\n    }\n  }\n\n  /**\n   * Toggle the popover\n   */\n  @bound async toggle() {\n    this.#float.open ? this.hide() : this.show();\n  }\n\n  /**\n   * Opens the popover\n   */\n  @bound async show() {\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() {\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-popover/test/pf-popover.e2e.d.ts

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

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

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

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

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

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

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