feat(banner)!: port to pf-v6-banner (#3143)

* feat(banner): add pf-v6-banner

* style: format

* style: unused import

* chore: remove pf-v5-banner

* fix(banner): correct jsdoc to cem documentation comments

* chore: add changeset

* docs(banner): add README

* docs(banner): remove noise

* test(banner): add missing spec tests

* docs(banner): missing docs markdown and screenshot

* test(banner): missing e2e test file

* fix(banner): rename screen-reader-text to accessible-label

* docs: readme, jsdoc

* docs: update references to banner

* refactor: use static css

* fix!: remove accessible-label and screen-reader-text

instruct downstream users to slot visually hidden text instead

* fix: remove references to v5

---------

Co-authored-by: Benny Powers <web@bennypowers.com>
Co-authored-by: Mark Caron <mark.caron@gmail.com>

Author: 3 people

.changeset/smooth-webs-travel.md

@@ -0,0 +1,25 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-banner>`: replaces `<pf-v5-banner>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-banner status="info">
+  <span class="pf-v6-screen-reader">Info alert:</span>
+  Info banner content
+</pf-v6-banner>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-banner>` to `<pf-v6-banner>`
+- `variant` attribute split into separate `color` and `status` attributes
+- CSS custom properties renamed from `--pf-v5-c-banner--*` to `--pf-v6-c-banner--*`
+- Removed `icon` attribute and `icon` slot (compose icons in default slot)
+- Removed `container` and `icon` CSS parts
+
+**New features**
+
+- `color` attribute for decorative colors (red, orangered, orange, yellow, green, teal, blue, purple)
+- `status` attribute for semantic statuses (success, warning, danger, info, custom)

.gitignore

@@ -105,6 +105,7 @@ core/pfe-core/demo/*
 
 # AI
 .claude/settings.local.json
+.claude/worktrees
 
 # Temp files
 *~

docs/main.mjs

@@ -3,7 +3,6 @@ import { PfV5Icon } from '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
 import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
 import '@patternfly/elements/pf-v5-alert/pf-v5-alert.js';
 import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
-import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
 import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
 import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
 import '@patternfly/elements/pf-v5-chip/pf-v5-chip.js';
@@ -28,9 +27,11 @@ import '@patternfly/elements/pf-v5-text-area/pf-v5-text-area.js';
 import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
 import '@patternfly/elements/pf-v5-tile/pf-v5-tile.js';
 import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
+
 import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
 import '@patternfly/elements/pf-v6-background-image/pf-v6-background-image.js';
 import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
+import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
 import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';

elements/pf-v5-back-to-top/demo/button.html

@@ -0,0 +1,53 @@
+<pf-v6-banner status="info" id="top">
+  <pf-v5-icon icon="info-circle"></pf-v5-icon>
+  <span class="pf-v6-screen-reader">Accessibility warning:</span>
+  <strong>Accessibility Warning</strong> Using the Button/JS variant, implementation must apply click event and focus to the element that is scrolled to.
+</pf-v6-banner>
+<div class="outer-container">
+  <div class="scroll-indicator padded">
+    <h2>Button</h2>
+    <p><a href="#focusable-element-top">Focusable element (top)</a></p>
+    <pf-v5-icon icon="arrow-down"></pf-v5-icon> Scroll down to end of cyan box, 400px (default).
+  </div>
+</div>
+<a href="#focusable-element-bottom">Focusable element (bottom)</a>
+
+<pf-v5-back-to-top scrollable-selector="main">Back to top</pf-v5-back-to-top>
+
+<script type="module">
+  import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
+  import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
+  document.querySelector('pf-v5-back-to-top').addEventListener('click', function() {
+    // scroll to some element
+    const target = document.querySelector('#top');
+    target.scrollIntoView();
+    target.focus();
+  });
+</script>
+
+<style>
+  :root {
+    --_scroll-distance: 400px;
+  }
+
+  main {
+    scroll-behavior: smooth;
+  }
+
+  .scroll-distance {
+    --_scroll-distance: 200px;
+  }
+
+  .outer-container {
+    height: calc(100vh - var(--pf-v5-demo-header-height) + var(--_scroll-distance));
+  }
+
+  .padded {
+    padding: var(--pf-global--spacer--md, 1rem);
+  }
+
+  .scroll-indicator {
+    height: var(--_scroll-distance);
+    background-color: var(--pf-global--palette--cyan-50, #f2f9f9) !important;
+  }
+</style>