feat(banner): add pf-v6-banner

.gitignore

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

elements/pf-v6-banner/demo/basic.html

@@ -0,0 +1,23 @@
+---
+name: Basic
+description: Banners can be styled with one of 9 different colors. A basic banner should only be used when the banner color does not represent status or severity.
+---
+<pf-v6-banner>Default banner</pf-v6-banner>
+<pf-v6-banner color="red">Red banner</pf-v6-banner>
+<pf-v6-banner color="orangered">Orangered banner</pf-v6-banner>
+<pf-v6-banner color="orange">Orange banner</pf-v6-banner>
+<pf-v6-banner color="yellow">Yellow banner</pf-v6-banner>
+<pf-v6-banner color="green">Green banner</pf-v6-banner>
+<pf-v6-banner color="teal">Teal banner</pf-v6-banner>
+<pf-v6-banner color="blue">Blue banner</pf-v6-banner>
+<pf-v6-banner color="purple">Purple banner</pf-v6-banner>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
+</script>
+
+<style>
+pf-v6-banner + pf-v6-banner {
+  margin-block-start: 0.5rem;
+}
+</style>

elements/pf-v6-banner/demo/index.html

@@ -0,0 +1,9 @@
+---
+name: Default
+description: A default banner communicates a short snippet of information.
+---
+<pf-v6-banner>Default banner</pf-v6-banner>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
+</script>

elements/pf-v6-banner/demo/status.html

@@ -0,0 +1,39 @@
+---
+name: Status
+description: When a banner conveys status, use the status attribute. Include an icon and screen-reader-text for accessibility.
+---
+<pf-v6-banner status="success" screen-reader-text="Success banner">
+  <pf-v5-icon icon="check-circle"></pf-v5-icon>
+  Success banner
+</pf-v6-banner>
+
+<pf-v6-banner status="warning" screen-reader-text="Warning banner">
+  <pf-v5-icon icon="exclamation-triangle"></pf-v5-icon>
+  Warning banner
+</pf-v6-banner>
+
+<pf-v6-banner status="danger" screen-reader-text="Danger banner">
+  <pf-v5-icon icon="exclamation-circle"></pf-v5-icon>
+  Danger banner
+</pf-v6-banner>
+
+<pf-v6-banner status="info" screen-reader-text="Info banner">
+  <pf-v5-icon icon="info-circle"></pf-v5-icon>
+  Info banner
+</pf-v6-banner>
+
+<pf-v6-banner status="custom" screen-reader-text="Custom banner">
+  <pf-v5-icon icon="bell"></pf-v5-icon>
+  Custom banner
+</pf-v6-banner>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
+  import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
+</script>
+
+<style>
+pf-v6-banner + pf-v6-banner {
+  margin-block-start: 0.5rem;
+}
+</style>

elements/pf-v6-banner/demo/sticky.html

@@ -0,0 +1,50 @@
+---
+name: Sticky
+description: A sticky banner stays fixed at the top of its container as content scrolls.
+---
+<pf-v6-banner sticky>Sticky banner</pf-v6-banner>
+<article>
+  <h2>The Open Source Definition</h2>
+  <p><a href="https://opensource.org/osd/">https://opensource.org/osd/</a></p>
+
+  <h3>Introduction</h3>
+  <p>Open source doesn't just mean access to the source code. The distribution
+  terms of open-source software must comply with the following criteria:</p>
+
+  <h3>1. Free Redistribution</h3>
+  <p>The license shall not restrict any party from selling or giving away the
+  software as a component of an aggregate software distribution containing
+  programs from several different sources. The license shall not require a
+  royalty or other fee for such sale.</p>
+
+  <h3>2. Source Code</h3>
+  <p>The program must include source code, and must allow distribution in
+  source code as well as compiled form.</p>
+
+  <h3>3. Derived Works</h3>
+  <p>The license must allow modifications and derived works, and must allow
+  them to be distributed under the same terms as the license of the original
+  software.</p>
+
+  <h3>4. Integrity of The Author's Source Code</h3>
+  <p>The license may restrict source-code from being distributed in modified
+  form only if the license allows the distribution of "patch files" with the
+  source code for the purpose of modifying the program at build time.</p>
+
+  <h3>5. No Discrimination Against Persons or Groups</h3>
+  <p>The license must not discriminate against any person or group of
+  persons.</p>
+
+  <h3>6. No Discrimination Against Fields of Endeavor</h3>
+  <p>The license must not restrict anyone from making use of the program in a
+  specific field of endeavor.</p>
+
+  <h3>7. Distribution of License</h3>
+  <p>The rights attached to the program must apply to all to whom the program
+  is redistributed without the need for execution of an additional license by
+  those parties.</p>
+</article>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
+</script>

elements/pf-v6-banner/pf-v6-banner.css

@@ -0,0 +1,188 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host([sticky]) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex,
+    var(--pf-t--global--z-index--md, 300));
+  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow,
+    var(--pf-t--global--box-shadow--md));
+}
+
+#container {
+  --_bg: var(--pf-v6-c-banner--BackgroundColor,
+    var(--pf-t--global--color--nonstatus--gray--default,
+      light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d))));
+  --_color: var(--pf-v6-c-banner--Color,
+    var(--pf-t--global--text--color--nonstatus--on-gray--default,
+      light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff))));
+  --_padding-block: var(--pf-v6-c-banner--PaddingBlockStart,
+    var(--pf-t--global--spacer--xs, 0.25rem));
+  --_padding-inline: var(--pf-v6-c-banner--PaddingInlineStart,
+    var(--pf-t--global--spacer--md, 1rem));
+  --_font-size: var(--pf-v6-c-banner--FontSize,
+    var(--pf-t--global--font--size--body--default, 0.875rem));
+  --_border-color: var(--pf-v6-c-banner--BorderColor,
+    var(--pf-t--global--border--color--high-contrast, transparent));
+  --_border-width: var(--pf-v6-c-banner--BorderWidth,
+    var(--pf-t--global--border--width--high-contrast--regular, 0));
+
+  flex-shrink: 0;
+  padding-block: var(--_padding-block);
+  padding-inline: var(--_padding-inline);
+  font-size: var(--_font-size);
+  color: var(--_color);
+  white-space: nowrap;
+  background-color: var(--_bg);
+  border-block: var(--_border-width) solid var(--_border-color);
+
+  @media (min-width: 768px) {
+    --_padding-inline: var(--pf-v6-c-banner--md--PaddingInlineStart,
+      var(--pf-t--global--spacer--lg, 1.5rem));
+  }
+
+  /* Non-status color modifiers (before status so status takes precedence) */
+
+  &.red {
+    --_bg: var(--pf-v6-c-banner--m-red--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--red--default,
+        light-dark(var(--pf-t--color--red--20, #fbc5c5), var(--pf-t--color--red--30, #f9a8a8))));
+    --_color: var(--pf-v6-c-banner--m-red--Color,
+      var(--pf-t--global--text--color--nonstatus--on-red--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  &.orangered {
+    --_bg: var(--pf-v6-c-banner--m-orangered--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--orangered--default,
+        light-dark(var(--pf-t--color--red-orange--20, #fbbea8), var(--pf-t--color--red-orange--30, #f89b78))));
+    --_color: var(--pf-v6-c-banner--m-orangered--Color,
+      var(--pf-t--global--text--color--nonstatus--on-orangered--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  &.orange {
+    --_bg: var(--pf-v6-c-banner--m-orange--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--orange--default,
+        light-dark(var(--pf-t--color--orange--20, #fccb8f), var(--pf-t--color--orange--30, #f8ae54))));
+    --_color: var(--pf-v6-c-banner--m-orange--Color,
+      var(--pf-t--global--text--color--nonstatus--on-orange--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  &.yellow {
+    --_bg: var(--pf-v6-c-banner--m-yellow--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--yellow--default,
+        light-dark(var(--pf-t--color--yellow--20, #ffe072), var(--pf-t--color--yellow--30, #ffcc17))));
+    --_color: var(--pf-v6-c-banner--m-yellow--Color,
+      var(--pf-t--global--text--color--nonstatus--on-yellow--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  &.green {
+    --_bg: var(--pf-v6-c-banner--m-green--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--green--default,
+        light-dark(var(--pf-t--color--green--20, #d1f1bb), var(--pf-t--color--green--30, #afdc8f))));
+    --_color: var(--pf-v6-c-banner--m-green--Color,
+      var(--pf-t--global--text--color--nonstatus--on-green--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  &.teal {
+    --_bg: var(--pf-v6-c-banner--m-teal--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--teal--default,
+        light-dark(var(--pf-t--color--teal--20, #b9e5e5), var(--pf-t--color--teal--30, #9ad8d8))));
+    --_color: var(--pf-v6-c-banner--m-teal--Color,
+      var(--pf-t--global--text--color--nonstatus--on-teal--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  &.blue {
+    --_bg: var(--pf-v6-c-banner--m-blue--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--blue--default,
+        light-dark(var(--pf-t--color--blue--20, #b9dafc), var(--pf-t--color--blue--30, #92c5f9))));
+    --_color: var(--pf-v6-c-banner--m-blue--Color,
+      var(--pf-t--global--text--color--nonstatus--on-blue--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  &.purple {
+    --_bg: var(--pf-v6-c-banner--m-purple--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--purple--default,
+        light-dark(var(--pf-t--color--purple--20, #d0c5f4), var(--pf-t--color--purple--30, #b6a6e9))));
+    --_color: var(--pf-v6-c-banner--m-purple--Color,
+      var(--pf-t--global--text--color--nonstatus--on-purple--default,
+        var(--pf-t--color--gray--100, #151515)));
+  }
+
+  /* Status modifiers (after color so status takes precedence at equal specificity) */
+
+  &.danger {
+    --_bg: var(--pf-v6-c-banner--m-danger--BackgroundColor,
+      var(--pf-t--global--color--status--danger--default,
+        light-dark(var(--pf-t--color--red-orange--60, #b1380b), var(--pf-t--color--red-orange--50, #f0561d))));
+    --_color: var(--pf-v6-c-banner--m-danger--Color,
+      var(--pf-t--global--text--color--status--on-danger--default,
+        light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
+  }
+
+  &.success {
+    --_bg: var(--pf-v6-c-banner--m-success--BackgroundColor,
+      var(--pf-t--global--color--status--success--default,
+        light-dark(var(--pf-t--color--green--60, #3d7317), var(--pf-t--color--green--40, #87bb62))));
+    --_color: var(--pf-v6-c-banner--m-success--Color,
+      var(--pf-t--global--text--color--status--on-success--default,
+        light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
+  }
+
+  &.warning {
+    --_bg: var(--pf-v6-c-banner--m-warning--BackgroundColor,
+      var(--pf-t--global--color--status--warning--default,
+        light-dark(var(--pf-t--color--yellow--30, #ffcc17), var(--pf-t--color--yellow--30, #ffcc17))));
+    --_color: var(--pf-v6-c-banner--m-warning--Color,
+      var(--pf-t--global--text--color--status--on-warning--default,
+        light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--gray--100, #1f1f1f))));
+  }
+
+  &.info {
+    --_bg: var(--pf-v6-c-banner--m-info--BackgroundColor,
+      var(--pf-t--global--color--status--info--default,
+        light-dark(var(--pf-t--color--purple--50, #5e40be), var(--pf-t--color--purple--30, #b6a6e9))));
+    --_color: var(--pf-v6-c-banner--m-info--Color,
+      var(--pf-t--global--text--color--status--on-info--default,
+        light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
+  }
+
+  &.custom {
+    --_bg: var(--pf-v6-c-banner--m-custom--BackgroundColor,
+      var(--pf-t--global--color--status--custom--default,
+        light-dark(var(--pf-t--color--teal--60, #147878), var(--pf-t--color--teal--40, #63bdbd))));
+    --_color: var(--pf-v6-c-banner--m-custom--Color,
+      var(--pf-t--global--text--color--status--on-custom--default,
+        light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
+  }
+}
+
+::slotted(a) {
+  color: inherit;
+  text-decoration-line: underline;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}