feat(progress): add pf-progress

.changeset/pf-tooltip-deprecate-base.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-tooltip>`: marks `BaseTooltip` and it's stylesheet as deprecated.
+The files will remain in place until the next major version.

.changeset/pf-tooltip-flip.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": minor
+---
+`<pf-tooltip>`: added `no-flip` and `flip-behaviour` attributes as in `<pf-popover>`

.changeset/pf-tooltip-trigger.md

@@ -0,0 +1,11 @@
+---
+"@patternfly/element": minor
+---
+`<pf-tooltip>` added the `trigger` attribute to specify a tooltip-invoking 
+element outside of the tooltip's children.
+
+```html
+<pf-button id="button">Button</pf-button>
+<pf-tooltip trigger="button"
+            content="I'm a button!"></pf-tooltip>
+```

.changeset/rich-kangaroos-brake.md

@@ -0,0 +1,9 @@
+---
+"@patternfly/elements": minor
+---
+
+✨ Added `<pf-progress>`
+
+```html
+<pf-progress title="Default" value="33"></pf-progress>
+```

.changeset/test-tools-click-el.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": minor
+---
+Test: add `clickElementCenter` utility function for tests

elements/package.json

@@ -41,6 +41,7 @@
     "./pf-panel/pf-panel.js": "./pf-panel/pf-panel.js",
     "./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js",
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
+    "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
     "./pf-spinner/BaseSpinner.js": "./pf-spinner/BaseSpinner.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/BaseSwitch.js": "./pf-switch/BaseSwitch.js",

elements/pf-popover/demo/flip.html

@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-popover.js"></script>
+
+<form id="basic">
+  <fieldset>
+    <legend>No flip</legend>
+    <pf-popover heading="Popover heading"
+                body="Popovers are triggered by click rather than hover."
+                footer="Popover footer"
+                no-flip>
+      <pf-button>Toggle popover</pf-button>
+    </pf-popover>
+  </fieldset>
+
+  <fieldset>
+    <legend>Flip fallback</legend>
+    <label>
+      Popover positions
+      <select id="position-select">
+        <option value="top">top</option>
+        <option value="right">right</option>
+        <option value="bottom">bottom</option>
+        <option value="left">left</option>
+        <option value="top-start">top-start</option>
+        <option value="top-end">top-end</option>
+        <option value="right-start">right-start</option>
+        <option value="right-end">right-end</option>
+        <option value="bottom-start">bottom-start</option>
+        <option value="bottom-end">bottom-end</option>
+        <option value="left-start">left-start</option>
+        <option value="left-end">left-end</option>
+      </select>
+    </label>
+    <pf-popover heading="Popover heading"
+                body="Popovers are triggered by click rather than hover."
+                footer="Popover footer"
+                no-outside-click>
+      <pf-button>Toggle popover</pf-button>
+    </pf-popover>
+  </fieldset>
+</form>

elements/pf-popover/demo/pf-popover.html

@@ -1,5 +1,5 @@
-<link rel="stylesheet" href="./demo.css" />
-<script type="module" src="./pf-popover.js"></script>
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-popover.js"></script>
 
 <form id="basic">
   <h2>Basic</h2>

elements/pf-popover/demo/pf-popover.js

@@ -12,11 +12,11 @@ select.addEventListener('change', event =>
 
 // Close popover from content
 const closeButton = document.getElementById('close-button');
-closeButton.addEventListener('click', event => event.target.closest('pf-popover').hide());
+closeButton?.addEventListener('click', event => event.target.closest('pf-popover').hide());
 
 // Alert variants
 const alert = document.getElementById('alert');
-alert.addEventListener('change', event =>
+alert?.addEventListener('change', event =>
   alert
     .querySelector('pf-popover')
     .setAttribute('alert-severity', event.target.closest('form').elements.severity.value));

elements/pf-popover/pf-popover.ts

@@ -1,4 +1,4 @@
-import { LitElement, nothing, html } from 'lit';
+import { LitElement, nothing, html, type PropertyValues } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
@@ -9,7 +9,6 @@ import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { bound } from '@patternfly/pfe-core/decorators/bound.js';
 import { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';
-import { observed } from '@patternfly/pfe-core/decorators/observed.js';
 import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import styles from './pf-popover.css';
@@ -301,7 +300,6 @@ export class PfPopover extends LitElement {
   /**
    * The ID of the element to attach the popover to.
    */
-  @observed('triggerChanged')
   @property({ reflect: true }) trigger?: string;
 
   @query('#popover') private _popover!: HTMLDialogElement;
@@ -360,7 +358,10 @@ export class PfPopover extends LitElement {
       <div id="container"
            style="${styleMap(styles)}"
            class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}">
-        <slot id="trigger" @keydown=${this.onKeydown} @click=${this.toggle}></slot>
+        <slot id="trigger"
+              @slotchange="${this.#triggerChanged}"
+              @keydown=${this.onKeydown}
+              @click=${this.toggle}></slot>
         <dialog id="popover" aria-labelledby="heading" aria-describedby="body" aria-label=${ifDefined(this.label)}>
           <div id="arrow"></div>
           <div id="content" part="content">
@@ -389,10 +390,27 @@ export class PfPopover extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     PfPopover.instances.delete(this);
-    this.#referenceTrigger?.removeEventListener('click', this.show);
+    this.#referenceTrigger?.removeEventListener('click', this.toggle);
     this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);
   }
 
+  #getReferenceTrigger() {
+    const root = this.getRootNode() as Document | ShadowRoot;
+    return !this.trigger ? null : root.getElementById(this.trigger);
+  }
+
+
+  #triggerChanged() {
+    const oldReferenceTrigger = this.#referenceTrigger;
+    this.#referenceTrigger = this.#getReferenceTrigger();
+    if (oldReferenceTrigger !== this.#referenceTrigger) {
+      oldReferenceTrigger?.removeEventListener('click', this.toggle);
+      oldReferenceTrigger?.removeEventListener('keydown', this.onKeydown);
+      this.#referenceTrigger?.addEventListener('click', this.toggle);
+      this.#referenceTrigger?.addEventListener('keydown', this.onKeydown);
+    }
+  }
+
   @bound private onKeydown(event: KeyboardEvent) {
     switch (event.key) {
       case 'Escape':
@@ -420,15 +438,9 @@ export class PfPopover extends LitElement {
    * Removes event listeners from the old trigger element and attaches
    * them to the new trigger element.
    */
-  triggerChanged(oldValue?: string, newValue?: string) {
-    if (oldValue) {
-      this.#referenceTrigger?.removeEventListener('click', this.show);
-      this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);
-    }
-    if (newValue) {
-      this.#referenceTrigger = (this.getRootNode() as Document | ShadowRoot).getElementById(newValue);
-      this.#referenceTrigger?.addEventListener('click', this.show);
-      this.#referenceTrigger?.addEventListener('keydown', this.onKeydown);
+  override willUpdate(changed: PropertyValues<this>) {
+    if (changed.has('trigger')) {
+      this.#triggerChanged();
     }
   }