diff --git a/.changeset/calm-friends-carry.md b/.changeset/calm-friends-carry.md
new file mode 100644
index 0000000000..cb9f0ea600
--- /dev/null
+++ b/.changeset/calm-friends-carry.md
@@ -0,0 +1,23 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-progress>`: replaces `<pf-v5-progress>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-progress value="33" description="Loading..."></pf-v6-progress>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-progress>` to `<pf-v6-progress>`
+- CSS custom properties renamed from `--pf-v5-c-progress--*` to `--pf-v6-c-progress--*`
+
+**New features**
+
+- `accessible-label` attribute for screen reader text via ElementInternals
+- `value-text` attribute for custom `aria-valuetext` (finite step displays)
+- `truncated` attribute for ellipsis overflow on description
+- `hide-status-icon` attribute for tight layouts
+- `helper-text` slot for supplementary text below the bar, auto-wired to `aria-describedby`
+- v6 design tokens and `light-dark()` support
diff --git a/.changeset/fancy-keys-hug.md b/.changeset/fancy-keys-hug.md
new file mode 100644
index 0000000000..59c216edc0
--- /dev/null
+++ b/.changeset/fancy-keys-hug.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": minor
+---
+
+Accept `tagPrefix` as an array of strings, supporting repos with multiple element prefixes
diff --git a/.changeset/forty-ties-crash.md b/.changeset/forty-ties-crash.md
new file mode 100644
index 0000000000..8227a3c8a0
--- /dev/null
+++ b/.changeset/forty-ties-crash.md
@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-badge>`: replaces `<pf-v5-badge>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-badge state="unread">7</pf-v6-badge>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-badge>` to `<pf-v6-badge>`
+- Removed `number` and `threshold` properties -- badge is now a pure slot container; formatting is an app concern
+- CSS custom properties renamed from `--pf-v5-c-badge--*` to `--pf-v6-c-badge--*`
+
+**New features**
+
+- `disabled` attribute
+- v6 design tokens and `light-dark()` color scheme support
diff --git a/.changeset/free-forks-lay.md b/.changeset/free-forks-lay.md
new file mode 100644
index 0000000000..2826e80c01
--- /dev/null
+++ b/.changeset/free-forks-lay.md
@@ -0,0 +1,25 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-back-to-top>`: replaces `<pf-v5-back-to-top>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-back-to-top href="#top">Back to top</pf-v6-back-to-top>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-back-to-top>` to `<pf-v6-back-to-top>`
+- CSS custom properties renamed from `--pf-v5-c-back-to-top--*` to `--pf-v6-c-back-to-top--*`
+- Removed `icon` and `icon-set` attributes (caret-up icon is now built-in SVG)
+- Removed `scroll-distance` attribute (400px threshold, matches React)
+- Renamed `label` attribute to `accessible-label`
+
+**New features**
+
+- `href` attribute renders as a link for progressive enhancement (works without JS)
+- `accessible-label` attribute for screen reader text
+- `delegatesFocus` for keyboard accessibility
+- `prefers-reduced-motion` support (instant vs smooth scroll)
+- v6 design tokens
diff --git a/.changeset/humble-cycles-rest.md b/.changeset/humble-cycles-rest.md
new file mode 100644
index 0000000000..cba6cd5f5a
--- /dev/null
+++ b/.changeset/humble-cycles-rest.md
@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": major
+---
+
+✨ Added `<pf-v6-background-image>` replacing `<pf-v5-background-image>`. Background image now follows
+PatternFly v6 design specs.
+
+```html
+<pf-v6-background-image src="/path/to/image.jpg"></pf-v6-background-image>
+```
+
+** Breaking Changes from v5 **
+
+- Renamed tag from `<pf-v5-background-image>` to `<pf-v6-background-image>`
+- ✨ Added v6 design tokens and RTL support via :dir(rtl)
+- ✨ Added `aria-hidden` for screen reader compliance
+- CSS custom properties renamed from `--pf-v5-c-background-image--*` to `--pf-v6-c-background-image--*`
+- Removed `src-2x`, `src-sm`, `src-sm-2x`, `src-lg` responsive source attributes (use CSS custom properties or media queries instead)
+- Removed `filter` boolean attribute
+- `src` no longer reflects to attribute
diff --git a/.changeset/lucky-gifts-tie.md b/.changeset/lucky-gifts-tie.md
new file mode 100644
index 0000000000..126cfe2211
--- /dev/null
+++ b/.changeset/lucky-gifts-tie.md
@@ -0,0 +1,34 @@
+---
+"@patternfly/elements": major
+---
+
+Added `<pf-v6-timestamp>` replacing `<pf-v5-timestamp>`. Timestamp now follows
+PatternFly v6 design specs.
+
+```html
+<pf-v6-timestamp date="Mon Jan 2 15:04:05 EST 2006"
+                 date-format="full"
+                 time-format="long">
+</pf-v6-timestamp>
+```
+
+**Breaking Changes from v5**
+
+- `<pf-v5-timestamp>` renamed to `<pf-v6-timestamp>`
+- `utc` boolean attribute replaced with `time-zone` string attribute accepting
+  any IANA timezone identifier (e.g. `time-zone="UTC"`,
+  `time-zone="America/New_York"`)
+- `hour-12` boolean attribute replaced with `hour-cycle` enum attribute
+  accepting Intl values: `h11`, `h12`, `h23`, `h24`
+- `help-text` attribute removed; tooltip styling is a composition pattern
+  using `<pf-v5-tooltip>` wrapping
+- `date` getter now returns ISO 8601 string instead of locale-formatted string
+- `display-suffix` no longer auto-set to "UTC" when using UTC timezone; set
+  `display-suffix="UTC"` explicitly if needed
+
+**New features**
+
+- `time-zone` attribute for any IANA timezone, not just UTC
+- `hour-cycle` attribute for precise hour format control
+- Default slot for custom display content
+- v6 design tokens
diff --git a/.changeset/sixty-crabs-mate.md b/.changeset/sixty-crabs-mate.md
new file mode 100644
index 0000000000..bc957db26a
--- /dev/null
+++ b/.changeset/sixty-crabs-mate.md
@@ -0,0 +1,24 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-spinner>`: replaces `<pf-v5-spinner>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-spinner accessible-label="Loading data">Loading...</pf-v6-spinner>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-spinner>` to `<pf-v6-spinner>`
+- CSS custom properties renamed from `--pf-v5-c-spinner--*` to `--pf-v6-c-spinner--*`
+- Removed `diameter` attribute (use `--pf-v6-c-spinner--diameter` CSS custom property instead)
+
+**New features**
+
+- `inline` attribute to inherit font size for inline display
+- `accessible-label` attribute for screen reader text
+- `value-text` attribute for progress state description
+- `xs` size preset
+- ARIA `progressbar` role with `aria-label` and `aria-valuetext` via ElementInternals
+- `prefers-reduced-motion` support
diff --git a/.changeset/smooth-webs-travel.md b/.changeset/smooth-webs-travel.md
new file mode 100644
index 0000000000..a28a19ed96
--- /dev/null
+++ b/.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)
diff --git a/.changeset/social-guests-wish.md b/.changeset/social-guests-wish.md
new file mode 100644
index 0000000000..72a2e774e8
--- /dev/null
+++ b/.changeset/social-guests-wish.md
@@ -0,0 +1,26 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-avatar>`: replaces `<pf-v5-avatar>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-avatar src="./photo.jpg" alt="User name"></pf-v6-avatar>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-avatar>` to `<pf-v6-avatar>`
+- CSS custom properties renamed from `--pf-v5-c-avatar--*` to `--pf-v6-c-avatar--*`
+- Replaced `border` attribute with `bordered` boolean attribute
+- `alt` attribute no longer defaults to "Avatar image" (defaults to empty string for decorative use)
+- `size` attribute no longer defaults to `sm` (renders at default 2.25rem dimensions)
+- Removed `dark` attribute
+- Removed `load` event
+
+**New features**
+
+- `size` attribute with `sm`, `md`, `lg`, `xl` presets
+- `bordered` boolean attribute
+- `light-dark()` color scheme support for placeholder graphic
+- v6 design tokens
diff --git a/.changeset/swift-teams-notice.md b/.changeset/swift-teams-notice.md
new file mode 100644
index 0000000000..4236c0f852
--- /dev/null
+++ b/.changeset/swift-teams-notice.md
@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": major
+---
+
+✨ Added `<pf-v6-switch>` replacing `<pf-v5-switch>`. Switch now follows
+PatternFly v6 design specs.
+
+```html
+<pf-v6-switch checked>Wi-Fi</pf-v6-switch>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-switch>` to `<pf-v6-switch>`
+- Removed `data-state="on|off"` label toggling — labels are now static, matching React and WCAG APG switch pattern
+- CSS custom properties renamed from `--pf-v5-c-switch--*` to `--pf-v6-c-switch--*`
+- Fixed form association (FACE): submits `"on"` when checked, reverts on form reset
+- ✨ Added cancelable `change` event: call `preventDefault()` to reject a toggle
+- ✨ Added external `<label for="id">` support
+- ✨ Added `reversed` attribute for reversed label/toggle layout
\ No newline at end of file
diff --git a/.claude/ADVICE.md b/.claude/ADVICE.md
new file mode 100644
index 0000000000..1fbe778d51
--- /dev/null
+++ b/.claude/ADVICE.md
@@ -0,0 +1,1237 @@
+# API Design Advice
+
+Distilled from Benny Powers' PR reviews across 2800+ PRs in RedHat-UX/red-hat-design-system and 2000+ PRs in patternfly/patternfly-elements.
+
+## HTML
+
+### Attributes & Properties
+
+#### Prefer enum-style `variant` attributes, over multiple booleans
+Consolidate mutually exclusive visual states into a single `variant` attribute with an enum type rather than multiple boolean attributes. Variants should be exclusive, not stackable.
+
+> "this line introduces a new concept to the design system: multiple layered variants. prior to this, variants were exclusive. this change means that an element can have 0-or-more variants at one time. this opens up quite a bit of flexibility for users, however it could introduce explosive complexity and additional cognitive overhead." (RHDS PR #1587)
+
+Recurring pattern: RHDS PRs #952, #1587
+
+#### Distinguish `variant` from theme attributes
+`variant` (or `type`) is for functional/structural differences between component configurations. Theme attributes are for color/theme differences. Never conflate the two.
+
+> RHDS PR #288, #486
+
+#### Boolean attributes for boolean states
+When an attribute is yes/no (present/absent), use a boolean attribute, not a string `"true"/"false"`. Use `@property({ type: Boolean })` with a default of `false`.
+
+> "does this need to be `'true'|'false'`? shouldn't it then be a boolean attr?" (RHDS PR #634)
+
+#### Avoid `is-` prefix for boolean attributes
+Since boolean attributes are true when present and false when absent, the `is-` prefix adds noise without value. Pair dash-case attributes to camelCase properties.
+
+> "As the presence of boolean attributes indicate true and their absence false, and since we pair dash-case attributes to camelCase properties, we've avoided the syntax noise of `is-` prefixes for boolean element flags." (PFE PR #2357, #2045)
+
+#### Don't default reflected booleans to `true`
+A reflecting boolean attribute that defaults to `true` is problematic because there is no good way to unset it in HTML. Flip the sense of the attribute.
+
+> "A reflecting boolean attr that defaults to true isn't great because there will be no good way to unset. Maybe flip (zing!) the sense to `no-flip`?" (PFE PR #2320)
+
+#### Avoid initializing reflected properties
+Don't set defaults on reflected properties. Let absence be the default state to avoid noisy attributes appearing on every instance when they connect to the DOM.
+
+> "Let's avoid initializing reflected properties. We also don't really need the default state, we can just assume that as the default." (PFE PR #2186)
+
+#### Don't reflect array properties
+Avoid accepting and certainly reflecting array properties. If a list is needed, use a converter (like NumberListConverter).
+
+> "We should avoid accepting and certainly reflecting array props. If this *must* be a list, use a converter like the NumberListConverter." (PFE PR #2320)
+
+#### Don't sprout attributes
+Avoid dynamically adding attributes that weren't present at creation time. This is an antipattern per the spec editor.
+
+> "This way we avoid 'sprouting' attrs, which we've seen is an antipattern acc'd to the spec editor." Cited whatwg/html#8365. (PFE PR #2183)
+
+#### Boolean-or-enum converter for multi-modal attributes
+When an attribute has a default boolean behavior but also supports specific modes, use a boolean-or-enum converter pattern. Create reusable converter functions for patterns that appear in multiple elements.
+
+> Consider `<rh-tile checkable="radio">` instead of `<rh-tile checkable radio>` (RHDS PR #1239)
+
+#### Attributes should always have sensible defaults
+All properties/attributes should have defaults. An element should work correctly with zero attributes set.
+
+> "should have a default" (RHDS PR #952, recurring)
+
+#### Multi-word attributes use dash-case
+Multi-word attribute names should be dash-case since HTML attributes are case-insensitive. Property names should be camelCase.
+
+> "The attr for this should be `full-height`." (PFE PR #2222); "We should prefer dash-case attributes for camelCase DOM properties, i.e. `date-format-input`, since HTML attributes are case-insensitive." (PFE PR #2599)
+
+#### Don't expose internal state as public attributes
+Internal implementation details like breakpoint state, color context, or responsive behavior should not be exposed as attributes. Use controllers internally.
+
+> Removed `is-mobile` attribute (RHDS PR #471); made `on` attribute shadow-private across RHDS PRs #660, #661, #675
+
+#### Don't expose `aria-*` as public API
+Custom elements should expose their own semantic attributes (e.g., `disabled`, `accessible-label`) and manage ARIA attributes internally via ElementInternals.
+
+> "we should prefer our own `disabled` attr, not expose `aria-` as public apis" (RHDS PR #1239); "Users shouldn't set aria on their own." (PFE PR #2699)
+
+#### Abstract ARIA behind custom attributes
+Provide custom attributes for screen-reader names rather than exposing ARIA attributes directly. Apply `aria-label` and `role` via ElementInternals internally. This simplifies the public API and reduces user error.
+
+> "Both the aria-label and role will be set by element internals. Easier for the end user and less typing." (RHDS PR #1732)
+
+#### Provide attribute/slot pairs for content
+For content that could be plain text or rich markup, provide both an attribute (for simple use) and a named slot (for rich content). Demos should primarily show the attribute form.
+
+> "I noticed these are all plain text, which indicates that these should be slot/attribute pairs; the slot being preferred for rich content and the attribute being preferred for plain text." (RHDS PR #2802)
+
+#### Internalize accessibility wiring via attribute/slot pairs
+If content serves as an accessible description (helper text, error text), make it an attr/slot pair so the component handles `aria-describedby` automatically, removing that burden from users.
+
+> "If the design for this permits, we should consider making this an attr/slot pair, and that should allow us to remove the requirement for users to add `aria-describedby`" (RHDS PR #2802)
+
+#### Normalize enumerated attribute values
+Always normalize enumerated attribute values to lowercase internally, so `state="neUtRal"` works as expected.
+
+> RHDS PR #2484
+
+#### Remove dead attributes promptly
+If an attribute has no effect (no CSS or JS references it), remove it with a proper major version bump. Dead attributes mislead users.
+
+> "remove `bordered` from accordion. it anyways doesn't do anything" (RHDS PR #2217)
+
+#### Don't redeclare native HTML attributes
+The `role` attribute already exists on all elements. Don't add a `@property` for it.
+
+> "the role attribute is native, and already reflects" (RHDS PR #2605)
+
+#### Replace custom attributes with `data-action` pattern
+Instead of inventing custom boolean attributes for action buttons (like `dismiss`, `cancel`), use `data-action="dismiss|cancel"`. This avoids potential conflicts with future standard attributes.
+
+> RHDS PR #267
+
+#### Use container queries over manual compact/responsive variants
+If a layout change is purely a response to available space, make it automatic via container queries. Document how users can force the narrower layout by constraining the container width.
+
+> "compact variant should be replaced with a container query, and we should document how to force it into compact layout by putting it in a narrow container" (RHDS PR #1587)
+
+#### Avoid boolean `has-*` attributes
+Instead of boolean `has-*` attributes that signal "some CSS property is set," prefer value-carrying attributes.
+
+> "can we either remove this attribute or give it a value e.g. `<rh-audio-player accent-color='#EE0000'>`" (RHDS PR #679)
+
+#### Prefer opt-in over opt-out for features
+Reverse the sense of opt-out booleans so features are opt-in by default.
+
+> "Can we reverse the sense of this? So that filter is opt in instead of opt out?" (PFE PR #2570)
+
+#### Avoid empty strings as public API values
+Empty string values are unclear in a public API. Prefer explicit, meaningful values and handle empty string at the access sites.
+
+> "The empty string here... it's not great for a public API, since it's not immediately clear what `''` means here, why I'd need to use it, or what will happen if I do." (PFE PR #2570)
+
+#### Limit public custom elements per component
+Prefer working within a single shadow root when possible. Only ship multiple elements when accessibility or composition requires it.
+
+> "Since upstream only provides the `DatePicker` react component, we should also try to limit the number of public components we ship here." (PFE PR #2599)
+
+### Slots
+
+#### Default slot for primary content
+The main content of a component goes in the unnamed (default) slot. Only name slots for secondary/metadata content areas.
+
+> "Giving this some thought, does this need to be named?" (RHDS PR #377, recurring across RHDS PRs #267, #471)
+
+#### Use semantic slot names, not implementation-specific ones
+Slot names should reflect semantic purpose. Prefer `actions` over `action-groups`, `header` over `title`. Prefer brevity: `actions` over `action-links`, `category` over `category-label`.
+
+> "These are in keeping with the conventions we've developed in PFE" (RHDS PR #267); PFE PRs #2949, #2955
+
+#### Use the DOM standard term "default slot"
+The DOM standard uses the term "default slot", not "anonymous slot".
+
+> "The DOM standard uses the term 'default slot' instead of anonymous. We might want to adopt that." (PFE PR #2593)
+
+#### Require semantic HTML in slots
+Header slots should accept `<h2>`-`<h6>` tags. Design slot APIs around standard HTML semantics rather than requiring custom class names.
+
+> "Prefer h2-6 tags for header, in keeping with semantic HTML" (RHDS PR #267)
+
+#### Don't provide placeholder content in slots
+End users should never see strings like "Placeholder Description" on pages where developers forgot to include required content. Issue console warnings instead.
+
+> "I removed the 'Placeholder Description' content, because I don't want end users to see strings like that on pages where developers forgot to include required content." (RHDS PR #471)
+
+#### Be conservative about adding named slots
+Consider alternatives (attributes, i18n controllers) when the number of slots could grow unboundedly.
+
+> "We could always add another slot, but I'm wary that we might end up with dozens of slot names for the various states" (RHDS PR #1496)
+
+#### Use named slots with defaults for i18n
+Allow translation of built-in UI text by providing named slots with English default content.
+
+> RHDS PR #591
+
+#### Hide empty slot containers
+When a slot has no slotted content, hide wrapper/container elements in shadow DOM to avoid empty spacing, visual artifacts, or empty landmarks in the accessibility tree. When ::has-slotted() becomes baseline, use it, until then,
+it requires use of the DOM API to query the element's children client-side. SSR scenarios then require a more advanced solution which parses inputs and places `ssr-hint-has-slotted` attributes.
+
+> Recurring pattern: RHDS PRs #1558, #1895, #2646
+
+#### Don't add slots tightly coupled to a single child component
+Prefer composable, general-purpose slots. If the existing API can support the use case (even with CSS workarounds), prefer that over API expansion.
+
+> RHDS PR #1622
+
+#### Keep slot semantics strict
+Don't mix unrelated content types in a slot designed for a specific purpose. Design composable patterns where elements link across the DOM via idref references instead.
+
+> "This is maybe a case for disconnected tabs (`<rh-tab for='idref'>`)..." (RHDS PR #995)
+
+#### Prefer text nodes and attributes over nested child elements
+For simple content with metadata, use text nodes for content and attributes for metadata.
+
+> "can we do cues like this? `<rh-audio-player-cue start='00:02' voice='Burr Sutter'>I'm Burr Sutter.</rh-audio-player-cue>`" (RHDS PR #679)
+
+#### Use prescriptive slot descriptions in JSDoc
+Slot descriptions should tell users what to put there, not describe the slot abstractly.
+
+> "A prescriptive explanation would be better here: `@slot - Label text`" (PFE PR #1899)
+
+### Shadow DOM & Templates
+
+#### Minimize wrapper/container elements
+If a class or attribute can be applied directly to a semantic element (like `<article>`), don't add an extra `<div>` wrapper. Fewer DOM nodes mean better performance and simpler CSS.
+
+> "we can remove the container and move the classmap to the article" (RHDS PR #952, recurring with #553)
+
+#### Prefer `<slot>` directly over wrapping `<div>`
+Since slots have `display: contents`, slotted content participates in the parent's layout. Only add wrapper divs when CSS layout truly requires them.
+
+> "Slot has display: contents by default which means that as far as CSS layout is concerned, it's as if the slotted content nodes are direct children of the div." (RHDS PR #1302); "Do we need the wrapper div? Why not `<slot id='content' part='content'>` and set `display: block`?" (PFE PR #2588)
+
+#### Set display on slot elements instead of wrapping divs
+When a slot is wrapped in a div purely for layout, try setting display directly on the slot element.
+
+> "consider removing the wrapping div and setting a display property on the slot" (RHDS PR #1197)
+
+#### Use ID selectors and tag selectors in shadow DOM CSS
+Prefer `#id` and `tagname` selectors over `.class` in shadow roots. Shadow DOM provides encapsulation, so IDs are safe and more semantic.
+
+> RHDS PR #267, #377 (recurring)
+
+#### No BEM in shadow DOM
+BEM conventions were designed for a global CSS paradigm. Shadow DOM provides encapsulation, making BEM unnecessary and noisy. Use IDs for unique elements.
+
+> "We shouldn't use BEM in shadow DOM." (PFE PR #2173); "internal dom does not and should not follow BEM conventions which were intended and implemented for a global css paradigm." (PFE PR #2155)
+
+#### No classes required in light DOM
+Components should not require users to add specific CSS classes to light DOM content.
+
+> "remove the requirement to use specific classes in light DOM" (RHDS PR #267)
+
+#### Use `::slotted()` styles over light DOM stylesheets
+When possible, style slotted content from shadow DOM using `::slotted()` rather than requiring light DOM stylesheets.
+
+> "Couldn't we do this in shadow DOM through the magic of `:is`?" (RHDS PR #254)
+
+#### Distinguish slotted vs fallback content in CSS
+Regular selectors target fallback content; `::slotted()` targets slotted content. Combine them to cover both cases.
+
+> "you might want `rh-icon, ::slotted(rh-icon[slot=icon]) {` just to be safe. test it both ways" (RHDS PR #2604)
+
+#### No self-closing void elements
+Follow the HTML spec strictly: `<col>`, `<br>`, `<img>` should not have trailing slashes.
+
+> "void elements shouldn't have a slash" (RHDS PR #1197)
+
+#### Static content belongs in HTML, not JavaScript
+Static modal/dialog content should be in the HTML template, not created dynamically in JavaScript.
+
+> "This modal content is static, so put it in the HTML rather than in javascript, and call showModal() on it when you need to." (PFE PR #2949)
+
+## CSS
+
+### Custom Properties & Parts
+
+#### Private CSS custom properties use `--_` prefix
+Internal/private CSS custom properties use `--_` prefix. Public/customizable ones use component-namespaced names.
+
+> Recurring pattern: RHDS PRs #436, #553, #1330, #2449; PFE PRs #2948
+
+#### Don't create custom properties that duplicate native CSS
+If users can achieve the same thing with `width`, `color`, etc., don't add a component-specific custom property for it.
+
+> "although tbh `--rh-spinner-width` might be superfluous. Why not just make the svg's width 100% and have users set built-in property `width` on the host?" (RHDS PR #553)
+
+#### Less is more for CSS custom property APIs
+Only expose custom properties when they provide value beyond native CSS. You can always add them later.
+
+> "better don't expose min-width as a token at all, unless specifically needed, users could just set `min-width` themselves" (RHDS PR #599)
+
+#### Consider CSS custom properties before adding variant attributes
+If a visual change is purely stylistic (e.g., transparent backgrounds), a CSS custom property is lower-cost and more flexible than a new attribute.
+
+> "`open` might just be a pattern where the user sets `--rh-pagination-control-background-color` to `transparent`" (RHDS PR #1587)
+
+#### Question the need for CSS parts aggressively
+Parts create API surface that must be maintained and can allow users to break component internals. Only expose parts with clear use cases.
+
+> "I don't want to get into a sticky situation here. The design guidelines were pretty clear, and a lot of the functionality is tied to the css. Opening up parts could easily break stuff in this case." (RHDS PR #279); "In general, we try to avoid adding parts unless we're sure there's a need for them." (PFE PR #2955)
+
+#### Public CSS properties should be declared as fallback defaults
+Public properties should be provided as fallback defaults at the use site, not set on `:host`. Setting on `:host` overrides user settings.
+
+> RHDS PR #553; "Instead of setting these on `:host`, which would override any user settings, please make them fallbacks." (PFE PR #2497); "Instead of actively assigning these on :host, can we just pass the fallback values at the callsites? Less convenient for maintainers but probably better for users, since they'll be able to override when theming." (PFE PR #2114)
+
+#### Non-overridable CSS properties go on internal elements
+CSS custom properties that are intentionally non-overridable should be set on internal shadow DOM elements, not the host.
+
+> "For those which are intentionally meant to override user configuration, those should be set on the svg element." (PFE PR #2155)
+
+#### Distinguish system tokens from component tokens
+System-level tokens come from the design token package and are used as-is. Component-level custom properties need full `@cssprop` documentation.
+
+> See [RHDS-Specific Conventions: Token System](#token-system) for RHDS token naming.
+
+#### Use token names, not raw values, everywhere
+In code, reviews, and design specs, always reference design token names rather than pixel/hex values. Token values may change centrally.
+
+> "The values are not as important as the token names. The values we'll automatically fix later, so if the token names are ok, just approve." (RHDS PR #489, recurring)
+
+#### T-shirt sizes must map to established token values
+Don't redefine what "xl" means per-element. XL should mean the same thing across the system.
+
+> "This is still confusing. We have length tokens for a reason, why are we intentionally ignoring them? XL should be the same thing in all cases." (RHDS PR #2430)
+
+#### CSS docstrings describe token usage within the element
+When documenting CSS custom properties, describe how the token is used in this specific element, not the token's general purpose.
+
+> "docstrings here will be prepended to the design tokens docstrings, so our text should describe the token's use *within this element*" (RHDS PR #2858)
+
+#### Use logical properties in CSS custom property names
+Use `border-block-start` not `border-top` in custom property naming.
+
+> RHDS PR #1720
+
+#### Attribute selectors are a smell for theming
+Theming should be done via CSS custom properties, not via attribute selectors on theme attributes.
+
+> "attribute selectors are a smell and shouldn't be required for any theming operation" (RHDS PR #1330)
+
+### Conventions
+
+#### Always use CSS logical properties
+Use `inline-start`/`block-start` instead of `left`/`top` to support RTL and vertical writing modes.
+
+> "Please use `inline-start` instead of `left`" (RHDS PR #377, recurring across RHDS PRs #259, #2605)
+
+#### Use `::after` double-colon syntax for pseudo-elements
+Per CSS3 spec.
+
+> "`:after` works, but CSS3 prefers `::after`" (RHDS PR #259)
+
+#### Animate GPU-friendly properties
+Animate `transform`/`translate`/`opacity`, not `padding`/`margin`/`width`.
+
+> "The change I made was to animate the `translate` value instead of the `padding` value, which is much more performant" (RHDS PR #349)
+
+#### Shadow DOM animation names don't need prefixes
+CSS animation names within shadow DOM are scoped automatically. Keep them short and readable.
+
+> "this animation name doesn't need a prefix, it's encapsulated in the shadow dom" (RHDS PR #553)
+
+#### Use modern CSS transform properties
+Use individual transform properties (`rotate`, `translate`, `scale`) instead of the combined `transform` function.
+
+> "I think we should already prefer transform properties: `rotate: var(...)`" (PFE PR #2114)
+
+#### Use `aspect-ratio` instead of width+height
+When width and height should maintain a ratio, use the `aspect-ratio` property.
+
+> Refactored spinner CSS "to use `aspect-ratio` instead of setting width and height." (PFE PR #2155)
+
+#### Use `pointer-events: none` on disabled hosts
+Disabled elements should prevent interaction at the CSS level.
+
+> `:host([disabled]), :host(:disabled) { pointer-events: none; }` (PFE PR #2221)
+
+#### Use CSS grid over CSS table modes
+CSS grid handles spanning (like `colspan`) better than CSS table display modes.
+
+> "We should consider using css-grid in place of table modes. I haven't found an effective means of emulating `colspan` with table modes... whereas with grid, we can just `grid-column: 1/-1`." (PFE PR #2564)
+
+#### Use native CSS nesting
+Prefer native CSS nesting syntax over preprocessor nesting.
+
+> "We generally prefer to use nesting syntax." (PFE PR #2955)
+
+#### Don't nest `:host` attribute selectors with `&`
+CSS nesting does not support `&([attr])` as a shorthand for `:host([attr])`. The `&` in nested CSS represents the parent selector as-is, but `:host` is a pseudo-class function, and `&([attr])` parses as a function call, not an attribute selector appended to `:host`. Keep `:host([variant="..."])` blocks flat at the top level. Nesting is valid for descendant selectors within those blocks, e.g. `& button:hover` or `:host([disabled]) &`.
+
+```css
+/* WRONG: &([attr]) is invalid */
+:host {
+  &([variant="primary"]) { ... }
+}
+
+/* RIGHT: flat :host selectors, nested descendants */
+:host([variant="primary"]) {
+  --_color: blue;
+}
+
+:host([variant="primary"]) button {
+  &:hover { --_color: darkblue; }
+  &:active { --_color: navy; }
+}
+```
+
+#### Use `display: contents` cautiously
+`display: contents` on `:host` can cause issues. Consider ResizeObserver with a private CSS var instead.
+
+> "More and more I'm thinking that we should avoid `:host { display: contents; }`, and maybe calculate a private css var in resize observer instead." (PFE PR #2630)
+
+## JavaScript
+
+### Events
+
+#### Use custom `Event` subclasses, not `CustomEvent` with detail
+Create typed Event subclasses instead of `new CustomEvent('name', { detail: {...} })`.
+Better TypeScript and runtime type safety and cleaner APIs.
+If event detail contains data, use class fields on the event, e.g.
+
+```ts
+export class DialogCloseEvent extends Event {
+  reason: string;
+  constructor(reason: string) {
+    super('close', { bubbles: true, cancellable: true });
+    this.reason = reason;
+  }
+}
+```
+
+> Also in PFE: "Can we deprecate the el:name events and add our own `extends Event` events?" (PFE PR #1829); "Prefer to extend `Event` with `bubbles: true` and optionally `cancellable: true`, rather than using `ComposedEvent`." (PFE PR #2599)
+
+#### Make destructive/state-changing events cancelable
+Events for close, delete, copy, and similar actions should be cancelable via `preventDefault()`. Demonstrate the cancelable pattern in demos.
+
+> "allow handlers to prevent close with `event.preventDefault()`" (RHDS PR #595)
+
+#### Make action events mutable
+Events for user-facing actions (like copy) should allow consumers to modify the action data, not just cancel.
+
+> RHDS PR #2677 -- copy event allows modifying copied text (e.g., removing shell prompts)
+
+#### Prefer simple native Event objects when no data is needed
+Use `new Event('ready')` rather than CustomEvent when the event carries no data payload.
+
+> "I think we can use a `new Event('ready')` here" (RHDS PR #436)
+
+#### Match native event names when wrapping native elements
+When wrapping `<dialog>` or similar, match native event names and timing. Users expect custom elements to behave like their native counterparts.
+
+> RHDS PR #1474
+
+#### Don't bake analytics into components
+Let analytics scripts add their own event listeners. This reduces bundle size for non-analytics users.
+
+> "The alternative is IMO much better: analytics users implement their own analytics." (RHDS PR #349)
+
+### Architecture
+
+#### Prefer forking over inheriting from upstream base classes
+Don't force inheritance when the downstream component has significantly different needs. Extend LitElement directly for cleaner, simpler code. Share controllers and helpers without class inheritance.
+
+> "We should consider extending LitElement and reimplementing the DOM here: I'm not sure what advantage we get by extending BaseCard." (RHDS PR #952, recurring with #550)
+
+#### Prefer composition (controllers) over inheritance (base classes)
+Controllers allow sharing behavior without class hierarchy. Configuration is better than inheritance for shared behavior.
+
+> "Since I was able to put everything in the controller, we don't actually export a base class... composition > inheritance" (PFE PR #2283); "Better to config then inherit." (PFE PR #2375)
+
+#### Elements should have single responsibility
+If combining features creates accessibility issues, split them. Let consuming patterns compose simple primitives.
+
+> "remove all the dropdown/button/floating-ui stuff from menu... reimplemented that stuff in audio-player... this fixes cross-root aria problems" (RHDS PR #778)
+
+#### Context propagation must work at arbitrary depth
+Test context with grandchild and deeply nested scenarios, not just parent-child.
+
+> RHDS PR #1985
+
+#### Lazy-load optional dependencies
+When a component optionally uses another component (e.g., an icon), lazy-load that dependency only when the relevant attribute is set.
+
+> "add something like `@observes('icon') protected iconChanged() { if (this.icon) { import('@rhds/elements/rh-icon/rh-icon.js'); } }`" (RHDS PR #2604)
+
+#### Don't import heavy token maps in client code
+Use CSS custom properties and `getComputedStyle` to access values at runtime, keeping bundle size small.
+
+> "We can't use this in client-facing code, it'll drag in the entire map, which is just too much js to justify the convenience of `.get`." (RHDS PR #436)
+
+#### Move private statics to module scope
+Private static methods should be module-scoped functions rather than static class methods, to prevent users from seeing them on the constructor.
+
+> "move private static methods into module scope to prevent users from being confused" (RHDS PR #2170)
+
+#### SSR awareness in component code
+DOM APIs like `getBoundingClientRect()`, `children`, `assignedElements()` are not available during server-side rendering. Guard DOM-dependent code with `isServer` checks.
+
+> "this might crash in ssr. better to wrap the whole function body in if isServer" (RHDS PR #2448, recurring with #2605, #2802)
+
+#### Prefer declarative state over imperative
+Prefer attribute-driven state over imperative state set via JS methods. More predictable and compatible with SSR.
+
+> RHDS PR #2429
+
+#### Prefer re-export entrypoint modules over pre-built bundles
+Preserves tree-shaking while providing convenience.
+
+> RHDS PR #1630
+
+#### Use MutationObserver when slotchange is insufficient
+`slotchange` won't fire when children are added/removed without slot attributes changing. Use MutationObserver for dynamic content.
+
+> RHDS PR #279
+
+#### `slotchange` already bubbles — don't add redundant listeners
+Don't manually add `slotchange` listeners on individual slots when you can listen on the shadow root.
+
+> "Not needed, slotchange already bubbles." (PFE PR #2563)
+
+#### Be careful with `hostConnected`
+`hostConnected` reinitializes state when elements are moved in the DOM. State set in `hostConnected` will be blown away.
+
+> "This will blow away the state... `$('#other-container').append(el); // oops... hostConnected()`" (PFE PR #2410)
+
+#### Use single static event listeners instead of per-instance
+For document-level event listeners, add a single static listener that iterates over a private set of element instances. Per-instance listeners are memory leaks.
+
+> "This is a memory leak. We must only add one listener to the document, in a static initialization block, and have that listener iterate over a private set of element instances." (PFE PR #2899)
+
+#### State updates should be unidirectional
+Don't set the same state in multiple places. State should flow in one direction.
+
+> "`this.value` is set here and in `#onChange`. State updates should be unidirectional." (PFE PR #2899)
+
+#### Expose optional protected hooks
+When subclasses may need to hook into behavior, expose an optional protected method rather than making methods protected by default.
+
+> "If the subclass needs to hook in here, let's expose an optional protected hook instead: `protected onSlotchange?(): void`." (PFE PR #2099)
+
+#### Modules don't need to wait on `load`
+ES modules are always deferred, so waiting for the `load` event is unnecessary.
+
+> "Modules don't need to wait on `load`, since they're always deferred." (PFE PR #2563)
+
+#### Components should not own features that belong to external code
+If a feature (like adding items to a group) belongs to consuming code, document it with demos but don't build it into the component.
+
+> "The idea of adding labels to the group should not be handled inside the PfLabelGroupClass. We should certainly document how to do this with demos, but those demos shouldn't be using built-in features of pf-label-group." (PFE PR #2949)
+
+#### Ensure hard-coded strings are internationalizable
+Don't bake locale-specific strings into component logic. Consider i18n from the start.
+
+> "This regexp hard-codes the string 'remaining' into the component's UI. What if a downstream developer needs to put a label group on a page which is translated into french? or swahili?" (PFE PR #2949)
+
+#### Mark properties as private to avoid accidental API surface
+Public properties are API surface that bumps the minor version. If a property doesn't need to be public, make it private.
+
+> "Should be private to avoid a minor release." (PFE PR #2493)
+
+#### Consider whether something should be CSS API or HTML attribute API
+Some features (like `scrollable`) may be better expressed as CSS custom properties than HTML attributes.
+
+> "I wonder if `scrollable` is better defined as a css api than an html api?" (PFE PR #2099)
+
+### Code Style
+
+#### Use ECMAScript private fields
+Prefer `#privateField` syntax over TypeScript `private` keyword for true encapsulation at runtime.
+
+> "Let's use ecmascript private fields here" (RHDS PR #436); "Prefer ecmascript private fields where possible" (PFE PR #2599)
+
+#### Use `override` keyword on lifecycle methods
+Always use the TypeScript `override` keyword when overriding LitElement lifecycle methods.
+
+> RHDS PR #1149
+
+#### Use `classList.toggle` with force parameter
+Use `classList.toggle(name, force)` instead of if/else with add/remove.
+
+> Suggested `col.classList.toggle('active', index === cellIndex)` (RHDS PR #1197)
+
+#### Use const object literals for simple mappings
+`const DIRECTION_OPPOSITES = { asc: 'desc', desc: 'asc' } as const;` instead of switch/if.
+
+> RHDS PR #1197
+
+#### Consider TypeScript union types for constrained attribute values
+Enables IDE autocompletion and catches errors at compile time.
+
+> "it Would be cool if we exported the union of names in each set from the icons repo. that way we could get icon name autocompletion." (RHDS PR #1732)
+
+#### Prefer `switch` for keyboard event handling
+Use `switch` statements over if/else chains for keyboard events.
+
+> "Nit: prefer `switch` statements for keyboard events." (PFE PR #2570)
+
+#### Follow established class member ordering
+Organize class members consistently: static fields, reactive properties, private fields, constructor, lifecycle methods, render, public methods, private methods.
+
+> "Member ordering: https://github.com/RedHat-UX/red-hat-design-system/wiki/Custom-Elements-API-Style-Guide#ordering" (PFE PR #2589)
+
+## Accessibility
+
+### Manage ARIA internally
+Elements should manage their own ARIA attributes internally rather than requiring users to set them in markup.
+
+> "can we handle aria internally?" (RHDS PR #2449, recurring)
+
+### Derive accessible labels from slotted content
+Automatically compute accessible labels from headline/heading slots. Always provide an accessible-label attribute escape hatch.
+
+> "Ok, we can adjust the code which computes the label to only consider elements slotted into the headline slot. but what if there's no headline text, we still need the accessible-label escape hatch, right?" (RHDS PR #1302)
+
+### Compute ARIA state privately via context
+ARIA state derived from DOM structure (`aria-posinset`, `aria-setsize`) should be computed internally via context, not exposed as public attributes.
+
+> "We might consider making this private. The select element would provide a context." (RHDS PR #2802)
+
+### Use ElementInternals for ARIA semantics
+Use ElementInternals to set `role`, `aria-label`, and heading levels rather than forcing users to manage them. Accept and gracefully handle common mistakes in attribute values (like `2` vs `h2`).
+
+> RHDS PRs #1715, #1732; "If we adopt FACE we should use `this.#internals.ariaLabelledby`." (PFE PR #2099)
+
+### Use ElementInternals for form association
+Use the ElementInternals API for form-associated custom elements rather than wrapping or slotting native form elements. Call `setValue()` on the internals object whenever the value changes.
+
+> "Uses the new ElementInternals API to remove need for slotted button" (RHDS PR #550); "We'll need to attachInternals, and whenever the value changes, call `setValue()` to report back the form value." (PFE PR #2511)
+
+### Avoid landmark pollution
+Don't put `<article>`, `<header>`, `<footer>`, `<nav>` landmark elements in shadow DOMs of components used in multiples. They create excessive landmarks for screen reader users.
+
+> RHDS PR #1560
+
+### Internalize landmark roles for navigation components
+Components that represent navigation landmarks should include the landmark role in their shadow DOM, not require users to add it.
+
+> "Jump Links will use the `<nav>` role internally as a built-in landmark." (RHDS PR #2194)
+
+### Lean on the native platform
+When adopting native elements like `<dialog>`, question any JavaScript that reimplements what the platform already provides. Expose native capabilities (like dialog return values) rather than hiding them.
+
+> "If we're using `<dialog>`, why do we still need kitty's focus trap javascript? Should we just call showModal by default?" (RHDS PR #1865)
+
+### Provide fallback content for computed-content elements
+Elements that render computed content should accept the raw value as text content for progressive enhancement / no-JS fallback.
+
+> Suggested `<rh-timestamp date="...">Tue Aug 09 2006...</rh-timestamp>` (RHDS PR #1149)
+
+### Use `<details>` for expandable content
+Styled `<details>` elements give expandable/collapsible accessibility for free, avoiding manual ARIA management.
+
+> "This should perhaps be a styled `<details>` element instead. That would give us accessibility for free. Otherwise, you need to apply aria to these elements." (PFE PR #2955)
+
+### Use `aria-hidden="true"` on decorative shadow icons
+Decorative icons in shadow DOM should always be hidden from the accessibility tree. Document that users should use `aria-label` or `aria-labelledby` on the host.
+
+> "Always aria-hidden=true the shadow icon, document to use `aria-label(ledby)`." (PFE PR #2138)
+
+### Don't add click listeners to icons
+Icons are decorative or informational, not interactive. Click handlers belong on buttons or other interactive elements.
+
+> "You must not add click listeners to icons." (PFE PR #2951)
+
+### Consider cross-root ARIA limitations
+When composing elements across shadow boundaries, cross-root ARIA references don't work declaratively yet. This may require duplicating internal elements as a workaround. Client-side, ARIA IDL DOM properties (baseline 2025) can resolve cross-root references imperatively via JavaScript. Upcoming APIs like Reference Target will provide declarative solutions.
+
+> "We can't use pf-button until browser vendors ship a solution for x-root aria." (PFE PR #2676)
+
+### Don't set contradictory ARIA on the same internals
+When a role like `role="none"` is set, don't also set contradictory attributes like `aria-disabled` on the same internals object.
+
+> "If we're setting `role='none'` (synonymous with `role='presentation'`) on the host element, then does it make sense to set aria-disabled on the same internals object?" (PFE PR #2671)
+
+### Leave "why comments" on non-obvious ARIA decisions
+Non-obvious accessibility decisions need comments explaining the reasoning for future maintainers.
+
+> "I think we should also leave a 'why comment' here and below, to prevent confusion in the future, since the reader may not immediately grok that disabled dropdowns are still permitted to open." (PFE PR #2671)
+
+## API Design Philosophy
+
+### API Surface
+
+#### Easy to add, hard to remove
+Be conservative with API surface. Every slot, part, property, and attribute is API surface. Adding new features is a minor release; removing them is a breaking change.
+
+> "absent clear guidance, I'd say 'less is more' - we can always add later, but removing APIs is very difficult to justify" (RHDS PR #952, recurring across RHDS PRs #254, #259, #279)
+
+#### Additive API changes are minor versions, not patches
+Adding a new public property, attribute, event, or slot is a minor version bump, not a patch.
+
+> "It's an additive API change, so core 2.1.0." (PFE PR #2410)
+
+#### Don't add escape-hatch slots without concrete use cases
+Override/escape-hatch slots that allow replacing entire shadow DOM sections should only be added when there is a proven need.
+
+> "Do we have a concrete use case for the `base` slot, which overrides all the shadow content? If not, we should consider removing it." (RHDS PR #254)
+
+#### Distinguish element-level from pattern-level features
+Some visual treatments are achieved through composition and content (pattern-level) rather than built-in attributes (element-level). Document patterns separately from element APIs.
+
+> "We don't need to (and maybe shouldn't) implement all of these in the element - i.e. some of them are likely 'pattern level', and should be moved to docs/patterns/card" (RHDS PR #952, recurring with RHDS PR #995)
+
+#### Composability over configuration
+Features that compose multiple behaviors belong at the "pattern" level rather than as built-in booleans. Keep components reusable across more contexts.
+
+> "I'd rather leave that to the pattern level, tbh" (RHDS PR #995)
+
+#### Scrollspy and sticky positioning are patterns, not component features
+Keep components focused on rendering and semantics. Layout and behavioral concerns are pattern-level.
+
+> RHDS PR #2194
+
+#### Don't ship what you can't fully support
+Limit scope to what can be properly themed/maintained. Expand later when the broader system catches up.
+
+> "Because we have not yet fully developed our theming process yet, it seems to me that shipping this will actually break theming going forward." (RHDS PR #1587)
+
+#### Reuse existing components rather than creating new sub-elements
+Before creating new sub-elements, check if existing components can serve the purpose.
+
+> "my thought process was that (1) I'm lazy and (2) it's better to use existing components wherever possible" (RHDS PR #1496)
+
+#### Backwards-compatible API evolution
+When simplifying an element's API (e.g., replacing slotted content with an attribute), always maintain backwards compatibility with the existing approach.
+
+> "existing markup will still work" (RHDS PR #2182)
+
+#### Deprecation over removal for shipped APIs
+Never remove a shipped public attribute without a deprecation period. Add deprecation warnings (JSDoc and runtime console warnings). Isolate deprecation code with comments for easy cleanup.
+
+> "rather than putting the provider back, let's concentrate on putting the *attribute* back instead" (RHDS PR #1245)
+
+#### Shipped attribute values are part of the public CSS API
+Even when deprecating attribute values, keep them functional in CSS to avoid breaking downstream selectors.
+
+> "since open is part of the public css api, we have to keep it in this file. imagine someone had this css: `rh-pagination[variant='open'] { ... }` This will break if we remove the open attr from css" (RHDS PR #2704)
+
+#### Provide deprecated aliases when renaming elements
+When renaming elements, always provide backward-compatible aliases so old names continue to work. Use `@deprecated` JSDoc annotations.
+
+> "Since we don't alias to the old names this is a breaking change... Probably best to provide aliases" (RHDS PR #746)
+
+#### Remove prematurely-shipped public APIs
+It is better to remove bad public APIs and replace them with private internals than to keep them for backward compatibility.
+
+> "The idea behind the context tokens is useful, but they were hastily implemented by yours truly without consulting the designers." (RHDS PR #817)
+
+#### Breaking change communication
+Changesets for breaking changes should include: (1) what changed, (2) BEFORE/AFTER code migration examples, (3) rationale.
+
+> RHDS PR #845; "Please outline breaking changes here with before and after html blocks." (PFE PR #2114)
+
+#### Coordinate breaking changes with downstream consumers
+When changing interactive semantics (like moving `href` from slotted `<a>` to element attribute), coordinate with analytics, CMS, and other downstream teams.
+
+> RHDS PR #1608
+
+### Naming Conventions
+
+#### Use "variant" not "variation"
+Consistent terminology across all documentation and code.
+
+> RHDS PR #1043
+
+#### Use `expanded` over `open` for collapsible semantics
+For accordion-like collapsible elements, `expanded` is more conventional than `open`.
+
+> "I agree with you, `expanded` is more conventional." (PFE PR #1849)
+
+#### Rename parts and public APIs to avoid implementation jargon
+CSS parts and public API names should use user-facing terminology, not internal concepts like "provider."
+
+> "on call we talked about renaming this. options: main, nav, menu, mobile menu. anything other than provider, really" (RHDS PR #1108)
+
+#### Rename confusing concepts for adoption
+When technical terminology creates a barrier, rename the public-facing concept to use familiar industry terms.
+
+> "we've identified that the word 'color context' is confusing... By contrast, most designers and developers know what a theme is." (RHDS PR #1298)
+
+#### Controller names shouldn't reference underlying libraries
+Name controllers for what they do, not what library they wrap. The library may be swapped or removed later.
+
+> "the name shouldn't reference the underlying library (since we might swap or remove it later)" (PFE PR #2045)
+
+#### Standardize controller method names across elements
+When multiple elements use the same controller patterns, standardize the method names (e.g., `selectItem`) to prevent inconsistency that would later require breaking changes.
+
+> "we should probably settle on a nomenclature and call all of these `selectItem` etc, aligning names around RTIController in all elements" (RHDS PR #1239)
+
+#### Standardize icon API across elements
+When multiple elements use icons, standardize the icon API (`icon`, `icon-set` attributes) across all of them.
+
+> RHDS PR #1859
+
+## Documentation & Testing
+
+### Every element needs `@summary` JSDoc
+Required for the custom elements manifest.
+
+> "needs `@summary`" (RHDS PR #952, recurring)
+
+### All public members need JSDoc
+Think of the custom elements manifest as consumable by LLMs and tooling. JSDoc blocks on base classes inherit to subclasses.
+
+> "props need jsdoc: think cem as llm fodder" (RHDS PR #2449); "You could move the jsdoc blocks to base, and they'll inherit to the subclasses." (PFE PR #2260)
+
+### Use `/** */` JSDoc blocks, not `//` comments, for public API
+Public API documentation should use JSDoc blocks. Examples in JSDoc should use the DOM API (`document.querySelector`), not browser console (`$0`).
+
+> "This should be a jsdoc block, not a `//` comment, and the example should use the DOM api (`document.querySelector('tabs-element')`), not browser console (`$0`)." (PFE PR #2577)
+
+### Use CSS data types in `@cssprop` JSDoc
+Use CSS data types where feasible and show direct values in `@default`.
+
+> "Use CSS data types where feasible, so `@cssprop {color} --background-color`. In the `@default` inline tag, use the direct value rather than the variable definition." (PFE PR #2045)
+
+### Don't use unnecessary `@default` JSDoc tags
+The CEM analyzer picks up defaults from property initializers automatically.
+
+> "We don't need `@default`, our analyzer will pick it up from the initializer." (PFE PR #2949)
+
+### Document all public CSS custom properties with `@cssprop`
+System tokens referenced in documentation should only list names (not values). Every public CSS custom property needs a descriptive comment.
+
+> "needs `@cssprop`s for component props and system tokens" (RHDS PR #952)
+
+### Document all CSS parts with `@csspart`
+Every exposed CSS part needs a JSDoc `@csspart` annotation, or it should be removed.
+
+> "This needs a `@csspart` jsdoc tag." (PFE PR #2470); "List the parts in jsdoc, or remove them." (PFE PR #2511)
+
+### Summaries and descriptions belong in inline JSDoc
+Not in external data files. Co-locate documentation with code.
+
+> "belongs inline" (RHDS PR #2802)
+
+### Tests should verify public API, not shadow DOM internals
+Shadow DOM is an implementation detail. Test via attributes, properties, events, computed styles, offsetWidth, and accessibility tree snapshots.
+
+> "we would generally prefer for tests not to ever look into the shadow root, where feasible. The reason why is because the shadow root should be private to the implementation." (RHDS PR #553)
+
+### Use a11ySnapshot for accessibility assertions
+Test accessibility by asserting against the accessibility tree, not by querying shadow DOM structure.
+
+> "instead of asserting on the shadow root, use a11ySnapshot and assert against the ax tree" (RHDS PR #1239); "Don't assert on shadow dom, instead assert on the ax tree." (PFE PR #2589)
+
+### Separate setup from assertions in tests
+Move fixture creation and actions into `beforeEach`. Keep `it` blocks focused on assertions. Structure tests as "given a predicate, assert result" using nested `describe` blocks.
+
+> "setup preliminary state in `describe/beforeEach` and perform actions in `beforeEach`. `it` should (usually synchronously) only assert on state" (RHDS PR #1239); PFE PR #2577
+
+### `async` in `it` blocks is a smell
+If an `it` block needs to be async, the async setup should move to `beforeEach`. Exception: asserting on the accessibility tree.
+
+> "`it(title, async function() {});` is a smell, the `async` should not be necessary." (PFE PR #2589)
+
+### Don't use arrow functions in Mocha tests
+Mocha tests should use `function()` to allow `this.timeout()` and other Mocha context features.
+
+> "Mocha tests should not use arrow functions." (PFE PR #2155)
+
+### Test element computed sizes, not internal CSS property values
+Test observable behavior like `offsetWidth` rather than internal CSS custom property values.
+
+> "Might be more maintainable to test the element's offsetWidth." (PFE PR #2155)
+
+### Test form submission behavior
+Wrap form-associated elements in forms, add submit listeners that do `event.preventDefault()`, and verify values.
+
+> "Can you add tests for form submission, to make sure the correct value is applied?" (PFE PR #2899)
+
+### Tests should assert observable behavior, not rendering
+A test that only checks whether the element renders is not useful.
+
+> "we can remove this test, it doesn't make any assertions about our element's public apis, state, or observable side effects" (RHDS PR #2605)
+
+### Split demos into separate files per variant
+Each demo file should show one variant or feature. Index demo is the simplest possible usage.
+
+> "move this pattern to a separate demo. Index should be a simple example of basic usage." (RHDS PR #2802, recurring); PFE PRs #2511, #2599
+
+### Inline demo dependencies
+Demo files should be self-contained. Inline JavaScript imports rather than using separate JS files.
+
+> "prefer to inline this into demos, to improve reading comprehension" (RHDS PR #1197); PFE PR #2593
+
+### Avoid wrapper divs in demo HTML
+They add noise and don't represent how users would actually use the component.
+
+> "Try to avoid wrapper divs in demos, they add noise." (RHDS PR #2802)
+
+### Make component scope abundantly clear in docs
+When a component has a constrained scope, make that limitation explicit at every documentation entry point. Users arrive via deep links.
+
+> "The docs should be updated to make it abundantly clear - at every opportunity - that this element is *not* for displaying arbitrary content" (RHDS PR #1732)
+
+### Document progressive enhancements
+When an element progressively enhances standard HTML, document each enhancement feature explicitly.
+
+> RHDS PR #1197
+
+### Changesets describe what changed for the user
+Explain user-facing changes, not the development process. Include code snippets.
+
+> "Rather than explaining the steps taken as a dev, explain what the major changes are to the user." (PFE PR #2186)
+
+## Lit-Specific Conventions
+
+The following conventions apply when building custom elements with Lit.
+
+### Omit `type: String` and single-word `attribute` in Lit decorators
+`type: String` is the default in `@property()` and should be omitted. The `attribute` option only needs specification when the attribute name differs from the property name.
+
+> "type: String is superfluous" (RHDS PR #679); "You don't need to specify `attribute` for single-word terms" (RHDS PR #377)
+
+### Don't imperatively update shadow DOM — use reactive state
+In Lit components, don't imperatively add/remove classes or modify shadow DOM. Use reactive properties and `classMap` in templates. State changes should flow through the reactive system.
+
+> "We shouldn't imperatively update templated DOM... Better to use `classMap` and key everything off element state." (RHDS PR #259); "Imperatively modifying DOM that lit controls is fragile." (PFE PR #2301)
+
+### State then effects
+Methods should update state; side effects (events, class changes) should be derived from state changes in lifecycle callbacks or render methods.
+
+> "If the intention is to set state and also fire an event to inform regarding the change, can we invert the responsibility, have this method set `this.expanded = !this.expanded`, then in `expandedChanged` fire the event? state => effects" (RHDS PR #259)
+
+### Put false case first in Lit template ternaries
+Makes templates easier to scan: `${!condition ? '' : html\`content\`}`.
+
+> "nit: reads better when the false case is first" (RHDS PR #2624)
+
+### Controllers for cross-cutting concerns
+Use reactive controllers (ScreenSizeController, DirController, RovingTabindexController, etc.) rather than manually managing state. Initialize controllers eagerly but make them noop when not applicable.
+
+> "Can we use RHDSScreenSizeController here instead, so that we don't have to import tokens here?" (RHDS PR #259, recurring)
+
+### Use `static styles = [styles]` array form
+Even for single stylesheets, use array syntax so adding additional style sources later is a minimal diff.
+
+> RHDS PR #2449
+
+### Prefer `willUpdate` over mutation observers for property changes
+Use Lit's reactive property system (`@property` + `willUpdate`) instead of mutation observers when reacting to property changes.
+
+> "We don't need a mutation observer for this; we can use `@property` and `willUpdate`." (PFE PR #2511)
+
+### Keep render methods pure — side effects in `willUpdate`
+Side-effect logic (logging, external state updates) should move to `willUpdate`. The render method should be a pure function of state.
+
+> "The logger call, since it's a side effect should move to `willUpdate`." (PFE PR #2511)
+
+### Prefer `firstUpdated()` over async `connectedCallback`
+For initial DOM setup, use Lit's `firstUpdated()` rather than making `connectedCallback` async.
+
+> "As elsewhere, maybe we can use firstUpdated to avoid async connectedCallback." (PFE PR #2099)
+
+### Prefer `updated()` over `connectedCallback` for property reactions
+Lit likes to control CE lifecycle callbacks. Use `updated()` to react to property changes.
+
+> "Probably better just to check for changes in `updated`, lit likes to take control of ce lifecycle callbacks." (PFE PR #2292)
+
+### Don't break up templates into private render methods without reason
+Keep templates inline unless there's a compelling reason to extract them.
+
+> "Can we inline these? We've tended to avoid breaking up the templates into private render methods, unless we had a compelling reason." (PFE PR #2320)
+
+### Don't explicitly bind instance methods in Lit templates
+Lit handles `this` binding for event listeners in templates.
+
+> "Shouldn't need to explicitly bind instance methods in lit render templates." (PFE PR #2375)
+
+### Use `styleMap` for dynamic inline styles
+When dynamic inline styles need to override the CSS cascade, use Lit's `styleMap` directive.
+
+> "Better to do this as a styleMap, and you can keep everything in the render method IMO." (PFE PR #2588)
+
+### Design controllers for `ReactiveControllerHost`, not just elements
+Controllers may need to work with non-element hosts (e.g., `useController` hook in lit/react).
+
+> "Bear in mind we may need to make all of these controllers work with `ReactiveControllerHost` that isn't an element." (PFE PR #2570)
+
+### Ensure controllers are composable
+Elements should be able to use multiple controllers (float, RTI, toggle, internals) together without conflicts.
+
+> "Ensure this is composable. Elements should be able to implement their own float, rti, toggle, and internals controllers and have them all work together." (PFE PR #2570)
+
+### Use InternalsController singleton with WeakMap
+Access ElementInternals only through a shared controller that maintains a static WeakMap from host to internals.
+
+> "InternalsController should have a static weakmap from ReactiveControllerHost => internals." (PFE PR #2570)
+
+## Lit SSR
+
+The following advice is distilled from hard-won experience implementing Lit Server-Side Rendering across the RHDS docs site and PatternFly Elements, including the SSR wiki, SSR controller patterns, and dozens of SSR fix commits.
+
+### Guard browser-only APIs with `isServer`
+Code that accesses `window`, `document`, `MutationObserver`, `IntersectionObserver`, `getComputedStyle()`, `getBoundingClientRect()`, `children`, `assignedElements()`, or any other browser-only API will crash during server render. Guard all such code with Lit's `isServer` flag.
+
+```ts
+import { isServer } from 'lit';
+
+connectedCallback() {
+  super.connectedCallback();
+  if (!isServer) {
+    this.#normalize();
+  }
+}
+```
+
+> Recurring pattern across RHDS PRs #2294, #2448, #2605, #2802; PFE PR #2099
+
+### Move DOM logic out of `connectedCallback`
+Enabling Lit context SSR support requires components to run `connectedCallback` on the server (so context providers register before consumers need values). This means **all DOM-related logic must move out of `connectedCallback`** into `firstUpdated` or `updated`. Adopting context SSR required a major refactor of the entire RHDS element library.
+
+> RHDS wiki SSR page; RHDS PR #2294
+
+### Avoid hydration mismatches
+Mismatches between server-rendered HTML and initial client render are extremely difficult to debug and can prevent components from ever updating on the client. The component must treat server-rendered state as given and not modify it during initial upgrade.
+
+```ts
+updated() {
+  if (!isServer && this.hasUpdated) {
+    // Safe to run client-side-only logic
+  }
+}
+```
+
+The first two render cycles must not override server-set state.
+
+> RHDS wiki SSR page
+
+### Replace template ternaries with `?hidden` for SSR
+Conditional ternaries in templates, especially in child parts, can break hydration with cryptic `Hydration value mismatch` errors. Prefer `?hidden` attribute binding over ternaries for conditional rendering. Use `role="none"` to remove semantics from hidden landmark elements.
+
+> RHDS wiki SSR page; Justin Fagnani confirmed this is a first-hydration data issue
+
+### Use `!this.hasUpdated && isServer` for server-only conditionals
+When a conditional should only apply during SSR (not on the first client render), combine `isServer` with `hasUpdated` to avoid hydration mismatches.
+
+```ts
+const _isServer = !this.hasUpdated && isServer;
+classMap({ isServer: _isServer })
+```
+
+> RHDS wiki SSR page, per Konnor Rogers and Justin Fagnani
+
+### Lit SSR does not support async rendering
+There is currently no built-in Lit framework solution for handling asynchronous tasks during server rendering. RHDS worked around this by leveraging the fact that Lit SSR internals use iterators/generators — creating an async iterator to pause rendering, wait for promises, and yield results back.
+
+> RHDS wiki SSR page; upstream issue: lit/lit#4390
+
+### Use SSR hint attributes for slot-dependent templates
+Lit SSR cannot inspect slotted children (a hard technical limit for streaming HTML). Components that alter their template based on slotted content need `ssr-hint-has-slotted` and `ssr-hint-has-slotted-default` attributes on the host so the server render matches the client render.
+
+```html
+<pf-card ssr-hint-has-slotted-default
+         ssr-hint-has-slotted="header,footer">
+  <h2 slot="header">Header</h2>
+  <p>Default slot content</p>
+  <pf-button slot="footer">Footer</pf-button>
+</pf-card>
+```
+
+Automations (e.g., 11ty transforms) should inject these attributes server-side by parsing the HTML and detecting slotted children. Incorrect or missing hints will break the element via hydration mismatch.
+
+> RHDS PR #2336; PFE PR #2893; RHDS issue #1858
+
+### Use separate server/client SSR controllers
+The SSR controller pattern splits behavior into three files:
+
+1. **Base controller** (`ssr-controller.ts`): Minimal abstract class extending `ReactiveController` with an optional `ssrSetup(renderInfo)` async method
+2. **Server controller** (`*-ssr-controller-server.ts`): Performs async work in `ssrSetup()` — reads files, highlights code, parses HTML, injects SSR hint attributes. Uses Node.js APIs (`fs`, `path`, `parse5`)
+3. **Client controller** (`*-ssr-controller-client.ts`): Initializes properties to `noChange` to preserve SSR output during hydration. Extracts content from the SSR-rendered shadow DOM synchronously before the first update
+
+The entrypoint uses `isServer` + top-level `await` to conditionally import the right implementation:
+
+```ts
+import { isServer } from 'lit';
+export const MySSRController =
+  isServer ? await import('./my-ssr-server.js').then(m => m.MySSRControllerServer)
+           : await import('./my-ssr-client.js').then(m => m.MySSRControllerClient);
+```
+
+> RHDS `lib/ssr-controller.ts`, `uxdot/uxdot-pattern-ssr-controller*.ts`
+
+### Client SSR controller: use `noChange` for hydration-safe defaults
+Client-side SSR controllers should initialize template-bound properties to Lit's `noChange` sentinel, not `undefined` or empty strings. This tells Lit to preserve the SSR-rendered DOM rather than overwriting it. Extract actual values from the SSR-rendered shadow DOM synchronously in `hostConnected` (before the first update).
+
+```ts
+import { noChange } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+export class MySSRControllerClient extends RHDSSSRController {
+  content: ReturnType<typeof unsafeHTML> | typeof noChange = noChange;
+
+  async hostConnected() {
+    this.#extractSSRContent(); // synchronous, before first update
+    await this.host.updateComplete;
+    this.host.requestUpdate();
+  }
+}
+```
+
+> RHDS `uxdot/uxdot-pattern-ssr-controller-client.ts`
+
+### Strip Lit SSR hydration comment markers when extracting content
+When extracting content from SSR-rendered shadow DOM on the client, strip Lit's hydration comment markers (`<!--lit-...-->`) to get clean HTML for `unsafeHTML()`.
+
+```ts
+const content = surface.innerHTML.replace(/<!--\/?lit-[^>]*-->/g, '').trim();
+```
+
+> RHDS `uxdot/uxdot-pattern-ssr-controller-client.ts`
+
+### Handle hydration failures gracefully
+Hydration errors are common and hard to prevent entirely. Consider a recovery pattern: catch `Hydration` errors in `update()`, force-render the component, and force-hydrate child elements by removing `defer-hydration` attributes and requesting updates.
+
+> RHDS `uxdot/ssr-failure-recoverable.ts`
+
+### Use scalar Lit context values, not complex objects
+When sharing state via Lit context during SSR, use multiple contexts each carrying a single scalar value (string, boolean) rather than a single context with a complex object. Object references as context values cause strange effects during SSR.
+
+> RHDS wiki SSR page
+
+### Include base theme styles in the SSR response
+CSS `var()` calls with fallbacks mitigate most FOUC, but base theme styles must be present in the document. Coordinate with SSR consumers to include the base theme stylesheet.
+
+> RHDS wiki SSR page
+
+### Load SSR modules serially
+During the SSR routine, load component modules serially rather than in parallel. Don't swallow errors — surface them immediately to identify which component is causing SSR failures.
+
+> RHDS commit `docs(ssr): load modules serially, don't swallow errors` (PR #2294)
+
+### Minify collected CSS in the SSR payload
+Lit collects `static styles` and includes them in the SSR response. Adding a CSS minification step during SSR reduces payload size.
+
+> RHDS wiki SSR page
+
+### SSR and the live `attributes` collection
+When iterating over `this.attributes` to remove hydration-related attributes, spread into an array first. The `attributes` NamedNodeMap is live — removing attributes while iterating by index causes items to be skipped.
+
+```ts
+// WRONG: live collection mutation
+for (let i = 0; i < this.attributes.length; i++) { ... }
+
+// CORRECT: snapshot first
+const attributes = [...this.attributes];
+for (const attr of attributes) { ... }
+```
+
+> RHDS issue #2653 (hydration causing accessibility issues)
+
+## RHDS-Specific Conventions
+
+The following conventions are specific to the Red Hat Design System (RHDS) project.
+
+### Naming
+
+#### Element names use the `rh-` prefix
+Element names follow `rh-{category}-{modifier}` (e.g., `rh-navigation-secondary`, `rh-footer-universal`). The main noun comes first, with qualifiers after.
+
+> RHDS PRs #746, #786
+
+#### `color-palette` for theming
+RHDS uses the attribute name `color-palette` to separate theme from variant. This is the RHDS-specific application of the general principle [Distinguish `variant` from theme attributes](#distinguish-variant-from-theme-attributes).
+
+> RHDS PR #288, #486
+
+#### `accessible-label` for screen-reader names
+The RHDS convention is `accessible-label` (not `label`) for attributes that set an accessible name, e.g., `<rh-icon accessible-label='Arrow right'>`. This is the RHDS-specific application of the general principle [Abstract ARIA behind custom attributes](#abstract-aria-behind-custom-attributes).
+
+> RHDS PR #1732
+
+#### CSS custom property naming convention
+Public: `--rh-{component}-{property}`. Private/internal: `--_` prefix. Use logical property directions in names.
+
+> Recurring across RHDS PRs #553, #952, #1330, #2449
+
+### Token System
+
+#### System tokens vs component tokens
+System-level tokens (`--rh-color-*`, `--rh-space-*`) come from the RHDS design token package and are used as-is. Component-level custom properties (`--rh-card-background-color`) need full `@cssprop` documentation.
+
+> "we don't have an existing token `--rh-background-color`. perhaps you meant `--rh-card-background-color`?" (RHDS PR #952)
+
+#### Token fallback rules
+Theming tokens (colors) computed in `default-theme.css` don't need CSS fallbacks. Other tokens (spacing, fonts, lengths) always need fallback values in component CSS for resilience.
+
+> "general rule: theming tokens like --rh-color-text-primary *don't* need fallbacks... Other tokens like spacing, fonts, etc *do* need fallbacks" (RHDS PR #2448)
+
+#### T-shirt sizes map to RHDS tokens
+XL, LG, etc. must map to established RHDS length tokens. This is the RHDS-specific application of the general principle [T-shirt sizes must map to established token values](#t-shirt-sizes-must-map-to-established-token-values).
+
+> RHDS PR #2430
+
+### Architecture
+
+#### Color context provider/consumer system
+RHDS uses a context-based color provider/consumer system for theming. The `on` attribute is shadow-private and should not be exposed as a public attribute.
+
+> RHDS PRs #660, #661, #675, #817, #1245, #1298
+
+#### Use `@deprecated` decorator from pfe-core
+Use the framework-level `@deprecated` decorator from pfe-core to standardize deprecation behavior across all elements.
+
+> `@deprecated({ reflect: true, attribute: 'theme' }) theme?: 'base' | null = null;` (RHDS PR #1347)
+
+#### Re-export entrypoint modules
+RHDS prefers re-export entrypoint modules over pre-built bundles to preserve tree-shaking.
+
+> RHDS PR #1630
+
+### Process
+
+#### Changeset format
+User-facing release note quality. Format: `` `<element-tag>`: brief description of what changed ``
+
+> Recurring across RHDS PRs #1041, #1134, #1345, #1376, #1411
+
+#### No changesets needed for unreleased elements
+Changesets are only needed for changes to already-released components.
+
+> "So long as we haven't released yet, we don't need changesets for fixes." (RHDS PR #1094)
+
+#### CSS changes use `fix:`, not `style:`
+In conventional commits, `style:` means code formatting/linting, not visual/CSS changes.
+
+> "Nit: `style` commit type is actually for _code style_ i.e. refactorings, lintings, things like that. CSS changes should have `fix:` commit type." (RHDS PR #330)
+
+#### Recruit future users to review docs
+Documentation should be reviewed by people who will actually use the component, such as developers from Studio Dev, Systems Fed, etc.
+
+> "Please recruit developers from studio dev and systems fed, etc (i.e. future users of rh-table) to make sure the docs are clear to them" (RHDS PR #1197)
+
+## PFE-Specific Conventions
+
+The following conventions are specific to the PatternFly Elements (PFE) project.
+
+### Adhere to upstream API unless there's a DOM-specific reason to diverge
+PFE elements must match the upstream PatternFly React component's public API unless there's a good HTML/DOM-specific reason to modify it.
+
+> "Unless there is a good reason to modify one of the react component's public APIs (e.g. to make it more appropriate for HTML/DOM usage), `pf-alert` must adhere to the public API of the react component." (PFE PR #2951)
+
+### Not beholden to upstream names, only end-user features
+PFE is not beholden to PatternFly React's API surface and names, only to their user-facing features. Design as if working from design mockups alone.
+
+> "We are not beholden to pf-react's api surface and names, but only to their user-facing features. In other words, if we had received the design mockups only, and there had never been a react implementation, how would we have factored it?" (PFE PR #2570)
+
+### Private CSS properties are fine in base styles
+Base element styles can use private CSS custom properties (`--_`), but design-system-specific variables (PatternFly tokens) belong in subclass stylesheets.
+
+> "What's important in Base* styles isn't that they don't have variables, but that they don't have patternfly-specific variables." (PFE PR #2222)
+
+### Use `expanded` over `open` for collapsible semantics
+For accordion-like collapsible elements, PFE uses `expanded` as the conventional attribute name.
+
+> "I agree with you, `expanded` is more conventional." (PFE PR #1849)
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000000..55535eecd6
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,21 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run:*)",
+      "Bash(npm test:*)",
+      "Bash(ls:*)",
+      "Bash(git log:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git branch:*)",
+      "Bash(git checkout:*)",
+      "Bash(git fetch:*)",
+      "Read(../patternfly/**)",
+      "WebFetch(domain:www.patternfly.org)"
+    ],
+    "additionalDirectories": [
+      "../patternfly-react",
+      "../patternfly"
+    ]
+  }
+}
diff --git a/.claude/skills/create-element/SKILL.md b/.claude/skills/create-element/SKILL.md
new file mode 100644
index 0000000000..b00840b2b8
--- /dev/null
+++ b/.claude/skills/create-element/SKILL.md
@@ -0,0 +1,323 @@
+---
+name: create-element
+description: >
+  Create a new pf-v6 element from a PatternFly React component that has
+  no existing v5 web component. Use when asked to "create", "build",
+  "implement", or "add" a new element from scratch.
+tools: Read, Glob, Grep, Bash
+---
+
+# Create New v6 Element
+
+Build a new `pf-v6-{name}` element from the PatternFly React v6 source.
+No existing v5 element to start from -- everything written fresh.
+Aim for end-user experience parity with the corresponding v6 react component.
+
+## Prerequisites
+
+- `cem serve` running (`npm run dev`)
+- Chrome MCP connected
+- React source in `../patternfly-react/packages/react-core/src/components/`
+- SCSS source in `../patternfly/src/patternfly/components/` (for reference)
+
+## Workflow
+
+### Phase 1: Analyze React Source
+
+1. Read the React component:
+   ```
+   ../patternfly-react/packages/react-core/src/components/{Name}/
+   ```
+   See also the corresponding docs page e.g.
+   https://patternfly.org/components/accordion/
+
+   See demos in
+   ```
+   ../patternfly-react/packages/react-core/src/demos/
+   ```
+
+2. Read the stylesheet for that element via the Chrome MCP, pointed at the element page
+   ```
+   https://patternfly.org/components/{Name}/
+   ```
+
+3. Read the React test files for behavioral expectations:
+   ```
+   ../patternfly-react/packages/react-core/src/components/{Name}/__tests__/
+   ```
+
+4. Identify:
+   - Props that map to attributes vs properties vs slots vs CSS
+   - Events (callbacks) that map to DOM events
+   - Internal state management
+   - Form association needs
+   - Sub-components needed
+   - Dependencies on other PF elements (must already exist as pf-v6-*)
+
+### Phase 2: Enumerate Demos
+
+Fetch the patternfly.org component page to identify all demos:
+```
+https://www.patternfly.org/components/{name}
+```
+
+Each demo has a full-screen URL:
+```
+https://www.patternfly.org/components/{name}/react/{demo-slug}/
+```
+
+Identify which demo source file corresponds to each docs site demo
+
+Map React demos to our demo files:
+```
+React demo name         -> Our demo file
+"Variant examples"      -> demo/variant-examples.html
+"Disabled buttons"      -> demo/disabled-buttons.html
+```
+
+Additional demos for WC-specific APIs (slots, CSS parts, FACE) use our
+own names alongside.
+
+Collect description text from patternfly.org for YAML frontmatter.
+
+### Phase 3: Design Web-Native API
+
+Read `.claude/ADVICE.md` first -- distilled rules from
+4800+ PR reviews. This is the canonical reference for all API decisions.
+
+Full freedom on API design -- no legacy to preserve. Design the best
+web component API for this element's purpose.
+
+#### React-to-WC Translation Rules
+- React `children` -> default slot
+- React render props -> named slots
+- React `className` -> not needed (shadow DOM)
+- React `onChange` callback -> `change` event (Event subclass)
+- React `isExpanded` prop -> `expanded` boolean attribute
+- React `variant="primary"` -> `variant="primary"` (often 1:1)
+- React component composition -> slot composition - be careful of SSR DOM
+  access
+- React context -> CSS custom properties, or `@lit/context` if JS is required
+- React `useEffect` -> `willUpdate`/`updated` lifecycle
+- React hooks -> Lit reactive controllers
+
+#### Prefer Native Web Platform
+- FACE instead of wrapping native inputs where feasible
+- `InternalsController` for all ElementInternals (ARIA, form association).
+  Never use raw `attachInternals()` -- always go through InternalsController
+- When aria-label is indicated (e.g. icon-button), provide an `accessible-label`
+  attribute
+- Slots for composition, not render-prop equivalents
+- Native `<dialog>` instead of JS-managed modals
+- Container queries instead of responsive/breakpoint attributes
+- `<details>` for expandable content (free a11y)
+
+#### API Design Rules (apply to each surface)
+
+IMPORTANT: in all cases where a react api does not cleanly map to a web component
+API, surface that to the user.
+
+**Key principle:** easy to add, hard to remove. Ship less when in doubt.
+
+##### Templates
+- Prefer ID selectors in shadow DOM,
+- Avoid BEM, avoid using .pf-* classes internally in shadow root
+- Minimize wrappers; prefer `<slot>` directly
+- Vertical attribute formatting when >2 attrs
+- False case first in ternaries when used in templates
+- `slotchange` bubbles; listen on shadow root
+
+##### Attributes & Properties:
+- Do not require light DOM classes. Use attributes instead
+- Enum-style `variant` over multiple booleans (exclusive, not stackable)
+- Boolean attributes: present = true, absent = false. No `is-` prefix.
+- Don't reflect booleans to `"true"|"false"` strings
+- Don't default reflected boolean attributes to true, it will be impossible to unset in
+  HTML
+- Avoid array/object properties, exceptions for convenience APIs like
+  `pfselect.items = []`
+- Don't reflect array or object properties
+- Multi-word attributes: dash-case with camelCase class fields
+- Don't expose `aria-*` as public API; abstract behind custom attributes
+- Attribute/slot pairs for content that could be plain or rich
+  e.g.
+  ```html
+  <pf-v6-foo description="plaintext"></pf-v6-foo>
+  <pf-v6-foo><span slot="description"><em>Rich</em> text</pf-v6-foo>
+  ```
+- All attributes must have sensible defaults
+
+##### Slots:
+- Default slot for primary content
+- Semantic names, not positional "header", not "top"
+- Don't provide placeholder "lorem ipsum" content; but do provide default content when
+  sensible
+- Prescriptive descriptions in docs ("Label text" not "The label slot") - see https://bennypowers.dev/cem/docs/usage/effective-mcp-descriptions/
+- Hide empty slot containers, but be wary of SSR problems, use SlotController's
+  ssr-hint-* attributes
+- WARNING: `:empty` does not work on slots, `:has-slotted` is not yet widely available
+
+##### Events:
+- Event subclasses, not `CustomEvent` with detail
+- Cancelable for destructive/state-changing actions, or when users may wish to prevent default.
+- Match native event names when wrapping native elements
+
+##### Element CSS
+- Use Native nesting
+- Use `light-dark()`
+- Use logical properties instead of directionally
+- You may and should use any CSS features which are Baseline 2024 or earlier,
+  but no later
+- Don't nest `:host([attr])` with `&`, this doesn't work.
+- Don't use :host:has() or :host(:has()) - these are not quite ready
+  cross-browser
+- never use :host-context, it does not exist
+- `pointer-events: none` on disabled hosts
+
+##### CSS Custom Properties:
+- Use `--_` prefix for private custom properties, for example, when a css custom
+  property is defined purely to make the css file nicer, or for state management,
+  but is not intended for public use.
+- Avoid setting public css properties on the :host selector, rather, reference
+  them as fallback defaults at use sites
+- Don't duplicate native CSS capabilities
+- Fallback defaults at use site, not on `:host`
+- **MUST match patternfly-react** (`--pf-v6-c-{component}--*`)
+  Only exception: shadow DOM structure vastly different from React's flat DOM.
+
+  If you find a case where a given CSS custom property in the React source is tightly
+  coupled to a given DOM structure, in a way which inhibits our ability to freely
+  factor the best web component, raise that to the user.
+
+##### CSS Parts:
+- Name after internal element. Only expose with clear use cases.
+- Question aggressively -- hard to remove.
+
+### Phase 4: Implement
+
+1. Create element directory: `elements/pf-v6-{name}/`
+2. Write main element class:
+   - `@customElement('pf-v6-{name}')` decorator
+   - `static readonly styles` array
+   - Reactive properties with `@property`
+   - InternalsController for ARIA and form association (never raw attachInternals)
+   - FACE patterns if form-associated
+   - Template in `render()` method
+
+3. Write CSS:
+   - Translate SCSS to native CSS (nesting, light-dark(), logical properties)
+   - Shadow DOM scoping (IDs not BEM)
+   - Token-derived fallback values from PF token source
+   - box-sizing reset
+   - **MUST match patternfly-react CSS custom properties** (see CLAUDE.md)
+
+4. Create sub-elements if needed (only for a11y/composition reasons)
+5. Update `elements/package.json` exports
+
+### Phase 5: Create Demos
+
+Create HTML partial demos in `demo/`. Demos are partials (no `<!DOCTYPE>`,
+`<html>`, `<head>`). `cem serve` wraps them.
+
+For each demo from Phase 2:
+1. Create `demo/{demo-slug}.html` matching patternfly.org name
+2. Add YAML frontmatter:
+   ```html
+   ---
+   name: Variant examples
+   description: Button variant examples showing primary, secondary, and link styles.
+   ---
+   ```
+3. Inline `<script type="module">` with element import
+4. No wrapper divs; minimal markup
+
+`index.html` = simplest possible usage.
+
+Additional WC-specific demos:
+- `demo/slots.html` - slot composition patterns
+- `demo/form-associated.html` - FACE form integration (if applicable)
+- `demo/css-custom-properties.html` - theming overrides
+
+### Phase 6: Visual Comparison with Chrome MCP
+
+**CRITICAL**: `?rendering=chromeless` on ALL cem serve URLs.
+
+For each demo, compare against patternfly.org:
+
+1. Open our demo:
+   ```
+   navigate_page -> http://localhost:8000/elements/{name}/demo/{demo-slug}?rendering=chromeless
+   ```
+2. Open React reference:
+   ```
+   new_page -> https://www.patternfly.org/components/{name}/react/{demo-slug}/
+   ```
+3. `take_snapshot` + `take_screenshot` both tabs
+4. Compare visuals (layout, colors, typography, borders, dark mode)
+5. Compare structure (interactive elements, ARIA, keyboard nav, focus)
+6. Iterate: fix differences, retake, repeat until visual parity
+7. Interactive test: `click`, `press_key`, `fill`, check console errors
+8. Exhaustively check all element states e.g. expanded select, active descendant, etc
+
+### Phase 7: Write Tests
+
+Write all tests from scratch:
+- Unit tests validating public API (attributes, properties, events)
+- a11ySnapshot assertions for accessibility tree
+- Keyboard navigation tests
+- Form submission tests (if FACE)
+- Setup in beforeEach, assertions in it blocks
+- No arrow functions in Mocha tests
+- Test observable behavior (offsetWidth, computed styles), not shadow DOM
+- Cover behavioral expectations from React tests (Phase 1 step 3)
+  which are not already covered
+
+See `.claude/skills/review-api/SKILL.md` Phase 4 for full test checklist.
+
+### Phase 8: Write README
+
+Create `elements/pf-v6-{name}/README.md` documenting divergences from
+the React component API. Structure:
+
+1. **Title and summary** -- element tag, one-line description
+2. **Usage** -- 2-3 HTML snippets showing common patterns
+3. **Divergences from React `{Name}`** -- three tables:
+
+#### "Not implemented" table (2 columns: React prop | Notes)
+React props with no web component equivalent and no workaround.
+Only truly absent features belong here.
+
+#### "Changed API" table (3 columns: React prop | Web component | Difference)
+React props that have a web component equivalent but with different API shape.
+Include props where:
+- Name changed (e.g. `enableFlip` -> `no-flip`)
+- Type changed (e.g. boolean -> enum, prop -> CSS custom property)
+- Mechanism changed (e.g. callback -> DOM event, declarative -> imperative)
+- Not configurable but has a fixed internal value (note "Not supported" or
+  "Hardcoded to X")
+
+**Omit** props that map 1:1 as camelCase properties with dash-case attributes
+and identical semantics (e.g. React `entryDelay` -> attribute `entry-delay`).
+These are standard web component conventions, not divergences.
+
+#### "Added" table (2 columns: Web component API | Notes)
+Web-component-only APIs not present in React (events, methods, slots, CSS
+custom properties).
+
+**Accuracy rule:** verify each claim against the actual CSS and TS source.
+Don't claim CSS properties on the host affect shadow DOM internals. Check
+whether values are actually configurable or hardcoded.
+
+See `elements/pf-v6-tooltip/README.md` for a reference example.
+
+### Phase 9: Audit
+
+Prompt the user to activate /review-api, /review-demos, and /review-a11y
+
+Fix all critical and warning findings before PR
+
+## Quality Bar
+
+Place the web component next to React: visually and functionally
+indistinguishable to end users. API should feel native to web developers.
+Accessibility may and should exceed React's -- that's a feature, not a bug.
diff --git a/.claude/skills/review-a11y/SKILL.md b/.claude/skills/review-a11y/SKILL.md
new file mode 100644
index 0000000000..ee807e89c2
--- /dev/null
+++ b/.claude/skills/review-a11y/SKILL.md
@@ -0,0 +1,333 @@
+---
+name: review-a11y
+description: >
+  Accessibility audit for a PatternFly Element. Verifies computed
+  accessibility tree in both Chrome and Firefox across all element states
+  and relationships. Use when asked to "review accessibility", "check a11y",
+  "audit accessibility", or mentions "WCAG", "screen reader", "keyboard
+  navigation", or "ARIA".
+tools: Read, Glob, Grep, Bash
+---
+
+# Accessibility Review
+
+Review PatternFly Elements for accessibility compliance. Verify the
+computed accessibility tree in both Chrome and Firefox across all
+element states.
+
+## Prerequisites
+
+- `cem serve` running (`npm run dev`)
+- Chrome MCP connected
+- Firefox MCP connected
+
+If MCPs are not available on the user's claude code session, instruct the user 
+how to install and configure them.
+
+## Workflow
+
+### Phase 1: Gather Context
+
+1. Read the element source: `elements/pf-v6-{name}/pf-v6-{name}.ts`
+2. Read the element CSS: `elements/pf-v6-{name}/pf-v6-{name}.css`
+3. Read demos: `elements/pf-v6-{name}/demo/`
+4. Identify all element states: default, hover, focus, active, disabled,
+   expanded, checked, loading, error, etc. (whatever the element supports), including
+   the states of sub elements (e.g. aria active descendant for a select)
+5. Identify relevant [ARIA APG Patterns](https://w3.org/WAI/ARIA/apg/patterns/) for the element
+
+### Phase 2: Check Internal ARIA
+
+- `InternalsController` used for role, aria-label, aria-checked, etc.?
+- No `aria-*` attributes recommended for public API (abstracted behind custom attrs)?
+- No contradictory ARIA on same internals (e.g., role="none" + aria-disabled)?
+
+### Phase 3: Check Keyboard
+
+Using Chrome and Firefox MCP to issue real keyboard commands, validate that 
+
+- Interactive elements keyboard-focusable?
+- Logical tab order?
+- Keyboard shortcuts match native equivalents?
+- Focus trapped correctly in modals/dialogs?
+
+### Phase 4: Check Semantics
+
+- Landmark roles only where appropriate (no pollution from repeated instances)?
+- Heading hierarchy preserved through slots?
+- Form association via FACE + ElementInternals?
+- Labels derived from slotted content with attribute escape hatch?
+
+### Phase 5: Check Demos
+
+- All demos demonstrate accessible patterns (no bad advice)?
+- No redundant ARIA roles on elements with implicit roles?
+- Don't treat div as button, etc
+- Check for WCAG color contrast violations.
+
+### Phase 6: Verify Accessibility Tree in Both Browsers
+
+**CRITICAL**: Verify the computed accessibility tree in BOTH Chrome AND
+Firefox. Browser engines compute the ax tree differently, especially for
+shadow DOM and ElementInternals. A component that works in one browser
+may be broken in the other.
+
+For each demo, in each state the element supports:
+
+#### Chrome
+
+1. Open demo in Chrome:
+   ```
+   navigate_page -> http://localhost:8000/elements/{name}/demo/{slug}?rendering=chromeless
+   ```
+2. `take_snapshot` with `verbose: true` to capture full a11y tree
+3. Verify roles, names, states, and values are correct
+4. For interactive elements, use `click`, `press_key`, `fill` to
+   transition between states, then `take_snapshot` again after each
+   state change
+
+#### Firefox
+
+1. Open same demo in Firefox:
+   ```
+   navigate_page -> http://localhost:8000/elements/{name}/demo/{slug}?rendering=chromeless
+   ```
+2. `take_snapshot` to capture a11y tree
+3. Verify same roles, names, states match Chrome
+4. Interact to transition states, snapshot after each
+
+#### States to verify
+
+For each state the element supports, verify the **ax tree** reflects it.
+Don't check for specific ARIA attributes in the DOM -- the implementation
+may use ElementInternals, native semantics (`<dialog>`, `<details>`),
+or ARIA attributes. What matters is the computed ax tree result.
+
+| State             | Ax tree expectation                                               |
+| ----------------- | ----------------------------------------------------------------- |
+| Default           | Correct role, accessible name, description                        |
+| Disabled          | Node shows disabled state, not focusable                          |
+| Focused           | Focus indicator visible, node shows focused                       |
+| Expanded          | Node shows expanded state, controlled content visible in tree     |
+| Collapsed         | Node shows collapsed state, controlled content hidden from tree   |
+| Checked/unchecked | Node reflects checked/unchecked state                             |
+| Selected          | Node reflects selected state                                      |
+| Loading           | Live region announces, or node shows busy state                   |
+| Error/invalid     | Node shows invalid state, error description associated            |
+| Read-only         | Node reflects read-only state                                     |
+
+Skip states that don't apply to the element.
+
+#### Element relationships to verify
+
+Composite widgets have internal relationships between child nodes.
+Verify these in the **ax tree** for BOTH browsers, in BOTH expanded
+and collapsed states. Focus on tree structure and relationships, not
+DOM attributes -- native elements and ElementInternals may produce the
+correct tree without explicit ARIA attributes.
+
+| Pattern         | Expected ax tree roles    | Expected relationships                                                                              |
+| --------------- | ------------------------- | --------------------------------------------------------------------------------------------------- |
+| Combobox/Select | combobox, listbox, option | Combobox owns/controls listbox; focused option tracked; expanded state toggles                       |
+| Menu/Dropdown   | button, menu, menuitem    | Trigger controls menu; menu appears/disappears from tree on toggle                                  |
+| Tabs            | tablist, tab, tabpanel    | Tab controls panel; active tab shows selected; inactive panels hidden from tree                     |
+| Accordion       | heading, button, region   | Button controls region; expanded state toggles; region hidden when collapsed                        |
+| Tree            | tree, treeitem, group     | Parent items show expanded state; items have level, set size, position in set                       |
+| Dialog/Modal    | dialog                    | Modal state conveyed (may come from native `<dialog>`); focus contained; name from heading          |
+| Form controls   | depends on type           | Description associated with helper/error text; label associated                                     |
+
+For each composite element:
+1. Snapshot collapsed/closed state -- verify child roles present but
+   hidden content absent from tree
+2. Expand/open via interaction
+3. Snapshot expanded/open state -- verify child roles visible, ownership
+   and control relationships resolved in tree
+4. Interact with children (select option, activate menuitem, switch tab), and validate resulting states
+5. Snapshot post-interaction -- verify state updates propagated
+   (selected option, active tab, etc.)
+6. Close/collapse, snapshot again -- verify clean return to closed state
+
+**Cross-root ARIA relationships**: See the reference section below for
+the full technical landscape. Key points for reviewers:
+
+- `aria-controls`, `aria-describedby`, `aria-labelledby` **cannot**
+  reference IDs across shadow boundaries declaratively.
+- ARIA IDL properties (`ariaDescribedByElements`, etc.) are the
+  intended replacement but have cross-root limitations. See
+  "Cross-Root ARIA Element Reflection" below for which directions
+  work and which silently fail.
+- Verify relationships in the **ax tree**, not by inspecting DOM
+  attributes. A relationship that appears set in JS may produce
+  nothing in the computed tree.
+- Flag any broken cross-root references and document workarounds
+  (live-region announcer, `aria-label` on trigger, Reference Target
+  when it ships).
+- Ensure all ax tree states in demos are covered by a11ySnapshot
+  tests in the element's test files.
+
+#### Cross-browser differences to flag
+
+- Role computed differently between Chrome and Firefox
+- Name computation differs (common with shadow DOM slotted content)
+- State not reflected in one browser's ax tree
+- Focus behavior differs
+- ElementInternals not reflected in one browser's ax tree
+- Ownership/control relationships not resolved in one browser
+- Expanded/collapsed state not reflected in one browser's ax tree
+- Native element semantics (`<dialog>`, `<details>`) computed differently
+
+### Phase 7: Report
+
+```markdown
+## Accessibility Review: pf-v6-{name}
+
+### Accessibility Tree Verification
+| State | Chrome | Firefox | Match? |
+|-------|--------|---------|--------|
+| Default | role=button, name="Save" | role=button, name="Save" | yes |
+| Disabled | aria-disabled=true | aria-disabled=true | yes |
+
+### Critical Issues
+[Failures that break accessibility]
+
+### Cross-Browser Differences
+[Ax tree differences between Chrome and Firefox]
+
+### Warnings
+[Issues that may cause problems for some users]
+
+### Recommendations
+[Specific fixes with corrected code]
+```
+
+In "Critical Issues", all items should be linked to its WCAG success criterion.......
+
+## Principles
+
+- Verify the element's internal ARIA management
+- Cross-root ARIA: document limitations, use IDL properties whenever necessary
+- Leave "why comments" on non-obvious ARIA decisions
+- Both browsers must produce functionally equivalent ax trees
+- Test every state, not just default
+
+## Cross-Root ARIA Element Reflection
+
+Reference material for reviewing cross-shadow-boundary ARIA
+relationships. Last updated June 2026.
+
+### The Problem
+
+Declarative ARIA ID references (`aria-describedby="some-id"`) only
+resolve within a single DOM tree. Shadow DOM boundaries prevent
+cross-root ID resolution. This affects any element where a trigger in
+light DOM needs an ARIA relationship to content in shadow DOM (or
+vice versa).
+
+### ARIA IDL Element Reflection
+
+The ARIA IDL properties (`ariaDescribedByElements`,
+`ariaLabelledByElements`, `ariaControlsElements`, etc.) accept Element
+references instead of ID strings, bypassing the ID-resolution problem.
+However, cross-root references are validated by a **shadow-including
+ancestors** algorithm that restricts which directions work.
+
+#### Which directions work
+
+| Direction | Example | Status |
+|---|---|---|
+| Same tree | Light DOM element → light DOM element | Works |
+| Shadow-to-light (child→parent) | Shadow DOM element → light DOM ancestor | Works |
+| Light-to-own-shadow (parent→child) | Light DOM trigger → shadow DOM content in same host | Permitted by spec algorithm, but **not WPT-tested** and **unreliable in practice** |
+| Sibling shadow roots | Element in shadow root A → element in shadow root B | Does NOT work |
+| Arbitrary cross-root | Unrelated shadow boundaries | Does NOT work |
+
+The parent-to-child case (light DOM trigger referencing its host's
+shadow DOM content) is technically valid per the shadow-including
+ancestors rule, but:
+
+- WPT tests at `custom-elements/element-internals-aria-element-reflection.html`
+  only cover same-tree and negative (invalid cross-tree) cases
+- WICG/webcomponents#974 explored this direction with no clear resolution
+- No browser has confirmed reliable support
+- Treat as **progressive enhancement**: set the IDL property, but don't
+  rely on it for accessible content delivery
+
+#### What to do instead
+
+When a cross-root ARIA relationship silently fails, use one of these
+workarounds depending on the element's semantics:
+
+| Relationship | Workaround |
+|---|---|
+| `describedby` (supplementary text) | Static `role="status"` live-region announcer in light DOM (see ADVICE.md "Use a static live-region announcer") |
+| `labelledby` (accessible name) | Set `aria-label` directly on the trigger element |
+| `controls` (widget relationship) | Verify the ax tree reflects the relationship via native semantics (`<details>`, `<dialog>`) or ElementInternals; if not, document the gap |
+| `none` (opt-out) | Provide a `silent` or similar boolean attribute to suppress ARIA behavior |
+
+### Reference Target Proposal
+
+The **Reference Target** proposal (WICG/webcomponents#1086) is the
+long-term solution for cross-root ARIA. It enables external elements to
+reference a shadow host by ID, with the shadow root designating which
+internal element receives the reference via `shadowRootReferenceTarget`.
+
+#### Status (June 2026)
+
+| Browser | Status |
+|---|---|
+| Chrome | Canary behind `--enable-experimental-web-platform-features` flag. Intent to Experiment filed. Not in stable. |
+| Firefox | Positive standards position. Igalia prototyping (NLNet funded). Bug 1981341. Not shipping. |
+| Safari/WebKit | Igalia prototype exists. No official standards position signal. |
+| Spec | WHATWG HTML #10707, Stage 3 ("Committed"). Pull requests DOM #1353, HTML #10995 in progress. Not yet merged into HTML Living Standard. |
+| Interop 2026 | Submitted as focus area proposal (web-platform-tests/interop#1011). |
+
+#### What Reference Target solves
+
+- **Outside → host → internal target** references (e.g., a label
+  element outside a shadow root referencing an input inside it via
+  the host)
+- Recursive resolution through nested shadow roots
+
+#### What Reference Target does NOT solve
+
+- Arbitrary sibling-to-sibling cross-root references
+- Direct parent-to-specific-child references bypassing the host
+- Attribute forwarding from host to internal elements
+- The tooltip case where the *trigger* is in light DOM and the
+  *content* is in the host's own shadow DOM (this is the reverse
+  direction)
+
+### Reviewing elements with cross-root ARIA
+
+When auditing an element with cross-root ARIA relationships:
+
+1. **Identify all ARIA relationships** the element establishes
+   (describedby, labelledby, controls, owns, etc.)
+2. **Map each relationship's direction**: which element sets the
+   property, which element is referenced, and which shadow roots are
+   involved
+3. **Check the ax tree in both browsers** to see if the relationship
+   actually resolves (don't trust DOM inspection)
+4. **Verify the fallback mechanism** works:
+   - If using an announcer, verify `role="status"` element exists,
+     content is announced on show, cleared on hide
+   - If using `aria-label`, verify the label text matches the
+     tooltip/popover content
+5. **Check for `silent` or equivalent opt-out** for cases where the
+   element's ARIA behavior conflicts with author-provided accessibility
+6. **Verify progressive enhancement code** is present:
+   - IDL property assignment (`ariaDescribedByElements = [el]`) should
+     be kept even though it silently fails today
+   - Comment explaining the cross-root limitation and linking to
+     relevant spec issues
+7. **Document the gap** in the review report under "Cross-Browser
+   Differences" or "Warnings"
+
+### Spec and issue references
+
+- WICG/aom#192 -- cross-root element reflection scope
+- whatwg/html#5401 -- element reflection and shadow roots
+- whatwg/html#10707 -- Reference Target spec integration (Stage 3)
+- WICG/webcomponents#1086 -- Reference Target tracking issue
+- WICG/webcomponents#974 -- ElementInternals pointing into own shadow
+- WPT `custom-elements/element-internals-aria-element-reflection.html`
diff --git a/.claude/skills/review-api/SKILL.md b/.claude/skills/review-api/SKILL.md
new file mode 100644
index 0000000000..129e8a5780
--- /dev/null
+++ b/.claude/skills/review-api/SKILL.md
@@ -0,0 +1,178 @@
+---
+name: review-api
+description: >
+  Review a PatternFly Element's API (HTML, CSS, JS) quality. Checks
+  attributes, properties, events, slots, CSS parts, custom properties,
+  code patterns, Lit conventions, and test coverage. Use when asked to
+  "review api", "review code", "check element quality", "audit api",
+  or before opening a PR.
+tools: Read, Glob, Grep, Bash
+---
+
+# API Review
+
+Review a PatternFly Element's HTML, CSS, and JS API quality against
+ADVICE.md rules and project conventions.
+
+## Workflow
+
+### Phase 1: Read Element
+
+Read:
+- `elements/pf-v6-{name}/pf-v6-{name}.ts` (main source)
+- `elements/pf-v6-{name}/pf-v6-{name}.css` (styles)
+- `elements/pf-v6-{name}/test/` (all tests)
+
+Read `.claude/ADVICE.md` for reference rules.
+
+### Phase 2: API Surface
+
+#### Attributes & Properties
+- [ ] Enum-style `variant` instead of multiple booleans?
+- [ ] No `is-` prefix on boolean attributes?
+- [ ] No reflected booleans defaulting to `true`?
+- [ ] No reflected booleans as `"true"|"false"` strings?
+- [ ] No reflected array/object properties?
+- [ ] No `aria-*` exposed as public API?
+- [ ] `accessible-label` attribute where aria-label indicated?
+- [ ] Multi-word attributes dash-case with camelCase fields?
+- [ ] All attributes have sensible defaults?
+- [ ] No native HTML attributes redeclared?
+- [ ] Attribute/slot pairs where content could be plain or rich?
+- [ ] No internal state exposed as public attributes?
+- [ ] No light DOM classes required?
+
+#### Slots
+- [ ] Default slot for primary content?
+- [ ] Semantic names, not positional?
+- [ ] No placeholder "lorem ipsum" content?
+- [ ] Default content provided where sensible?
+- [ ] Prescriptive descriptions in JSDoc?
+- [ ] Empty slot containers hidden (with SSR awareness via SlotController)?
+- [ ] WARNING: `:empty` doesn't work on slots, `:has-slotted` not widely available
+
+#### Events
+- [ ] Event subclasses, not `CustomEvent` with detail?
+- [ ] Destructive/state-changing events cancelable?
+- [ ] Native event names when wrapping native elements?
+
+#### CSS Custom Properties
+- [ ] **Match patternfly-react** (`--pf-v6-c-{component}--*`)?
+- [ ] `--_` prefix for private custom properties?
+- [ ] Public properties as fallback defaults at use site, not on `:host`?
+- [ ] No custom properties duplicating native CSS?
+- [ ] Any DOM-structure-coupled tokens flagged?
+
+#### CSS Parts
+- [ ] Named after internal elements?
+- [ ] Only exposed with clear use cases?
+
+#### General
+- [ ] Minimal API surface (easy to add, hard to remove)?
+- [ ] No sub-elements unless a11y/composition requires?
+- [ ] ECMAScript private fields (`#field`)?
+- [ ] `override` on lifecycle methods?
+- [ ] Member ordering follows convention?
+
+### Phase 3: Code Patterns
+
+#### CSS
+- [ ] Native nesting?
+- [ ] `light-dark()` for color tokens?
+- [ ] Logical properties (no `left`/`top`/`right`/`bottom`)?
+- [ ] Baseline 2024 or earlier?
+- [ ] No BEM classes? ID selectors for unique shadow elements?
+- [ ] box-sizing reset?
+- [ ] Token-derived fallback values (not guessed)?
+- [ ] `pointer-events: none` on disabled host?
+- [ ] `aspect-ratio` instead of width+height where applicable?
+- [ ] GPU-friendly animations?
+- [ ] Individual transform properties (`rotate`, `translate`, `scale`)?
+- [ ] Shadow DOM animation names unprefixed?
+- [ ] `:host` attribute selectors not nested with `&`?
+- [ ] No `:host:has()` or `:host(:has())`?
+- [ ] No `:host-context`?
+
+#### Templates
+- [ ] No BEM in shadow DOM?
+- [ ] Minimal wrapper elements?
+- [ ] `<slot>` used directly where possible?
+- [ ] Vertical attribute formatting when >2?
+- [ ] False case first in ternaries?
+
+#### Lit Patterns
+- [ ] No imperative DOM updates?
+- [ ] Side effects in `willUpdate`, not `render`?
+- [ ] `static styles = [styles]` array form?
+- [ ] Controllers for cross-cutting concerns?
+- [ ] `isServer` guards on browser-only APIs?
+- [ ] Quoting attribute values in Lit templates `src="{$this.src}"`?
+
+#### Lint
+```bash
+npx eslint elements/pf-v6-{name}/**/*.ts
+npx stylelint elements/pf-v6-{name}/**/*.css
+```
+
+### Phase 4: Test Review
+
+- [ ] Tests exist?
+- [ ] Test public API, not shadow DOM internals?
+- [ ] a11ySnapshot assertions present?
+- [ ] Keyboard navigation tested?
+- [ ] Form submission tested (if FACE)?
+- [ ] Setup in beforeEach, assertions in it?
+- [ ] No arrow functions in test blocks?
+- [ ] Behavioral expectations from React tests covered?
+
+### Phase 5: JSDoc and cem documentation comments
+
+- [ ] `@summary` present on element class?
+- [ ] All public properties/methods have `/** */` JSDoc (not `//` comments)?
+- [ ] CSS custom properties documented with `/** */` comments in the CSS file,
+co-located with the declaration or `var()` reference?
+- [ ] CSS parts documented with `<!-- summary: ... -->` HTML comments before the
+`part="..."` element in the template?
+- [ ] Slots documented with `<!-- summary: ... -->` HTML comments before the `<slot>`
+element in the template?
+- [ ] `@fires` for all dispatched events?
+- [ ] No unnecessary `@default` tags (analyzer picks up initializers)?
+
+Prefer HTML comments in template for part and slot, CSS comments for cssprop, over JSDoc
+
+#### Run `cem health`
+```bash
+cem health --component pf-v6-{name} --format json
+```
+Flag any category below 80%.
+
+### Phase 6: Report
+
+```markdown
+## API Review: pf-v6-{name}
+
+### Summary
+- API: X issues (Y critical)
+- Code: X pattern violations
+- Tests: X gaps
+- Docs: cem health score X%
+
+### Critical Issues
+[Must fix before PR]
+
+### Warnings
+[Should fix]
+
+### Suggestions
+[Nice to have]
+
+### Intentional Divergences
+[Where we chose different API/behavior than React, and why]
+```
+
+## Principles
+
+- Review against ADVICE.md rules, not taste
+- API surface violations are critical (hard to fix post-release)
+- Clear departures from the React API are not necessarily a problem, but must be 
+  surfaced to the user for human review.
diff --git a/.claude/skills/review-demos/SKILL.md b/.claude/skills/review-demos/SKILL.md
new file mode 100644
index 0000000000..1f2de23a3e
--- /dev/null
+++ b/.claude/skills/review-demos/SKILL.md
@@ -0,0 +1,134 @@
+---
+name: review-demos
+description: >
+  Review element demos and docs for parity with patternfly.org, quality,
+  and visual correctness. Use when asked to "review demos", "check demos",
+  "audit demos", "review docs", or "check demo parity".
+tools: Read, Glob, Grep, Bash
+---
+
+# Demo & Docs Review
+
+Review a PatternFly Element's demos for parity with patternfly.org,
+file quality, and visual correctness via Chrome MCP comparison.
+
+## Prerequisites
+
+- `cem serve` running (`npm run dev`)
+- Chrome MCP connected
+
+## Workflow
+
+### Phase 1: Identify Demos
+
+Read all demo files:
+```
+elements/pf-v6-{name}/demo/
+```
+
+### Phase 2: Parity Check
+
+1. Fetch patternfly.org demo listing:
+   ```
+   https://www.patternfly.org/components/{name}
+   ```
+
+2. Identify which React demo source files correspond to each docs site demo:
+   ```
+   ../patternfly-react/packages/react-core/src/components/{Name}/examples/
+   ../patternfly-react/packages/react-core/src/demos/
+   ```
+
+3. For each React demo listed, verify a matching demo file exists here:
+   ```
+   elements/pf-v6-{name}/demo/{demo-slug}.html
+   ```
+
+4. Report:
+   - Missing demos (exist on patternfly.org but not in our repo)
+   - Extra demos (ours only -- fine if they cover WC-specific features)
+   - Name mismatches (same content, different name -- rename to match)
+
+### Phase 3: Demo Quality
+
+For each demo file:
+- [ ] YAML frontmatter with name and description?
+- [ ] Description matches patternfly.org text where applicable?
+- [ ] HTML partial (no `<!DOCTYPE>`, `<html>`, `<head>`)?
+- [ ] Inline `<script type="module">` import?
+- [ ] No unnecessary wrapper divs/spans or other DOM?
+- [ ] `index.html` = simplest possible usage?
+- [ ] Self-contained (no external JS files)?
+- [ ] Demonstrates one variant/feature per demo?
+
+When these principals conflict with upstream react demos, it's not necessarily a problem,
+but should be noted to the user in the final report.
+
+### Phase 4: Visual Comparison (Chrome MCP)
+
+**CRITICAL**: `?rendering=chromeless` on ALL cem serve URLs.
+
+Demo URL uses unprefixed name (`pf-v6-card` => `card`).
+
+For each parity demo:
+
+1. Open our demo:
+   ```
+   navigate_page -> http://localhost:8000/elements/{name}/demo/{slug}?rendering=chromeless
+   ```
+2. Open React reference:
+   ```
+   new_page -> https://www.patternfly.org/components/{name}/react/{slug}/
+   ```
+3. `take_screenshot` both, compare visuals:
+   - Layout and spacing match?
+   - Colors and typography match?
+   - Border/shadow/radius match?
+   - Dark mode match? (use `emulate` to toggle color scheme)
+   - NB: react demos may not yet support native color-scheme, so you may need to 
+     toggle scheme with a button on the react page, or add a body class
+4. `take_snapshot` both, compare a11y trees
+5. Exhaustively check all element states (expanded, active descendant, etc.)
+6. Report differences with severity (bug vs intentional divergence)
+
+### Phase 5: Documentation
+
+- [ ] `elements/package.json` exports correct for this element?
+- [ ] `elements/{name}/docs` reflects the contents on the react site, but with 
+  web components sensibility.
+
+#### Run `cem health`
+```bash
+cem health --component pf-v6-{name} --format json
+```
+Flag any category below 80%. Check for orphaned package.json exports.
+
+### Phase 6: Report
+
+```markdown
+## Demo & Docs Review: pf-v6-{name}
+
+### Demo Parity
+| patternfly.org Demo | Our Demo | Status |
+|---------------------|----------|--------|
+| Variant examples | variant-examples.html | match / mismatch / missing |
+
+### Visual Differences
+[Screenshots or descriptions of visual mismatches]
+
+### Demo Quality Issues
+[Frontmatter, formatting, structure issues]
+
+### Docs Issues
+[cem health score, missing JSDoc, orphaned exports]
+
+### Suggestions
+[Nice to have improvements]
+```
+
+## Principles
+
+- Demo parity gaps are high priority (blocks docs migration)
+- Visual differences are bugs unless intentional and documented
+- Every patternfly.org demo must have a matching patternfly elements demo
+- WC-specific demos supplement, never replace, parity demos
diff --git a/.claude/skills/update-element/SKILL.md b/.claude/skills/update-element/SKILL.md
new file mode 100644
index 0000000000..86dffbcc18
--- /dev/null
+++ b/.claude/skills/update-element/SKILL.md
@@ -0,0 +1,308 @@
+---
+name: update-element
+description: >
+  Update an existing pf-v5 element to pf-v6. Use when asked to "update",
+  "rename", "upgrade", or "port" an element that already exists as pf-v5-*.
+  Covers renaming, v6 token migration, API redesign, demos, visual
+  comparison, tests, and accessibility.
+tools: Read, Glob, Grep, Bash
+---
+
+# Update v5 Element to v6
+
+Rename and update an existing `pf-v5-{name}` element to `pf-v6-{name}`,
+migrating to v6 design tokens, visual style, and CSS.
+Aim for end-user experience parity with the corresponding v6 react component
+while preserving or improving the existing web component API.
+
+Breaking changes to web component APIs are permitted, but require justification
+
+## Prerequisites
+
+- `cem serve` running (`npm run dev`)
+- Chrome MCP connected
+- React source in `../patternfly-react/packages/react-core/src/components/`
+- SCSS source in `../patternfly/src/patternfly/components/` (for reference)
+
+## Workflow
+
+### Phase 1: Analyze Existing Element and React Source
+
+1. Read the existing v5 element:
+   ```
+   elements/pf-v5-{name}/
+   ```
+   Note: current API surface (attributes, properties, events, slots, CSS
+   parts, CSS custom properties), test coverage, demo set, and docs.
+
+2. Read the React v6 component:
+   ```
+   ../patternfly-react/packages/react-core/src/components/{Name}/
+   ```
+   See also the corresponding docs page e.g.
+   https://patternfly.org/components/accordion/
+
+   See demos in 
+   ```
+   ../patternfly-react/packages/react-core/src/demos/
+   ```
+
+3. Read the stylesheet for that element via the Chrome MCP, pointed at the element page
+   ```
+   https://patternfly.org/components/{Name}/
+   ```
+
+4. Read the React test files for behavioral expectations:
+   ```
+   ../patternfly-react/packages/react-core/src/components/{Name}/__tests__/
+   ```
+
+5. Diff the v5 element API against React v6 API. Identify:
+   - New props/features in v6 React not in our v5 element
+   - Props removed in v6 React that our v5 element still has
+   - Token name changes between PF v5 and v6
+   - Structural changes in the SCSS or JSX (new modifiers, removed variants)
+
+### Phase 2: Rename Files and References
+
+1. Copy `elements/pf-v5-{name}/` to `elements/pf-v6-{name}/`
+2. Rename all files: `pf-v5-{name}.*` -> `pf-v6-{name}.*`
+3. Update all internal references:
+   - `@customElement('pf-v5-{name}')` -> `@customElement('pf-v6-{name}')`
+   - Import paths
+   - CSS file names
+   - Test file names and element references
+   - Demo element tags
+4. Update `elements/package.json` exports
+5. Update any cross-element imports in v6 elements that reference this element
+
+### Phase 3: Enumerate Demos
+
+Fetch the patternfly.org component page to identify all demos:
+```
+https://www.patternfly.org/components/{name}
+```
+
+Each demo has a full-screen URL:
+```
+https://www.patternfly.org/components/{name}/react/{demo-slug}/
+```
+
+Identify which demo source file corresponds to each docs site demo
+
+Map React demos to our demo files. Rename existing demos to match
+patternfly.org slugs. Add missing demos. Keep existing WC-specific
+demos under our own names.
+
+Collect description text from patternfly.org for YAML frontmatter.
+
+### Phase 4: Redesign API for v6
+
+Read `.claude/ADVICE.md` first -- distilled rules from
+4800+ PR reviews. This is the canonical reference for all API decisions.
+
+Key considerations for UPDATE vs new:
+- **Preserve good v5 API decisions** -- don't redesign what already works
+- **Fix known v5 API mistakes** -- this is the chance to break compat
+- **Adopt v6 React features** that make sense as web component APIs
+- **Drop v6 React features** that don't translate (see translation rules)
+
+#### React-to-WC Translation Rules
+- React `children` -> default slot
+- React render props -> named slots
+- React `className` -> not needed (shadow DOM)
+- React `onChange` callback -> `change` event (Event subclass)
+- React `isExpanded` prop -> `expanded` boolean attribute
+- React `variant="primary"` -> `variant="primary"` (often 1:1)
+- React component composition -> slot composition - be careful of SSR DOM 
+  access
+- React context -> CSS custom properties, or `@lit/context` if JS is required
+- React `useEffect` -> `willUpdate`/`updated` lifecycle
+- React hooks -> Lit reactive controllers
+
+#### Prefer Native Web Platform
+- FACE instead of wrapping native inputs where feasible
+- `InternalsController` for all ElementInternals (ARIA, form association).
+  Never use raw `attachInternals()` -- always go through InternalsController
+- When aria-label is indicated (e.g. icon-button), provide an `accessible-label` 
+  attribute
+- Slots for composition, not render-prop equivalents
+- Native `<dialog>` instead of JS-managed modals
+- Container queries instead of responsive/breakpoint attributes
+- `<details>` for expandable content (free a11y)
+
+#### API Design Rules (apply to each surface)
+
+IMPORTANT: in all cases where a react api does not cleanly map to a web component
+API, surface that to the user.
+
+**Key principle:** easy to add, hard to remove. Ship less when in doubt.
+
+##### Templates
+- Prefer ID selectors in shadow DOM,
+- Avoid BEM, avoid using .pf-* classes internally in shadow root
+- Minimize wrappers; prefer `<slot>` directly
+- Vertical attribute formatting when >2 attrs
+- False case first in ternaries when used in templates
+- `slotchange` bubbles; listen on shadow root
+
+##### Attributes & Properties:
+- Do not require light DOM classes. Use attributes instead
+- Enum-style `variant` over multiple booleans (exclusive, not stackable)
+- Boolean attributes: present = true, absent = false. No `is-` prefix.
+- Don't reflect booleans to `"true"|"false"` strings
+- Don't default reflected boolean attributes to true, it will be impossible to unset in 
+  HTML
+- Avoid array/object properties, exceptions for convenience APIs like 
+  `pfselect.items = []`
+- Don't reflect array or object properties
+- Multi-word attributes: dash-case with camelCase class fields
+- Don't expose `aria-*` as public API; abstract behind custom attributes
+- Attribute/slot pairs for content that could be plain or rich
+  e.g.
+  ```html
+  <pf-v6-foo description="plaintext"></pf-v6-foo>
+  <pf-v6-foo><span slot="description"><em>Rich</em> text</pf-v6-foo>
+  ```
+- All attributes must have sensible defaults
+
+##### Slots:
+- Default slot for primary content
+- Semantic names, not positional "header", not "top"
+- Don't provide placeholder "lorem ipsum" content; but do provide default content when 
+  sensible
+- Prescriptive descriptions in docs ("Label text" not "The label slot") - see https://bennypowers.dev/cem/docs/usage/effective-mcp-descriptions/
+- Hide empty slot containers, but be wary of SSR problems, use SlotController's 
+  ssr-hint-* attributes
+- WARNING: `:empty` does not work on slots, `:has-slotted` is not yet widely available
+
+##### Events:
+- Event subclasses, not `CustomEvent` with detail
+- Cancelable for destructive/state-changing actions, or when users may wish to prevent default.
+- Match native event names when wrapping native elements
+
+##### Element CSS
+- Use Native nesting
+- Use `light-dark()`
+- Use logical properties instead of directionally
+- You may and should use any CSS features which are Baseline 2024 or earlier, 
+  but no later
+- Don't nest `:host([attr])` with `&`, this doesn't work.
+- Don't use :host:has() or :host(:has()) - these are not quite ready 
+  cross-browser
+- never use :host-context, it does not exist
+- `pointer-events: none` on disabled hosts
+
+##### CSS Custom Properties:
+- Use `--_` prefix for private custom properties, for example, when a css custom 
+  property is defined purely to make the css file nicer, or for state management,
+  but is not intended for public use.
+- Avoid setting public css properties on the :host selector, rather, reference 
+  them as fallback defaults at use sites
+- Don't duplicate native CSS capabilities
+- Fallback defaults at use site, not on `:host`
+- **MUST match patternfly-react** (`--pf-v6-c-{component}--*`)
+  Only exception: shadow DOM structure vastly different from React's flat DOM.
+
+  If you find a case where a given CSS custom property in the React source is tightly
+  coupled to a given DOM structure, in a way which inhibits our ability to freely
+  factor the best web component, raise that to the user.
+
+##### CSS Parts:
+- Name after internal element. Only expose with clear use cases.
+- Question aggressively -- hard to remove.
+
+### Phase 5: Update Demos
+
+Update existing demos and add new ones from Phase 3:
+- Update element tags from `pf-v5-{name}` to `pf-v6-{name}`
+- Update demo content to reflect v6 API changes
+- Add YAML frontmatter with name and description
+- Add missing patternfly.org parity demos
+- Keep WC-specific demos, update as needed
+
+### Phase 6: Visual Comparison with Chrome MCP
+
+**CRITICAL**: `?rendering=chromeless` on ALL cem serve URLs.
+
+For each demo, compare against patternfly.org:
+
+1. Open our demo:
+   ```
+   navigate_page -> http://localhost:8000/elements/{name}/demo/{demo-slug}?rendering=chromeless
+   ```
+2. Open React reference:
+   ```
+   new_page -> https://www.patternfly.org/components/{name}/react/{demo-slug}/
+   ```
+3. `take_snapshot` + `take_screenshot` both tabs
+4. Compare visuals (layout, colors, typography, borders, dark mode)
+5. Compare structure (interactive elements, ARIA, keyboard nav, focus)
+6. Iterate: fix differences, retake, repeat until visual parity
+7. Interactive test: `click`, `press_key`, `fill`, check console errors
+8. Exhaustively check all element states e.g. expanded select, active descendant, etc
+
+### Phase 7: Update Tests
+
+Update existing tests -- don't rewrite from scratch:
+- Update element tag references from v5 to v6
+- Add tests for new v6 features
+- Remove tests for dropped v5 features
+- Add behavioral expectations from React tests (Phase 1 step 4) which are not 
+  already covered
+- Ensure a11ySnapshot assertions, keyboard nav tests
+- Add form submission tests if FACE
+
+See `.claude/skills/review-api/SKILL.md` Phase 4 for full test checklist.
+
+### Phase 8: Write README
+
+Create `elements/pf-v6-{name}/README.md` documenting divergences from
+the React component API. Structure:
+
+1. **Title and summary** -- element tag, one-line description
+2. **Usage** -- 2-3 HTML snippets showing common patterns
+3. **Divergences from React `{Name}`** -- three tables:
+
+#### "Not implemented" table (2 columns: React prop | Notes)
+React props with no web component equivalent and no workaround.
+Only truly absent features belong here.
+
+#### "Changed API" table (3 columns: React prop | Web component | Difference)
+React props that have a web component equivalent but with different API shape.
+Include props where:
+- Name changed (e.g. `enableFlip` -> `no-flip`)
+- Type changed (e.g. boolean -> enum, prop -> CSS custom property)
+- Mechanism changed (e.g. callback -> DOM event, declarative -> imperative)
+- Not configurable but has a fixed internal value (note "Not supported" or
+  "Hardcoded to X")
+
+**Omit** props that map 1:1 as camelCase properties with dash-case attributes
+and identical semantics (e.g. React `entryDelay` -> attribute `entry-delay`).
+These are standard web component conventions, not divergences.
+
+#### "Added" table (2 columns: Web component API | Notes)
+Web-component-only APIs not present in React (events, methods, slots, CSS
+custom properties).
+
+**Accuracy rule:** verify each claim against the actual CSS and TS source.
+Don't claim CSS properties on the host affect shadow DOM internals. Check
+whether values are actually configurable or hardcoded.
+
+See `elements/pf-v6-tooltip/README.md` for a reference example.
+
+### Phase 9: Delete v5 element
+
+Delete the directory and it's contents from ./elements/`pf-v5-{name}`. replace all references to `pf-v5-{name}`, except historical changelogs, and update their usage to conform to new APIs. This includes demos for v6 elements which use v5 dependencies.
+
+### Phase 10: Audit
+
+Prompt the user to activate /review-api, /review-demos, and /review-a11y
+
+Fix all critical and warning findings before PR
+
+## Quality Bar
+
+Place the web component next to React: visually and functionally
+indistinguishable to end users. API should feel native to web developers.
+Accessibility may and should exceed React's -- that's a feature, not a bug.
diff --git a/elements/.config/cem.yaml b/.config/cem.yaml
similarity index 60%
rename from elements/.config/cem.yaml
rename to .config/cem.yaml
index a9ca07ef88..b3e32c721a 100644
--- a/elements/.config/cem.yaml
+++ b/.config/cem.yaml
@@ -1,14 +1,22 @@
 sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/
 generate:
-  files:
-    - ./*/*.ts
   exclude:
     - './**/*.test.ts'
     - './**/*.spec.ts'
     - './**/*.e2e.ts'
-  output: custom-elements.json
   noDefaultExcludes: false
   demoDiscovery:
-    fileGlob: '*/demo/*.html'
+    fileGlob: 'elements/*/demo/*.html'
     urlPattern: ':tag/demo/:demo.html'
     urlTemplate: https://patternflyelements.org/components/{{.tag | alias | slug}}/demo/{{.demo | slug}}/
+serve:
+  port: 8000
+  transforms:
+    css:
+      include:
+        - 'elements/*/*.css'
+      exclude:
+        - 'elements/*/*-lightdom*.css'
+  watchIgnore:
+    - '_site/**'
+    - 'node_modules/**'
diff --git a/.gitignore b/.gitignore
index 6f6ad9dc21..278d51f110 100644
--- a/.gitignore
+++ b/.gitignore
@@ -103,6 +103,10 @@ core/pfe-core/demo/*
 .sonarlint
 .history
 
+# AI
+.claude/settings.local.json
+.claude/worktrees
+
 # Temp files
 *~
 *.swp
@@ -133,3 +137,5 @@ browserstack.err
 
 # Local Netlify folder
 .netlify
+!.claude/skills
+!.claude/settings.json
diff --git a/.pfe.config.json b/.pfe.config.json
index 02fa929c23..396a061159 100644
--- a/.pfe.config.json
+++ b/.pfe.config.json
@@ -1,4 +1,4 @@
 {
   "renderTitleInOverview": false,
-  "tagPrefix": "pf-v5"
+  "tagPrefix": ["pf-v5", "pf-v6"]
 }
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000..ada55d3d05
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,121 @@
+# PatternFly Elements v6
+
+Web components for PatternFly design system.
+
+Porting existing pf-v5 elements to pf-v6 designs, and PF v6 React
+components to LitElement custom elements.
+
+Prefer Opus 4.6 with 1 Million tokens context for these jobs
+
+## Context
+
+- React components: `../patternfly-react/packages/react-core/src/components/`
+- SCSS sources: `../patternfly/src/patternfly/components/`
+- Existing v5 elements: `elements/pf-v5-*/`
+- v6 elements: `elements/pf-v6-*/`
+- Migration plan: `.claude/V6-MIGRATION-PLAN.md`
+
+Ensure the user has cloned `patternfly-react` and `patternfly` repos in sibling directories.
+Treat the `patternfly` and `patternfly-react` repos as read-only source material.
+
+```
+patternfly/
+patternfly-elements/
+patternfly-react/
+```
+
+## Skills
+
+Use these skills for the corresponding tasks:
+
+- `/update-element` - port existing pf-v5 element to pf-v6
+- `/create-element` - build new pf-v6 element based on the SCSS and React source 
+  (for when no v5 exists)
+- `/review-a11y` - accessibility audit (Chrome + Firefox ax trees)
+- `/review-api` - review element API (HTML, CSS, JS) quality before PR
+- `/review-demos` - review element demos and docs quality before PR
+- API design rules: `.claude/ADVICE.md` (referenced by both element skills)
+
+Run before opening any PR, in parallel agents:
+- /review-a11y
+- /review-api
+- /review-demos
+
+## Element Conventions
+
+### Naming & Structure
+- Tag: `pf-v6-{name}` (e.g., `pf-v6-button`)
+- Sub-elements: `pf-v6-{parent}-{child}` only when a11y/composition requires
+- Directory: `elements/pf-v6-{name}/`
+- Source files:
+  - `elements/pf-v6-{name}/pf-v6-{name}.ts`
+  - `elements/pf-v6-{name}/pf-v6-{name}.css`
+- Test file: `test/pf-v6-{name}.spec.ts`
+
+### Class Member Ordering
+1. Static fields (`formAssociated`, `styles`)
+2. `@property` declarations
+3. `#privateFields`
+4. Constructor
+5. Lifecycle (`connectedCallback`, `willUpdate`, `updated`, `render`)
+6. Public methods
+7. Private methods
+
+### TypeScript
+- ECMAScript private fields (`#field`) not `private`
+- `override` on lifecycle methods
+- Export type unions for enumerated attribute values
+
+### SSR
+- `isServer` guards on browser-only APIs
+- DOM logic in `updated`, after `hasUpdate`, not `connectedCallback` or 
+  `firstUpdated`, which both run on the server.
+
+### Lit
+- Reactive state, not imperative DOM
+- Pure render; side effects in `willUpdate`
+- `static styles = [styles]` array form
+- Controllers over inheritance
+- See `.claude/ADVICE.md` "Lit-Specific Conventions" for full guidance
+
+## Dev Server
+
+`cem serve` (from `@pwrs/cem`), not web-dev-server.
+Config: `.config/cem.yaml`. see https://bennypowers.dev/cem/docs/reference/configuration/
+CSS files served as JS modules.
+Demo URLs: `http://localhost:8000/elements/{name}/demo/{slug}`
+
+**CRITICAL**: `?rendering=chromeless` on all demo URLs.
+cem serve UI uses its own PF elements with identical `pf-v6-` tagnames; chromeless avoids tagname collisions.
+
+```bash
+npm start  # cem serve on port 8000
+```
+
+## Testing
+
+- Public API, not shadow DOM internals
+- a11ySnapshot for a11y assertions
+- Setup in beforeEach, assertions in it
+- No arrow functions in Mocha
+- Test computed sizes (offsetWidth), not internal CSS values
+- Test form submission for FACE elements
+
+## Git
+
+- Conventional commits. Scope = unprefixed element name: `fix(button)`
+- `Assisted-By` for AI agents, never `Co-Authored-By`
+- Wrap `@slot`, `@summary` etc. in backticks in commit messages, to avoid 
+  pinging unrelated users on GitHub
+
+## Commands
+
+```bash
+npm run dev      # cem serve
+npm run build    # full build
+npm run test     # unit tests
+npm run e2e      # e2e tests
+npm run lint     # eslint
+cem generate     # regenerate manifest
+cem health       # doc quality check
+```
diff --git a/core/pfe-core/.cem.yaml b/core/pfe-core/.cem.yaml
new file mode 100644
index 0000000000..1ad8668614
--- /dev/null
+++ b/core/pfe-core/.cem.yaml
@@ -0,0 +1,3 @@
+generate:
+  files:
+    - ./*/*.ts
diff --git a/core/pfe-core/.config/cem.yaml b/core/pfe-core/.config/cem.yaml
deleted file mode 100644
index 5aaaae857a..0000000000
--- a/core/pfe-core/.config/cem.yaml
+++ /dev/null
@@ -1,9 +0,0 @@
-sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/
-generate:
-  files:
-    - ./*/*.ts
-  exclude:
-    - './**/*.test.ts'
-    - './**/*.spec.ts'
-    - './**/*.e2e.ts'
-  output: custom-elements.json
diff --git a/core/pfe-core/controllers/timestamp-controller.ts b/core/pfe-core/controllers/timestamp-controller.ts
index e6deb68b49..53d4be5c81 100644
--- a/core/pfe-core/controllers/timestamp-controller.ts
+++ b/core/pfe-core/controllers/timestamp-controller.ts
@@ -2,49 +2,49 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
 export type DateTimeFormat = 'full' | 'long' | 'medium' | 'short';
 
+export type HourCycle = 'h11' | 'h12' | 'h23' | 'h24';
+
 export interface TimestampOptions {
   dateFormat?: DateTimeFormat;
   timeFormat?: DateTimeFormat;
   customFormat?: Intl.DateTimeFormatOptions;
-  displaySuffix: string;
-  locale: Intl.LocalesArgument;
-  relative: boolean;
-  utc: boolean;
-  hour12: boolean;
+  displaySuffix?: string;
+  locale?: Intl.LocalesArgument;
+  relative?: boolean;
+  timeZone?: string;
+  hourCycle?: HourCycle;
 }
 
-const defaults = {
-  dateFormat: undefined,
-  timeFormat: undefined,
-  customFormat: undefined,
-  displaySuffix: '',
-  locale: undefined,
-  relative: false,
-  utc: false,
-  hour12: false,
-} as const;
+const optionKeys: Record<keyof TimestampOptions, true> = {
+  dateFormat: true,
+  timeFormat: true,
+  customFormat: true,
+  displaySuffix: true,
+  locale: true,
+  relative: true,
+  timeZone: true,
+  hourCycle: true,
+};
 
 export class TimestampController implements ReactiveController {
   static #isTimestampOptionKey(prop: PropertyKey): prop is keyof TimestampOptions {
-    return prop in defaults;
+    return prop in optionKeys;
   }
 
+  // When Temporal reaches baseline, replace with Temporal.Instant;
+  // timeZone and hourCycle options already align with Temporal's API
   #date = new Date();
 
-  #options: TimestampOptions = {} as TimestampOptions;
+  #options: Partial<TimestampOptions> = {};
 
   #host: ReactiveControllerHost;
 
-  get localeString(): string {
-    return this.#date.toLocaleString(this.#options.locale);
-  }
-
   get date(): Date {
     return this.#date;
   }
 
-  set date(string) {
-    this.#date = new Date(string);
+  set date(value: string | Date) {
+    this.#date = new Date(value);
   }
 
   get isoString(): string {
@@ -54,38 +54,29 @@ export class TimestampController implements ReactiveController {
   get time(): string {
     if (this.#options.relative) {
       return this.#getTimeRelative();
-    } else {
-      let { displaySuffix } = this.#options;
-      const { locale } = this.#options;
-      if (this.#options.utc) {
-        displaySuffix ||= 'UTC';
-      }
-      const localeString = this.#date.toLocaleString(locale, this.#options.customFormat ?? {
-        hour12: this.#options.hour12,
-        timeStyle: this.#options.timeFormat,
-        dateStyle: this.#options.dateFormat,
-        ...this.#options.utc && { timeZone: 'UTC' },
-      });
-
-      return `${localeString} ${displaySuffix ?? ''}`.trim();
     }
+    const { displaySuffix, locale, timeZone, hourCycle } = this.#options;
+    const localeString = this.#date.toLocaleString(locale, this.#options.customFormat ?? {
+      hourCycle,
+      timeStyle: this.#options.timeFormat,
+      dateStyle: this.#options.dateFormat,
+      timeZone,
+    });
+    return `${localeString}${displaySuffix ? ` ${displaySuffix}` : ''}`;
   }
 
   constructor(host: ReactiveControllerHost, options?: Partial<TimestampOptions>) {
     this.#host = host;
     host.addController(this);
-    for (const [name, value] of Object.entries(this.#options)) {
-      // @ts-expect-error: seems typescript compiler isn't up to the task here
-      this.#options[name] = options?.[name] ?? value;
+    if (options) {
+      Object.assign(this.#options, options);
     }
   }
 
   hostConnected?(): void;
 
-  /**
-   * Based off of Github Relative Time
-   * https://github.com/github/time-elements/blob/master/src/relative-time.js
-   */
+  // When Temporal reaches baseline, replace Intl.RelativeTimeFormat usage
+  // with Temporal.Duration and Temporal.Now.instant() for precise unit selection
   #getTimeRelative() {
     const date = this.#date;
     const { locale } = this.#options;
@@ -129,7 +120,7 @@ export class TimestampController implements ReactiveController {
 
   set(prop: PropertyKey, value: unknown): void {
     if (TimestampController.#isTimestampOptionKey(prop)) {
-      // @ts-expect-error: seems typescript compiler isn't up to the task here
+      // @ts-expect-error: dynamic property assignment from element willUpdate
       this.#options[prop] = value;
       this.#host.requestUpdate();
     }
diff --git a/docs/demo/web-dev-server.demo.config.js b/docs/demo/web-dev-server.demo.config.js
deleted file mode 100644
index 1db44583d0..0000000000
--- a/docs/demo/web-dev-server.demo.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { importMapsPlugin } from '@web/dev-server-import-maps';
-
-export default {
-  nodeResolve: false,
-  port: 8080,
-  rootDir: '_site',
-  plugins: [
-    importMapsPlugin(),
-  ],
-};
diff --git a/docs/framework-integration/react.md b/docs/framework-integration/react.md
index c6de196478..20f8185666 100644
--- a/docs/framework-integration/react.md
+++ b/docs/framework-integration/react.md
@@ -130,7 +130,7 @@ tags:
 
   import { Button } from "@patternfly/elements/react/pf-v5-button/pf-v5-button.js";
   import { Card } from "@patternfly/elements/react/pf-v5-card/pf-v5-card.js";
-  import { Switch } from "@patternfly/elements/react/pf-v5-switch/pf-v5-switch.js";
+  import { Switch } from "@patternfly/elements/react/pf-v6-switch/pf-v6-switch.js";
   import { Popover } from "@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js";
   import { Tooltip } from "@patternfly/elements/react/pf-v5-tooltip/pf-v5-tooltip.js";
 
@@ -160,7 +160,7 @@ tags:
 
   ### Switch
 
-  Now we have a card and a button component, let's add [`pf-v5-switch`][pf-v5-switch] 
+  Now we have a card and a button component, let's add [`pf-v6-switch`][pf-v6-switch] 
   web component in our app. We will enable/disable the decrement button by 
   clicking on the Switch button.
 
@@ -355,7 +355,7 @@ tags:
 [vite]: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
 [pf-v5-button]: https://patternflyelements.org/components/button/
 [pf-v5-card]: https://patternflyelements.org/components/card/
-[pf-v5-switch]: https://patternflyelements.org/components/switch/
+[pf-v6-switch]: https://patternflyelements.org/components/switch/
 [pf-v5-tooltip]: https://patternflyelements.org/components/tooltip/
 [pf-v5-popover]: https://patternflyelements.org/components/popover/
 [inng]: https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363
diff --git a/docs/main.css b/docs/main.css
index 06bda39b54..8e566b44d6 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -291,28 +291,14 @@ header.band h1 {
   color: var(--pf-theme--color--white, #fff);
 }
 
-.example-preview.pf-background-image pf-v5-background-image {
+.example-preview.pf-v6-background-image pf-v6-background-image {
   position: absolute;
   z-index: -1;
-  top: 0;
-  left: 0;
-}
-
-.example-preview.pf-background-image pf-v5-background-image::part(container) {
-  position: relative;
-}
-
-.example-preview.pf-background-image pf-v5-background-image,
-.example-preview.pf-background-image pf-v5-background-image::part(container) {
+  inset: 0;
   height: 100%;
   width: 100%;
 }
 
-.example-preview.pf-background-image pf-v5-background-image::part(container)::after {
-  position: absolute;
-  background-size: cover;
-}
-
 section.api.band.api-properties dl {
   padding: var(--pf-global--spacer--md, 1rem);
   background-color: var(--pf-global--BackgroundColor--100, #fff);
diff --git a/docs/main.mjs b/docs/main.mjs
index 2664df6bb8..d56d42bf2d 100644
--- a/docs/main.mjs
+++ b/docs/main.mjs
@@ -2,11 +2,7 @@ import '@rhds/elements/rh-footer/rh-footer-universal.js';
 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-avatar/pf-v5-avatar.js';
 import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
-import '@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js';
-import '@patternfly/elements/pf-v5-badge/pf-v5-badge.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';
@@ -16,25 +12,30 @@ import '@patternfly/elements/pf-v5-dropdown/pf-v5-dropdown.js';
 import '@patternfly/elements/pf-v5-helper-text/pf-v5-helper-text.js';
 import '@patternfly/elements/pf-v5-hint/pf-v5-hint.js';
 import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
-import '@patternfly/elements/pf-v5-label/pf-v5-label.js';
 import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js';
+import '@patternfly/elements/pf-v5-label/pf-v5-label.js';
 import '@patternfly/elements/pf-v5-modal/pf-v5-modal.js';
 import '@patternfly/elements/pf-v5-panel/pf-v5-panel.js';
 import '@patternfly/elements/pf-v5-popover/pf-v5-popover.js';
-import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
 import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
+import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
 import '@patternfly/elements/pf-v5-search-input/pf-v5-search-input.js';
 import '@patternfly/elements/pf-v5-select/pf-v5-select.js';
-import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
-import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
 import '@patternfly/elements/pf-v5-table/pf-v5-table.js';
 import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 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-timestamp/pf-v5-timestamp.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';
+
 // if `/v2/` path load icons from static directory
 if (document.location.href.includes('/v2/')) {
   PfV5Icon.getIconUrl = (set, icon) => {
diff --git a/elements/.cem.yaml b/elements/.cem.yaml
new file mode 100644
index 0000000000..1ad8668614
--- /dev/null
+++ b/elements/.cem.yaml
@@ -0,0 +1,3 @@
+generate:
+  files:
+    - ./*/*.ts
diff --git a/elements/package.json b/elements/package.json
index fe8dda2080..5319b980b7 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -5,70 +5,11 @@
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",
-  "module": "./pfe.js",
-  "types": "./pfe.d.ts",
   "exports": {
     "./form-control.css": "./form-control.css",
     "./form-control.css.js": "./form-control.css.js",
-    "./pf-v5-accordion/pf-v5-accordion-header.js": "./pf-v5-accordion/pf-v5-accordion-header.js",
-    "./pf-v5-accordion/pf-v5-accordion-panel.js": "./pf-v5-accordion/pf-v5-accordion-panel.js",
-    "./pf-v5-accordion/pf-v5-accordion.js": "./pf-v5-accordion/pf-v5-accordion.js",
-    "./pf-v5-alert/pf-v5-alert.js": "./pf-v5-alert/pf-v5-alert.js",
-    "./pf-v5-avatar/pf-v5-avatar.js": "./pf-v5-avatar/pf-v5-avatar.js",
-    "./pf-v5-back-to-top/pf-v5-back-to-top.js": "./pf-v5-back-to-top/pf-v5-back-to-top.js",
-    "./pf-v5-background-image/pf-v5-background-image.js": "./pf-v5-background-image/pf-v5-background-image.js",
-    "./pf-v5-badge/pf-v5-badge.js": "./pf-v5-badge/pf-v5-badge.js",
-    "./pf-v5-banner/pf-v5-banner.js": "./pf-v5-banner/pf-v5-banner.js",
-    "./pf-v5-button/pf-v5-button.js": "./pf-v5-button/pf-v5-button.js",
-    "./pf-v5-card/pf-v5-card.js": "./pf-v5-card/pf-v5-card.js",
-    "./pf-v5-chip/pf-v5-chip.js": "./pf-v5-chip/pf-v5-chip.js",
-    "./pf-v5-chip/pf-v5-chip-group.js": "./pf-v5-chip/pf-v5-chip-group.js",
-    "./pf-v5-clipboard-copy/pf-v5-clipboard-copy.js": "./pf-v5-clipboard-copy/pf-v5-clipboard-copy.js",
-    "./pf-v5-code-block/pf-v5-code-block.js": "./pf-v5-code-block/pf-v5-code-block.js",
-    "./pf-v5-dropdown/context.js": "./pf-v5-dropdown/context.js",
-    "./pf-v5-dropdown/pf-v5-dropdown-group.js": "./pf-v5-dropdown/pf-v5-dropdown-group.js",
-    "./pf-v5-dropdown/pf-v5-dropdown-item.js": "./pf-v5-dropdown/pf-v5-dropdown-item.js",
-    "./pf-v5-dropdown/pf-v5-dropdown-menu.js": "./pf-v5-dropdown/pf-v5-dropdown-menu.js",
-    "./pf-v5-dropdown/pf-v5-dropdown.js": "./pf-v5-dropdown/pf-v5-dropdown.js",
-    "./pf-v5-helper-text/pf-v5-helper-text.js": "./pf-v5-helper-text/pf-v5-helper-text.js",
-    "./pf-v5-hint/pf-v5-hint.js": "./pf-v5-hint/pf-v5-hint.js",
-    "./pf-v5-icon/pf-v5-icon.js": "./pf-v5-icon/pf-v5-icon.js",
-    "./pf-v5-jump-links/pf-v5-jump-links-item.js": "./pf-v5-jump-links/pf-v5-jump-links-item.js",
-    "./pf-v5-jump-links/pf-v5-jump-links-list.js": "./pf-v5-jump-links/pf-v5-jump-links-list.js",
-    "./pf-v5-jump-links/pf-v5-jump-links.js": "./pf-v5-jump-links/pf-v5-jump-links.js",
-    "./pf-v5-label-group/pf-v5-label-group.js": "./pf-v5-label-group/pf-v5-label-group.js",
-    "./pf-v5-label/pf-v5-label.js": "./pf-v5-label/pf-v5-label.js",
-    "./pf-v5-select/pf-v5-select.js": "./pf-v5-select/pf-v5-select.js",
-    "./pf-v5-select/pf-v5-listbox.js": "./pf-v5-select/pf-v5-listbox.js",
-    "./pf-v5-select/pf-v5-option-group.js": "./pf-v5-select/pf-v5-option-group.js",
-    "./pf-v5-select/pf-v5-option.js": "./pf-v5-select/pf-v5-option.js",
-    "./pf-v5-modal/pf-v5-modal.js": "./pf-v5-modal/pf-v5-modal.js",
-    "./pf-v5-panel/pf-v5-panel.js": "./pf-v5-panel/pf-v5-panel.js",
-    "./pf-v5-progress-stepper/pf-v5-progress-step.js": "./pf-v5-progress-stepper/pf-v5-progress-step.js",
-    "./pf-v5-progress-stepper/pf-v5-progress-stepper.js": "./pf-v5-progress-stepper/pf-v5-progress-stepper.js",
-    "./pf-v5-progress/pf-v5-progress.js": "./pf-v5-progress/pf-v5-progress.js",
-    "./pf-v5-search-input/pf-v5-search-input.js": "./pf-v5-search-input/pf-v5-search-input.js",
-    "./pf-v5-spinner/pf-v5-spinner.js": "./pf-v5-spinner/pf-v5-spinner.js",
-    "./pf-v5-switch/pf-v5-switch.js": "./pf-v5-switch/pf-v5-switch.js",
-    "./pf-v5-table/context.js": "./pf-v5-table/context.js",
-    "./pf-v5-table/pf-v5-caption.js": "./pf-v5-table/pf-v5-caption.js",
-    "./pf-v5-table/pf-v5-table.js": "./pf-v5-table/pf-v5-table.js",
-    "./pf-v5-table/pf-v5-tbody.js": "./pf-v5-table/pf-v5-tbody.js",
-    "./pf-v5-table/pf-v5-td.js": "./pf-v5-table/pf-v5-td.js",
-    "./pf-v5-table/pf-v5-th.js": "./pf-v5-table/pf-v5-th.js",
-    "./pf-v5-table/pf-v5-thead.js": "./pf-v5-table/pf-v5-thead.js",
-    "./pf-v5-table/pf-v5-tr.js": "./pf-v5-table/pf-v5-tr.js",
-    "./pf-v5-tabs/context.js": "./pf-v5-tabs/context.js",
-    "./pf-v5-tabs/pf-v5-tab-panel.js": "./pf-v5-tabs/pf-v5-tab-panel.js",
-    "./pf-v5-tabs/pf-v5-tab.js": "./pf-v5-tabs/pf-v5-tab.js",
-    "./pf-v5-tabs/pf-v5-tabs.js": "./pf-v5-tabs/pf-v5-tabs.js",
-    "./pf-v5-text-area/pf-v5-text-area.js": "./pf-v5-text-area/pf-v5-text-area.js",
-    "./pf-v5-text-input/pf-v5-text-input.js": "./pf-v5-text-input/pf-v5-text-input.js",
-    "./pf-v5-tile/pf-v5-tile.js": "./pf-v5-tile/pf-v5-tile.js",
-    "./pf-v5-timestamp/pf-v5-timestamp.js": "./pf-v5-timestamp/pf-v5-timestamp.js",
-    "./pf-v5-tooltip/pf-v5-tooltip.js": "./pf-v5-tooltip/pf-v5-tooltip.js",
-    "./pf-v5-popover/pf-v5-popover.js": "./pf-v5-popover/pf-v5-popover.js",
-    "./react/*": "./react/*"
+    "./react/*": "./react/*",
+    "./*": "./*"
   },
   "publishConfig": {
     "access": "public",
diff --git a/elements/pf-v5-accordion/demo/bordered.html b/elements/pf-v5-accordion/demo/bordered.html
index 4b143f510c..47048286ea 100644
--- a/elements/pf-v5-accordion/demo/bordered.html
+++ b/elements/pf-v5-accordion/demo/bordered.html
@@ -1,7 +1,7 @@
 <article>
   <header>
     <h2>Bordered</h2>
-    <pf-v5-switch id="toggle-size" name="toggle-size"></pf-v5-switch>
+    <pf-v6-switch id="toggle-size" name="toggle-size"></pf-v6-switch>
     <label for="toggle-size" data-state="on">Size: Large</label>
     <label for="toggle-size" data-state="off">Size: Normal</label>
   </header>
@@ -57,7 +57,7 @@ <h3>Item five</h3>
 <script type="module">
   import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
   const bordered = document.getElementById('bordered-example');
   const toggle = document.getElementById('toggle-size');
diff --git a/elements/pf-v5-accordion/test/pf-accordion.spec.ts b/elements/pf-v5-accordion/test/pf-accordion.spec.ts
index a7390b1be9..1085d8a264 100644
--- a/elements/pf-v5-accordion/test/pf-accordion.spec.ts
+++ b/elements/pf-v5-accordion/test/pf-accordion.spec.ts
@@ -5,7 +5,7 @@ import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-sna
 
 // Import the element we're testing.
 import { PfV5Accordion, PfV5AccordionPanel, PfV5AccordionHeader } from '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
-import { PfV5Switch } from '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+import { PfV6Switch } from '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
@@ -1349,7 +1349,7 @@ describe('<pf-v5-accordion>', function() {
     let element: PfV5Accordion;
     let panels: NodeListOf<PfV5AccordionPanel>;
     let checkbox: HTMLInputElement;
-    let pfswitch: PfV5Switch;
+    let pfswitch: PfV6Switch;
     let accordionPanelOne: PfV5AccordionPanel;
 
     beforeEach(async function() {
@@ -1357,14 +1357,14 @@ describe('<pf-v5-accordion>', function() {
           <pf-v5-accordion>
             <pf-v5-accordion-header expanded id="header-1-1" data-index="0"></pf-v5-accordion-header>
             <pf-v5-accordion-panel id="panel-1-1" data-index="0">
-              <pf-v5-switch></pf-v5-switch>
+              <pf-v6-switch></pf-v6-switch>
               <input type="checkbox">
             </pf-v5-accordion-panel>
           </pf-v5-accordion>
         `);
       panels = document.querySelectorAll('pf-v5-accordion-panel');
       checkbox = element.querySelector('input')!;
-      pfswitch = element.querySelector('pf-v5-switch')!;
+      pfswitch = element.querySelector('pf-v6-switch')!;
       expect(checkbox).to.be.ok;
       expect(pfswitch).to.be.ok;
       [accordionPanelOne] = panels;
diff --git a/elements/pf-v5-avatar/README.md b/elements/pf-v5-avatar/README.md
deleted file mode 100644
index 0ec4063598..0000000000
--- a/elements/pf-v5-avatar/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# PatternFly Elements Avatar
-
-`<pf-v5-avatar>` is an element for displaying a user's avatar image. If the user in 
-question has provided a custom avatar, provide it and it will be displayed.
-
-Read more about Avatar in the [PatternFly Elements Avatar documentation](https://patternflyelements.org/components/avatar)
-
-##  Installation
-
-Load `<pf-v5-avatar>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
-```
-## Usage
-
-```html
-<pf-v5-avatar alt="Michael Clayton" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-v5-avatar>
-```
diff --git a/elements/pf-v5-avatar/demo/bordered.html b/elements/pf-v5-avatar/demo/bordered.html
deleted file mode 100644
index 072dfd254b..0000000000
--- a/elements/pf-v5-avatar/demo/bordered.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<dl>
-  <div>
-    <dt>Small</dt>
-    <dd>
-      <pf-v5-avatar border size="sm" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Medium</dt>
-    <dd>
-      <pf-v5-avatar border size="md" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Large</dt>
-    <dd>
-      <pf-v5-avatar border size="lg" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Extra Large</dt>
-    <dd>
-      <pf-v5-avatar border size="xl" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-</dl>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
-</script>
-
-<style>
-dl {
-  padding: 64px 48px;
-  display: flex;
-  gap: 1em;
-  & > div {
-    display: flex;
-    gap: 1em;
-    flex-flow: column;
-  }
-  & dd {
-    margin: 0;
-  }
-}
-</style>
-
diff --git a/elements/pf-v5-avatar/demo/dark-border.html b/elements/pf-v5-avatar/demo/dark-border.html
deleted file mode 100644
index 50f110b1e1..0000000000
--- a/elements/pf-v5-avatar/demo/dark-border.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<dl>
-  <div>
-    <dt>Small</dt>
-    <dd>
-      <pf-v5-avatar border="dark" size="sm" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Medium</dt>
-    <dd>
-      <pf-v5-avatar border="dark" size="md" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Large</dt>
-    <dd>
-      <pf-v5-avatar border="dark" size="lg" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Extra Large</dt>
-    <dd>
-      <pf-v5-avatar border="dark" size="xl" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-</dl>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
-</script>
-
-<style>
-dl {
-  padding: 64px 48px;
-  display: flex;
-  gap: 1em;
-  & > div {
-    display: flex;
-    gap: 1em;
-    flex-flow: column;
-  }
-  & dd {
-    margin: 0;
-  }
-}
-</style>
diff --git a/elements/pf-v5-avatar/demo/dark-variant.html b/elements/pf-v5-avatar/demo/dark-variant.html
deleted file mode 100644
index 36dbb71eb1..0000000000
--- a/elements/pf-v5-avatar/demo/dark-variant.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<dl>
-  <div>
-    <dt>Small</dt>
-    <dd>
-      <pf-v5-avatar
-        dark
-        border="dark"
-        size="sm"
-        alt="Edwardo Lindsey"
-      ></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Medium</dt>
-    <dd>
-      <pf-v5-avatar
-        dark
-        border="dark"
-        size="md"
-        alt="Edwardo Lindsey"
-      ></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Large</dt>
-    <dd>
-      <pf-v5-avatar
-        dark
-        border="dark"
-        size="lg"
-        alt="Edwardo Lindsey"
-      ></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Extra Large</dt>
-    <dd>
-      <pf-v5-avatar
-        dark
-        border="dark"
-        size="xl"
-        alt="Edwardo Lindsey"
-      ></pf-v5-avatar>
-    </dd>
-  </div>
-</dl>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
-</script>
-
-<style>
-dl {
-  padding: 64px 48px;
-  display: flex;
-  gap: 1em;
-  & > div {
-    display: flex;
-    gap: 1em;
-    flex-flow: column;
-  }
-  & dd {
-    margin: 0;
-  }
-}
-</style>
diff --git a/elements/pf-v5-avatar/demo/index.html b/elements/pf-v5-avatar/demo/index.html
deleted file mode 100644
index b0cc5bc048..0000000000
--- a/elements/pf-v5-avatar/demo/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<section>
-  <pf-v5-avatar alt="Edwardo Lindsey"></pf-v5-avatar>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
-</script>
-
-<style>
-  section {
-    padding: 64px 48px;
-  }
-</style>
diff --git a/elements/pf-v5-avatar/demo/sizes.html b/elements/pf-v5-avatar/demo/sizes.html
deleted file mode 100644
index 1d93dbab01..0000000000
--- a/elements/pf-v5-avatar/demo/sizes.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<dl>
-  <div>
-    <dt>Small</dt>
-    <dd>
-      <pf-v5-avatar size="sm" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Medium</dt>
-    <dd>
-      <pf-v5-avatar size="md" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Large</dt>
-    <dd>
-      <pf-v5-avatar size="lg" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-
-  <div>
-    <dt>Extra Large</dt>
-    <dd>
-      <pf-v5-avatar size="xl" alt="Edwardo Lindsey"></pf-v5-avatar>
-    </dd>
-  </div>
-</dl>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
-</script>
-
-<style>
-dl {
-  padding: 64px 48px;
-  display: flex;
-  gap: 1em;
-  & > div {
-    display: flex;
-    gap: 1em;
-    flex-flow: column;
-  }
-  & dd {
-    margin: 0;
-  }
-}
-</style>
diff --git a/elements/pf-v5-avatar/docs/CHANGELOG.old.md b/elements/pf-v5-avatar/docs/CHANGELOG.old.md
deleted file mode 100644
index 4a4f39449e..0000000000
--- a/elements/pf-v5-avatar/docs/CHANGELOG.old.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# @patternfly/pfe-avatar
-
-## 2.0.0-next.3
-
-### Major Changes
-
-- 21f7fa8b: Redesigned `<pfe-avatar>` to bring it in line with [PatternFly v4 Avatar](https://patternfly.org/v4/components/avatar)
-
-  The new `<pfe-avatar>` has three attributes: `src`, `alt` (like `<img>`) and
-  `border="dark|light"` for adding a border on dark or light backgrounds.
-
-## 2.0.0-next.2
-
-### Patch Changes
-
-- bfad8b4b: Updates dependencies
-- Updated dependencies [bfad8b4b]
-  - @patternfly/pfe-core@2.0.0-next.8
-
-## 2.0.0-next.1
-
-### Patch Changes
-
-- 447b2d75: Remove `esbuild` export condition, as this anyways was a runtime error
-- Updated dependencies [447b2d75]
-  - @patternfly/pfe-core@2.0.0-next.3
-
-## 2.0.0-next.0
-
-### Major Changes
-
-- 216beeb8: ## 🔥 Migrate to Lit
-
-  This release migrates `<pfe-avatar>` to LitElement.
-
-  ### NEW: CSS Shadow Parts
-
-  - Adds `canvas` and `img` CSS parts to `<pfe-avatar>`
-
-  ### Breaking Changes
-
-  - Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle).
-    If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`;
-  - Deprecates `pfe-avatar:connected` event. Use `await pfeAvatar.updateComplete` instead
-  - Deprecates `pfe-avatar:options-shown`, `pfe-avatar:option-cleared`, `pfe-avatar:search-event`, and `pfe-avatar:option-selected` events.
-
-  See [docs](https://patternflyelements.org/components/avatar/) for more info
-
-### Patch Changes
-
-- Updated dependencies [e8788c72]
-  - @patternfly/pfe-core@2.0.0-next.0
diff --git a/elements/pf-v5-avatar/docs/pf-v5-avatar.md b/elements/pf-v5-avatar/docs/pf-v5-avatar.md
deleted file mode 100644
index fae6c555bf..0000000000
--- a/elements/pf-v5-avatar/docs/pf-v5-avatar.md
+++ /dev/null
@@ -1,28 +0,0 @@
-{% renderInstallation %} {% endrenderInstallation %}
-
-{% renderOverview %}
-  <pf-v5-avatar alt="Libbie Koscinski"></pf-v5-avatar>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  {% htmlexample style="display: flex; gap: 1em;" %}
-  <pf-v5-avatar alt="Eleanore Stillwagon"></pf-v5-avatar>
-  <pf-v5-avatar alt="Libbie Koscinski" size="md"></pf-v5-avatar>
-  <pf-v5-avatar alt="Blanca Rohloff"></pf-v5-avatar>
-  <pf-v5-avatar alt="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-v5-avatar>
-  {% endhtmlexample %}
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderProperties %}{% endrenderProperties %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-avatar/docs/screenshot.png b/elements/pf-v5-avatar/docs/screenshot.png
deleted file mode 100644
index eaea2ccddc..0000000000
Binary files a/elements/pf-v5-avatar/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-avatar/pf-v5-avatar.css b/elements/pf-v5-avatar/pf-v5-avatar.css
deleted file mode 100644
index 5e36c8d8b2..0000000000
--- a/elements/pf-v5-avatar/pf-v5-avatar.css
+++ /dev/null
@@ -1,80 +0,0 @@
-:host {
-  display: inline-block;
-	/** Border color for avatar */
-	--pf-v5-c-avatar--BorderColor: transparent;
-	/** Border width for avatar */
-	--pf-v5-c-avatar--BorderWidth: 0;
-	/** Border radius for avatar */
-	--pf-v5-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
-	/** Width for avatar */
-	--pf-v5-c-avatar--Width: 2.25rem;
-	/** Height for avatar */
-	--pf-v5-c-avatar--Height: 2.25rem;
-	/** Width for small avatar */
-	--pf-v5-c-avatar--m-sm--Width: 1.5rem;
-	/** Height for small avatar */
-	--pf-v5-c-avatar--m-sm--Height: 1.5rem;
-	/** Width for medium avatar */
-	--pf-v5-c-avatar--m-md--Width: 2.25rem;
-	/** Height for medium avatar */
-	--pf-v5-c-avatar--m-md--Height: 2.25rem;
-	/** Width for large avatar */
-	--pf-v5-c-avatar--m-lg--Width: 4.5rem;
-	/** Height for large avatar */
-	--pf-v5-c-avatar--m-lg--Height: 4.5rem;
-	/** Width for extra large avatar */
-	--pf-v5-c-avatar--m-xl--Width: 8rem;
-	/** Height for extra large avatar */
-	--pf-v5-c-avatar--m-xl--Height: 8rem;
-	--pf-v5-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
-	--pf-v5-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
-	/** Border color for dark avatar */
-	--pf-v5-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
-	--pf-v5-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
-	width: var(--pf-v5-c-avatar--Width);
-	height: var(--pf-v5-c-avatar--Height);
-	border-radius: var(--pf-v5-c-avatar--BorderRadius);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-
-svg,
-img {
-  display: inline;
-  object-fit: cover;
-  width: var(--pf-v5-c-avatar--Width);
-  height: var(--pf-v5-c-avatar--Height);
-  border-radius: var(--pf-v5-c-avatar--BorderRadius);
-  border: var(--pf-v5-c-avatar--BorderWidth) solid var(--pf-v5-c-avatar--BorderColor);
-}
-
-:host([border]) {
-  --pf-v5-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
-}
-
-:host([border="dark"]) {
-  --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-dark--BorderColor);
-}
-
-:host([size="sm"]) {
-  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-sm--Width);
-  --pf-v5-c-avatar--Height: var(--pf-v5-c-avatar--m-sm--Height);
-}
-
-:host([size="md"]) {
-  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-md--Width);
-  --pf-v5-c-avatar--Height: var(--pf-v5-c-avatar--m-md--Height);
-}
-
-:host([size="lg"]) {
-  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-lg--Width);
-  --pf-v5-c-avatar--Height: var(--pf-v5-c-avatar--m-lg--Height);
-}
-
-:host([size="xl"]) {
-  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-xl--Width);
-  --pf-v5-c-avatar--Height: var(--pf-v5-c-avatar--m-xl--Height);
-}
diff --git a/elements/pf-v5-avatar/pf-v5-avatar.ts b/elements/pf-v5-avatar/pf-v5-avatar.ts
deleted file mode 100644
index 27c73b2073..0000000000
--- a/elements/pf-v5-avatar/pf-v5-avatar.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { LitElement, html, type TemplateResult } from 'lit';
-import { property } from 'lit/decorators/property.js';
-import { customElement } from 'lit/decorators/custom-element.js';
-
-import style from './pf-v5-avatar.css';
-
-export class PfV5AvatarLoadEvent extends Event {
-  constructor(public originalEvent: Event) {
-    super('load', { bubbles: true });
-  }
-}
-
-/**
- * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
- * @summary For displaying a user's avatar image
- * @alias Avatar
- * @fires {PfV5AvatarLoadEvent} load - when the avatar loads
- */
-@customElement('pf-v5-avatar')
-export class PfV5Avatar extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [style];
-
-  /** The URL to the user's custom avatar image. */
-  @property() src?: string;
-
-  /** The alt text for the avatar image. */
-  @property({ reflect: true }) alt?: string = 'Avatar image';
-
-  /** Size of the Avatar */
-  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';
-
-  /** Whether to display a border around the avatar */
-  @property({ reflect: true }) border?: 'light' | 'dark';
-
-  /** Whether or not the Avatar image is dark */
-  @property({ type: Boolean, reflect: true }) dark = false;
-
-  render(): TemplateResult<1> {
-    return this.src != null ? html`
-      <img id="img"
-           alt="${this.alt ?? ''}"
-           src=${this.src}
-           @load="${this.#onLoad}">
-    ` : this.dark ? html`
-      <svg xmlns="http://www.w3.org/2000/svg"
-           style="enable-background:new 0 0 36 36"
-           viewBox="0 0 36 36">
-        <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d="M0 0h36v36H0z" style="fill:#212427"/>
-        <path d="M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st1"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z" class="st2"/>
-      </svg>
-    ` : html`
-      <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36">
-        <style>.st2{fill:#b8bbbe}</style><path d="M0 0h36v36H0z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0"/>
-        <path d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/>
-        <path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" style="fill:#d2d2d2"/><path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
-      </svg>
-      `;
-  }
-
-  #onLoad(event: Event) {
-    this.dispatchEvent(new PfV5AvatarLoadEvent(event));
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-avatar': PfV5Avatar;
-  }
-}
diff --git a/elements/pf-v5-avatar/test/mwcz.jpg b/elements/pf-v5-avatar/test/mwcz.jpg
deleted file mode 100644
index afc839dd76..0000000000
Binary files a/elements/pf-v5-avatar/test/mwcz.jpg and /dev/null differ
diff --git a/elements/pf-v5-avatar/test/pf-avatar.spec.ts b/elements/pf-v5-avatar/test/pf-avatar.spec.ts
deleted file mode 100644
index 8fd79928fd..0000000000
--- a/elements/pf-v5-avatar/test/pf-avatar.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { html, expect, oneEvent, nextFrame } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfV5Avatar, PfV5AvatarLoadEvent } from '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
-
-describe('<pf-v5-avatar>', function() {
-  it('imperatively instantiates', function() {
-    expect(document.createElement('pf-v5-avatar')).to.be.an.instanceof(PfV5Avatar);
-  });
-
-  it('should upgrade', async function() {
-    const el = await createFixture(html`<pf-v5-avatar></pf-v5-avatar>`);
-    expect(el, 'pf-v5-badge should be an instance of PfV5Avatar')
-        .to.be.an.instanceOf(customElements.get('pf-v5-avatar'))
-        .and
-        .to.be.an.instanceOf(PfV5Avatar);
-  });
-
-  describe('without src attr', function() {
-    let element: PfV5Avatar;
-    beforeEach(async function() {
-      element = await createFixture(html`<pf-v5-avatar></pf-v5-avatar>`);
-      await nextFrame();
-    });
-    it('loads default avatar', function() {
-      const { offsetWidth } = element;
-      expect(offsetWidth).to.be.greaterThan(0);
-    });
-  });
-
-  describe('with a src attr', function() {
-    let element: PfV5Avatar;
-    let loaded: string | undefined;
-    const datauri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAB0UlEQVR4Xu3UAQ0AAAyDsM+/6QspcwAh2zXawGj64K8A8AgKoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7ADyAB6SPAIFm19U7AAAAAElFTkSuQmCC';
-    const onLoad = (e: PfV5AvatarLoadEvent) => {
-      const paths = e.originalEvent.composedPath() as HTMLImageElement[];
-      loaded = paths.find(x => x.localName === 'img')?.src;
-    };
-    beforeEach(async function() {
-      element = await createFixture(html`<pf-v5-avatar @load="${onLoad}"></pf-v5-avatar>`);
-      setTimeout(() => element.src = datauri);
-      await oneEvent(element, 'load');
-    });
-    it('loads the image', function() {
-      expect(loaded).to.equal(datauri);
-    });
-  });
-});
diff --git a/elements/pf-v5-back-to-top/README.md b/elements/pf-v5-back-to-top/README.md
deleted file mode 100644
index 7b95a9b756..0000000000
--- a/elements/pf-v5-back-to-top/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Back to top
-
-The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
-
-
-##  Installation
-Load `<pf-v5-back-to-top>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
-```
-
-## Usage
-
-```html
-<pf-v5-back-to-top href="#top">Back to Top</pf-v5-back-to-top>
-
-```
-
-[docs]: https://patternflyelements.org/components/back-to-top
diff --git a/elements/pf-v5-back-to-top/demo/always-visible.html b/elements/pf-v5-back-to-top/demo/always-visible.html
deleted file mode 100644
index 2064eb4126..0000000000
--- a/elements/pf-v5-back-to-top/demo/always-visible.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="outer-container padded" id="top">
-  <h2>Always visible</h2>
-  <a href="#focusable-element-top" id="top">Focusable element (top)</a>
-</div>
-
-<pf-v5-back-to-top always-visible href="#top">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';
-</script>
-
-<style>
-  :root {
-    --_scroll-distance: 400px;
-  }
-
-  main {
-    scroll-behavior: smooth;
-  }
-
-  .outer-container {
-    height: calc(100vh - var(--pf-v5-demo-header-height) + var(--_scroll-distance));
-  }
-
-  .padded {
-    padding: var(--pf-global--spacer--md, 1rem);
-  }
-</style>
diff --git a/elements/pf-v5-back-to-top/demo/button-no-text.html b/elements/pf-v5-back-to-top/demo/button-no-text.html
deleted file mode 100644
index af285d7147..0000000000
--- a/elements/pf-v5-back-to-top/demo/button-no-text.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<div class="outer-container" id="top">
-  <div class="scroll-indicator padded">
-    <h2>Button No Text</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"></pf-v5-back-to-top>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.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;
-  }
-
-  .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>
diff --git a/elements/pf-v5-back-to-top/demo/button.html b/elements/pf-v5-back-to-top/demo/button.html
index 452104c0a9..fce06065bb 100644
--- a/elements/pf-v5-back-to-top/demo/button.html
+++ b/elements/pf-v5-back-to-top/demo/button.html
@@ -1,7 +1,8 @@
-<pf-v5-banner variant="info" id="top">
-  <pf-v5-icon icon="info-circle" slot="icon"></pf-v5-icon>
+<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-v5-banner>
+</pf-v6-banner>
 <div class="outer-container">
   <div class="scroll-indicator padded">
     <h2>Button</h2>
@@ -15,7 +16,7 @@ <h2>Button</h2>
 
 <script type="module">
   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-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');
diff --git a/elements/pf-v5-back-to-top/demo/index.html b/elements/pf-v5-back-to-top/demo/index.html
deleted file mode 100644
index 8fe24f6e22..0000000000
--- a/elements/pf-v5-back-to-top/demo/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="outer-container" id="top">
-  <div class="scroll-indicator padded">
-    <h2>Default</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" href="#top">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';
-</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>
diff --git a/elements/pf-v5-back-to-top/demo/label.html b/elements/pf-v5-back-to-top/demo/label.html
deleted file mode 100644
index afbd54ca59..0000000000
--- a/elements/pf-v5-back-to-top/demo/label.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="outer-container" id="top">
-  <div class="scroll-indicator padded">
-    <h2>Default</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" href="#top" label="Top"></pf-v5-back-to-top>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
-</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>
diff --git a/elements/pf-v5-back-to-top/demo/no-text.html b/elements/pf-v5-back-to-top/demo/no-text.html
deleted file mode 100644
index ae337f891f..0000000000
--- a/elements/pf-v5-back-to-top/demo/no-text.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="outer-container" id="top">
-  <div class="scroll-indicator padded">
-    <h2>No Text</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" href="top"></pf-v5-back-to-top>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
-</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>
diff --git a/elements/pf-v5-back-to-top/demo/scroll-distance.html b/elements/pf-v5-back-to-top/demo/scroll-distance.html
deleted file mode 100644
index c3c0a8ef7a..0000000000
--- a/elements/pf-v5-back-to-top/demo/scroll-distance.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="outer-container scroll-distance" id="top">
-  <div class="scroll-indicator padded">
-    <h2>Default</h2>
-    <p><a href="#focusable-element-top" id="top">Focusable element (top)</a></p>
-    <pf-v5-icon icon="arrow-down"></pf-v5-icon> Scroll down to end of cyan box, 200px (default).
-  </div>
-</div>
-<a href="#focusable-element-bottom">Focusable element (bottom)</a>
-
-<pf-v5-back-to-top href="#top" scrollable-selector="main" scroll-distance="200">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';
-</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>
diff --git a/elements/pf-v5-back-to-top/docs/pf-v5-back-to-top.md b/elements/pf-v5-back-to-top/docs/pf-v5-back-to-top.md
deleted file mode 100644
index 23266eea16..0000000000
--- a/elements/pf-v5-back-to-top/docs/pf-v5-back-to-top.md
+++ /dev/null
@@ -1,110 +0,0 @@
-<style>
-  :not(.override) > .example-preview pf-v5-back-to-top {
-    position: sticky !important;
-    left: 100%;
-    bottom: 0;
-  }
-
-  :not(.override) > .example-preview pf-v5-back-to-top::part(trigger) {
-    display: inline-block !important;
-  }
-
-  .override > .example-preview :is(#scrollable-selector-example, #scroll-distance-example) {
-    position: relative;
-    height: 200px; 
-    overflow-y: scroll;
-  }
-
-  .override > .example-preview :is(#scrollable-selector-example, #scroll-distance-example) pf-v5-back-to-top {
-    position: sticky !important;
-    left: 100%;
-    bottom: 0;
-  }
-
-  .overflow {
-    height: 573px;
-    position: relative;
-  }
-
-  .scroll-indicator {
-    padding: var(--pf-global--spacer--md, 1rem);
-    background-color: var(--pf-global--palette--cyan-50, #f2f9f9) !important;
-  }
-
-  #scrollable-selector-example .scroll-indicator {
-    height: 400px;
-  }
-
-  #scroll-distance-example .scroll-indicator {
-    height: 100px;
-  }
-
-</style>
-
-{% renderOverview %}
-  Back to top button is designed to only be used once per page. 
-  <pf-v5-back-to-top href="#main">Back to top</pf-v5-back-to-top>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-
-  ### Default
-  {% htmlexample %}<pf-v5-back-to-top href="#main">Back to top</pf-v5-back-to-top>{% endhtmlexample %}
-
-  ### Label attribute
-  {% htmlexample %}<pf-v5-back-to-top href="#main" label="Return to top"></pf-v5-back-to-top>{% endhtmlexample %}
-
-  ### No text or label attribute
-  `[aria-label]` attribute defaults to text 'Back to top'
-  {% htmlexample %}
- 
-  <pf-v5-back-to-top href="#main"></pf-v5-back-to-top>
-  {% endhtmlexample %}
-
-  <div class="override">
-
-  ### Scrollable Selector
-  
-  See [scrollable-selector](#attributes) in Attributes section below for more information.
-
-  {% htmlexample %}
-    <div id="scrollable-selector-example">
-      <div class="overflow" tabindex="0">
-        <div class="scroll-indicator">
-          <pf-v5-icon icon="arrow-down"></pf-v5-icon> Scroll down to end of cyan box, 400px (default).
-        </div>
-      </div>
-      <pf-v5-back-to-top href="#main" scrollable-selector="#scrollable-selector-example">Back to top</pf-v5-back-to-top>
-    </div>
-  {% endhtmlexample %}
-
-  ### Scroll Distance
-
-  See [scroll-distance](#attributes) in Attributes section below for more information.
-
-  {% htmlexample %}
-    <div id="scroll-distance-example">
-      <div class="overflow" tabindex="0">
-        <div class="scroll-indicator">
-          <pf-v5-icon icon="arrow-down"></pf-v5-icon> Scroll down to end of cyan box, 100px.
-        </div>
-      </div>
-      <pf-v5-back-to-top href="#main" scroll-distance="100" scrollable-selector="#scroll-distance-example">Back to top</pf-v5-back-to-top>
-    </div>
-  {% endhtmlexample %}
-
-  </div>
-
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-back-to-top/pf-v5-back-to-top.css b/elements/pf-v5-back-to-top/pf-v5-back-to-top.css
deleted file mode 100644
index 9b4960d2f0..0000000000
--- a/elements/pf-v5-back-to-top/pf-v5-back-to-top.css
+++ /dev/null
@@ -1,77 +0,0 @@
-:host {
-  display: inline-block;
-  position: absolute;
-  /** Right position for back to top */
-  right: var(--pf-v5-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));
-  /** Bottom position for back to top */
-  bottom: var(--pf-v5-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));
-}
-
-[part="trigger"] {
-  /** Box shadow for back to top button */
-  box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));
-
-  /** Font size for back to top button */
-  --pf-v5-c-button--FontSize: var(--pf-v5-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
-  /** Border radius for back to top button */
-  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-back-to-top--c-button--BorderRadius,  var(--pf-global--BorderRadius--lg, 30em));
-  /** Top padding for back to top button */
-  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
-  /** Right padding for back to top button */
-  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
-  /** Bottom padding for back to top button */
-  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
-  /** Left padding for back to top button */
-  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
-}
-
-a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /** Primary color for back to top button */
-  color: var(--pf-v5-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));
-  /** Primary background color for back to top button */
-  background-color: var(--pf-v5-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));
-  text-decoration: none;
-  font-size: var(--pf-v5-c-button--FontSize);
-  padding: var(--pf-v5-c-button--PaddingTop) var(--pf-v5-c-button--PaddingRight) var(--pf-v5-c-button--PaddingBottom) var(--pf-v5-c-button--PaddingLeft);
-  border-radius: var(--pf-v5-c-button--BorderRadius);
-  /** End icon margin left for back to top button */
-  gap: var(--pf-v5-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
-}
-
-a:hover,
-a:focus {
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
-}
-
-[part="trigger"]:is(pf-v5-button):hover,
-[part="trigger"]:is(pf-v5-button):focus-within {
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
-}
-
-[part="trigger"][hidden] {
-  display: none;
-}
-
-pf-v5-icon {
-  /* override icon size as default sm variant is incorrect */
-  --pf-v5-icon--size: var(--pf-v5-c-button--FontSize);
-  vertical-align: -0.125rem;
-}
-
-span {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--pf-v5-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
-}
-
-@media (min-width: 768px) {
-  :host {
-    --pf-v5-c-back-to-top--Bottom: var(--pf-v5-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem));
-  }
-}
diff --git a/elements/pf-v5-back-to-top/pf-v5-back-to-top.ts b/elements/pf-v5-back-to-top/pf-v5-back-to-top.ts
deleted file mode 100644
index d4d272868a..0000000000
--- a/elements/pf-v5-back-to-top/pf-v5-back-to-top.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { LitElement, html, isServer, type PropertyValues, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { property } from 'lit/decorators/property.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-
-import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
-
-import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-
-import styles from './pf-v5-back-to-top.css';
-
-/**
- * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
- * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.
- * @alias Back to Top
- */
-@customElement('pf-v5-back-to-top')
-export class PfV5BackToTop extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  /** Shorthand for the `icon` slot, the value is icon name */
-  @property({ reflect: true }) icon?: string;
-
-  /** Icon set for the `icon` property */
-  @property({ attribute: 'icon-set' }) iconSet?: string;
-
-  /** Flag to always show back to top button, defaults to false. */
-  @property({ reflect: true, type: Boolean, attribute: 'always-visible' }) alwaysVisible = false;
-
-  /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events */
-  @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string;
-
-  /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */
-  @property({ type: Number, attribute: 'scroll-distance' }) scrollDistance = 400;
-
-  /** Accessible name for the back-to-top link, use when component does not have slotted text */
-  @property() label?: string;
-
-  /** Page fragment link to target element, must include hash ex: #top */
-  @property({ reflect: true }) href?: string;
-
-  #scrollSpy = false;
-
-  #visible = false;
-
-  #scrollElement?: Element | Window;
-
-  #hasSlottedText = false;
-
-  #logger = new Logger(this);
-
-  get #rootNode(): Document | ShadowRoot | null {
-    let root = null;
-    if (isServer) {
-      return null;
-    } else if ((root = this.getRootNode()) instanceof Document || root instanceof ShadowRoot) {
-      return root;
-    } else {
-      return document;
-    }
-  }
-
-  get #ariaLabel(): string | undefined {
-    if (this.#hasSlottedText) {
-      return undefined;
-    }
-    return this.label ?? 'Back to top';
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.#addScrollListener();
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.#removeScrollListener();
-  }
-
-  override willUpdate(changed: PropertyValues<this>): void {
-    if (changed.has('scrollableSelector')) {
-      this.#addScrollListener();
-    }
-    if (changed.has('alwaysVisible')) {
-      this.#toggleVisibility();
-    }
-  }
-
-  render(): TemplateResult<1> {
-    // ensure href has a hash
-    if (this.href && this.href.charAt(0) !== '#') {
-      this.href = `#${this.href}`;
-      this.#logger.warn(`missing hash in href fragment link`);
-    }
-
-    if (this.href) {
-      return html`
-        <!-- The \`<a>\` or \`<pf-v5-button>\` element -->
-        <a href="${this.href}"
-           ?hidden="${!this.#visible}"
-           part="trigger"
-           aria-label="${ifDefined(this.#ariaLabel)}">
-          <!-- Contains the prefix icon to display before the link or button. -->
-          <slot name="icon"></slot>
-          <!-- Text to display inside the link or button. -->
-          <slot @slotchange="${this.#onSlotchange}"></slot>
-          <pf-v5-icon icon="angle-up" set="fas"></pf-v5-icon>
-        </a>
-      `;
-    } else {
-      return html`
-        <!-- The \`<a>\` or \`<pf-v5-button>\` element -->
-        <pf-v5-button
-            icon="${ifDefined(this.icon)}"
-            icon-set="${ifDefined(this.iconSet)}"
-            ?hidden="${!this.#visible}"
-            tabindex="${this.#visible ? '0' : '-1'}"
-            part="trigger"
-            label="${ifDefined(this.#ariaLabel)}"
-          >
-          <!-- Contains the prefix icon to display before the link or button. -->
-          <slot name="icon" slot="icon"></slot>
-          <span>
-            <!-- Text to display inside the link or button. -->
-            <slot></slot>
-            <pf-v5-icon icon="angle-up" set="fas"></pf-v5-icon>
-          </span>
-        </pf-v5-button>
-      `;
-    }
-  }
-
-  #onSlotchange(event: Event) {
-    const slot = event.currentTarget as HTMLSlotElement;
-    const nodes = slot.assignedNodes();
-    this.#hasSlottedText = nodes.length > 0 ? true : false;
-    this.requestUpdate();
-  }
-
-  #removeScrollListener() {
-    this.#scrollElement?.removeEventListener('scroll', this.#toggleVisibility);
-  }
-
-  #addScrollListener() {
-    this.#removeScrollListener();
-
-    if (this.scrollableSelector?.trim() === '') {
-      this.#logger.error(`scrollable-selector attribute cannot be empty`);
-      return;
-    }
-
-    this.#scrollSpy = !!this.scrollableSelector;
-    if (isServer) {
-      return;
-    } else if (this.#scrollSpy && this.scrollableSelector) {
-      const scrollableElement = this.#rootNode?.querySelector?.(this.scrollableSelector);
-      if (!scrollableElement) {
-        this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);
-        return;
-      }
-      this.#scrollElement = scrollableElement;
-    } else {
-      this.#scrollElement = window;
-    }
-
-    this.#scrollElement.addEventListener('scroll', this.#toggleVisibility, { passive: true });
-    this.#toggleVisibility();
-  }
-
-  #toggleVisibility = () => {
-    if (this.alwaysVisible) {
-      this.#visible = true;
-      this.requestUpdate();
-      return;
-    }
-    const previousVisibility = this.#visible;
-    if (this.#scrollElement) {
-      const scrolled =
-          (this.#scrollElement instanceof Window) ?
-          this.#scrollElement.scrollY
-        : this.#scrollElement.scrollTop;
-      this.#visible = (scrolled > this.scrollDistance);
-      if (previousVisibility !== this.#visible) {
-        this.requestUpdate();
-      }
-    }
-  };
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-back-to-top': PfV5BackToTop;
-  }
-}
diff --git a/elements/pf-v5-background-image/README.md b/elements/pf-v5-background-image/README.md
deleted file mode 100644
index 084b8d4c93..0000000000
--- a/elements/pf-v5-background-image/README.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Background Image
-
-A **background image** allows you to place an image in the background of your page or area of a page.
-
-
-##  Installation
-Load `<pf-v5-background-image>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js"></script>
-
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js';
-```
-
-## Usage
-
-```html
-<pf-v5-background-image
-    src="image.jpg"
-    src-2x="image-576.jpg"
-    src-sm="image-768.jpg"
-    src-sm-2x="image-768@2x.jpg"
-    src-lg="image-1200.jpg"
-></pf-v5-background-image>
-```
-
-[docs]: https://patternflyelements.org/components/background-image
diff --git a/elements/pf-v5-background-image/demo/filter-override.html b/elements/pf-v5-background-image/demo/filter-override.html
deleted file mode 100644
index 2656d2dcef..0000000000
--- a/elements/pf-v5-background-image/demo/filter-override.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<pf-v5-background-image filter
-    src="pfbg.jpg"
-    src-2x="pfbg_576.jpg"
-    src-sm="pfbg_768.jpg"
-    src-sm-2x="pfbg_768@2x.jpg"
-    src-lg="pfbg_1200.jpg">
-  <svg slot="filter" xmlns="http://www.w3.org/2000/svg">
-    <filter id="image_overlay">
-      <feMorphology in="SourceGraphic" operator="dilate" radius="5"></feMorphology>
-    </filter>
-  </svg>
-</pf-v5-background-image>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js';
-</script>
-
-<style>
-  /* override demo chrome styles */
-  html, body {
-    background-color: transparent;
-  }
-</style>
diff --git a/elements/pf-v5-background-image/demo/index.html b/elements/pf-v5-background-image/demo/index.html
deleted file mode 100644
index a469b4d92a..0000000000
--- a/elements/pf-v5-background-image/demo/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<pf-v5-background-image filter
-    src="pfbg.jpg"
-    src-2x="pfbg_576.jpg"
-    src-sm="pfbg_768.jpg"
-    src-sm-2x="pfbg_768@2x.jpg"
-    src-lg="pfbg_1200.jpg"
-></pf-v5-background-image>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js';
-</script>
-
-<style>
-/* override demo chrome styles */
-html, body {
-  background-color: transparent;
-}
-</style>
diff --git a/elements/pf-v5-background-image/demo/pfbg.jpg b/elements/pf-v5-background-image/demo/pfbg.jpg
deleted file mode 100644
index 88ee1f4250..0000000000
Binary files a/elements/pf-v5-background-image/demo/pfbg.jpg and /dev/null differ
diff --git a/elements/pf-v5-background-image/demo/pfbg_1200.jpg b/elements/pf-v5-background-image/demo/pfbg_1200.jpg
deleted file mode 100644
index 0c0e826257..0000000000
Binary files a/elements/pf-v5-background-image/demo/pfbg_1200.jpg and /dev/null differ
diff --git a/elements/pf-v5-background-image/demo/pfbg_576.jpg b/elements/pf-v5-background-image/demo/pfbg_576.jpg
deleted file mode 100644
index a0a7fc3cdb..0000000000
Binary files a/elements/pf-v5-background-image/demo/pfbg_576.jpg and /dev/null differ
diff --git a/elements/pf-v5-background-image/demo/pfbg_768.jpg b/elements/pf-v5-background-image/demo/pfbg_768.jpg
deleted file mode 100644
index af83172425..0000000000
Binary files a/elements/pf-v5-background-image/demo/pfbg_768.jpg and /dev/null differ
diff --git a/elements/pf-v5-background-image/demo/pfbg_768@2x.jpg b/elements/pf-v5-background-image/demo/pfbg_768@2x.jpg
deleted file mode 100644
index a4ca09cb82..0000000000
Binary files a/elements/pf-v5-background-image/demo/pfbg_768@2x.jpg and /dev/null differ
diff --git a/elements/pf-v5-background-image/demo/sibling-content.html b/elements/pf-v5-background-image/demo/sibling-content.html
deleted file mode 100644
index 5a5a2221ae..0000000000
--- a/elements/pf-v5-background-image/demo/sibling-content.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-<pf-v5-background-image
-  src="pfbg.jpg"
-  src-2x="pfbg_576.jpg"
-  src-sm="pfbg_768.jpg"
-  src-sm-2x="pfbg_768@2x.jpg"
-  src-lg="pfbg_1200.jpg"
-></pf-v5-background-image>
-
-<section>
-  <h1>Sibling Content</h1>
-  <pf-v5-button>Button</pf-v5-button>
-</section>
-
-
-<style>
-  /* override demo chrome styles */
-  html, body {
-    background-color: transparent;
-  }
-  section {
-    color: var(--pf-global--palette--white, #fff);
-    padding: var(--pf-global--spacer--xl, 2rem);
-  }
-</style>
-
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js';
-</script>
diff --git a/elements/pf-v5-background-image/docs/pf-v5-background-image.md b/elements/pf-v5-background-image/docs/pf-v5-background-image.md
deleted file mode 100644
index 0e45547415..0000000000
--- a/elements/pf-v5-background-image/docs/pf-v5-background-image.md
+++ /dev/null
@@ -1,65 +0,0 @@
-{% renderOverview %}
-  {% htmlexample class="pf-v5-background-image" %}
-  <pf-v5-background-image filter
-      src="/components/background-image/demo/pfbg.jpg"
-      src-2x="/components/background-image/demo/pfbg_576.jpg"
-      src-sm="/components/background-image/demo/pfbg_768.jpg"
-      src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
-      src-lg="/components/background-image/demo/pfbg_1200.jpg"
-  ></pf-v5-background-image>
-  {% endhtmlexample %}
-
-  View the [full screen demo](/components/background-image/demo/).
-
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  ### Sibling content w/ no filter
-  {% htmlexample class="pf-v5-background-image" %}
-  <pf-v5-background-image 
-      src="/components/background-image/demo/pfbg.jpg"
-      src-2x="/components/background-image/demo/pfbg_576.jpg"
-      src-sm="/components/background-image/demo/pfbg_768.jpg"
-      src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
-      src-lg="/components/background-image/demo/pfbg_1200.jpg"
-  ></pf-v5-background-image>
-  <p>Sibling Content</p>
-  <pf-v5-button>Button</pf-v5-button>
-  {% endhtmlexample %}
-
-  View the [full screen demo](/components/background-image/demo/sibling-content/). 
-
-  ### Override SVG Filter
-
-  [MDN documentation for `<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter)
-
-  {% htmlexample class="pf-v5-background-image" %}
-  <pf-v5-background-image filter
-      src="/components/background-image/demo/pfbg.jpg"
-      src-2x="/components/background-image/demo/pfbg_576.jpg"
-      src-sm="/components/background-image/demo/pfbg_768.jpg"
-      src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
-      src-lg="/components/background-image/demo/pfbg_1200.jpg" >
-    <svg slot="filter" xmlns="http://www.w3.org/2000/svg">
-      <filter id="image_overlay">
-        <feMorphology in="SourceGraphic" operator="dilate" radius="5"></feMorphology>
-      </filter>
-    </svg>
-  </pf-v5-background-image>
-  {% endhtmlexample %} 
-
-  View the [full screen demo](/components/background-image/demo/filter-override/).
-
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-background-image/docs/screenshot.png b/elements/pf-v5-background-image/docs/screenshot.png
deleted file mode 100644
index f7b9df8e54..0000000000
Binary files a/elements/pf-v5-background-image/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-background-image/pf-v5-background-image.css b/elements/pf-v5-background-image/pf-v5-background-image.css
deleted file mode 100644
index c787efe3cf..0000000000
--- a/elements/pf-v5-background-image/pf-v5-background-image.css
+++ /dev/null
@@ -1,73 +0,0 @@
-:host {
-  display: flex;
-
-  /** Background image for the element */
-  --_background-image: var(--pf-v5-c-background-image--BackgroundImage);
-}
-
-#outer-container {
-  display: contents;
-}
-
-#container {
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-}
-
-#container::after {
-  display: block;
-  position: fixed;
-  top:  0;
-  left: 0;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  content: "";
-  /** Background color for the background image */
-  background-color: var(--pf-v5-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));
-  background-image: var(--_background-image);
-  /** SVG filter applied to the background image */
-  filter: var(--pf-v5-c-background-image--Filter, url("#image_overlay"));
-  background-repeat:  no-repeat;
-  background-size: cover;
-}
-
-slot[name="filter"] {
-  display: none;
-}
-
-slot[part="content"] {
-  display: block;
-  position: relative;
-  z-index: 1;
-  color: white;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  #container::after {
-    /** Background image for 2x DPI screens */
-    background-image: var(--pf-v5-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));
-  }
-}
-
-@media screen and (min-width: 576px) {
-  #container::after {
-    /** Background image for small screens */
-    background-image: var(--pf-v5-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));
-  }
-}
-
-@media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
-  #container::after {
-    /** Background image for small screens with 2x DPI */
-    background-image: var(--pf-v5-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));
-  }
-}
-
-@media screen and (min-width: 992px) {
-  #container::after {
-    /** Background image for large screens */
-    background-image: var(--pf-v5-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));
-  }
-}
diff --git a/elements/pf-v5-background-image/pf-v5-background-image.ts b/elements/pf-v5-background-image/pf-v5-background-image.ts
deleted file mode 100644
index f961c31998..0000000000
--- a/elements/pf-v5-background-image/pf-v5-background-image.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
-import { property } from 'lit/decorators/property.js';
-
-
-import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
-
-import styles from './pf-v5-background-image.css';
-
-/**
- * A **background image** allows you to place an image in the background of your page or area of a page.
- * @summary Allows users to place an image in the background of your page or area of a page.
- * @alias Background Image
- */
-@customElement('pf-v5-background-image')
-export class PfV5BackgroundImage extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  /**
-   * The URL for the image shown on mobile
-   */
-  @property({ reflect: true }) src?: string;
-
-  /**
-   * The image shown on mobile with 2x DPI
-   */
-  @property({ reflect: true, attribute: 'src-2x' }) src2x?: string;
-
-  /**
-   * The URL for the image shown on small screens (min-width: 576px)
-   */
-  @property({ reflect: true, attribute: 'src-sm' }) srcSm?: string;
-
-  /**
-   * The URL for the image shown on small screens (min-width: 576px) with 2x DPI
-   */
-  @property({ reflect: true, attribute: 'src-sm-2x' }) srcSm2x?: string;
-
-  /**
-   * The URL for the image shown on large screens (min-width: 992px)
-   */
-  @property({ reflect: true, attribute: 'src-lg' }) srcLg?: string;
-
-  /**
-   * Apply SVG Filter to the image
-   */
-  @property({ type: Boolean, reflect: true }) filter = false;
-
-  @queryAssignedElements({ slot: 'filter', selector: 'svg' }) private _svg?: SVGElement[];
-
-  #svg?: SVGElement;
-
-  #updated = false;
-
-  render(): TemplateResult<1> {
-    const cssProps = {
-      '--_background-image': this.src,
-      '--_background-image-2x': this.src2x,
-      '--_background-image-sm': this.srcSm,
-      '--_background-image-sm-2x': this.srcSm2x,
-      '--_background-image-lg': this.srcLg,
-    } as StyleInfo;
-
-    Object.entries(cssProps).forEach(([key, value]) => {
-      // if the value is undefined, remove the css property
-      if (!value) {
-        delete cssProps[key];
-      } else {
-        // otherwise, add the value with the url() css function
-        cssProps[key] = `url(${value})`;
-      }
-    });
-
-    return html`
-      <div id="container" part="container" style="${styleMap(cssProps)}">
-        ${!this.filter ? html`` : html`
-          <!-- Overrides the default svg filter for the background image. -->
-          <slot name="filter" @slotchange=${this.#onSlotChange}>
-            ${(this.#svg && this.#updated) ? this.#svg : html`
-              <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
-                <filter id="image_overlay">
-                  <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
-                  <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-                    <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
-                    <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
-                    <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
-                    <feFuncA type="table" tableValues="0 1"></feFuncA>
-                  </feComponentTransfer>
-                </filter>
-              </svg>
-            `}
-          </slot>
-        `}
-      </div>
-    `;
-  }
-
-  #onSlotChange() {
-    const [svg] = this._svg as SVGElement[];
-    if (svg) {
-      this.#svg = svg;
-      this.#updated = true;
-      this.requestUpdate();
-    } else {
-      this.#updated = false;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-background-image': PfV5BackgroundImage;
-  }
-}
diff --git a/elements/pf-v5-background-image/test/pf-background-image.spec.ts b/elements/pf-v5-background-image/test/pf-background-image.spec.ts
deleted file mode 100644
index 23acf3b66c..0000000000
--- a/elements/pf-v5-background-image/test/pf-background-image.spec.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { expect, html } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfV5BackgroundImage } from '@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js';
-import { setViewport } from '@web/test-runner-commands';
-
-const example = html`
-  <pf-v5-background-image filter
-    src="/components/background-image/demo/pfbg.jpg"
-    src-2x="/components/background-image/demo/pfbg_576.jpg"
-    src-sm="/components/background-image/demo/pfbg_768.jpg"
-    src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
-    src-lg="/components/background-image/demo/pfbg_1200.jpg"
-    >
-  </pf-v5-background-image>
-`;
-
-function isMobile() {
-  const matches = !!window.matchMedia('(max-width: 575px)').matches;
-  return matches;
-}
-
-function isTablet() {
-  const matches = !!window.matchMedia('(min-width: 576px)').matches;
-  return matches;
-}
-
-function isDesktop() {
-  const matches = !!window.matchMedia('(min-width: 992px)').matches;
-  return matches;
-}
-
-describe('<pf-v5-background-image>', function() {
-  describe('simply instantiating', function() {
-    let element: PfV5BackgroundImage;
-
-    it('imperatively instantiates', function() {
-      expect(document.createElement('pf-v5-background-image')).to.be.an.instanceof(PfV5BackgroundImage);
-    });
-
-    it('should upgrade', async function() {
-      element = await createFixture<PfV5BackgroundImage>(html`<pf-v5-background-image></pf-v5-background-image>`);
-      const klass = customElements.get('pf-v5-background-image');
-      expect(element)
-          .to.be.an.instanceOf(klass)
-          .and
-          .to.be.an.instanceOf(PfV5BackgroundImage);
-    });
-
-    describe('adjusting window size', function() {
-      describe('when the window is less than 576px wide', function() {
-        beforeEach(async function() {
-          await setViewport({ width: 320, height: 500 });
-          await element.updateComplete;
-          expect(isMobile()).to.be.true;
-        });
-
-        it('should background image', async function() {
-          const element = await createFixture<PfV5BackgroundImage>(example);
-          await element.updateComplete;
-          const container = element.shadowRoot!.querySelector('#container')!;
-          const afterStyles = getComputedStyle(container, '::after');
-          expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg.jpg');
-        });
-      });
-    });
-
-    describe('when the window is less greater then 576px wide', function() {
-      beforeEach(async function() {
-        await setViewport({ width: 576, height: 500 });
-        await element.updateComplete;
-        expect(isTablet()).to.be.true;
-      });
-
-      it('should background image', async function() {
-        const element = await createFixture<PfV5BackgroundImage>(example);
-        await element.updateComplete;
-        const container = element.shadowRoot!.querySelector('#container')!;
-        const afterStyles = getComputedStyle(container, '::after');
-        /* the image sizes are not named based off viewport but their own intrinsic size */
-        expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_768.jpg');
-      });
-    });
-
-    describe('when the window is less greater then 992px wide', function() {
-      beforeEach(async function() {
-        await setViewport({ width: 992, height: 500 });
-        await element.updateComplete;
-        expect(isDesktop()).to.be.true;
-      });
-
-      it('should background image', async function() {
-        const element = await createFixture<PfV5BackgroundImage>(example);
-        await element.updateComplete;
-        const container = element.shadowRoot!.querySelector('#container')!;
-        const afterStyles = getComputedStyle(container, '::after');
-        /* the image sizes are not named based off viewport but their own intrinsic size */
-        expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_1200.jpg');
-      });
-    });
-  });
-});
-
diff --git a/elements/pf-v5-badge/README.md b/elements/pf-v5-badge/README.md
deleted file mode 100644
index 41650198ac..0000000000
--- a/elements/pf-v5-badge/README.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# PatternFly Elements Badge
-         
-The `<pf-v5-badge>` component provides a way to have small numerical descriptors for 
-for for for UI elements. To provide context to your badge, it is highly 
-encouraged that you also include an `aria-label` attribute in your markup.
-
-Read more about Badge in the [PatternFly Elements Badge documentation](https://patternflyelements.org/components/badge)
-
-##  Installation
-
-Load `<pf-v5-badge>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-badge/pf-v5-badge.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
-```
-
-## Usage
-
-```html
-<section>
-  <pf-v5-badge aria-label="2 unread messages" number="2" threshold="10">2</pf-v5-badge>
-</section>
-```
-
-Please refer to the [specification](https://www.w3.org/TR/wai-aria/#aria-label) for additional details.
-
-With the `threshold` attribute:
-
-```html
-<section>
-  <pf-v5-badge number="1" threshold="10">1</pf-v5-badge>
-  <pf-v5-badge number="17" threshold="20">17</pf-v5-badge>
-  <pf-v5-badge number="900" threshold="100">900</pf-v5-badge>
-</section>
-```
-
-With two state options for the `state` attribute:
-
-```html
-<section>
-  <pf-v5-badge state="read" number="10">10</pf-v5-badge>
-  <pf-v5-badge state="unread" number="20">20</pf-v5-badge>
-</section>
-```
-
diff --git a/elements/pf-v5-badge/demo/index.html b/elements/pf-v5-badge/demo/index.html
deleted file mode 100644
index 0976ef0f30..0000000000
--- a/elements/pf-v5-badge/demo/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<section>
-  <pf-v5-badge number="613">613</pf-v5-badge>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
-</script>
-<style>
-  section {
-    padding: 2em;
-  }
-</style>
diff --git a/elements/pf-v5-badge/demo/read.html b/elements/pf-v5-badge/demo/read.html
deleted file mode 100644
index d8f5029bcc..0000000000
--- a/elements/pf-v5-badge/demo/read.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<section>
-  <pf-v5-badge number="7">7</pf-v5-badge>
-  <pf-v5-badge number="24">24</pf-v5-badge>
-  <pf-v5-badge number="240">240</pf-v5-badge>
-  <pf-v5-badge threshold="900" number="999">999</pf-v5-badge>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
-</script>
-<style>
-  section {
-    padding: 2em;
-  }
-</style>
diff --git a/elements/pf-v5-badge/demo/threshold.html b/elements/pf-v5-badge/demo/threshold.html
deleted file mode 100644
index 2132e3679a..0000000000
--- a/elements/pf-v5-badge/demo/threshold.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<section>
-  <pf-v5-badge number="400" threshold="500">400</pf-v5-badge>
-  <pf-v5-badge number="900" threshold="500">900</pf-v5-badge>
-  <p>In this demo, the threshold is set to 500.
-     It should add '+' sign if the value exceeds the threshold.
-     It shouldn't add a '+' sign if the value doesn't exceed the threshold</p>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
-</script>
-<style>
-  section {
-    padding: 2em;
-  }
-</style>
diff --git a/elements/pf-v5-badge/demo/unread.html b/elements/pf-v5-badge/demo/unread.html
deleted file mode 100644
index 826b244593..0000000000
--- a/elements/pf-v5-badge/demo/unread.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<section>
-  <pf-v5-badge state="unread" number="7">7</pf-v5-badge>
-  <pf-v5-badge state="unread" number="24">24</pf-v5-badge>
-  <pf-v5-badge state="unread" number="240">240</pf-v5-badge>
-  <pf-v5-badge state="unread" threshold="900" number="999">999</pf-v5-badge>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
-</script>
-<style>
-  section {
-    padding: 2em;
-  }
-</style>
diff --git a/elements/pf-v5-badge/docs/CHANGELOG.old.md b/elements/pf-v5-badge/docs/CHANGELOG.old.md
deleted file mode 100644
index e3d18c1936..0000000000
--- a/elements/pf-v5-badge/docs/CHANGELOG.old.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# @patternfly/pfe-badge
-
-## 2.0.0-next.4
-
-### Patch Changes
-
-- 5bc0a5ad: Made `state` property on `BaseBadge` abstract.
-
-## 2.0.0-next.3
-
-### Major Changes
-
-- 686c01e2: Rewrote `<pfe-badge>` to more closely implement the PatternFly v4 spec. This includes component API changes, but HTML implementation remains the same.
-
-  ```html
-  <pfe-badge number="7">7</pfe-badge>
-  ```
-
-  ```html
-  <pfe-badge threshold="10" number="7" state="unread">7</pfe-badge>
-  ```
-
-  #### Updates
-
-  - Options for the `state` attribute have changed to `read` and `unread`.
-  - `pfe` Sass variables were replaced by `--pf-*` css variables.
-
-## 2.0.0-next.2
-
-### Patch Changes
-
-- bfad8b4b: Updates dependencies
-- Updated dependencies [bfad8b4b]
-  - @patternfly/pfe-core@2.0.0-next.8
-
-## 2.0.0-next.1
-
-### Patch Changes
-
-- 447b2d75: Remove `esbuild` export condition, as this anyways was a runtime error
-- Updated dependencies [447b2d75]
-  - @patternfly/pfe-core@2.0.0-next.3
-
-## 2.0.0-next.0
-
-### Major Changes
-
-- e4a76fb2: ## 🔥 Migrate to Lit
-
-  This release migrates `<pfe-badge>` to LitElement.
-
-  ### Breaking Changes
-
-  - Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle).
-    If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`;
-
-  See [docs](https://patternflyelements.org/components/badge/) for more info
-
-### Patch Changes
-
-- Updated dependencies [e8788c72]
-  - @patternfly/pfe-core@2.0.0-next.0
diff --git a/elements/pf-v5-badge/docs/pf-v5-badge.md b/elements/pf-v5-badge/docs/pf-v5-badge.md
deleted file mode 100644
index 02d5080fdc..0000000000
--- a/elements/pf-v5-badge/docs/pf-v5-badge.md
+++ /dev/null
@@ -1,43 +0,0 @@
-{% renderInstallation %} {% endrenderInstallation %}
-
-{% renderOverview %}
-  <pf-v5-badge state="read" number="17">17</pf-v5-badge>
-  <pf-v5-badge number="900" threshold="100">900</pf-v5-badge>
-  <pf-v5-badge state="unread" number="10">10</pf-v5-badge>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  To provide context to your badge, it is highly encouraged that you also include an `aria-label` attribute in your markup.
-
-  ### Default
-  {% htmlexample %}
-  <pf-v5-badge aria-label="2 unread messages" number="2">2</pf-v5-badge>
-  {% endhtmlexample %}
-
-  ### With a threshold
-  This adds a "+" next to the number once the threshold value has been passed.
-
-  {% htmlexample %}
-  <pf-v5-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-v5-badge>
-  {% endhtmlexample %}
-
-  ### With a state
-  This adds a background color to the badge based on the state.
-
-  {% htmlexample %}
-  <pf-v5-badge state="read" number="10">10</pf-v5-badge>
-  <pf-v5-badge state="unread" number="20">20</pf-v5-badge>
-  {% endhtmlexample %}
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-badge/docs/screenshot.png b/elements/pf-v5-badge/docs/screenshot.png
deleted file mode 100644
index 0d28220ba3..0000000000
Binary files a/elements/pf-v5-badge/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-badge/pf-v5-badge.css b/elements/pf-v5-badge/pf-v5-badge.css
deleted file mode 100644
index 732ed346ca..0000000000
--- a/elements/pf-v5-badge/pf-v5-badge.css
+++ /dev/null
@@ -1,51 +0,0 @@
-:host {
-  position: relative;
-  white-space: nowrap;
-  text-align: center;
-  display: inline-block;
-  /** Border radius for badge */
-  border-radius: var(--pf-v5-c-badge--BorderRadius,
-    var(--pf-global--BorderRadius--lg, 180em));
-  /** Minimum width for badge */
-  min-width: var(--pf-v5-c-badge--MinWidth,
-    var(--pf-global--spacer--xl, 2rem));
-  /** Left padding for badge */
-  padding-left: var(--pf-v5-c-badge--PaddingLeft,
-    var(--pf-global--spacer--sm, 0.5rem));
-  /** Right padding for badge */
-  padding-right: var(--pf-v5-c-badge--PaddingRight,
-    var(--pf-global--spacer--sm, 0.5rem));
-  /** Font size for badge */
-  font-size: var(--pf-v5-c-badge--FontSize,
-    var(--pf-v5-theme--font-size, 0.75em));
-  /** Font weight for badge */
-  font-weight: var(--pf-v5-c-badge--FontWeight,
-    var(--pf-v5-theme--font-weight--bold, 700));
-  /** Line height for badge */
-  line-height: var(--pf-v5-c-badge--LineHeight,
-    var(--pf-global--LineHeight--md, 1.5));
-  /** Color for badge */
-  color: var(--pf-v5-c-badge--Color,
-    var(--pf-global--palette--black-900, #151515));
-  /** Background color for badge */
-  background-color: var(--pf-v5-c-badge--BackgroundColor,
-    var(--pf-global--palette--black-200, #f0f0f0));
-}
-
-:host([state="read"]) {
-  /** Color for read badge */
-  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color,
-    var(--pf-global--palette--black-900, #151515));
-  /** Background color for read badge */
-  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor,
-    var(--pf-global--palette--black-200, #f0f0f0));
-}
-
-:host([state="unread"]) {
-  /** Color for unread badge */
-  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color,
-    var(--pf-global--palette--white, #fff));
-  /** Background color for unread badge */
-  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor,
-    var(--pf-global--palette--blue-400, #06c));
-}
diff --git a/elements/pf-v5-badge/pf-v5-badge.ts b/elements/pf-v5-badge/pf-v5-badge.ts
deleted file mode 100644
index b2fd42a183..0000000000
--- a/elements/pf-v5-badge/pf-v5-badge.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { property } from 'lit/decorators/property.js';
-
-import styles from './pf-v5-badge.css';
-
-/**
- * A **badge** is used to annotate other information like a label or an object name.
- * @alias Badge
- */
-
-
-@customElement('pf-v5-badge')
-export class PfV5Badge extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  /**
-   * Denotes the state-of-affairs this badge represents
-   * Options include read and unread
-   */
-  @property({ reflect: true }) state?: 'unread' | 'read';
-
-  /**
-   * Sets a numeric value for a badge.
-   *
-   * You can pair it with `threshold` attribute to add a `+` sign
-   * if the number exceeds the threshold value.
-   */
-  @property({ reflect: true, type: Number }) number?: number;
-
-  /**
-   * Sets a threshold for the numeric value and adds `+` sign if
-   * the numeric value exceeds the threshold value.
-   */
-  @property({ reflect: true, type: Number }) threshold?: number;
-
-  override render(): TemplateResult<1> {
-    const { threshold, number, textContent } = this;
-    const displayText =
-        (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
-      : (number != null) ? number.toString()
-      : textContent ?? '';
-    return html`
-      <span>${displayText}</span>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-badge': PfV5Badge;
-  }
-}
diff --git a/elements/pf-v5-badge/test/pf-badge.spec.ts b/elements/pf-v5-badge/test/pf-badge.spec.ts
deleted file mode 100644
index 5eb0726cb2..0000000000
--- a/elements/pf-v5-badge/test/pf-badge.spec.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { expect, html, nextFrame } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { hexToRgb, getColor } from '@patternfly/pfe-tools/test/hex-to-rgb.js';
-import { PfV5Badge } from '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
-
-// Background colors for the various states
-const states = {
-  default: '#f0f0f0',
-  read: '#f0f0f0',
-  unread: '#0066cc',
-};
-
-const element = html`<pf-v5-badge number="10">10</pf-v5-badge>`;
-
-describe('<pf-v5-badge>', function() {
-  it('imperatively instantiates', function() {
-    expect(document.createElement('pf-v5-badge')).to.be.an.instanceof(PfV5Badge);
-  });
-
-  it('should upgrade', async function() {
-    const el = await createFixture<PfV5Badge>(element);
-    expect(el, 'pf-v5-badge should be an instance of PfV5Badge')
-        .to.be.an
-        .instanceOf(customElements.get('pf-v5-badge'))
-        .and
-        .to.be.an.instanceof(PfV5Badge);
-  });
-
-  it('should display text equivalent to the number attribute', async function() {
-    const el = await createFixture<PfV5Badge>(html`<pf-v5-badge number="100">10</pf-v5-badge>`);
-    await nextFrame();
-    expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('100');
-  });
-
-  it('should add \'+\' sign if the value exceeds the threshold', async function() {
-    const el = await createFixture<PfV5Badge>(html`<pf-v5-badge number="900" threshold="100">900</pf-v5-badge>`);
-    await nextFrame();
-    expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('100+');
-  });
-
-  it('shouldn\'t add a \'+\' sign if the value doesn\'t exceed the threshold', async function() {
-    const el = await createFixture<PfV5Badge>(html`<pf-v5-badge number="900" threshold="1000">900</pf-v5-badge>`);
-    await el.updateComplete;
-    expect(el.textContent).to.equal('900');
-    expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('900');
-  });
-
-  // This is the one that created an error:
-  Object.entries(states).forEach(([state, color]) => {
-    it(`should have a background color of '${color}' when state is ${state}`, async function() {
-      const el = await createFixture<PfV5Badge>(element);
-
-      if (state !== 'default') {
-        el.setAttribute('state', state);
-      }
-
-      const [r, g, b] = getColor(el, 'background-color');
-      expect([r, g, b]).to.deep.equal(hexToRgb(color));
-    });
-  });
-});
diff --git a/elements/pf-v5-banner/README.md b/elements/pf-v5-banner/README.md
deleted file mode 100644
index 75d8362cd5..0000000000
--- a/elements/pf-v5-banner/README.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Patternfly Elements Banner
-A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.
-
-Read more about Button in the [PatternFly Elements Banner documentation](https://patternflyelements.org/components/banner)
-
-## Installation
-Load `<pf-v5-banner>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-banner/pf-v5-banner.js"></script>
-```
-Or, if you are using [NPM](https://npm.im/), install it
-
-```bash
-npm install @patternfly/elements
-```
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
-```
-
-
-## Usage
-
-```html
-<pf-v5-banner>
-  Default banner
-</pf-v5-banner>
-```
-
-
-## Attributes
-
-### Variant
-Banners have five different variants. The available variants are `default`, `info`, `success`, `danger`, and `warning`.
-
-```html
-<pf-v5-banner variant="info">
-  Info banner
-</pf-v5-banner>
-```
-
-### Icon
-Banners can have an icon attribute for a shorthand to Patternfly Icons. To see available icons, visit the [Patternfly Elements Icons documentation](https://patternflyelements.com/components/icons/).
-
-```html
-<pf-v5-banner variant="info" icon="info">
-  Info banner
-</pf-v5-banner>
-```
-
-### Sticky
-Banners can be sticky, so they stick to the top of the parent. 
-
-```html
-<pf-v5-banner sticky>
-  Sticky banner
-</pf-v5-banner>
-```
diff --git a/elements/pf-v5-banner/demo/index.html b/elements/pf-v5-banner/demo/index.html
deleted file mode 100644
index 0cbdbf711e..0000000000
--- a/elements/pf-v5-banner/demo/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<pf-v5-banner>Default Banner</pf-v5-banner>
-<pf-v5-banner variant="info">Blue Banner</pf-v5-banner>
-<pf-v5-banner variant="danger">Red Banner</pf-v5-banner>
-<pf-v5-banner variant="success">Green Banner</pf-v5-banner>
-<pf-v5-banner variant="warning">Gold Banner</pf-v5-banner>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
-</script>
-
-<style>
-  pf-v5-banner + pf-v5-banner {
-    margin-block-start: 1rem;
-  }
-</style>
diff --git a/elements/pf-v5-banner/demo/status-banners.html b/elements/pf-v5-banner/demo/status-banners.html
deleted file mode 100644
index 1c2c3d68e4..0000000000
--- a/elements/pf-v5-banner/demo/status-banners.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<pf-v5-banner>
-  <svg slot="icon"
-       viewBox="0 0 896 1024"
-       aria-hidden="true"
-       role="img">
-    <path d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"></path>
-  </svg>
-  Default Banner
-</pf-v5-banner>
-
-<pf-v5-banner variant="info">
-  <pf-v5-icon icon="info-circle" slot="icon"></pf-v5-icon>
-  Info Banner
-</pf-v5-banner>
-
-<pf-v5-banner variant="danger">
-  <pf-v5-icon icon="exclamation-circle" slot="icon"></pf-v5-icon>
-  Danger Banner
-</pf-v5-banner>
-
-<pf-v5-banner variant="success">
-  <pf-v5-icon icon="check-circle" slot="icon"></pf-v5-icon>
-  Success Banner
-</pf-v5-banner>
-
-<pf-v5-banner variant="warning">
-  <pf-v5-icon icon="exclamation-triangle" slot="icon"></pf-v5-icon>
-  Warning Banner
-</pf-v5-banner>
-
-<style>
-  pf-v5-banner + pf-v5-banner {
-    margin-block-start: 1rem;
-  }
-</style>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
-  import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-</script>
diff --git a/elements/pf-v5-banner/demo/sticky.html b/elements/pf-v5-banner/demo/sticky.html
deleted file mode 100644
index 3f00ceaf4c..0000000000
--- a/elements/pf-v5-banner/demo/sticky.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<pf-v5-banner sticky>I stick to the top</pf-v5-banner>
-<header>
-  <h2 class="entry-title page--title">The Open Source Definition</h2>
-  <a href="https://opensource.org/osd/">https://opensource.org/osd/</a>
-</header>
-
-<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>
-
-<h4>1. Free Redistribution</h4>
-<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>
-
-
-<h4>2. Source Code</h4>
-<p>The program must include source code, and must allow distribution in source code as well as compiled form. Where some form of a product is not distributed with source code, there must be a well-publicized means of obtaining the source code for no more than a reasonable reproduction cost, preferably downloading via the Internet without charge. The source code must be the preferred form in which a programmer would modify the program. Deliberately obfuscated source code is not allowed. Intermediate forms such as the output of a preprocessor or translator are not allowed.</p>
-
-
-<h4>3. Derived Works</h4>
-<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>
-
-
-<h4>4. Integrity of The Author’s Source Code</h4>
-<p>The license may restrict source-code from being distributed in modified form <em>only</em> if the license allows the distribution of “patch files” with the source code for the purpose of modifying the program at build time. The license must explicitly permit distribution of software built from modified source code. The license may require derived works to carry a different name or version number from the original software.</p>
-
-
-<h4>5. No Discrimination Against Persons or Groups</h4>
-<p>The license must not discriminate against any person or group of persons.</p>
-
-
-<h4>6. No Discrimination Against Fields of Endeavor</h4>
-<p>The license must not restrict anyone from making use of the program in a specific field of endeavor. For example, it may not restrict the program from being used in a business, or from being used for genetic research.</p>
-
-
-<h4>7. Distribution of License</h4>
-<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>
-
-
-<h4>8. License Must Not Be Specific to a Product</h4>
-<p>The rights attached to the program must not depend on the program’s being part of a particular software distribution. If the program is extracted from that distribution and used or distributed within the terms of the program’s license, all parties to whom the program is redistributed should have the same rights as those that are granted in conjunction with the original software distribution.</p>
-
-
-<h4>9. License Must Not Restrict Other Software</h4>
-<p>The license must not place restrictions on other software that is distributed along with the licensed software. For example, the license must not insist that all other programs distributed on the same medium must be open-source software.</p>
-
-
-<h4>10. License Must Be Technology-Neutral</h4>
-<p>No provision of the license may be predicated on any individual technology or style of interface.</p>
-
-<hr>
-<p>The Open Source Definition was originally derived from the <a href="https://www.debian.org/social_contract#guidelines">Debian Free Software Guidelines</a> (DFSG).</p>
-<p><em>Version 1.9, last modified, 2007-03-22</em></p>
-<p><em>Here’s the historical “<a href="https://opensource.org/definition-annotated/">Annotated OSD</a>” from the early 2000’s. </em>
-<script type="module">
-  import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
-</script>
diff --git a/elements/pf-v5-banner/docs/pf-v5-banner.md b/elements/pf-v5-banner/docs/pf-v5-banner.md
deleted file mode 100644
index c2c4924ee3..0000000000
--- a/elements/pf-v5-banner/docs/pf-v5-banner.md
+++ /dev/null
@@ -1,59 +0,0 @@
-{% renderOverview %}
-  <pf-v5-banner>Default</pf-v5-banner>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  {% htmlexample %}
-  <pf-v5-banner>Default</pf-v5-banner>
-  {% endhtmlexample %}
-
-
-  ### With a variant
-  Available variants are: default, info, danger, success, warning
-
-  {% htmlexample %}
-  <pf-v5-banner variant="default">Default</pf-v5-banner>
-  <pf-v5-banner variant="info">Info</pf-v5-banner>
-  <pf-v5-banner variant="danger">Danger</pf-v5-banner>
-  <pf-v5-banner variant="success">Success</pf-v5-banner>
-  <pf-v5-banner variant="warning">Warning</pf-v5-banner>
-  {% endhtmlexample %}
-
-
-  ### Sticky
-  Banners can be set to stick to the top of their container by adding the `sticky` attribute.
-
-  {% htmlexample %}
-  <pf-v5-banner sticky>Sticky</pf-v5-banner>
-  {% endhtmlexample %}
-
-
-  ### With an icon
-  You can add a icon by using the shorthand icon attribute
-
-  {% htmlexample %} 
-    <pf-v5-banner icon="info">Info</pf-v5-banner>
-  {% endhtmlexample %}
-
-  Or you can use the icon slot and slot in a `svg` or `pf-v5-icon` element
-
-  {% htmlexample %} 
-<pf-v5-banner>
-  <pf-v5-icon slot="icon" icon="info-circle"></pf-v5-icon>
-  Info
-</pf-v5-banner>
-  {% endhtmlexample %}
-
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-banner/docs/screenshot.png b/elements/pf-v5-banner/docs/screenshot.png
deleted file mode 100644
index db0887a28a..0000000000
Binary files a/elements/pf-v5-banner/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-banner/pf-v5-banner.css b/elements/pf-v5-banner/pf-v5-banner.css
deleted file mode 100644
index 6b67a56f9a..0000000000
--- a/elements/pf-v5-banner/pf-v5-banner.css
+++ /dev/null
@@ -1,117 +0,0 @@
-:host {
-  display: block;
-  /** Top padding for banner */
-  --pf-v5-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
-  /** Right padding for banner */
-  --pf-v5-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem);
-  /** Right padding for banner on medium screens */
-  --pf-v5-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
-  /** Bottom padding for banner */
-  --pf-v5-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
-  /** Left padding for banner */
-  --pf-v5-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem);
-  /** Left padding for banner on medium screens */
-  --pf-v5-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
-  /** Font size for banner */
-  --pf-v5-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
-  /** Text color for banner */
-  --pf-v5-c-banner--Color: var(--pf-global--Color--100, #151515);
-  /** Background color for banner */
-  --pf-v5-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255);
-  /** Link color for banner (references banner color) */
-  --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color);
-  /** Link text decoration for banner */
-  --pf-v5-c-banner--link--TextDecoration: underline;
-  /** Link hover color for banner (references banner color) */
-  --pf-v5-c-banner--link--hover--Color: var(--pf-v5-c-banner--Color);
-  /** Link hover font weight for banner */
-  --pf-v5-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
-  /** Disabled link color for banner (references banner color) */
-  --pf-v5-c-banner--link--disabled--Color: var(--pf-v5-c-banner--Color);
-  /** Disabled link text decoration for banner */
-  --pf-v5-c-banner--link--disabled--TextDecoration: none;
-  /** Background color for info banner */
-  --pf-v5-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7);
-  /** Background color for danger banner */
-  --pf-v5-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
-  /** Background color for success banner */
-  --pf-v5-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
-  /** Background color for warning banner */
-  --pf-v5-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
-  /** Z-index for sticky banner */
-  --pf-v5-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300);
-  /** Box shadow for sticky banner */
-  --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
-}
-
-#container,
-#container.default {
-  color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding:
-    var(--pf-v5-c-banner--PaddingTop, var(--pf-global--spacer--xs, 0.25rem))
-    var(--pf-v5-c-banner--PaddingRight, var(--pf-global--spacer--md, 1rem))
-    var(--pf-v5-c-banner--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem))
-    var(--pf-v5-c-banner--PaddingLeft, var(--pf-global--spacer--md, 1rem));
-  font-size: var(--pf-v5-c-banner--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
-  color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));
-  white-space: nowrap;
-  background-color: var(--pf-v5-c-banner--BackgroundColor, var(--pf-global--BackgroundColor--dark-400, #4f5255));
-
-  --pf-v5-icon--size: 1em;
-}
-
-#container.info {
-  color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor, var(--pf-global--palette--blue-200, #73bcf7));
-}
-
-#container.danger {
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-danger--BackgroundColor, var(--pf-global--danger-color--100, #c9190b));
-}
-
-#container.success {
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-success--BackgroundColor, var(--pf-global--success-color--100, #3e8635));
-}
-
-#container.warning {
-  color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-warning--BackgroundColor, var(--pf-global--warning-color--100, #f0ab00));
-}
-
-#container.hasIcon {
-  display: var(--pf-v5-l-flex--Display, flex);
-  flex-wrap: var(--pf-v5-l-flex--FlexWrap, wrap);
-  align-items: var(--pf-v5-l-flex--AlignItems, baseline);
-  gap: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem)));
-}
-
-:host([sticky]) {
-  position: sticky;
-  top: 0;
-  z-index: var(--pf-v5-c-banner--m-sticky--ZIndex, var(--pf-global--ZIndex--md, 300));
-  box-shadow:
-    var(--pf-v5-c-banner--m-sticky--BoxShadow,
-    var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)));
-}
-
-pf-v5-icon,
-::slotted(pf-v5-icon),
-::slotted(svg) {
-  position: relative;
-  inset-block-start: 0.125em;
-}
-
-::slotted(svg) {
-  height: 1em;
-  width: 1em;
-  fill: currentcolor;
-}
-
-@media (min-width: 768px) {
-  #container {
-    --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));
-    --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
-  }
-}
diff --git a/elements/pf-v5-banner/pf-v5-banner.ts b/elements/pf-v5-banner/pf-v5-banner.ts
deleted file mode 100644
index 5f4f7b2d06..0000000000
--- a/elements/pf-v5-banner/pf-v5-banner.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
-
-import { customElement } from 'lit/decorators/custom-element.js';
-import { property } from 'lit/decorators/property.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
-
-import styles from './pf-v5-banner.css';
-
-export type BannerVariant = (
-  | 'default'
-  | 'info'
-  | 'warning'
-  | 'danger'
-  | 'success'
-);
-
-/**
- * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users.
- * Banners are un-intrusive and non-dismissible.
- * @summary Allows users to display a stylized banner.
- * @alias Banner
- */
-@customElement('pf-v5-banner')
-export class PfV5Banner extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  /** Changes the visual appearance of the banner. */
-  @property({ reflect: true }) variant?: BannerVariant;
-
-  /** Shorthand for the `icon` slot, the value is icon name */
-  @property() icon?: string;
-
-  /** Shorthand for the `icon` slot, the value is icon name */
-  @property({ type: Boolean }) sticky = false;
-
-  /** Represents the state of the anonymous and icon slots */
-  #slots = new SlotController(this, null, 'icon');
-
-  override willUpdate(changed: PropertyValues<this>): void {
-    if (changed.has('icon') && this.icon) {
-      import('@patternfly/elements/pf-v5-icon/pf-v5-icon.js');
-    }
-  }
-
-  override render(): TemplateResult<1> {
-    const { variant, icon } = this;
-    const hasIcon = !!icon || this.#slots.hasSlotted('icon');
-    return html`
-      <!-- The container of the banner -->
-      <div id="container" part="container"
-            class=${classMap({ hasIcon, [variant ?? '']: !!variant })}>
-        <!-- Contains the labels's icon, e.g. web-icon-alert-success. -->
-        <slot name="icon" part="icon">${!this.icon ? '' : html`
-          <pf-v5-icon icon="${this.icon}"></pf-v5-icon>`}
-        </slot>
-        <!-- Contains the text for the banner -->
-        <slot id="text"></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-banner': PfV5Banner;
-  }
-}
diff --git a/elements/pf-v5-banner/test/pf-banner.spec.ts b/elements/pf-v5-banner/test/pf-banner.spec.ts
deleted file mode 100644
index 5a6bcd4d1e..0000000000
--- a/elements/pf-v5-banner/test/pf-banner.spec.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { expect, html } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js';
-import { PfV5Banner } from '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
-
-describe('<pf-v5-banner>', function() {
-  describe('simply instantiating', function() {
-    it('imperatively instantiates', function() {
-      expect(document.createElement('pf-v5-banner')).to.be.an.instanceof(PfV5Banner);
-    });
-
-    it('should upgrade', async function() {
-      const el = await createFixture<PfV5Banner>(html`
-        <pf-v5-banner>Default</pf-v5-banner>
-      `);
-      const klass = customElements.get('pf-v5-banner');
-      expect(el)
-          .to.be.an.instanceOf(klass)
-          .and
-          .to.be.an.instanceOf(PfV5Banner);
-    });
-
-    describe('without variant attribute', function() {
-      let element: PfV5Banner;
-      beforeEach(async function() {
-        element = await createFixture<PfV5Banner>(html`
-          <pf-v5-banner>Default</pf-v5-banner>
-        `);
-        await element.updateComplete;
-      });
-      // TODO: remove assertions on shadow roots
-      it('should display default variant', async function() {
-        const container = element.shadowRoot!.querySelector('#container')!;
-        expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff'));
-        expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#4f5255'));
-      });
-    });
-
-    describe('with variant="info" attribute', function() {
-      let element: PfV5Banner;
-      beforeEach(async function() {
-        element = await createFixture<PfV5Banner>(html`
-          <pf-v5-banner variant="info">Info</pf-v5-banner>
-        `);
-        await element.updateComplete;
-      });
-      // TODO: remove assertions on shadow roots
-      it('should display info variant', async function() {
-        const container = element.shadowRoot!.querySelector('#container')!;
-        expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));
-        expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#73bcf7'));
-      });
-    });
-
-    describe('with variant="danger" attribute', function() {
-      let element: PfV5Banner;
-      beforeEach(async function() {
-        element = await createFixture<PfV5Banner>(html`
-          <pf-v5-banner variant="danger">Info</pf-v5-banner>
-        `);
-        await element.updateComplete;
-      });
-      // TODO: remove assertions on shadow roots
-      it('should display danger variant', async function() {
-        const container = element.shadowRoot!.querySelector('#container')!;
-        expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff'));
-        expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#c9190b'));
-      });
-    });
-
-    describe('with valid icon attribute', function() {
-      let element: PfV5Banner;
-      beforeEach(async function() {
-        element = await createFixture<PfV5Banner>(html`
-          <pf-v5-banner icon="info">Info</pf-v5-banner>
-        `);
-        await element.updateComplete;
-      });
-      // TODO: remove assertions on shadow roots
-      it('should render an icon', async function() {
-        const icon = element.shadowRoot!.querySelector('pf-v5-icon');
-        expect(icon).to.exist;
-      });
-    });
-  });
-});
diff --git a/elements/pf-v5-button/demo/form-control.html b/elements/pf-v5-button/demo/form-control.html
index 4d0c31d113..ff1a09f053 100644
--- a/elements/pf-v5-button/demo/form-control.html
+++ b/elements/pf-v5-button/demo/form-control.html
@@ -3,8 +3,8 @@ <h2>Nothing disabled</h2>
   <fieldset>
     <pf-v5-button>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
 </form>
 
 <form>
@@ -12,8 +12,8 @@ <h2>fieldset disabled</h2>
   <fieldset disabled>
     <pf-v5-button>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
 </form>
 
 <form>
@@ -21,8 +21,8 @@ <h2>Button disabled</h2>
   <fieldset>
     <pf-v5-button disabled>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
 </form>
 
 <form>
@@ -30,12 +30,12 @@ <h2>Both disabled</h2>
   <fieldset disabled>
     <pf-v5-button disabled>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
 
   for (const form of document.querySelectorAll('form')) {
diff --git a/elements/pf-v5-button/demo/index.html b/elements/pf-v5-button/demo/index.html
index d015707668..f80de9ecef 100644
--- a/elements/pf-v5-button/demo/index.html
+++ b/elements/pf-v5-button/demo/index.html
@@ -1,14 +1,16 @@
 <pf-v5-button id="button">
   Primary
-  <pf-v5-badge number="0" hidden></pf-v5-badge>
+  <pf-v6-badge hidden>0</pf-v6-badge>
 </pf-v5-button>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
+  let number;
   document.getElementById('button').addEventListener('click', async function() {
-    await import('@patternfly/elements/pf-v5-badge/pf-v5-badge.js');
-    this.querySelector('pf-v5-badge').hidden = false
-    this.querySelector('pf-v5-badge').number += 1
+    await import('@patternfly/elements/pf-v6-badge/pf-v6-badge.js');
+    this.querySelector('pf-v6-badge').hidden = false;
+    number = parseInt(this.querySelector('pf-v6-badge').textContent) + 1;
+    this.querySelector('pf-v6-badge').textContent = number;
   })
 </script>
 
diff --git a/elements/pf-v5-button/demo/stateful.html b/elements/pf-v5-button/demo/stateful.html
index df648c15c4..c4d44c4683 100644
--- a/elements/pf-v5-button/demo/stateful.html
+++ b/elements/pf-v5-button/demo/stateful.html
@@ -12,7 +12,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 
   const logsBtn = document.getElementById('loading-logs');
   const loadBtn = document.getElementById('loading-scdr');
diff --git a/elements/pf-v5-button/pf-v5-button.css b/elements/pf-v5-button/pf-v5-button.css
index b0cd26d64f..d1fa059247 100644
--- a/elements/pf-v5-button/pf-v5-button.css
+++ b/elements/pf-v5-button/pf-v5-button.css
@@ -308,7 +308,7 @@ pf-v5-icon,
   }
   &.primary:not(.plain),
   &.danger {
-    --pf-v5-c-spinner--Color: white;
+    --pf-v6-c-spinner--Color: white;
   }
   &:not(.plain) {
     padding-left: calc(12px + var(--pf-v5-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)));
diff --git a/elements/pf-v5-button/pf-v5-button.ts b/elements/pf-v5-button/pf-v5-button.ts
index 14ff6b8127..3ebf87edb7 100644
--- a/elements/pf-v5-button/pf-v5-button.ts
+++ b/elements/pf-v5-button/pf-v5-button.ts
@@ -8,7 +8,7 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals-
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 
 import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 
 import tokensStyles from './pf-v5-button-tokens.css';
 import iconStyles from './pf-v5-button-icon.css';
@@ -152,9 +152,9 @@ export class PfV5Button extends LitElement {
                  icon="${ifDefined(this.icon)}"
                  set="${ifDefined(this.iconSet)}"
                  ?hidden="${!this.icon || this.loading}"></pf-v5-icon>
-        <pf-v5-spinner size="md"
+        <pf-v6-spinner size="md"
                     ?hidden="${!this.loading}"
-                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-v5-spinner>
+                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-v6-spinner>
       </slot>
       <slot id="text"></slot>
     `;
diff --git a/elements/pf-v5-card/demo/modifiers.html b/elements/pf-v5-card/demo/modifiers.html
index a564146119..85f9a21124 100644
--- a/elements/pf-v5-card/demo/modifiers.html
+++ b/elements/pf-v5-card/demo/modifiers.html
@@ -1,21 +1,21 @@
 <section>
   <form id="card-settings">
-    <pf-v5-switch id="flat" data-attribute="flat"></pf-v5-switch>
+    <pf-v6-switch id="flat" data-attribute="flat"></pf-v6-switch>
     <label for="flat">Flat</label>
 
-    <pf-v5-switch id="rounded" data-attribute="rounded"></pf-v5-switch>
+    <pf-v6-switch id="rounded" data-attribute="rounded"></pf-v6-switch>
     <label for="rounded">Rounded</label>
 
-    <pf-v5-switch id="plain" data-attribute="plain"></pf-v5-switch>
+    <pf-v6-switch id="plain" data-attribute="plain"></pf-v6-switch>
     <label for="plain">Plain</label>
 
-    <pf-v5-switch id="full-height" data-attribute="full-height"></pf-v5-switch>
+    <pf-v6-switch id="full-height" data-attribute="full-height"></pf-v6-switch>
     <label for="full-height">Full Height</label>
 
-    <pf-v5-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v5-switch>
+    <pf-v6-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v6-switch>
     <label for="size-compact">Compact</label>
 
-    <pf-v5-switch id="size-large" data-attribute="size" data-value="large"></pf-v5-switch>
+    <pf-v6-switch id="size-large" data-attribute="size" data-value="large"></pf-v6-switch>
     <label for="size-large">Large</label>
   </form>
 
@@ -32,13 +32,13 @@ <h2 slot="header">Lightest card</h2>
 <script type="module">
   import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
   const form = document.getElementById('card-settings');
   const card = document.querySelector('pf-v5-card');
 
   form.addEventListener('change', async function(event) {
-    await Promise.all(Array.from(document.querySelectorAll('pf-v5-switch'), x => x.updateComplete));
+    await Promise.all(Array.from(document.querySelectorAll('pf-v6-switch'), x => x.updateComplete));
     const { checked } = event.target;
     const { attribute, value } = event.target.dataset;
     switch (attribute) {
diff --git a/elements/pf-v5-chip/demo/with-badge.html b/elements/pf-v5-chip/demo/with-badge.html
index 839480a861..a10eb4c13d 100644
--- a/elements/pf-v5-chip/demo/with-badge.html
+++ b/elements/pf-v5-chip/demo/with-badge.html
@@ -1,8 +1,6 @@
-<pf-v5-chip>Chip <pf-v5-badge number="7">7</pf-v5-badge></pf-v5-chip>
+<pf-v5-chip>Chip <pf-v6-badge>7</pf-v6-badge></pf-v5-chip>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-chip/pf-v5-chip.js';
-  import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
+  import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
 </script>
-
-
diff --git a/elements/pf-v5-chip/docs/pf-v5-chip.md b/elements/pf-v5-chip/docs/pf-v5-chip.md
index 68c02f3353..4a535bf018 100644
--- a/elements/pf-v5-chip/docs/pf-v5-chip.md
+++ b/elements/pf-v5-chip/docs/pf-v5-chip.md
@@ -1,6 +1,6 @@
 <script type="module">
 import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
+import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
 import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
 </script>
 
@@ -14,7 +14,7 @@ import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
 
 {% htmlexample %}
   <pf-v5-chip>Chip 1</pf-v5-chip>
-  <pf-v5-chip>Chip <pf-v5-badge number="7">7</pf-v5-badge></pf-v5-chip>
+  <pf-v5-chip>Chip <pf-v6-badge>7</pf-v6-badge></pf-v5-chip>
 {% endhtmlexample %}
 
 ### Chip variants
diff --git a/elements/pf-v5-chip/pf-v5-chip.css b/elements/pf-v5-chip/pf-v5-chip.css
index 375a1eac2f..2b68105098 100644
--- a/elements/pf-v5-chip/pf-v5-chip.css
+++ b/elements/pf-v5-chip/pf-v5-chip.css
@@ -122,7 +122,7 @@ button#outer span {
   inset-block-start: 0.125em;
 }
 
-::slotted(pf-v5-badge) {
+::slotted(pf-v6-badge) {
   font-size: var(--pf-global--FontSize--xs, 12px);
   margin: 0 0 0 var(--pf-global--spacer--xs, 0.25rem) !important;
   min-width: unset;
diff --git a/elements/pf-v5-dropdown/demo/custom-toggle.html b/elements/pf-v5-dropdown/demo/custom-toggle.html
index 6de7d42d54..ab0fba45e9 100644
--- a/elements/pf-v5-dropdown/demo/custom-toggle.html
+++ b/elements/pf-v5-dropdown/demo/custom-toggle.html
@@ -3,7 +3,7 @@
     <em>Note:</em> When using a custom toggle, you must slot in a <code>pf-v5-dropdown-menu</code>.
   </small>
   <span id="switch-group">
-    <pf-v5-switch id="disable-all"></pf-v5-switch>
+    <pf-v6-switch id="disable-all"></pf-v6-switch>
     <label for="disable-all"><span data-state="on">Enable</span><span data-state="off">Disable</span> all dropdowns</label>
   </span>
 </p>
@@ -113,7 +113,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-dropdown/pf-v5-dropdown.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   const sw = document.getElementById('disable-all')
   sw.addEventListener('click', function() {
     document.querySelectorAll('main pf-v5-dropdown').forEach(x => x.disabled = sw.checked);
diff --git a/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html b/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html
index c2288fba4f..575b6d498b 100644
--- a/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html
+++ b/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html
@@ -2,7 +2,7 @@
   <header>
     <h2>Main title</h2>
 
-    <pf-v5-switch id="is-vertical" checked></pf-v5-switch>
+    <pf-v6-switch id="is-vertical" checked></pf-v6-switch>
     <label for="is-vertical" data-state="on">Vertical</label>
     <label for="is-vertical" data-state="off">Horizontal</label>
   </header>
@@ -142,12 +142,12 @@ <h2 id="heading-5">Heading 5</h2>
 </div>
 
 <script type="module">
-import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
 
 const main = document.getElementById('demo');
 const links = document.querySelector('pf-v5-jump-links');
-const swtch = document.querySelector('pf-v5-switch');
+const swtch = document.querySelector('pf-v6-switch');
 const media = matchMedia('(max-width: 600px)');
 
 function sumHeights(...elements) {
@@ -230,8 +230,8 @@ <h2 id="heading-5">Heading 5</h2>
 }
 
 
-pf-v5-switch + label,
-pf-v5-switch + label + label {
+pf-v6-switch + label,
+pf-v6-switch + label + label {
   margin-inline-start: 12px;
 }
 </style>
diff --git a/elements/pf-v5-progress-stepper/demo/alignment.html b/elements/pf-v5-progress-stepper/demo/alignment.html
index dc91e3c9a8..0977b442f3 100644
--- a/elements/pf-v5-progress-stepper/demo/alignment.html
+++ b/elements/pf-v5-progress-stepper/demo/alignment.html
@@ -1,7 +1,7 @@
 <form id="alignment">
   <h2>With alignment</h2>
-  <label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
-  <label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
+  <label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
+  <label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
   <pf-v5-progress-stepper name="progress">
     <pf-v5-progress-step description="This is the first thing to happen" variant="success">First Step</pf-v5-progress-step>
     <pf-v5-progress-step description="This is the second thing to happen" variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>With alignment</h2>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>With alignment</h2>
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 
diff --git a/elements/pf-v5-progress-stepper/demo/compact.html b/elements/pf-v5-progress-stepper/demo/compact.html
index cb251bbfbe..59d5eaf1da 100644
--- a/elements/pf-v5-progress-stepper/demo/compact.html
+++ b/elements/pf-v5-progress-stepper/demo/compact.html
@@ -1,7 +1,7 @@
 <form id="compact">
   <h2>Compact</h2>
-  <label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
-  <label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
+  <label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
+  <label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
   <pf-v5-progress-stepper name="progress" compact>
     <pf-v5-progress-step variant="success">First Step</pf-v5-progress-step>
     <pf-v5-progress-step variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>Compact</h2>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>Compact</h2>
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 
diff --git a/elements/pf-v5-progress-stepper/demo/info.html b/elements/pf-v5-progress-stepper/demo/info.html
index 666f160588..c233482761 100644
--- a/elements/pf-v5-progress-stepper/demo/info.html
+++ b/elements/pf-v5-progress-stepper/demo/info.html
@@ -9,7 +9,7 @@
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -20,7 +20,7 @@
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 
diff --git a/elements/pf-v5-progress/README.md b/elements/pf-v5-progress/README.md
deleted file mode 100644
index 688ff7ecbb..0000000000
--- a/elements/pf-v5-progress/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Progress
-
-A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
-
-Read more about Progress in the [PatternFly Elements Progress documentation][docs].
-
-##  Installation
-
-Load `<pf-v5-progress>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-progress/pf-v5-progress.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
-```
-
-## Usage
-
-```html
-<pf-v5-progress title="Default" value="33"></pf-v5-progress>
-```
-
-[docs]: https://patternflyelements.org/components/progress
diff --git a/elements/pf-v5-progress/demo/index.html b/elements/pf-v5-progress/demo/index.html
deleted file mode 100644
index 6707c5b632..0000000000
--- a/elements/pf-v5-progress/demo/index.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<pf-v5-progress title="Title" value="33"></pf-v5-progress>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
-</script>
diff --git a/elements/pf-v5-progress/demo/kitchen-sink.css b/elements/pf-v5-progress/demo/kitchen-sink.css
deleted file mode 100644
index ccd286b44c..0000000000
--- a/elements/pf-v5-progress/demo/kitchen-sink.css
+++ /dev/null
@@ -1,4 +0,0 @@
-pf-v5-progress {
-    padding-bottom: 0.25rem;
-    display: block;
-}
\ No newline at end of file
diff --git a/elements/pf-v5-progress/demo/kitchen-sink.html b/elements/pf-v5-progress/demo/kitchen-sink.html
deleted file mode 100644
index ca3b20d5ab..0000000000
--- a/elements/pf-v5-progress/demo/kitchen-sink.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<script type="module" src="pf-v5-progress.js"></script>
-<link rel="stylesheet" href="kitchen-sink.css">
-
-<h1>pf-v5-progress</h1>
-
-<h2>Default States</h2>
-
-<pf-v5-progress></pf-v5-progress>
-
-<h3>Value</h3>
-<pf-v5-progress value="86"></pf-v5-progress>
-
-<h3>Description</h3>
-<pf-v5-progress value="75" description="Description"></pf-v5-progress>
-
-<h3>Aria-label</h3>
-<pf-v5-progress value="90" aria-label="Aria-label"></pf-v5-progress>
-
-<h3>Max</h3>
-<pf-v5-progress value="25" max="50"></pf-v5-progress>
-
-<h3>Min</h3>
-<pf-v5-progress value="75" min="50"></pf-v5-progress>
-
-<h3>Size (sm, lg)</h3>
-<pf-v5-progress value="24" size="sm"></pf-v5-progress>
-<pf-v5-progress value="25" size="lg"></pf-v5-progress>
-
-<h3>Measure Location (Inside, Outside, None)</h3>
-<pf-v5-progress value="24" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="25" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="26" measure-location="none"></pf-v5-progress>
-
-<h3>Variant (Sucess, danger, warning)</h3>
-<pf-v5-progress value="24" variant="success"></pf-v5-progress>
-<pf-v5-progress value="25" variant="danger"></pf-v5-progress>
-<pf-v5-progress value="26" variant="warning"></pf-v5-progress>
-
-<h3>Variant (Success, Danger, Warning) and Size (sm, lg)</h3>
-<pf-v5-progress value="24" variant="success" size="sm"></pf-v5-progress>
-<pf-v5-progress value="25" variant="success" size="lg"></pf-v5-progress>
-<pf-v5-progress value="26" variant="danger" size="sm"></pf-v5-progress>
-<pf-v5-progress value="27" variant="danger" size="lg"></pf-v5-progress>
-<pf-v5-progress value="28" variant="warning" size="sm"></pf-v5-progress>
-<pf-v5-progress value="29" variant="warning" size="lg"></pf-v5-progress>
-
-<h3>Variant (Success, Danger, Warning) and Measure Location (Inside, Outside, None)</h3>
-<pf-v5-progress value="24" variant="success" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="25" variant="success" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="25" variant="success" measure-location="none"></pf-v5-progress>
-<pf-v5-progress value="26" variant="danger" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="27" variant="danger" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="27" variant="danger" measure-location="none"></pf-v5-progress>
-<pf-v5-progress value="28" variant="warning" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="29" variant="warning" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="29" variant="warning" measure-location="none"></pf-v5-progress>
-
-<h3>Variant (Success, Danger, Warning), Size (sm, lg) and Measure Location (Inside, Outside, None)</h3>
-<pf-v5-progress value="24" variant="success" size="sm" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="25" variant="success" size="sm" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="26" variant="success" size="sm" measure-location="none"></pf-v5-progress>
-<pf-v5-progress value="27" variant="success" size="lg" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="28" variant="success" size="lg" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="29" variant="success" size="lg" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="30" variant="danger" size="sm" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="31" variant="danger" size="sm" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="32" variant="danger" size="sm" measure-location="none"></pf-v5-progress>
-<pf-v5-progress value="33" variant="danger" size="lg" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="34" variant="danger" size="lg" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="35" variant="danger" size="lg" measure-location="none"></pf-v5-progress>
-<pf-v5-progress value="36" variant="warning" size="sm" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="37" variant="warning" size="sm" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="38" variant="warning" size="sm" measure-location="none"></pf-v5-progress>
-<pf-v5-progress value="39" variant="warning" size="lg" measure-location="inside"></pf-v5-progress>
-<pf-v5-progress value="40" variant="warning" size="lg" measure-location="outside"></pf-v5-progress>
-<pf-v5-progress value="41" variant="warning" size="lg" measure-location="none"></pf-v5-progress>
-
-<h2>Label w/ no description</h2>
-
-<h3>Value</h3>
-
-<label for="progress1">Value</label>
-<pf-v5-progress id="progress1" value="86"></pf-v5-progress>
-
-<h3>Size (sm, lg)</h3>
-
-<label for="progress2">Size (sm)</label>
-<pf-v5-progress id="progress2" value="24" size="sm"></pf-v5-progress>
-
-<label for="progress3">Size (lg)</label>
-<pf-v5-progress id="progress3" value="25" size="lg"></pf-v5-progress>
-
-<h3>Measure Location (Inside, Outside)</h3>
-
-<label for="progress4">Measure Location (Inside)</label>
-<pf-v5-progress id="progress4" value="24" measure-location="inside"></pf-v5-progress>
-
-<label for="progress5">Measure Location (Outside)</label>
-<pf-v5-progress id="progress5" value="25" measure-location="outside"></pf-v5-progress>
-
-<h3>Variant (Sucess, danger, warning)</h3>
-
-<label for="progress6">Variant (Success)</label>
-<pf-v5-progress id="progress6" value="24" variant="success"></pf-v5-progress>
-
-<label for="progress7">Variant (Danger)</label>
-<pf-v5-progress id="progress7" value="25" variant="danger"></pf-v5-progress>
-
-<label for="progress8">Variant (Warning)</label>
-<pf-v5-progress id="progress8" value="26" variant="warning"></pf-v5-progress>
-
-<h3>Variant (Success, Danger, Warning) and Size (sm, lg)</h3>
-
-<label for="progress9">Variant (Success) and Size (sm)</label>
-<pf-v5-progress id="progress9" value="24" variant="success" size="sm"></pf-v5-progress>
-
-<label for="progress10">Variant (Success) and Size (lg)</label>
-<pf-v5-progress id="progress10" value="25" variant="success" size="lg"></pf-v5-progress>
-
-<label for="progress11">Variant (Danger) and Size (sm)</label>
-<pf-v5-progress id="progress11" value="26" variant="danger" size="sm"></pf-v5-progress>
-
-<label for="progress12">Variant (Danger) and Size (lg)</label>
-<pf-v5-progress id="progress12" value="27" variant="danger" size="lg"></pf-v5-progress>
-
-<label for="progress13">Variant (Warning) and Size (sm)</label>
-<pf-v5-progress id="progress13" value="28" variant="warning" size="sm"></pf-v5-progress>
-
-<label for="progress14">Variant (Warning) and Size (lg)</label>
-<pf-v5-progress id="progress14" value="29" variant="warning" size="lg"></pf-v5-progress>
-
-<h3>Truncated description</h3>
-<pf-v5-progress
-    value="29"
-    description-truncated
-    description="Very very very very very very very very very very very long description which should be truncated if it does not fit onto one line above the progress bar"
-></pf-v5-progress>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
-</script>
diff --git a/elements/pf-v5-progress/demo/truncated-description.html b/elements/pf-v5-progress/demo/truncated-description.html
deleted file mode 100644
index ab77ce90a0..0000000000
--- a/elements/pf-v5-progress/demo/truncated-description.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<section>
-  <pf-v5-progress
-      value="29"
-      description-truncated
-      description="Very very very very very very very very very very very long description which should be truncated if it does not fit onto one line above the progress bar"
-  ></pf-v5-progress>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
-</script>
-
-<style>
-  section {
-    max-width: 600px;
-  }
-  pf-v5-progress {
-    width: 100%;
-  }
-</style>
diff --git a/elements/pf-v5-progress/docs/pf-v5-progress.md b/elements/pf-v5-progress/docs/pf-v5-progress.md
deleted file mode 100644
index e66c25db5e..0000000000
--- a/elements/pf-v5-progress/docs/pf-v5-progress.md
+++ /dev/null
@@ -1,49 +0,0 @@
-{% renderInstallation %} {% endrenderInstallation %}
-
-{% renderOverview %}
-    <pf-v5-progress title="Default" value="33"></pf-v5-progress>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-
-   ### Success variant
-   {% htmlexample %}
-    <pf-v5-progress variant="success" value="50"></pf-v5-progress>
-   {% endhtmlexample %}
-
-   ### Inside measurement
-   {% htmlexample %}
-    <pf-v5-progress value="24" measure-location="inside"></pf-v5-progress>
-   {% endhtmlexample %}
-
-   ### Large size
-   {% htmlexample %}
-    <pf-v5-progress value="24" size="lg"></pf-v5-progress>
-   {% endhtmlexample %}
-
-   ### Inside measurement
-   {% htmlexample %}
-    <pf-v5-progress value="24" measure-location="inside"></pf-v5-progress>
-   {% endhtmlexample %}
-
-   ### Truncated Description
-   {% htmlexample %}
-    <pf-v5-progress
-        value="29"
-        description-truncated
-        description="Very very very very very very very very very very very long description which should be truncated if it does not fit onto one line above the progress bar"
-    ></pf-v5-progress>
-   {% endhtmlexample %}
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-progress/pf-v5-progress.css b/elements/pf-v5-progress/pf-v5-progress.css
deleted file mode 100644
index 2088aefb98..0000000000
--- a/elements/pf-v5-progress/pf-v5-progress.css
+++ /dev/null
@@ -1,229 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-#container {
-  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: #0066cc33; /* WARNING: not a recognized token value */
-  --_pf-c-progress--m-success__bar--BackgroundColorWithOpacity: #3e863533;  /* WARNING: not a recognized token value */
-  --_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity: #f0ab0033;  /* WARNING: not a recognized token value */
-  --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33;  /* WARNING: not a recognized token value */
-
-  /** Gap between sections of progress bar */
-  --pf-v5-c-progress--GridGap: var(--pf-global--spacer--md, 1rem);
-  /** Color of progress bar */
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc);
-  /** Height of progress bar */
-  --pf-v5-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem);
-  /** Background color of progress bar */
-  --pf-v5-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff);
-  /** Color of status icon */
-  --pf-v5-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515);
-  /** Margin left of status icon */
-  --pf-v5-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
-  /** Height of progress bar indicator */
-  --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
-  /** Background color of progress bar indicator */
-  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor);
-  /** Background color of progress bar when variant is success */
-  --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
-  /** Background color of progress bar when variant is warning */
-  --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
-  /** Background color of progress bar when variant is danger */
-  --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
-  /** Color of status icon when variant is success */
-  --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635);
-  /** Color of status icon when variant is warning */
-  --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
-  /** Color of status icon when variant is danger */
-  --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
-  /** Color of progress bar measure when variant is success and measure location is inside */
-  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff);
-  /** Font size of progress bar measure when measure location is outside */
-  --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
-  /** Height of progress bar when size is small */
-  --pf-v5-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem);
-  /** Font size of progress bar description when size is small */
-  --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
-  /** Height of progress bar when size is large */
-  --pf-v5-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem);
-  display: grid;
-  align-items: end;
-  grid-gap: var(--pf-v5-c-progress--GridGap);
-  grid-template-columns: 1fr auto;
-  grid-template-rows: 1fr auto;
-  width: 100%;
-}
-
-.sm {
-  --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
-  --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
-}
-
-.sm #description {
-  font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
-}
-
-.lg {
-  --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-lg__bar--Height);
-  --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress--m-lg__bar--Height);
-}
-
-.outside #description {
-  grid-column: 1/3;
-}
-
-.outside #status {
-  grid-column: 2/3;
-  grid-row: 2/3;
-  align-self: center;
-}
-
-.outside progress,
-.outside span {
-  display: inline-block;
-  font-size: var(--pf-v5-c-progress--m-outside__measure--FontSize);
-  grid-column: 1/2;
-}
-
-.singleline {
-  grid-template-rows: 1fr;
-}
-
-.singleline #description {
-  display: none;
-  visibility: hidden;
-}
-
-.singleline progress,
-.singleline span {
-  grid-row: 1/2;
-  grid-column: 1/2;
-}
-
-.singleline #status {
-  grid-row: 1/2;
-  grid-column: 2/3;
-}
-
-.outside, .singleline {
-  grid-template-columns: 1fr fit-content(50%);
-}
-
-#container.success {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor);
-  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity);
-  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
-}
-
-#container.warning {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor);
-  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity);
-  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
-}
-
-#container.danger {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor);
-  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity);
-  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
-}
-
-#description {
-  word-break: break-word;
-  grid-column: 1/2;
-}
-
-.descriptionTruncated #description {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#status {
-  grid-column: 2/3;
-  grid-row: 1/2;
-  text-align: right;
-  word-break: break-word;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-}
-
-pf-v5-icon {
-  margin-left: var(--pf-v5-c-progress__status-icon--MarginLeft);
-  color: var(--pf-v5-c-progress__status-icon--Color);
-}
-
-progress {
-  position: relative;
-  grid-column: 1/3;
-  grid-row: 2/3;
-  align-self: center;
-  height: var(--pf-v5-c-progress__bar--Height);
-  background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
-}
-
-.indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: var(--pf-v5-c-progress__indicator--Height);
-  background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
-}
-
-.indicator {
-  width: 100%;
-  height: var(--pf-v5-c-progress__bar--Height);
-
-  display: block;
-}
-
-span {
-  grid-column: 1/3;
-  grid-row: 2/3;
-  text-align: center;
-  color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
-}
-
-span::after {
-  content: attr(data-value);
-  position: relative;
-  height: 100%;
-}
-
-progress[value] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);
-
-  width: 100%;
-  height: var(--pf-v5-c-progress__bar--Height);
-}
-
-progress:not([value]) {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-progress[value]::-webkit-progress-bar {
-  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);
-}
-
-progress[value]::-moz-progress-bar {
-  background: var(--pf-v5-c-progress__bar--before--BackgroundColor);
-}
-
-progress[value]::-webkit-progress-value {
-  background-size: 100% 100%;
-  background-image: linear-gradient(
-    90deg,
-    var(--pf-v5-c-progress__bar--before--BackgroundColor) 100%,
-    var(--pf-v5-c-progress__bar--before--BackgroundColor) 100%
-  );
-}
-
-pf-v5-tooltip {
-  height: 0.01px;
-}
diff --git a/elements/pf-v5-progress/pf-v5-progress.ts b/elements/pf-v5-progress/pf-v5-progress.ts
deleted file mode 100644
index 2791b1601c..0000000000
--- a/elements/pf-v5-progress/pf-v5-progress.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import type { PropertyValues, TemplateResult } from 'lit';
-import { LitElement, html } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { property } from 'lit/decorators/property.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import styles from './pf-v5-progress.css';
-
-const ICONS = new Map(Object.entries({
-  success: { icon: 'circle-check' },
-  danger: { icon: 'circle-xmark' },
-  warning: { icon: 'triangle-exclamation' },
-}));
-
-/**
- * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
- * @summary Display completion status of ongoing process or task.
- * @alias Progress
- */
-@customElement('pf-v5-progress')
-export class PfV5Progress extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  #internals = this.attachInternals();
-
-  /** Represents the value of the progress bar */
-  @property({ reflect: true, type: Number }) value = 0;
-
-  /** Description (title) above the progress bar */
-  @property() description?: string;
-
-  /** Indicate whether to truncate the string description (title) */
-  @property({
-    type: Boolean,
-    reflect: true,
-    attribute: 'description-truncated',
-  }) descriptionTruncated = false;
-
-  /** Maximum value for the progress bar */
-  @property({ type: Number, reflect: true }) max = 100;
-
-  /** Minimum value for the progress bar */
-  @property({ type: Number, reflect: true }) min = 0;
-
-  /** Size of the progress bar (height) */
-  @property() size?: 'sm' | 'lg';
-
-  /** Where the percentage will be displayed with the progress element */
-  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';
-
-  /** Variant of the progress bar */
-  @property() variant?: 'success' | 'danger' | 'warning';
-
-  get #calculatedPercentage(): number {
-    const { value, min, max } = this;
-    const percentage = Math.round((value - min) / (max - min) * 100);
-    if (Number.isNaN(percentage) || percentage < 0) {
-      return 0;
-    }
-    return Math.min(percentage, 100);
-  }
-
-  get #icon() {
-    return ICONS.get(this.variant ?? '')?.icon;
-  }
-
-  override willUpdate(changed: PropertyValues<this>): void {
-    if (changed.has('value') || changed.has('min') || changed.has('max')) {
-      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();
-    }
-    if (this.#icon) {
-      import('@patternfly/elements/pf-v5-icon/pf-v5-icon.js');
-    }
-    if (this.descriptionTruncated) {
-      import('@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js');
-    }
-  }
-
-  render(): TemplateResult<1> {
-    const { size, measureLocation, variant, description, descriptionTruncated } = this;
-    const icon = this.#icon;
-    const singleLine = description?.length === 0;
-    const pct = this.#calculatedPercentage;
-    const width = `${pct}%`;
-
-    return html`
-      <div id="container" class="${classMap({
-          [size ?? '']: !!size,
-          [measureLocation ?? '']: !!measureLocation,
-          [variant ?? '']: !!variant,
-          singleLine,
-          descriptionTruncated,
-        })}">
-
-        <div id="description" aria-hidden="true">${description ?? ''}</div>
-
-        ${!descriptionTruncated ? '' : html`
-        <pf-v5-tooltip content="${this.description ?? ''}"
-                    trigger="description"></pf-v5-tooltip>
-        `}
-
-        ${measureLocation === 'none' ? '' : html`
-        <div id="status" aria-hidden="true">
-          ${measureLocation !== 'inside' ? '' : width}
-          <pf-v5-icon set="fas"
-                   icon="${ifDefined(icon)}"
-                   size="md"
-                   ?hidden="${!icon}"
-          ></pf-v5-icon>
-        </div>
-        `}
-
-          <progress id="progress"
-                    max="100"
-                    value="${pct}"
-                    aria-valuemin="0"
-                    aria-valuenow="${pct}"
-                    aria-valuemax="100"
-          ></progress>
-
-          ${measureLocation !== 'inside' ? '' : html`
-          <span id="progress-span"
-                style="${styleMap({ width })}"
-                data-value="${width}"></span>
-          `}
-      </div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-progress': PfV5Progress;
-  }
-}
diff --git a/elements/pf-v5-progress/test/pf-progress.spec.ts b/elements/pf-v5-progress/test/pf-progress.spec.ts
deleted file mode 100644
index bc0b45a15f..0000000000
--- a/elements/pf-v5-progress/test/pf-progress.spec.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { expect, html, fixture } from '@open-wc/testing';
-import { PfV5Progress } from '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
-
-describe('<pf-v5-progress>', function() {
-  let element: PfV5Progress;
-
-  beforeEach(async function() {
-    element = await fixture<PfV5Progress>(html`
-      <pf-v5-progress value="33"
-                  title="Progress title"
-                  label="Progress label">
-      </pf-v5-progress>
-    `);
-  });
-
-  it('should upgrade', async function() {
-    const klass = customElements.get('pf-v5-progress');
-    expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfV5Progress);
-  });
-
-  it('should be accessible', async function() {
-    await expect(element).shadowDom.to.be.accessible();
-  });
-
-  it('should set the correct value on the progress bar', async function() {
-    const element = await fixture<PfV5Progress>(html`
-      <pf-v5-progress value="33">
-      </pf-v5-progress>
-    `);
-    expect(element.value).to.equal(33);
-  });
-
-  it('should set the correct title on the progress bar', async function() {
-    const element = await fixture<PfV5Progress>(html`
-      <pf-v5-progress title="Progress title">
-      </pf-v5-progress>
-    `);
-    expect(element.title).to.equal('Progress title');
-  });
-
-  it('should have the correct value with the max value set', async function() {
-    const max = Math.floor(Math.random() * 100);
-    const value = Math.floor(Math.random() * (max));
-
-    const element = await fixture<PfV5Progress>(html`
-      <pf-v5-progress value="${value}" max="${max}">
-      </pf-v5-progress>
-    `);
-    expect(element.value).to.equal(value);
-    expect(element.max).to.equal(max);
-  });
-});
diff --git a/elements/pf-v5-select/pf-v5-select.css b/elements/pf-v5-select/pf-v5-select.css
index f6c270ac26..c871501fe7 100644
--- a/elements/pf-v5-select/pf-v5-select.css
+++ b/elements/pf-v5-select/pf-v5-select.css
@@ -457,7 +457,7 @@
   flex: 0 1 auto;
 }
 
-pf-v5-badge {
+pf-v6-badge {
   padding: 0;
 }
 
diff --git a/elements/pf-v5-select/pf-v5-select.ts b/elements/pf-v5-select/pf-v5-select.ts
index eda637b4c6..b7fafc5559 100644
--- a/elements/pf-v5-select/pf-v5-select.ts
+++ b/elements/pf-v5-select/pf-v5-select.ts
@@ -216,7 +216,7 @@ export class PfV5Select extends LitElement {
               <span id="toggle-text"
                     class="${classMap({ 'visually-hidden': !!typeahead, badge })}">${this.#buttonLabel}</span>${!hasBadge ? '' : html`
               <span id="toggle-badge">
-                <pf-v5-badge number="${selectedOptions.length}">${selectedOptions.length}</pf-v5-badge>
+                <pf-v6-badge number="${selectedOptions.length}">${selectedOptions.length}</pf-v6-badge>
               </span>`}
             </span>
             <svg viewBox="0 0 320 512"
@@ -289,7 +289,7 @@ export class PfV5Select extends LitElement {
     this.#combobox.multi = this.variant === 'typeaheadmulti' || this.variant === 'checkbox';
     this.#combobox.hostConnected();
     if (this.variant === 'checkbox') {
-      import('@patternfly/elements/pf-v5-badge/pf-v5-badge.js');
+      import('@patternfly/elements/pf-v6-badge/pf-v6-badge.js');
     }
   }
 
diff --git a/elements/pf-v5-spinner/README.md b/elements/pf-v5-spinner/README.md
deleted file mode 100644
index b915a948f5..0000000000
--- a/elements/pf-v5-spinner/README.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# PatternFly Elements Spinner
-     
-`<pf-v5-spinner>` is used to indicate to users that an action is in progress.
-
-Read more about Spinner in the [PatternFly Elements Spinner documentation](https://patternflyelements.org/components/spinner)
-
-##  Installation
-
-Load `<pf-v5-spinner>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
-```
-
-## Usage
-```html
-<pf-v5-spinner>Loading...</pf-v5-spinner>
-```
-
-### Size variations
-
-```html
-<pf-v5-spinner size="sm">Loading...</pf-v5-spinner>
-<pf-v5-spinner size="md">Loading...</pf-v5-spinner>
-<pf-v5-spinner size="lg">Loading...</pf-v5-spinner>
-<pf-v5-spinner size="xl">Loading...</pf-v5-spinner>
-```
-
-### Custom size
-
-```html
-<pf-v5-spinner diameter="80px">Loading...</pf-v5-spinner>
-```
-
diff --git a/elements/pf-v5-spinner/demo/diameter.html b/elements/pf-v5-spinner/demo/diameter.html
deleted file mode 100644
index a73e257c8a..0000000000
--- a/elements/pf-v5-spinner/demo/diameter.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<section>
-  <h3>Custom size</h3>
-  <pf-v5-spinner diameter="80px">Loading...</pf-v5-spinner>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
-  import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-spinner/demo/index.html b/elements/pf-v5-spinner/demo/index.html
deleted file mode 100644
index 21e42b03fd..0000000000
--- a/elements/pf-v5-spinner/demo/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<section>
-  <pf-v5-spinner>Loading...</pf-v5-spinner>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
-  import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-spinner/demo/size.html b/elements/pf-v5-spinner/demo/size.html
deleted file mode 100644
index 52fcd54998..0000000000
--- a/elements/pf-v5-spinner/demo/size.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<section>
-  <h3>Size variations</h3>
-  <pf-v5-spinner size="sm">Loading...</pf-v5-spinner>
-  <pf-v5-spinner size="md">Loading...</pf-v5-spinner>
-  <pf-v5-spinner size="lg">Loading...</pf-v5-spinner>
-  <pf-v5-spinner size="xl">Loading...</pf-v5-spinner>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
-  import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-spinner/docs/CHANGELOG.old.md b/elements/pf-v5-spinner/docs/CHANGELOG.old.md
deleted file mode 100644
index 7cdb62967b..0000000000
--- a/elements/pf-v5-spinner/docs/CHANGELOG.old.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# @patternfly/pfe-spinner
-
-## 2.0.0-next.6
-
-### Patch Changes
-
-- ddf052bd: Added BaseSpinner.js to exports
-- Updated dependencies [07ad1d3d]
-  - @patternfly/pfe-core@2.0.0-next.10
-
-## 2.0.0-next.5
-
-### Minor Changes
-
-- b7602c2c: BREAKING CHANGE:
-
-  Renames `<pfe-progress-indicator>` to `<pfe-spinner>` and changes it's HTML and
-  CSS APIs to more closely match PatternFly v4 design specs.
-
-  ```html
-  <!-- BEFORE -->
-  <pfe-progress-indicator indeterminate>Loading...</pfe-progress-indicator>
-  <!-- AFTER -->
-  <pfe-spinner>Loading...</pfe-spinner>
-  ```
-
-### Patch Changes
-
-- Updated dependencies [166ecee1]
-  - @patternfly/pfe-core@2.0.0-next.9
-
-## 2.0.0-next.4
-
-### Patch Changes
-
-- bfad8b4b: Updates dependencies
-- Updated dependencies [bfad8b4b]
-  - @patternfly/pfe-core@2.0.0-next.8
-
-## 2.0.0-next.3
-
-### Major Changes
-
-- 94a8eb9a: Removes `-Height` and `-Width` CSS custom properties in favour of `size`.
-
-  ```css
-  pfe-progress-indicator {
-    /* --pfe-progress-indicator--Height: 2rem; */
-    /* --pfe-progress-indicator--Width: 2rem; */
-    --pfe-progress-indicator-size: 2rem;
-  }
-  ```
-
-### Patch Changes
-
-- Updated dependencies [34ecd410]
-  - @patternfly/pfe-core@2.0.0-next.6
-
-## 2.0.0-next.2
-
-### Patch Changes
-
-- 6a2a0407: [View commit message here](https://gist.github.com/heyMP/200fc0b840690541475923facba393ab)
-- Updated dependencies [6a2a0407]
-  - @patternfly/pfe-core@2.0.0-next.4
-
-## 2.0.0-next.1
-
-### Patch Changes
-
-- 447b2d75: Remove `esbuild` export condition, as this anyways was a runtime error
-- Updated dependencies [447b2d75]
-  - @patternfly/pfe-core@2.0.0-next.3
-
-## 2.0.0-next.0
-
-### Major Changes
-
-- 47c03201: ## 🔥 Migrate to Lit
-
-  This release migrates `<pfe-progress-indicator>` to LitElement.
-
-  ### Breaking Changes
-
-  - Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle).
-    If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`
-
-  See [docs](https://patternflyelements.org/components/progress-indicator/) for more info
-
-### Patch Changes
-
-- Updated dependencies [e8788c72]
-  - @patternfly/pfe-core@2.0.0-next.0
diff --git a/elements/pf-v5-spinner/docs/pf-v5-spinner.md b/elements/pf-v5-spinner/docs/pf-v5-spinner.md
deleted file mode 100644
index 595494f714..0000000000
--- a/elements/pf-v5-spinner/docs/pf-v5-spinner.md
+++ /dev/null
@@ -1,40 +0,0 @@
-{% renderInstallation %} {% endrenderInstallation %}
-
-{% renderOverview %}
-  A spinner is used to indicate to users that an action is in progress.
-
-  <pf-v5-spinner>Loading...</pf-v5-spinner>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  ### Basic
-  {% htmlexample %}
-  <pf-v5-spinner>Loading...</pf-v5-spinner>
-  {% endhtmlexample %}
-  ### Size variations
-  {% htmlexample %}
-  <pf-v5-spinner size="sm">Loading...</pf-v5-spinner>
-  <pf-v5-spinner size="md">Loading...</pf-v5-spinner>
-  <pf-v5-spinner size="lg">Loading...</pf-v5-spinner>
-  <pf-v5-spinner size="xl">Loading...</pf-v5-spinner>
-  {% endhtmlexample %}
-
-  ### Custom size
-  {% htmlexample %}
-  <pf-v5-spinner diameter="80px">Loading...</pf-v5-spinner>
-  {% endhtmlexample %}
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderProperties %}{% endrenderProperties %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-spinner/docs/screenshot.png b/elements/pf-v5-spinner/docs/screenshot.png
deleted file mode 100644
index 73bac9b87f..0000000000
Binary files a/elements/pf-v5-spinner/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-spinner/pf-v5-spinner.css b/elements/pf-v5-spinner/pf-v5-spinner.css
deleted file mode 100644
index 7fe6fe2651..0000000000
--- a/elements/pf-v5-spinner/pf-v5-spinner.css
+++ /dev/null
@@ -1,99 +0,0 @@
-:host {
-  display: inline-block;
-  width: min-content;
-  min-height: 0;
-  aspect-ratio: 1 / 1;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-svg {
-  overflow: hidden;
-  /** Width for spinner */
-  width: var(--pf-v5-c-spinner--Width,
-    /** Diameter for spinner */
-    var(--pf-v5-c-spinner--diameter,
-      var(--pf-global--icon--FontSize--xl, 3.375rem)));
-  /** Height for spinner */
-  height: var(--pf-v5-c-spinner--Height,
-    var(--pf-v5-c-spinner--diameter,
-      var(--pf-global--icon--FontSize--xl, 3.375rem)));
-  animation:
-    pf-v5-c-spinner-animation-rotate
-    /** Animation duration for spinner */
-    calc(var(--pf-v5-c-spinner--AnimationDuration, 1.4s) * 2)
-    /** Animation timing function for spinner */
-    var(--pf-v5-c-spinner--AnimationTimingFunction, linear) infinite;
-}
-
-circle {
-  width: 100%;
-  height: 100%;
-  transform-origin: 50% 50%;
-  stroke-linecap: round;
-  stroke-dasharray: 283;
-  stroke-dashoffset: 280;
-  /** Color for spinner */
-  stroke: var(--pf-v5-c-spinner--Color, var(--pf-global--primary-color--100, #06c));
-  /** Stroke width for spinner */
-  stroke-width: var(--pf-v5-c-spinner--stroke-width, 10);
-  animation:
-    pf-v5-c-spinner-animation-dash
-    var(--pf-v5-c-spinner--AnimationDuration, 1.4s)
-    /** Path animation timing function for spinner */
-    var(--pf-v5-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
-}
-
-:host([size="sm"]) svg {
-  /** Diameter for small spinner */
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter,
-    var(--pf-global--icon--FontSize--sm, 0.625rem));
-}
-
-:host([size="md"]) svg {
-  /** Diameter for medium spinner */
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter,
-    var(--pf-global--icon--FontSize--md, 1.125rem));
-}
-
-:host([size="lg"]) svg {
-  /** Diameter for large spinner */
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter,
-    var(--pf-global--icon--FontSize--lg, 1.5rem));
-}
-
-:host([size="xl"]) svg {
-  /** Diameter for extra large spinner */
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter,
-    var(--pf-global--icon--FontSize--xl, 3.375rem));
-}
-
-@keyframes pf-v5-c-spinner-animation-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pf-v5-c-spinner-animation-dash {
-  0% {
-    stroke-dashoffset: 280;
-    transform: rotate(0);
-  }
-  15% {
-    /** Path stroke width for spinner */
-    stroke-width: calc(var(--pf-v5-c-spinner__path--StrokeWidth, 10) - 4);
-  }
-  40% {
-    stroke-dashoffset: 150;
-    stroke-dasharray: 220;
-  }
-  100% {
-    stroke-dashoffset: 280;
-    transform: rotate(720deg);
-  }
-}
diff --git a/elements/pf-v5-spinner/pf-v5-spinner.ts b/elements/pf-v5-spinner/pf-v5-spinner.ts
deleted file mode 100644
index 6e108ce929..0000000000
--- a/elements/pf-v5-spinner/pf-v5-spinner.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { property } from 'lit/decorators/property.js';
-
-import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
-
-import styles from './pf-v5-spinner.css';
-
-/**
- * A **spinner** is used to indicate to users that an action is in progress. For actions
- * that may take a long time, use a progress bar instead.
- * @alias Spinner
- */
-
-@customElement('pf-v5-spinner')
-export class PfV5Spinner extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  // eslint-disable-next-line no-unused-private-class-members
-  #internals = InternalsController.of(this, { role: 'progressbar' });
-
-  /** Preset sizes for the spinner */
-  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'xl';
-
-  /** Custom diameter of spinner set as CSS variable */
-  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;
-
-  override render(): TemplateResult<1> {
-    return html`
-      <svg viewBox="0 0 100 100"
-           style="${styleMap({ '--pf-v5-c-spinner--diameter': this.diameter })}">
-        <circle cx="50" cy="50" r="45" fill="none" />
-      </svg>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-spinner': PfV5Spinner;
-  }
-}
diff --git a/elements/pf-v5-spinner/test/pf-spinner.spec.ts b/elements/pf-v5-spinner/test/pf-spinner.spec.ts
deleted file mode 100644
index 991004ff54..0000000000
--- a/elements/pf-v5-spinner/test/pf-spinner.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { expect, html } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfV5Spinner } from '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
-
-describe('<pf-v5-spinner>', function() {
-  it('imperatively instantiates', function() {
-    expect(document.createElement('pf-v5-spinner')).to.be.an.instanceof(PfV5Spinner);
-  });
-
-  it('should upgrade', async function() {
-    const element = await createFixture<PfV5Spinner>(html`<pf-v5-spinner>Loading...</pf-v5-spinner>`);
-    expect(element, 'pf-v5-spinner should be an instance of PfeSpinner')
-        .to.be.an.instanceOf(customElements.get('pf-v5-spinner'))
-        .and
-        .to.be.an.instanceOf(PfV5Spinner);
-  });
-
-  it('should properly initialize the component', async function() {
-    const element = await createFixture<PfV5Spinner>(html`
-      <pf-v5-spinner>Loading...</pf-v5-spinner>
-    `);
-    expect(element.getAttribute('size')).to.equal('xl');
-  });
-
-  describe('basic usage', function() {
-    let element: PfV5Spinner;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Spinner>(html`<pf-v5-spinner>Loading...</pf-v5-spinner>`);
-    });
-    it('is accessible', async function() {
-      await expect(element).to.be.accessible();
-    });
-  });
-
-  describe('size attribute', function() {
-    let element: PfV5Spinner;
-
-    function convertRemToPixels(rem: `${number}rem`) {
-      const { fontSize } = getComputedStyle(document.documentElement);
-      return parseFloat(rem) * parseFloat(fontSize);
-    }
-
-    beforeEach(async function() {
-      element = await createFixture<PfV5Spinner>(html`
-        <pf-v5-spinner>Loading...</pf-v5-spinner>
-      `);
-    });
-
-    for (const [size, expected] of [
-      ['sm', '0.625rem'],
-      ['md', '1.125rem'],
-      ['lg', '1.5rem'],
-      ['xl', '3.375rem'],
-    ] as const) {
-      it(size, async function() {
-        element.size = size;
-        await element.updateComplete;
-        expect(element.offsetWidth).to.equal(convertRemToPixels(expected));
-      });
-    }
-  });
-
-  describe('diameter attribute', function() {
-    it('sets the element diameter', async function() {
-      const customDiameterValue = 80;
-      const element = await createFixture<PfV5Spinner>(html`
-        <pf-v5-spinner diameter="${customDiameterValue}px">Loading...</pf-v5-spinner>
-      `);
-
-      expect(element.offsetWidth).to.equal(customDiameterValue);
-    });
-  });
-});
diff --git a/elements/pf-v5-switch/README.md b/elements/pf-v5-switch/README.md
deleted file mode 100644
index 88c6f973b0..0000000000
--- a/elements/pf-v5-switch/README.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# PatternFly Elements Switch
-     
-`<pf-v5-switch>` is a switch that toggles the state of a setting (between on and 
-off). Switches provide a more explicit, visible representation on a setting.
-
-Read more about Switch in the [PatternFly Elements Switch documentation](https://patternflyelements.org/components/switch)
-
-##  Installation
-
-Load `<pf-v5-switch>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-switch/pf-v5-switch.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-```
-
-## Usage
-```html
-<pf-v5-switch id="switch"></pf-v5-switch>
-<label for="switch" data-state="on">Message when on</label>
-<label for="switch" data-state="off" hidden>Message when off</label>
-```
-
-### Form Associated
-
-`<pf-v5-switch>` is a form-associated custom element. That means that it can
-participate in HTML forms just like a native `<input>`. For example, if you add
-the `name` attribute, or the `id` attribute, the element will appear in the
-FormData object. For example, if you add the `name` attribute, or the `id`
-attribute, the element will appear in the `FormData` object.
-
-```html
-<form>
-  <label> Dark Mode
-    <pf-v5-switch name="dark"></pf-v5-switch>
-  </label>
-  <script>
-  document.currentScript.closest('form').addEventListener('submit', function() {
-    console.log(this.elements.dark) // <pf-v5-switch>
-  })
-  </script>
-</form>
-```
-
-
-### Without label
-
-```html
-<pf-v5-switch></pf-v5-switch>
-```
-
-### Checked with label
-
-```html
-<pf-v5-switch show-check-icon></pf-v5-switch>
-<label for="switch" data-state="on">Message when on</label>
-<label for="switch" data-state="off" hidden>Message when off</label>
-```
-
-### Disabled Switches
-
-```html
-<form>
-  <fieldset>
-    <legend>Checked and Disabled</legend>
-    <pf-v5-switch id="checked-disabled" checked disabled></pf-v5-switch>
-    <label for="checked-disabled" data-state="on">Message when on</label>
-    <label for="checked-disabled" data-state="off">Message when off</label>
-  </fieldset>
-
-  <fieldset>
-    <pf-v5-switch id="disabled" disabled></pf-v5-switch>
-    <label for="disabled" data-state="on">Message when on</label>
-    <label for="disabled" data-state="off">Message when off</label>
-  </fieldset>
-</form>
-```
diff --git a/elements/pf-v5-switch/demo/checked.html b/elements/pf-v5-switch/demo/checked.html
deleted file mode 100644
index e8030bdc47..0000000000
--- a/elements/pf-v5-switch/demo/checked.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Checked with label</legend>
-      <pf-v5-switch id="checked" checked show-check-icon></pf-v5-switch>
-      <label for="checked">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-    &:has(#reversed) {
-      grid-template-columns: max-content min-content;
-    }
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/disabled.html b/elements/pf-v5-switch/demo/disabled.html
deleted file mode 100644
index e98fb3150a..0000000000
--- a/elements/pf-v5-switch/demo/disabled.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Checked and Disabled</legend>
-      <pf-v5-switch id="checked-disabled" checked disabled></pf-v5-switch>
-      <label for="checked-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-    <fieldset>
-      <pf-v5-switch id="default-disabled" disabled></pf-v5-switch>
-      <label for="default-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-    &:has(#reversed) {
-      grid-template-columns: max-content min-content;
-    }
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/index.html b/elements/pf-v5-switch/demo/index.html
deleted file mode 100644
index 405dcee752..0000000000
--- a/elements/pf-v5-switch/demo/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<section>
-  <p>A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.</p>
-  <form>
-    <fieldset id="fieldset-a">
-      <legend>Option A</legend>
-      <pf-v5-switch id="a" checked></pf-v5-switch>
-      <label for="a">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-
-    <fieldset id="fieldset-b">
-      <legend>Option B (no explicit label)</legend>
-      <pf-v5-switch id="b" checked></pf-v5-switch>
-    </fieldset>
-
-    <fieldset id="form-disabled">
-      <legend>Form Disabled State</legend>
-      <pf-v5-switch id="disable-a" aria-controls="fieldset-a"></pf-v5-switch>
-      <label for="disable-a">
-        <span data-state="on">Fieldset A is disabled</span>
-        <span data-state="off" hidden>Fieldset A is enabled</span>
-      </label>
-
-      <pf-v5-switch id="disable-a-switch" aria-controls="a"></pf-v5-switch>
-      <label for="disable-a-switch">
-        <span data-state="on">Fieldset A is disabled</span>
-        <span data-state="off" hidden>Fieldset A is enabled</span>
-      </label>
-
-      <pf-v5-switch id="disable-b" aria-controls="fieldset-b"></pf-v5-switch>
-      <label for="disable-b">
-        <span data-state="on">Fieldset B is disabled</span>
-        <span data-state="off" hidden>Fieldset B is enabled</span>
-      </label>
-
-      <pf-v5-switch id="disable-b-switch" aria-controls="b"></pf-v5-switch>
-      <label for="disable-b-switch">
-        <span data-state="on">Switch B is disabled</span>
-        <span data-state="off" hidden>Switch B is enabled</span>
-      </label>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-
-  document.getElementById('form-disabled').addEventListener('change', /** @this{HTMLFieldsetElement}*/function(event) {
-    const controls = document.getElementById(event.target.getAttribute('aria-controls'));
-    controls.toggleAttribute('disabled', event.target.checked);
-  });
-</script>
-
-<style>
-  section {
-    margin: 2rem;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-  }
-
-  fieldset:has(#reversed) {
-    grid-template-columns: max-content min-content;
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/nested-in-label.html b/elements/pf-v5-switch/demo/nested-in-label.html
deleted file mode 100644
index 82e4754267..0000000000
--- a/elements/pf-v5-switch/demo/nested-in-label.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<section>
-  <form id="nested-label">
-    <fieldset>
-      <legend>Nested in a label</legend>
-      <label> Status
-        <pf-v5-switch name="status"></pf-v5-switch>
-      </label>
-      <pf-v5-button type="submit">Submit</pf-v5-button>
-      <output>Submit to read status</output>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-
-  document.getElementById('nested-label').addEventListener('submit', /** @this {HTMLFormElement} */function(event) {
-    event.preventDefault();
-    this.querySelector('output').textContent = `Dark mode ${this.elements.status.checked ? 'on' : 'off'}`;
-  });
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-    &:has(#reversed) {
-      grid-template-columns: max-content min-content;
-    }
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-
-  #nested-label fieldset {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  #nested-label output {
-    width: 100%;
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/reversed.html b/elements/pf-v5-switch/demo/reversed.html
deleted file mode 100644
index 555faa3aa1..0000000000
--- a/elements/pf-v5-switch/demo/reversed.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Reversed</legend>
-      <label for="reversed">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-      <pf-v5-switch id="reversed" reversed></pf-v5-switch>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-</script>
-
-<style>
-  section {
-    margin: 2rem;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-  }
-
-  fieldset:has(#reversed) {
-    grid-template-columns: max-content min-content;
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/without-label.html b/elements/pf-v5-switch/demo/without-label.html
deleted file mode 100644
index ef89b2986b..0000000000
--- a/elements/pf-v5-switch/demo/without-label.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Without label</legend>
-      <pf-v5-switch accessible-label="Toggle option" checked></pf-v5-switch>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-</script>
-
-<style>
-  section {
-    margin: 2rem;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-  }
-
-  fieldset:has(#reversed) {
-    grid-template-columns: max-content min-content;
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/docs/CHANGELOG.old.md b/elements/pf-v5-switch/docs/CHANGELOG.old.md
deleted file mode 100644
index a3024c9e08..0000000000
--- a/elements/pf-v5-switch/docs/CHANGELOG.old.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# @patternfly/pfe-switch
-
-## 2.0.0-next.0
-
-### Major Changes
-
-- 4400866a: Added `<pfe-switch>`, a control that toggles the state of a setting between on and off.
-  Switches provide a more explicit, visible representation on a setting than checkboxes.
-
-  ```html
-  <form>
-    <pfe-switch id="color-scheme-toggle"></pfe-switch>
-    <label for="color-scheme-toggle" data-state="on">Dark Mode</label>
-    <label for="color-scheme-toggle" data-state="off" hidden>Light Mode</label>
-  </form>
-  ```
-
-### Patch Changes
-
-- dc34cf51: Prevented clicks and other interactions when the switch is disabled
diff --git a/elements/pf-v5-switch/docs/pf-v5-switch.md b/elements/pf-v5-switch/docs/pf-v5-switch.md
deleted file mode 100644
index b65872d7e3..0000000000
--- a/elements/pf-v5-switch/docs/pf-v5-switch.md
+++ /dev/null
@@ -1,70 +0,0 @@
-{% renderInstallation %} {% endrenderInstallation %}
-
-{% renderOverview %}
-  A switch toggles the state of a setting (between on and off). Switches 
-  provide a more explicit, visible representation on a setting.
-
-  <pf-v5-switch id="overview-switch" checked></pf-v5-switch>
-  <label for="overview-switch">
-    <span data-state="on">Message when on</span>
-    <span data-state="off" hidden>Message when off</span>
-  </label>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  ### Basic
-  {% htmlexample %}
-  <pf-v5-switch id="color-scheme-toggle"></pf-v5-switch>
-  <label for="color-scheme-toggle">
-    <span data-state="on">Message when on</span>
-    <span data-state="off" hidden>Message when off</span>
-  </label>  
-  {% endhtmlexample %}
-
-  ### Without label
-  {% htmlexample %}
-  <pf-v5-switch></pf-v5-switch>
-  {% endhtmlexample %}
-
-  ### Checked with label
-  {% htmlexample %}
-  <pf-v5-switch id="checked" checked show-check-icon></pf-v5-switch>
-  <label for="checked">
-    <span data-state="on">Message when on</span>
-    <span data-state="off" hidden>Message when off</span>
-  </label>    
-  {% endhtmlexample %}
-
-  ### Disabled
-  {% htmlexample %}
-  <form>
-    <fieldset>
-      <legend>Checked and Disabled</legend>
-      <pf-v5-switch id="checked-disabled" checked disabled></pf-v5-switch>
-      <label for="checked-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>      
-    </fieldset>
-    <fieldset>
-      <pf-v5-switch id="default-disabled" disabled></pf-v5-switch>
-      <label for="default-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>        
-    </fieldset>
-  </form>
-  {% endhtmlexample %}
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-switch/docs/screenshot.png b/elements/pf-v5-switch/docs/screenshot.png
deleted file mode 100644
index b38283146d..0000000000
Binary files a/elements/pf-v5-switch/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-switch/pf-v5-switch.css b/elements/pf-v5-switch/pf-v5-switch.css
deleted file mode 100644
index 5f44607921..0000000000
--- a/elements/pf-v5-switch/pf-v5-switch.css
+++ /dev/null
@@ -1,154 +0,0 @@
-:host {
-  display: inline-block;
-  outline: none;
-}
-
-svg {
-  fill: currentcolor;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-:host([checked]) #container {
-  /** Color of the label when switch is checked */
-  color: var(--pf-v5-c-switch__input--checked__label--Color,
-    var(--pf-global--Color--dark-100, #151515));
-  /** Background color of the toggle when switch is checked */
-  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor,
-    var(--pf-global--primary-color--100, #06c));
-}
-
-:host([checked]) #container::before {
-  /** Translation of the toggle knob when checked */
-  translate: var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX,
-    calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)));
-}
-
-:host(:is(:focus,:focus-within)) #container {
-  /** Focus outline width */
-  outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth,
-    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor,
-      var(--pf-global--primary-color--100, #06c));
-  /** Focus outline offset */
-  outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset,
-    var(--pf-global--spacer--sm, 0.5rem));
-}
-
-:host(:disabled) {
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-:host(:disabled) #container {
-  cursor: not-allowed;
-
-  /** Color of the label when switch is disabled */
-  color: var(--pf-v5-c-switch__input--disabled__label--Color,
-    var(--pf-global--disabled-color--100, #6a6e73));
-  /** Background color when switch is disabled */
-  background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor,
-    var(--pf-global--disabled-color--200, #d2d2d2));
-}
-
-:host(:disabled) #container::before {
-  /** Background color of the toggle knob when disabled */
-  background-color: var(--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor,
-    var(--pf-global--palette--black-150, #f5f5f5));
-}
-
-:host([checked]:disabled) #container::before {
-  translate: var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX,
-    calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)));
-}
-
-:host(:disabled:focus-within) #container {
-  outline: none;
-}
-
-#container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  /** Width of the toggle */
-  width: var(--pf-v5-c-switch__toggle--Width,
-    calc(var(--pf-v5-c-switch__toggle--Height,
-      calc(var(--pf-v5-c-switch--FontSize,
-        var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-v5-c-switch__toggle--before--Width,
-            calc(var(--pf-v5-c-switch--FontSize,
-              var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)))));
-  height: var(--pf-v5-c-switch__toggle--Height,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-        var(--pf-global--LineHeight--md, 1.5))));
-  /** Background color of the toggle */
-  background-color: var(--pf-v5-c-switch__toggle--BackgroundColor,
-    var(--pf-global--palette--black-500, #8a8d90));
-  /** Border radius of the toggle */
-  border-radius: var(--pf-v5-c-switch__toggle--BorderRadius,
-    var(--pf-v5-c-switch__toggle--Height, calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-        var(--pf-global--LineHeight--md, 1.5)))));
-}
-
-#container::before {
-  position: absolute;
-  display: block;
-  content: "";
-  /** Top position of the toggle knob */
-  top: var(--pf-v5-c-switch__toggle--before--Top,
-    calc((var(--pf-v5-c-switch__toggle--Height,
-      calc(var(--pf-v5-c-switch--FontSize,
-        var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-v5-c-switch__toggle--before--Height,
-            var(--pf-v5-c-switch__toggle--before--Width,
-              calc(var(--pf-v5-c-switch--FontSize,
-                var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));
-  /** Left position of the toggle knob */
-  left: var(--pf-v5-c-switch__toggle--before--Left,
-    var(--pf-v5-c-switch__toggle--before--Top,
-      calc((var(--pf-v5-c-switch__toggle--Height,
-        calc(var(--pf-v5-c-switch--FontSize,
-          var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-v5-c-switch__toggle--before--Height,
-              var(--pf-v5-c-switch__toggle--before--Width,
-                calc(var(--pf-v5-c-switch--FontSize,
-                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));
-  /** Width of the toggle knob */
-  width: var(--pf-v5-c-switch__toggle--before--Width,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)));
-  /** Height of the toggle knob */
-  height: var(--pf-v5-c-switch__toggle--before--Height,
-    var(--pf-v5-c-switch__toggle--before--Width,
-      calc(var(--pf-v5-c-switch--FontSize,
-        var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem))));
-  /** Background color of the toggle knob */
-  background-color: var(--pf-v5-c-switch__toggle--before--backgroundcolor,
-    var(--pf-global--backgroundcolor--100, #fff));
-  /** Border radius of the toggle knob */
-  border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius,
-    var(--pf-global--BorderRadius--lg, 30em));
-  /** Box shadow of the toggle knob */
-  box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow,
-    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
-  /** Transition of the toggle knob */
-  transition: var(--pf-v5-c-switch__toggle--before--Transition,
-    var(--pf-v5-c-switch__toggle--before--Transition, translate .25s ease 0s));
-}
-
-svg {
-  /** Horizontal margin of the toggle icon */
-  margin-inline: var(--pf-v5-c-switch__toggle-icon--Left,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * .4));
-  /** Font size of the toggle icon */
-  font-size: var(--pf-v5-c-switch__toggle-icon--FontSize,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * .625));
-  /** Color of the toggle icon */
-  color: var(--pf-v5-c-switch__toggle-icon--Color,
-    var(--pf-global--Color--light-100, #fff));
-}
diff --git a/elements/pf-v5-switch/pf-v5-switch.ts b/elements/pf-v5-switch/pf-v5-switch.ts
deleted file mode 100644
index c440dc5cf4..0000000000
--- a/elements/pf-v5-switch/pf-v5-switch.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { property } from 'lit/decorators/property.js';
-
-import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
-
-import styles from './pf-v5-switch.css';
-
-/**
- * A **switch** toggles the state of a setting (between on and off). Switches and
- * checkboxes can often be used interchangeably, but the switch provides a more
- * explicit, visible representation on a setting.
- * @alias Switch
- * @fires {Event} change - Fires when the switch selection changes.
- */
-
-@customElement('pf-v5-switch')
-export class PfV5Switch extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  static readonly formAssociated = true;
-
-  declare shadowRoot: ShadowRoot;
-
-  #internals = InternalsController.of(this, { role: 'switch' });
-
-  /** @deprecated use `accessible-label` instead */
-  @property({ reflect: true }) label?: string;
-
-  /**
-   * Accessible label for the switch when there is no associated `<label>` element.
-   * Update this value based on the checked state to communicate the meaning of
-   * each state to assistive technology users, e.g. "Wi-Fi on" / "Wi-Fi off".
-   */
-  @property({ reflect: true, attribute: 'accessible-label' }) accessibleLabel?: string;
-
-  /** Flag to show if the switch has a check icon. */
-  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;
-
-  /** Flag to show if the switch is checked. */
-  @property({ reflect: true, type: Boolean }) checked = false;
-
-  /** Flag to show if the switch is disabled. */
-  @property({ reflect: true, type: Boolean }) disabled = false;
-
-  get labels(): NodeListOf<HTMLLabelElement> {
-    return this.#internals.labels as NodeListOf<HTMLLabelElement>;
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.tabIndex = 0;
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keyup', this.#onKeyup);
-    this.addEventListener('keydown', this.#onKeydown);
-    this.#updateLabels();
-  }
-
-  formDisabledCallback(disabled: boolean): void {
-    this.disabled = disabled;
-    this.requestUpdate();
-  }
-
-  override willUpdate(): void {
-    this.#internals.ariaChecked = String(!!this.checked);
-    this.#internals.ariaDisabled = String(!!this.disabled);
-    this.#internals.ariaLabel = this.accessibleLabel || this.label || null;
-  }
-
-  override render(): TemplateResult<1> {
-    return html`
-      <div id="container">
-        <svg id="toggle"
-             role="presentation"
-             fill="currentColor"
-             height="1em"
-             width="1em"
-             viewBox="0 0 512 512"
-             ?hidden=${!this.showCheckIcon}>
-          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
-        </svg>
-      </div>
-    `;
-  }
-
-  #onClick(event: Event) {
-    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label
-    const { originalTarget, explicitOriginalTarget } = event;
-    if (explicitOriginalTarget) {
-      let labels: HTMLLabelElement[];
-      if (originalTarget === event.target
-          && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)
-          && labels.includes(this.closest('label') as HTMLLabelElement)) {
-        return;
-      }
-    }
-    this.#toggle();
-  }
-
-  #onKeyup(event: KeyboardEvent) {
-    switch (event.key) {
-      case ' ':
-      case 'Enter':
-        event.preventDefault();
-        this.#toggle();
-    }
-  }
-
-  #onKeydown(event: KeyboardEvent) {
-    if (event.key === ' ') {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
-
-  #toggle() {
-    if (!this.disabled) {
-      this.checked = !this.checked;
-      this.#updateLabels();
-      this.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-  }
-
-  #updateLabels() {
-    const labelState = this.checked ? 'on' : 'off';
-    this.labels.forEach(label => {
-      const states = label.querySelectorAll<HTMLElement>('[data-state]');
-      states.forEach(state => {
-        if (state) {
-          state.hidden = state.dataset.state !== labelState;
-        }
-      });
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-switch': PfV5Switch;
-  }
-}
diff --git a/elements/pf-v5-switch/test/pf-switch.spec.ts b/elements/pf-v5-switch/test/pf-switch.spec.ts
deleted file mode 100644
index 176a733b38..0000000000
--- a/elements/pf-v5-switch/test/pf-switch.spec.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-import { expect, html, nextFrame } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-
-import { PfV5Switch } from '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-
-describe('<pf-v5-switch>', function() {
-  it('imperatively instantiates', function() {
-    expect(document.createElement('pf-v5-switch')).to.be.an.instanceof(PfV5Switch);
-  });
-
-  describe('simply instantiating', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      const container = await createFixture<PfV5Switch>(html`
-        <div>
-          <pf-v5-switch></pf-v5-switch>
-        </div>
-      `);
-      element = container.querySelector('pf-v5-switch')!;
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-    });
-    it('should upgrade', async function() {
-      const klass = customElements.get('pf-v5-switch');
-      expect(element)
-          .to.be.an.instanceOf(klass)
-          .and
-          .to.be.an.instanceOf(PfV5Switch);
-    });
-    it('has accessible role', function() {
-      expect(snapshot.role).to.equal('switch');
-    });
-    it('has accessible checked field', function() {
-      expect(snapshot.role).to.equal('switch');
-    });
-    it('requires accessible name', function() {
-      // Double negative - this would fail an accessibility audit,
-      // but that failure would be correct, because the template instantiated
-      // in this test's beforeeach hook does not have an accessible name
-      expect(snapshot.name).to.not.be.ok;
-    });
-  });
-
-  describe('with accessible-label attribute', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch accessible-label="Dark Mode"></pf-v5-switch>
-      `);
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-    });
-    it('has an accessible name from accessible-label', function() {
-      expect(snapshot.name).to.equal('Dark Mode');
-    });
-    it('keeps the same accessible name regardless of checked state', async function() {
-      element.click();
-      await element.updateComplete;
-      await nextFrame();
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-      expect(snapshot.name).to.equal('Dark Mode');
-    });
-  });
-
-  describe('with labels for on and off state', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      const container = await createFixture<PfV5Switch>(html`
-        <div>
-          <pf-v5-switch id="switch"></pf-v5-switch>
-          <label for="switch">
-            <span data-state="on">Message when on</span>
-            <span data-state="off" hidden>Message when off</span>
-          </label>
-        </div>
-        `);
-      element = container.querySelector('pf-v5-switch')!;
-      snapshot = await a11ySnapshot({ selector: '#switch' });
-    });
-
-    it('is accessible', function() {
-      expect(snapshot.role).to.equal('switch');
-      expect(snapshot.name).to.be.ok;
-      expect(snapshot.checked).to.be.false;
-    });
-
-    it('should show the label for the unchecked state', function() {
-      expect(snapshot.name).to.equal('Message when off');
-    });
-
-    describe('clicking the switch', function() {
-      beforeEach(async function() {
-        element.click();
-        await element.updateComplete;
-        await nextFrame();
-        snapshot = await a11ySnapshot({ selector: '#switch' });
-      });
-      it('should be checked', function() {
-        expect(element.checked).to.be.true;
-        expect(snapshot.checked).to.be.true;
-      });
-      it('should show the label for the checked state', function() {
-        expect(snapshot.name).to.equal('Message when on');
-      });
-    });
-  });
-
-  describe('when checked attr is present', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch id="switch" checked></pf-v5-switch>
-      `);
-
-      await element.updateComplete;
-      await nextFrame();
-      snapshot = await a11ySnapshot({ selector: '#switch' });
-    });
-
-    it('should be checked', function() {
-      expect(element.checked).to.be.true;
-      expect(snapshot.checked).to.be.true;
-    });
-  });
-
-  describe('when checked attr is not present', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch id="switch"></pf-v5-switch>
-      `);
-
-      await element.updateComplete;
-      await nextFrame();
-      snapshot = await a11ySnapshot({ selector: '#switch' });
-    });
-
-    it('should be checked', function() {
-      expect(element.checked).to.be.false;
-      expect(snapshot.checked).to.be.false;
-    });
-  });
-
-
-  describe('when checked and show-check-icon attrs are present', function() {
-    let element: PfV5Switch;
-    beforeEach(async function() {
-      const container = await createFixture<PfV5Switch>(html`
-        <div>
-          <pf-v5-switch id="switch" show-check-icon checked></pf-v5-switch>
-          <label for="switch">
-            <span data-state="on">Message when on</span>
-            <span data-state="off" hidden>Message when off</span>
-          </label>
-        </div>
-      `);
-      element = container.querySelector('pf-v5-switch')!;
-    });
-    it('should display a check icon', async function() {
-      // TODO: can we test this without inspecting the private shadowRoot?
-      const svg = element.shadowRoot.querySelector('svg');
-      expect(svg).to.be.ok;
-      expect(svg?.hasAttribute('hidden')).to.be.false;
-    });
-  });
-
-  describe('when checked and show-check-icon attrs are present', function() {
-    let element: PfV5Switch;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch id="switch" show-check-icon checked></pf-v5-switch>
-        <label for="switch">
-          <span data-state="on">Message when on</span>
-          <span data-state="off" hidden>Message when off</span>
-        </label>
-      `);
-    });
-    it('should display a check icon', async function() {
-      // TODO: can we test this without inspecting the private shadowRoot?
-      const svg = element.shadowRoot.querySelector('svg');
-      expect(svg).to.be.ok;
-      expect(svg?.hasAttribute('hidden')).to.be.false;
-    });
-  });
-
-  describe('when nested inside a label element', function() {
-    let label: HTMLLabelElement;
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      label = await createFixture<HTMLLabelElement>(html`
-        <label>
-          <span>Dark Mode</span>
-          <pf-v5-switch id="switch"></pf-v5-switch>
-        </label>
-      `);
-      element = label.querySelector('pf-v5-switch')!;
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-    });
-    it('does not hide label', function() {
-      expect(label.hidden).to.be.false;
-    });
-    it('has an accessible name', function() {
-      expect(snapshot.name).to.equal('Dark Mode');
-    });
-    describe('clicking the label', function() {
-      beforeEach(function() {
-        label.click();
-      });
-      it('toggles the state', function() {
-        expect(element.checked).to.be.true;
-      });
-    });
-    describe('clicking the switch', function() {
-      beforeEach(function() {
-        element.click();
-      });
-      it('toggles the state', function() {
-        expect(element.checked).to.be.true;
-      });
-    });
-  });
-
-  // TODO: test keyboard a11y with wtr sendKeys
-});
diff --git a/elements/pf-v5-table/docs/pf-v5-table.md b/elements/pf-v5-table/docs/pf-v5-table.md
index f5d4bd31b1..e2ca8c3cfe 100644
--- a/elements/pf-v5-table/docs/pf-v5-table.md
+++ b/elements/pf-v5-table/docs/pf-v5-table.md
@@ -1,8 +1,9 @@
-<pf-v5-banner id="beta-table" variant="warning" icon="exclamation-triangle" sticky>
+<pf-v6-banner id="beta-table" status="warning" sticky>
+  <span class="pf-v6-screen-reader">Warning:</span>
   This is an initial release, with a subset of upstream
   PatternFly's features.
   APIs can be expected to change.
-</pf-v5-banner>
+</pf-v6-banner>
 
 <style>
 #beta-table {
diff --git a/elements/pf-v5-tabs/demo/box.html b/elements/pf-v5-tabs/demo/box.html
index 7ab75da55d..3882b770cc 100644
--- a/elements/pf-v5-tabs/demo/box.html
+++ b/elements/pf-v5-tabs/demo/box.html
@@ -14,13 +14,13 @@
     Box Type:
     <label for="toggle-variant" data-state="on">Dark</label>
     <label for="toggle-variant" data-state="off">Light</label>
-    <pf-v5-switch id="toggle-variant"></pf-v5-switch>
+    <pf-v6-switch id="toggle-variant"></pf-v6-switch>
   </form>
 </section>
 
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 
   document.getElementById('toggle-variant').addEventListener('change', function(event) {
diff --git a/elements/pf-v5-tabs/demo/inset.html b/elements/pf-v5-tabs/demo/inset.html
index 2f38a3a481..8a84e0c94e 100644
--- a/elements/pf-v5-tabs/demo/inset.html
+++ b/elements/pf-v5-tabs/demo/inset.html
@@ -23,7 +23,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 
   const inset = document.querySelector('#inset');
diff --git a/elements/pf-v5-tabs/demo/overflow.html b/elements/pf-v5-tabs/demo/overflow.html
index 2a80262c86..599608b07b 100644
--- a/elements/pf-v5-tabs/demo/overflow.html
+++ b/elements/pf-v5-tabs/demo/overflow.html
@@ -18,13 +18,13 @@
     Box variant:
     <label for="toggle-resize" data-state="on">Dark</label>
     <label for="toggle-resize" data-state="off">None</label>
-    <pf-v5-switch id="toggle-resize"></pf-v5-switch>
+    <pf-v6-switch id="toggle-resize"></pf-v6-switch>
   </form>
 </section>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
   const tabs = document.getElementById('overflow');
   const toggle = document.getElementById('toggle-resize');
diff --git a/elements/pf-v5-tabs/demo/vertical.html b/elements/pf-v5-tabs/demo/vertical.html
index 673b1a6bcf..75ab4ee600 100644
--- a/elements/pf-v5-tabs/demo/vertical.html
+++ b/elements/pf-v5-tabs/demo/vertical.html
@@ -14,12 +14,12 @@
     Box variant:
     <label for="toggle-vertical" data-state="on">Dark</label>
     <label for="toggle-vertical" data-state="off">None</label>
-    <pf-v5-switch id="toggle-vertical"></pf-v5-switch>
+    <pf-v6-switch id="toggle-vertical"></pf-v6-switch>
   </form>
 </div>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 
   const toggle = document.getElementById('toggle-vertical');
diff --git a/elements/pf-v5-text-input/demo/disabled.html b/elements/pf-v5-text-input/demo/disabled.html
index baa3c06125..5b9064e573 100644
--- a/elements/pf-v5-text-input/demo/disabled.html
+++ b/elements/pf-v5-text-input/demo/disabled.html
@@ -9,12 +9,12 @@
 </fieldset>
 
 <label>Disable the fieldset
-  <pf-v5-switch id="disabled-fieldset-switch" checked></pf-v5-switch>
+  <pf-v6-switch id="disabled-fieldset-switch" checked></pf-v6-switch>
 </label>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   document.getElementById('disabled-fieldset-switch')
     .addEventListener('change', function() {
       document.getElementById('disablable-fieldset').disabled = this.checked;
diff --git a/elements/pf-v5-text-input/demo/kitchen-sink.html b/elements/pf-v5-text-input/demo/kitchen-sink.html
index bfe72f71dd..8e76175a32 100644
--- a/elements/pf-v5-text-input/demo/kitchen-sink.html
+++ b/elements/pf-v5-text-input/demo/kitchen-sink.html
@@ -26,7 +26,7 @@
                  readonly
                  value="read only text input example"></pf-v5-text-input>
   <label>
-    <pf-v5-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v5-switch>
+    <pf-v6-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v6-switch>
     Plain read only variant
   </label>
 </fieldset>
@@ -70,7 +70,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   await customElements.whenDefined('pf-v5-text-input');
   for (const input of document.querySelectorAll('pf-v5-text-input[required]')) {
     await input.updateComplete;
diff --git a/elements/pf-v5-text-input/demo/read-only.html b/elements/pf-v5-text-input/demo/read-only.html
index fcee62c732..fdb42ce256 100644
--- a/elements/pf-v5-text-input/demo/read-only.html
+++ b/elements/pf-v5-text-input/demo/read-only.html
@@ -5,14 +5,14 @@
                  readonly
                  value="read only text input example"></pf-v5-text-input>
   <label>
-    <pf-v5-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v5-switch>
+    <pf-v6-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v6-switch>
     Plain read only variant
   </label>
 </fieldset>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 </script>
 
 <link rel="stylesheet" href="demo.css">
diff --git a/elements/pf-v5-text-input/demo/validation.html b/elements/pf-v5-text-input/demo/validation.html
index a33abdab7c..a710e8ea87 100644
--- a/elements/pf-v5-text-input/demo/validation.html
+++ b/elements/pf-v5-text-input/demo/validation.html
@@ -1,6 +1,6 @@
 <fieldset>
   <legend>Invalid</legend>
-  <label>Validate on Blur? <pf-v5-switch id="onblur"></pf-v5-switch></label>
+  <label>Validate on Blur? <pf-v6-switch id="onblur"></pf-v6-switch></label>
   <pf-v5-text-input id="validated"
                  error-text="Enter a three digit integer"
                  pattern="\d{3}"
@@ -10,7 +10,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
   const onblur = document.getElementById('onblur');
   const validated = document.getElementById('validated');
diff --git a/elements/pf-v5-timestamp/README.md b/elements/pf-v5-timestamp/README.md
deleted file mode 100644
index 1e39721e09..0000000000
--- a/elements/pf-v5-timestamp/README.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# PatternFly Elements Timestamp
-     
-A timestamp provides consistent formats for displaying date and time values.
-
-Read more about Datetime in the [PatternFly Elements Timestamp documentation](https://patternflyelements.org/components/timestamp)
-
-##  Installation
-
-Load `<pf-v5-timestamp>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-```
-
-## Usage
-
-### Just the date: January 2, 2006
-```html
-<pf-v5-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  date-format="long">
-</pf-v5-timestamp>
-```
-
-### With time: Monday, January 2, 2006 at 3:04:05 PM EST
-```html
-<pf-v5-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  date-format="full"
-  time-format="long">
-</pf-v5-timestamp>
-```
-
-### With an en-GB locale: Monday, 2 January 2006 at 15:04:05 GMT-5
-You can use any locale here.
-```html
-<pf-v5-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  date-format="full"
-  time-format="long"
-  locale="en-GB">
-</pf-v5-timestamp>
-```
-
-### Relative time: 17 years ago
-```html
-<pf-v5-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  relative>
-</pf-v5-timestamp>
-```
-
diff --git a/elements/pf-v5-timestamp/demo/basic-formats.html b/elements/pf-v5-timestamp/demo/basic-formats.html
deleted file mode 100644
index 8486314b15..0000000000
--- a/elements/pf-v5-timestamp/demo/basic-formats.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<section>
-  <p><pf-v5-timestamp date-format="full" time-format="full"></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date-format="full"></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp time-format="full"></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date-format="medium" time-format="short" display-suffix="US Eastern"></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date-format="full" locale="es"></pf-v5-timestamp></p>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-timestamp/demo/custom-format.html b/elements/pf-v5-timestamp/demo/custom-format.html
deleted file mode 100644
index 094a64fc00..0000000000
--- a/elements/pf-v5-timestamp/demo/custom-format.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<section>
-  <p><pf-v5-timestamp id="timestamp-custom-format" date="Sat Jan 01 2022 00:00:00 GMT-0500"></pf-v5-timestamp></p>
-
-  <script>
-  document.getElementById('timestamp-custom-format').customFormat = {
-    year: '2-digit',
-    month: 'short',
-    weekday: 'short',
-    day: 'numeric',
-    hour: 'numeric'
-  };
-  </script>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-timestamp/demo/custom-tooltip.html b/elements/pf-v5-timestamp/demo/custom-tooltip.html
deleted file mode 100644
index 8cb5b91417..0000000000
--- a/elements/pf-v5-timestamp/demo/custom-tooltip.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<section>
-  <p>
-    <pf-v5-tooltip>
-      <pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
-      <span slot="content">Last updated on <pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" date-format="long" time-format="short" utc></pf-v5-timestamp></span>
-    </pf-v5-tooltip>
-  </p>
-  <p>
-    <pf-v5-tooltip>
-      Halloween
-      <pf-v5-timestamp slot="content" date="Mon Oct 31 2022 00:00:00 GMT-0400 (Eastern Daylight Time)" date-format="medium"></pf-v5-timestamp>
-    </pf-v5-tooltip>
-  </p>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-  import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-timestamp/demo/index.html b/elements/pf-v5-timestamp/demo/index.html
deleted file mode 100644
index 1b50e9d610..0000000000
--- a/elements/pf-v5-timestamp/demo/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<section>
-  <p><pf-v5-timestamp></pf-v5-timestamp></p>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-timestamp/demo/relative-format-with-tooltip.html b/elements/pf-v5-timestamp/demo/relative-format-with-tooltip.html
deleted file mode 100644
index a74706684f..0000000000
--- a/elements/pf-v5-timestamp/demo/relative-format-with-tooltip.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<section>
-  <p>
-    <pf-v5-tooltip>
-      <pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
-      <pf-v5-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
-    </pf-v5-tooltip>
-  </p>
-  <p>
-    <pf-v5-tooltip>
-      <pf-v5-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
-      <pf-v5-timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
-    </pf-v5-tooltip>
-  </p>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-  import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-timestamp/demo/relative-format.html b/elements/pf-v5-timestamp/demo/relative-format.html
deleted file mode 100644
index 9f6e90d2d6..0000000000
--- a/elements/pf-v5-timestamp/demo/relative-format.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<section>
-  <p><pf-v5-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp></p>
-  <p><pf-v5-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></pf-v5-timestamp></p>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-timestamp/demo/tooltip.html b/elements/pf-v5-timestamp/demo/tooltip.html
deleted file mode 100644
index 4f692c36aa..0000000000
--- a/elements/pf-v5-timestamp/demo/tooltip.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<section>
-  <p>
-    <pf-v5-tooltip>
-      <pf-v5-timestamp></pf-v5-timestamp>
-      <pf-v5-timestamp slot="content" utc></pf-v5-timestamp>
-    </pf-v5-tooltip>
-  </p>
-  <p>
-    <pf-v5-tooltip>
-      <pf-v5-timestamp></pf-v5-timestamp>
-      <pf-v5-timestamp slot="content" utc display-suffix="Coordinated Universal Time"></pf-v5-timestamp>
-    </pf-v5-tooltip>
-  </p>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-  import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-</style>
diff --git a/elements/pf-v5-timestamp/docs/CHANGELOG.old.md b/elements/pf-v5-timestamp/docs/CHANGELOG.old.md
deleted file mode 100644
index 468dd61ee6..0000000000
--- a/elements/pf-v5-timestamp/docs/CHANGELOG.old.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# @patternfly/pfe-timestamp
-
-## 2.0.0-next.5
-
-### Minor Changes
-
-- daba8a53: Changing from pfe-datetime to pfe-timestamp
-
-## 2.0.0-next.4
-
-### Patch Changes
-
-- bfad8b4b: Updates dependencies
-- Updated dependencies [bfad8b4b]
-  - @patternfly/pfe-core@2.0.0-next.8
-
-## 2.0.0-next.3
-
-### Patch Changes
-
-- 6a2a0407: [View commit message here](https://gist.github.com/heyMP/200fc0b840690541475923facba393ab)
-- Updated dependencies [6a2a0407]
-  - @patternfly/pfe-core@2.0.0-next.4
-
-## 2.0.0-next.2
-
-### Patch Changes
-
-- 447b2d75: Remove `esbuild` export condition, as this anyways was a runtime error
-- Updated dependencies [447b2d75]
-  - @patternfly/pfe-core@2.0.0-next.3
-
-## 2.0.0-next.1
-
-### Patch Changes
-
-- 1e89269b: document `time-zone-name` attribute
-
-## 2.0.0-next.0
-
-### Major Changes
-
-- 48e48655: ## 🔥 Migrate to Lit
-
-  This release migrates `<pfe-datetime>` to LitElement.
-
-  ### Breaking Changes
-
-  - Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle).
-    If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`
-
-  See [docs](https://patternflyelements.org/components/datetime/) for more info
-
-### Patch Changes
-
-- Updated dependencies [e8788c72]
-  - @patternfly/pfe-core@2.0.0-next.0
diff --git a/elements/pf-v5-timestamp/docs/pf-v5-timestamp.md b/elements/pf-v5-timestamp/docs/pf-v5-timestamp.md
deleted file mode 100644
index ea081ec503..0000000000
--- a/elements/pf-v5-timestamp/docs/pf-v5-timestamp.md
+++ /dev/null
@@ -1,139 +0,0 @@
-{% renderInstallation %} {% endrenderInstallation %}
-
-{% renderOverview %}
-  A timestamp provides consistent formats for displaying date and time values.
-
-  Default: <pf-v5-timestamp></pf-v5-timestamp>
-
-  With a locale of es: <pf-v5-timestamp time-format="medium" date-format="long" locale="es"></pf-v5-timestamp>
-
-  Relative time: <pf-v5-timestamp relative></pf-v5-timestamp>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  ### Default
-  By default, a timestamp will display the current date and time based on the current locale if the date attribute is not set.
-
-  {% htmlexample %}
-  <pf-v5-timestamp></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  ### Basic formats
-  The format of the displayed content can be customized by setting the `date-format` and/or `time-format` attributes. Setting only one of the attributes will display only the date or time, depending on which attribute is set. The possible options are "full", "long", "medium", and "short".
-
-  You can also set the `display-suffix` attribute to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.
-
-  {% htmlexample %}
-  <pf-v5-timestamp date-format="full" time-format="full"></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  {% htmlexample %}
-  <pf-v5-timestamp date-format="full"></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  {% htmlexample %}
-  <pf-v5-timestamp time-format="full"></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  {% htmlexample %}
-  <pf-v5-timestamp
-    date-format="medium"
-    time-format="short"
-    display-suffix="US Eastern">
-  </pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  ### Custom format
-  The format of the displayed content can be further customized by setting the custom-format attributes. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be set.
-
-  {% htmlexample %}
-  <pf-v5-timestamp id="timestamp-custom-format"
-                date="Sat Jan 01 2022 00:00:00 GMT-0500"></pf-v5-timestamp>
-  <script>
-    document.getElementById('timestamp-custom-format').customFormat = {
-      year: '2-digit',
-      month: 'short',
-      weekday: 'short',
-      day: 'numeric',
-      hour: 'numeric'
-    };
-  </script>
-  {% endhtmlexample %}
-
-  ### Adding a tooltip
-  To add a tooltip that displays the timestamp content as a UTC time, you can wrap `pf-v5-timestamp` with `pf-v5-tooltip` and set the `utc` attribute on an additional `pf-v5-timestamp`.
-
-  {% htmlexample %}
-  <pf-v5-tooltip>
-    <pf-v5-timestamp></pf-v5-timestamp>
-    <pf-v5-timestamp slot="content" utc></pf-v5-timestamp>
-  </pf-v5-tooltip>
-  {% endhtmlexample %}
-
-  {% htmlexample %}
-  <pf-v5-tooltip>
-    <pf-v5-timestamp></pf-v5-timestamp>
-    <pf-v5-timestamp slot="content" utc display-suffix="Coordinated Universal Time"></pf-v5-timestamp>
-  </pf-v5-tooltip>
-  {% endhtmlexample %}
-
-  ### Relative time
-  To display relative time, set the `relative` attribute on `pf-v5-timestamp`.
-
-  {% htmlexample %}
-  <pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  {% htmlexample %}
-  <pf-v5-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  ### Relative time with a tooltip
-  To display relative time, set the `relative` attribute on `pf-v5-timestamp`.
-
-  {% htmlexample %}
-  <pf-v5-tooltip>
-    <pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
-    <pf-v5-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
-  </pf-v5-tooltip>
-  {% endhtmlexample %}
-
-  {% htmlexample %}
-  <pf-v5-tooltip>
-    <pf-v5-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
-    <pf-v5-timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
-  </pf-v5-tooltip>
-  {% endhtmlexample %}
-
-  ### Set a locale to something other than the default locale
-  The default locale is inferred by the browser. To set the locale to something else, set the `locale` attribute.
-
-  {% htmlexample %}
-  <pf-v5-timestamp locale="en-GB" date-format="full" time-format="full"></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  {% htmlexample %}
-  <pf-v5-timestamp locale="es" date-format="full" time-format="full"></pf-v5-timestamp>
-  {% endhtmlexample %}
-
-  ### As a UTC timestamp
-  Set the `utc` attribute.
-
-  {% htmlexample %}
-  <pf-v5-timestamp utc></pf-v5-timestamp>
-  {% endhtmlexample %}
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderProperties %}{% endrenderProperties %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-timestamp/docs/screenshot.png b/elements/pf-v5-timestamp/docs/screenshot.png
deleted file mode 100644
index 07767332a1..0000000000
Binary files a/elements/pf-v5-timestamp/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-timestamp/pf-v5-timestamp.css b/elements/pf-v5-timestamp/pf-v5-timestamp.css
deleted file mode 100644
index 91def3703c..0000000000
--- a/elements/pf-v5-timestamp/pf-v5-timestamp.css
+++ /dev/null
@@ -1,8 +0,0 @@
-:host {
-  display: inline;
-}
-
-time {
-  text-decoration: var(--_timestamp-text-decoration, none);
-  text-underline-offset: var(--_timestamp-text-underline-offset, initial);
-}
diff --git a/elements/pf-v5-timestamp/pf-v5-timestamp.ts b/elements/pf-v5-timestamp/pf-v5-timestamp.ts
deleted file mode 100644
index 040e9fec6f..0000000000
--- a/elements/pf-v5-timestamp/pf-v5-timestamp.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { ComplexAttributeConverter, PropertyValues, TemplateResult } from 'lit';
-
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { property } from 'lit/decorators/property.js';
-
-import {
-  TimestampController,
-  type DateTimeFormat,
-} from '@patternfly/pfe-core/controllers/timestamp-controller.js';
-
-import style from './pf-v5-timestamp.css';
-
-const BooleanStringConverter: ComplexAttributeConverter = {
-  fromAttribute(value) {
-    return !value || value === 'true';
-  },
-};
-
-/**
- * A **timestamp** provides consistent formats for displaying date and time values.
- * @alias Timestamp
- */
-@customElement('pf-v5-timestamp')
-export class PfV5Timestamp extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [style];
-
-  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: DateTimeFormat;
-
-  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: DateTimeFormat;
-
-  @property({ attribute: false }) customFormat?: object;
-
-  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;
-
-  @property({ reflect: true }) locale?: string;
-
-  @property({ reflect: true, type: Boolean }) relative?: boolean;
-
-  @property({ reflect: true, type: Boolean }) utc?: boolean;
-
-  @property({
-    reflect: true,
-    attribute: 'hour-12',
-    converter: BooleanStringConverter,
-  }) hour12?: boolean;
-
-  @property({ reflect: true })
-  get date(): string {
-    return this.#timestamp.localeString;
-  }
-
-  set date(string) {
-    this.#timestamp.date = new Date(string);
-  }
-
-  get isoString(): string {
-    return this.#timestamp.isoString;
-  }
-
-  get time(): string {
-    return this.#timestamp.time;
-  }
-
-  #timestamp = new TimestampController(this);
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    if (this.hasAttribute('date')) {
-      this.#timestamp.date = new Date(this.getAttribute('date')!);
-    }
-  }
-
-  willUpdate(changedProperties: PropertyValues<this>): void {
-    for (const [prop] of changedProperties) {
-      this.#timestamp.set(prop, this[prop as keyof this]);
-    }
-  }
-
-  render(): TemplateResult<1> {
-    return html`
-      <time datetime="${this.#timestamp.isoString}">${this.#timestamp.time}</time>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-timestamp': PfV5Timestamp;
-  }
-}
diff --git a/elements/pf-v5-timestamp/test/pf-timestamp.spec.ts b/elements/pf-v5-timestamp/test/pf-timestamp.spec.ts
deleted file mode 100644
index 6155fd4d09..0000000000
--- a/elements/pf-v5-timestamp/test/pf-timestamp.spec.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import { expect, html } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfV5Timestamp } from '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
-
-describe('<pf-v5-timestamp>', function() {
-  it('imperatively instantiates', function() {
-    expect(document.createElement('pf-v5-timestamp')).to.be.an.instanceof(PfV5Timestamp);
-  });
-
-  it('should upgrade', async function() {
-    const element = await createFixture<PfV5Timestamp>(html`<pf-v5-timestamp></pf-v5-timestamp>`);
-    expect(element, 'the <pf-v5-timestamp> should be an instance of PfV5Timestamp')
-        .to.be.an.instanceof(customElements.get('pf-v5-timestamp'))
-        .and
-        .to.be.an.instanceof(PfV5Timestamp);
-  });
-
-  it('should show the current date by default with default formatting', async function() {
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp></pf-v5-timestamp>
-    `);
-
-    const expected = new Date().toLocaleString();
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should set the correct ISO date on the datetime attribute in the time element', async function() {
-    const date = new Date('Sat Jan 01 2022 00:00:00');
-    const dateString = date.toString();
-    const expected = date.toISOString();
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}"></pf-v5-timestamp>
-    `);
-
-    expect(element.isoString).to.equal(expected);
-  });
-
-  it('should show a passed in date with default formatting', async function() {
-    const dateString = 'Sat Jan 01 2022 00:00:00';
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(new Date(dateString).toLocaleString());
-  });
-
-  it('should show custom formatting when date-format and time-format are passed in', async function() {
-    const dateString = 'Sat Jan 01 2022 00:00:00';
-    const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'short' });
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}" date-format="full" time-format="short"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show only a date when date-format is passed in', async function() {
-    const dateString = 'Sat Jan 01 2022 00:00:00';
-    const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full' });
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}" date-format="full"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show only time when time-format is passed in', async function() {
-    const dateString = 'Sat Jan 01 2022 00:00:00';
-    const expected = new Date(dateString).toLocaleString('en-US', { timeStyle: 'short' });
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}" time-format="short"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show custom formatting when customFormat is passed in', async function() {
-    const dateString = 'Sat Jan 01 2022 00:00:00';
-    const options: Intl.DateTimeFormatOptions = {
-      year: '2-digit',
-      month: 'short',
-      weekday: 'short',
-      day: 'numeric',
-      hour: 'numeric',
-    };
-    const expected = new Date(dateString).toLocaleString('en-US', options);
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="Sat Jan 01 2022 00:00:00" .customFormat=${options}></pf-v5-timestamp>
-    `);
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show a custom suffix when display-suffix is passed in', async function() {
-    const dateString = 'Sat Jan 01 2022 00:00:00';
-    const suffix = 'US Eastern';
-    const expected = `${new Date(dateString).toLocaleString('en-US')} ${suffix}`;
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}" display-suffix="${suffix}"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show a 12 hour time', async function() {
-    const dateString = 'Sat Jan 01 2022 13:00:00';
-    const expected = new Date(dateString).toLocaleString('en-US');
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show a 24 hour time when hour-12 is set to false', async function() {
-    const dateString = 'Sat Jan 01 2022 13:00:00';
-    const expected = new Date(dateString).toLocaleString('en-US', { hour12: false });
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${dateString}" hour-12="false"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show with locale passed in', async function() {
-    const date = new Date(2022, 1, 1).toString();
-    const expected = new Date(date).toLocaleString('en-GB');
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${date}" locale="en-GB"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show a 12 hour time by default for US locale', async function() {
-    const date = new Date(2022, 1, 1, 13, 0).toString();
-    const expected = new Date(date).toLocaleString('en-US');
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${date}" locale="en-US"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show a 24 hour time for US locale when hour-12 is false', async function() {
-    const date = new Date(2022, 1, 1, 13, 0).toString();
-    const expected = new Date(date).toLocaleString('en-US', { hour12: false });
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${date}" locale="en-US" hour-12="false"></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show a 12 hour time for a 24 hour locale when hour-12 is passed', async function() {
-    const date = new Date(2022, 1, 1, 13, 0).toString();
-    const expected = new Date(date).toLocaleString('en-GB', { hour12: true });
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${date}" locale="en-GB" hour-12></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.equal(expected);
-  });
-
-  it('should show relative time of the moment', async function() {
-    const date = new Date();
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${date.toString()}" relative></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.match(/just now/);
-  });
-
-  it('should show relative time in the past', async function() {
-    const date = new Date(2015, 7, 9, 14, 57, 0);
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${date.toString()}" relative></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.match(/\d+ years ago/);
-  });
-
-  it('should show relative time in the future', async function() {
-    const date = new Date(2099, 7, 9, 14, 57, 0);
-    const element = await createFixture<PfV5Timestamp>(html`
-      <pf-v5-timestamp date="${date.toString()}" relative></pf-v5-timestamp>
-    `);
-
-    expect(element.time).to.match(/in \d+ years/);
-  });
-});
diff --git a/elements/pf-v5-tooltip/demo/block-triggers.html b/elements/pf-v5-tooltip/demo/block-triggers.html
index 1a728b26b2..763d62f45b 100644
--- a/elements/pf-v5-tooltip/demo/block-triggers.html
+++ b/elements/pf-v5-tooltip/demo/block-triggers.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -27,7 +27,7 @@ <h2>Block Triggers</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/custom-styles.html b/elements/pf-v5-tooltip/demo/custom-styles.html
index 390c36cc39..fb085c2edc 100644
--- a/elements/pf-v5-tooltip/demo/custom-styles.html
+++ b/elements/pf-v5-tooltip/demo/custom-styles.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -20,7 +20,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/index.html b/elements/pf-v5-tooltip/demo/index.html
index 7b8c713c8b..c1c58858f5 100644
--- a/elements/pf-v5-tooltip/demo/index.html
+++ b/elements/pf-v5-tooltip/demo/index.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -14,7 +14,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/placement.html b/elements/pf-v5-tooltip/demo/placement.html
index 9b6e6dabaf..ff72f0ad07 100644
--- a/elements/pf-v5-tooltip/demo/placement.html
+++ b/elements/pf-v5-tooltip/demo/placement.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -47,7 +47,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/slotted-content.html b/elements/pf-v5-tooltip/demo/slotted-content.html
index 220cfce0af..cf93206d22 100644
--- a/elements/pf-v5-tooltip/demo/slotted-content.html
+++ b/elements/pf-v5-tooltip/demo/slotted-content.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -19,7 +19,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v6-avatar/README.md b/elements/pf-v6-avatar/README.md
new file mode 100644
index 0000000000..b2622c7270
--- /dev/null
+++ b/elements/pf-v6-avatar/README.md
@@ -0,0 +1,45 @@
+# Avatar
+
+`<pf-v6-avatar>` displays a user's avatar image, or a placeholder graphic
+when no image is provided.
+
+## Usage
+
+### Basic avatar with image
+
+```html
+<pf-v6-avatar src="/path/to/user-photo.jpg"
+              alt="Alex Johnson"></pf-v6-avatar>
+```
+
+### Placeholder (no image)
+
+```html
+<pf-v6-avatar alt="Unknown user"></pf-v6-avatar>
+```
+
+### Bordered, large
+
+```html
+<pf-v6-avatar src="/path/to/user-photo.jpg"
+              alt="Alex Johnson"
+              size="lg"
+              bordered></pf-v6-avatar>
+```
+
+## Divergences from React `Avatar`
+
+### Changed API
+
+| React prop   | Web component     | Difference                                                      |
+| ------------ | ----------------- | --------------------------------------------------------------- |
+| `isBordered` | `bordered`        | Boolean attribute without `is` prefix                           |
+| `alt`        | `alt`             | Optional (defaults to `""`, marking the image as decorative for screen readers). Set `alt` to a descriptive string when the avatar conveys meaning. |
+| `src`        | `src`             | React defaults to empty string; web component renders a placeholder SVG when omitted |
+
+### Added
+
+| Web component API                          | Notes                                           |
+| ------------------------------------------ | ----------------------------------------------- |
+| `load` event (`PfV6AvatarLoadEvent`)       | Fires when the `src` image loads successfully (not emitted for the placeholder SVG) |
+| Placeholder SVG                            | Rendered automatically when `src` is not set    |
diff --git a/elements/pf-v6-avatar/demo/avatarImg.svg b/elements/pf-v6-avatar/demo/avatarImg.svg
new file mode 100644
index 0000000000..73726f9bc5
--- /dev/null
+++ b/elements/pf-v6-avatar/demo/avatarImg.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F0F0F0;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D2D2D2;}
+	.st2{fill:#B8BBBE;}
+	.st3{fill:#D2D2D2;}
+</style>
+<rect class="st0" width="36" height="36"/>
+<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
+<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
+<path class="st3" d="M10.1,36l0.1-3.2c0.2-2.1,1.1-3.1,3.1-3.5l0,6.7h9.4l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2h4.7
+	c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7c-1.2,0.4-2.4,1.2-3.4,2.6
+	C6.7,27,5.8,32.2,5.4,36H10.1z"/>
+<path class="st2" d="M25.9,36l-0.1-3.2c-0.2-2.1-1.1-3.1-3.1-3.5l0,6.7H25.9z"/>
+</svg>
diff --git a/elements/pf-v6-avatar/demo/basic.html b/elements/pf-v6-avatar/demo/basic.html
new file mode 100644
index 0000000000..4ca2a156ec
--- /dev/null
+++ b/elements/pf-v6-avatar/demo/basic.html
@@ -0,0 +1,10 @@
+---
+name: Basic
+description: A basic avatar displays a user image.
+---
+<pf-v6-avatar alt="Avatar image"
+              src="./avatarImg.svg"></pf-v6-avatar>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>
diff --git a/elements/pf-v6-avatar/demo/bordered.html b/elements/pf-v6-avatar/demo/bordered.html
new file mode 100644
index 0000000000..f5ab4113cb
--- /dev/null
+++ b/elements/pf-v6-avatar/demo/bordered.html
@@ -0,0 +1,19 @@
+---
+name: Bordered
+description: A bordered avatar has a thin border around the image.
+---
+<section>
+  <pf-v6-avatar bordered
+                alt="Bordered avatar"
+                src="./avatarImg.svg"></pf-v6-avatar>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>
+
+<style>
+  section {
+    padding: 64px 48px;
+  }
+</style>
diff --git a/elements/pf-v6-avatar/demo/index.html b/elements/pf-v6-avatar/demo/index.html
new file mode 100644
index 0000000000..d146cbb04f
--- /dev/null
+++ b/elements/pf-v6-avatar/demo/index.html
@@ -0,0 +1,9 @@
+---
+name: Basic
+description: A basic avatar displays a user image.
+---
+<pf-v6-avatar></pf-v6-avatar>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>
diff --git a/elements/pf-v6-avatar/demo/size-variations.html b/elements/pf-v6-avatar/demo/size-variations.html
new file mode 100644
index 0000000000..33467cde0b
--- /dev/null
+++ b/elements/pf-v6-avatar/demo/size-variations.html
@@ -0,0 +1,63 @@
+---
+name: Size variations
+description: Avatars can be displayed in four sizes.
+---
+<dl>
+  <div>
+    <dt>Small</dt>
+    <dd>
+      <pf-v6-avatar size="sm"
+                    alt="Small avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+
+  <div>
+    <dt>Medium</dt>
+    <dd>
+      <pf-v6-avatar size="md"
+                    alt="Medium avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+
+  <div>
+    <dt>Large</dt>
+    <dd>
+      <pf-v6-avatar size="lg"
+                    alt="Large avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+
+  <div>
+    <dt>Extra Large</dt>
+    <dd>
+      <pf-v6-avatar size="xl"
+                    alt="Extra large avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+</dl>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>
+
+<style>
+dl {
+  padding: 64px 48px;
+  display: flex;
+  gap: 1em;
+
+  & > div {
+    display: flex;
+    gap: 1em;
+    flex-flow: column;
+  }
+
+  & dd {
+    margin: 0;
+  }
+}
+</style>
diff --git a/elements/pf-v6-avatar/docs/pf-v6-avatar.md b/elements/pf-v6-avatar/docs/pf-v6-avatar.md
new file mode 100644
index 0000000000..ca35133817
--- /dev/null
+++ b/elements/pf-v6-avatar/docs/pf-v6-avatar.md
@@ -0,0 +1,45 @@
+{% renderOverview %}
+  An avatar is a visual used to represent a user. It may contain an image
+  or a placeholder graphic.
+
+  <pf-v6-avatar></pf-v6-avatar>
+  <pf-v6-avatar src="https://www.gravatar.com/avatar/?d=mp&f=y" alt="User avatar"></pf-v6-avatar>
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  ### Default (placeholder)
+  {% htmlexample %}
+  <pf-v6-avatar></pf-v6-avatar>
+  {% endhtmlexample %}
+
+  ### With image
+  {% htmlexample %}
+  <pf-v6-avatar src="https://www.gravatar.com/avatar/?d=mp&f=y" alt="User avatar"></pf-v6-avatar>
+  {% endhtmlexample %}
+
+  ### Bordered
+  {% htmlexample %}
+  <pf-v6-avatar bordered></pf-v6-avatar>
+  <pf-v6-avatar bordered src="https://www.gravatar.com/avatar/?d=mp&f=y" alt="User avatar"></pf-v6-avatar>
+  {% endhtmlexample %}
+
+  ### Sizes
+  {% htmlexample %}
+  <pf-v6-avatar size="sm"></pf-v6-avatar>
+  <pf-v6-avatar size="md"></pf-v6-avatar>
+  <pf-v6-avatar size="lg"></pf-v6-avatar>
+  <pf-v6-avatar size="xl"></pf-v6-avatar>
+  {% endhtmlexample %}
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v6-avatar/docs/screenshot.png b/elements/pf-v6-avatar/docs/screenshot.png
new file mode 100644
index 0000000000..192f906ccb
Binary files /dev/null and b/elements/pf-v6-avatar/docs/screenshot.png differ
diff --git a/elements/pf-v6-avatar/pf-v6-avatar.css b/elements/pf-v6-avatar/pf-v6-avatar.css
new file mode 100644
index 0000000000..31e514f595
--- /dev/null
+++ b/elements/pf-v6-avatar/pf-v6-avatar.css
@@ -0,0 +1,105 @@
+:host {
+  --_width:
+    /** Width of the avatar */
+    var(--pf-v6-c-avatar--Width, 2.25rem);
+  --_height:
+    /** Height of the avatar */
+    var(--pf-v6-c-avatar--Height, 2.25rem);
+  --_border-radius:
+    /** Border radius of the avatar */
+    var(--pf-v6-c-avatar--BorderRadius,
+      /** Rounds the avatar into a circle */
+      var(--pf-t--global--border--radius--pill, 30em));
+  --_border-color:
+    /** Border color of the avatar */
+    var(--pf-v6-c-avatar--BorderColor, transparent);
+  --_border-width:
+    /** Border width of the avatar */
+    var(--pf-v6-c-avatar--BorderWidth, 0);
+
+  --_placeholder-bg:
+    /** Placeholder silhouette background fill */
+    var(--pf-t--global--background--color--200,
+      light-dark(
+        /** Light mode placeholder background */
+        var(--pf-t--color--gray--10, #f2f2f2),
+        /** Dark mode placeholder background */
+        var(--pf-t--color--gray--80, #292929)));
+  --_placeholder-fg:
+    /** Placeholder silhouette foreground fill */
+    var(--pf-t--global--icon--color--subtle,
+      light-dark(
+        /** Light mode placeholder silhouette color */
+        var(--pf-t--color--gray--50, #707070),
+        /** Dark mode placeholder silhouette color */
+        var(--pf-t--color--gray--40, #a3a3a3)));
+
+  display: inline-block;
+  width: var(--_width);
+  height: var(--_height);
+  border-radius: var(--_border-radius);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+:host([bordered]) {
+  --_border-color:
+    /** Border color when bordered */
+    var(--pf-v6-c-avatar--m-bordered--BorderColor,
+      /** Default border color for bordered avatars */
+      var(--pf-t--global--border--color--default, #d2d2d2));
+  --_border-width:
+    /** Border width when bordered */
+    var(--pf-v6-c-avatar--m-bordered--BorderWidth,
+      /** Default border width for bordered avatars */
+      var(--pf-t--global--border--width--box--default, 1px));
+}
+
+:host([size="sm"]) {
+  --_width:
+    /** Width when size is sm */
+    var(--pf-v6-c-avatar--m-sm--Width, 1.5rem);
+  --_height:
+    /** Height when size is sm */
+    var(--pf-v6-c-avatar--m-sm--Height, 1.5rem);
+}
+
+:host([size="md"]) {
+  --_width:
+    /** Width when size is md */
+    var(--pf-v6-c-avatar--m-md--Width, 2.25rem);
+  --_height:
+    /** Height when size is md */
+    var(--pf-v6-c-avatar--m-md--Height, 2.25rem);
+}
+
+:host([size="lg"]) {
+  --_width:
+    /** Width when size is lg */
+    var(--pf-v6-c-avatar--m-lg--Width, 4.5rem);
+  --_height:
+    /** Height when size is lg */
+    var(--pf-v6-c-avatar--m-lg--Height, 4.5rem);
+}
+
+:host([size="xl"]) {
+  --_width:
+    /** Width when size is xl */
+    var(--pf-v6-c-avatar--m-xl--Width, 8rem);
+  --_height:
+    /** Height when size is xl */
+    var(--pf-v6-c-avatar--m-xl--Height, 8rem);
+}
+
+svg,
+img {
+  display: block;
+  object-fit: cover;
+  width: var(--_width);
+  height: var(--_height);
+  border-radius: var(--_border-radius);
+  border: var(--_border-width) solid var(--_border-color);
+}
diff --git a/elements/pf-v6-avatar/pf-v6-avatar.ts b/elements/pf-v6-avatar/pf-v6-avatar.ts
new file mode 100644
index 0000000000..34f1bcc64f
--- /dev/null
+++ b/elements/pf-v6-avatar/pf-v6-avatar.ts
@@ -0,0 +1,69 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators/property.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+
+import style from './pf-v6-avatar.css';
+
+/** Size variants for the avatar. */
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * An **avatar** provides a visual representation of a user for navigation
+ * headers, user lists, or comment threads. When `src` is set, it renders
+ * the image; when omitted, it provides a placeholder silhouette. Authors
+ * SHOULD set `alt` when the avatar conveys identity.
+ *
+ * @summary Displays a user's avatar image with optional placeholder
+ *
+ * @cssprop {<length>} --pf-v6-c-avatar--Width - Avatar width {@default 2.25rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--Height - Avatar height {@default 2.25rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--BorderRadius - Avatar border radius {@default 30em}
+ * @cssprop {<color>} --pf-v6-c-avatar--BorderColor - Avatar border color {@default transparent}
+ * @cssprop {<length>} --pf-v6-c-avatar--BorderWidth - Avatar border width {@default 0}
+ * @cssprop {<color>} --pf-v6-c-avatar--m-bordered--BorderColor - Border color when bordered
+ * @cssprop {<length>} --pf-v6-c-avatar--m-bordered--BorderWidth - Border width when bordered
+ * @cssprop {<length>} --pf-v6-c-avatar--m-sm--Width - Width when size is sm {@default 1.5rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--m-sm--Height - Height when size is sm {@default 1.5rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--m-md--Width - Width when size is md {@default 2.25rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--m-md--Height - Height when size is md {@default 2.25rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--m-lg--Width - Width when size is lg {@default 4.5rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--m-lg--Height - Height when size is lg {@default 4.5rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--m-xl--Width - Width when size is xl {@default 8rem}
+ * @cssprop {<length>} --pf-v6-c-avatar--m-xl--Height - Height when size is xl {@default 8rem}
+ */
+@customElement('pf-v6-avatar')
+export class PfV6Avatar extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** The URL to the user's custom avatar image. */
+  @property() src?: string;
+
+  /** The alt text for the avatar image. */
+  @property({ reflect: true }) alt?: string;
+
+  /** Size of the avatar */
+  @property({ reflect: true }) size?: AvatarSize;
+
+  /** Whether to display a border around the avatar */
+  @property({ type: Boolean, reflect: true }) bordered = false;
+
+  override render(): TemplateResult {
+    const { alt, src } = this;
+    return html`
+      <img alt="${alt ?? ''}" src="${src}" ?hidden="${src == null}">
+      <svg viewBox="0 0 36 36"
+           role="presentation"
+           ?hidden="${src != null}">
+        <rect width="36" height="36" fill="var(--_placeholder-bg)"/>
+        <path d="M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"
+              fill="var(--_placeholder-fg)"/>
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-avatar': PfV6Avatar;
+  }
+}
diff --git a/elements/pf-v5-switch/test/pf-switch.e2e.ts b/elements/pf-v6-avatar/test/pf-v6-avatar.e2e.ts
similarity index 95%
rename from elements/pf-v5-switch/test/pf-switch.e2e.ts
rename to elements/pf-v6-avatar/test/pf-v6-avatar.e2e.ts
index 5b41db14f6..3581f2071a 100644
--- a/elements/pf-v5-switch/test/pf-switch.e2e.ts
+++ b/elements/pf-v6-avatar/test/pf-v6-avatar.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-switch';
+const tagName = 'pf-v6-avatar';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-avatar/test/pf-v6-avatar.spec.ts b/elements/pf-v6-avatar/test/pf-v6-avatar.spec.ts
new file mode 100644
index 0000000000..1fb678d3f7
--- /dev/null
+++ b/elements/pf-v6-avatar/test/pf-v6-avatar.spec.ts
@@ -0,0 +1,114 @@
+import { html, expect, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfV6Avatar } from '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+
+describe('<pf-v6-avatar>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-avatar')).to.be.an.instanceof(PfV6Avatar);
+  });
+
+  it('should upgrade', async function() {
+    const el = await createFixture(html`<pf-v6-avatar></pf-v6-avatar>`);
+    expect(el, 'pf-v6-avatar should be an instance of PfV6Avatar')
+        .to.be.an.instanceOf(customElements.get('pf-v6-avatar'))
+        .and
+        .to.be.an.instanceOf(PfV6Avatar);
+  });
+
+  describe('without src attr', function() {
+    let element: PfV6Avatar;
+    beforeEach(async function() {
+      element = await createFixture(html`<pf-v6-avatar></pf-v6-avatar>`);
+      await nextFrame();
+    });
+
+    it('displays a placeholder', function() {
+      const { offsetWidth } = element;
+      expect(offsetWidth).to.be.greaterThan(0);
+    });
+
+    it('has the default size', function() {
+      expect(element.offsetWidth).to.equal(36);
+      expect(element.offsetHeight).to.equal(36);
+    });
+
+    it('hides the placeholder from the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot?.children?.find(
+        (child: { role: string }) => child.role === 'img'
+      )).to.not.be.ok;
+    });
+  });
+
+  describe('with alt attr', function() {
+    let element: PfV6Avatar;
+    beforeEach(async function() {
+      element = await createFixture(html`
+        <pf-v6-avatar alt="User avatar"
+                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="></pf-v6-avatar>
+      `);
+      await element.updateComplete;
+      await nextFrame();
+    });
+
+    it('passes alt text to the image', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot?.children?.find(
+        (child: { name: string }) => child.name === 'User avatar'
+      )).to.be.ok;
+    });
+  });
+
+  describe('with size="md"', function() {
+    let element: PfV6Avatar;
+    beforeEach(async function() {
+      element = await createFixture(html`<pf-v6-avatar size="md"></pf-v6-avatar>`);
+      await nextFrame();
+    });
+
+    it('renders at the medium size', function() {
+      expect(element.offsetWidth).to.equal(36);
+      expect(element.offsetHeight).to.equal(36);
+    });
+  });
+
+  describe('with size="sm"', function() {
+    let element: PfV6Avatar;
+    beforeEach(async function() {
+      element = await createFixture(html`<pf-v6-avatar size="sm"></pf-v6-avatar>`);
+      await nextFrame();
+    });
+
+    it('renders at the small size', function() {
+      expect(element.offsetWidth).to.equal(24);
+      expect(element.offsetHeight).to.equal(24);
+    });
+  });
+
+  describe('with size="lg"', function() {
+    let element: PfV6Avatar;
+    beforeEach(async function() {
+      element = await createFixture(html`<pf-v6-avatar size="lg"></pf-v6-avatar>`);
+      await nextFrame();
+    });
+
+    it('renders at the large size', function() {
+      expect(element.offsetWidth).to.equal(72);
+      expect(element.offsetHeight).to.equal(72);
+    });
+  });
+
+  describe('with size="xl"', function() {
+    let element: PfV6Avatar;
+    beforeEach(async function() {
+      element = await createFixture(html`<pf-v6-avatar size="xl"></pf-v6-avatar>`);
+      await nextFrame();
+    });
+
+    it('renders at the extra large size', function() {
+      expect(element.offsetWidth).to.equal(128);
+      expect(element.offsetHeight).to.equal(128);
+    });
+  });
+});
diff --git a/elements/pf-v6-back-to-top/README.md b/elements/pf-v6-back-to-top/README.md
new file mode 100644
index 0000000000..dc08896644
--- /dev/null
+++ b/elements/pf-v6-back-to-top/README.md
@@ -0,0 +1,34 @@
+# Back to top
+
+`<pf-v6-back-to-top>` is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
+
+## Usage
+
+```html
+<!-- Link mode (progressive enhancement, works without JS) -->
+<pf-v6-back-to-top href="#top">Back to top</pf-v6-back-to-top>
+
+<!-- Button mode (scrolls via JS) -->
+<pf-v6-back-to-top>Back to top</pf-v6-back-to-top>
+
+<!-- Always visible -->
+<pf-v6-back-to-top always-visible href="#top">Back to top</pf-v6-back-to-top>
+```
+
+## Divergences from React `BackToTop`
+
+### Changed API
+
+| React prop          | Web component           | Difference                                                                 |
+|---------------------|-------------------------|---------------------------------------------------------------------------|
+| `title`             | Default slot             | React uses a `title` prop for button text; WC uses slotted content.       |
+| `isAlwaysVisible`   | `always-visible`         | Boolean attribute instead of React prop.                                  |
+| `scrollableSelector`| `scrollable-selector`    | Dash-case attribute for the camelCase property.                           |
+
+### Added
+
+| Web component API      | Notes                                                                                 |
+|------------------------|---------------------------------------------------------------------------------------|
+| `href`                 | When set, renders as an `<a>` link instead of a `<button>`. Progressive enhancement.  |
+| `accessible-label`     | Sets the accessible name when no visible text is slotted.                             |
+| Default slot           | Accepts rich content for the button text. Defaults to "Back to top".                  |
diff --git a/elements/pf-v6-back-to-top/demo/always-visible.html b/elements/pf-v6-back-to-top/demo/always-visible.html
new file mode 100644
index 0000000000..df2c23522a
--- /dev/null
+++ b/elements/pf-v6-back-to-top/demo/always-visible.html
@@ -0,0 +1,12 @@
+---
+description: The always-visible attribute keeps the button visible regardless of scroll position.
+---
+<section id="top" style="position: relative; height: 300px; padding: 1rem;">
+  <h2>Always visible</h2>
+  <p>The button is visible without scrolling.</p>
+  <pf-v6-back-to-top always-visible href="#top">Back to top</pf-v6-back-to-top>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-back-to-top/pf-v6-back-to-top.js';
+</script>
diff --git a/elements/pf-v6-back-to-top/demo/button-mode.html b/elements/pf-v6-back-to-top/demo/button-mode.html
new file mode 100644
index 0000000000..0ef08c95a4
--- /dev/null
+++ b/elements/pf-v6-back-to-top/demo/button-mode.html
@@ -0,0 +1,28 @@
+---
+description: Without href, the component renders as a button and scrolls to the top via JavaScript.
+---
+<style>
+  #wrapper {
+    position: relative;
+    height: 100vh;
+  }
+  #container {
+    height: 100%;
+    overflow-y: auto;
+  }
+</style>
+
+<div id="wrapper">
+  <div id="container">
+    <div style="padding: 1rem;">
+      <h2>Button mode</h2>
+      <p>Without <code>href</code>, the component renders as a button and scrolls via JavaScript.</p>
+    </div>
+    <div style="height: 1200px;"></div>
+  </div>
+  <pf-v6-back-to-top scrollable-selector="#container">Back to top</pf-v6-back-to-top>
+</div>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-back-to-top/pf-v6-back-to-top.js';
+</script>
diff --git a/elements/pf-v6-back-to-top/demo/index.html b/elements/pf-v6-back-to-top/demo/index.html
new file mode 100644
index 0000000000..0a31519551
--- /dev/null
+++ b/elements/pf-v6-back-to-top/demo/index.html
@@ -0,0 +1,28 @@
+---
+description: Scroll down to see the back to top button appear after 400px of scroll distance. Uses a link with href for progressive enhancement.
+---
+<style>
+  #wrapper {
+    position: relative;
+    height: 100vh;
+  }
+  #container {
+    height: 100%;
+    overflow-y: auto;
+  }
+</style>
+
+<div id="wrapper">
+  <div id="container">
+    <div id="top" style="padding: 1rem;">
+      <h2>Back to top</h2>
+      <p>Scroll down to see the back to top button appear after 400px.</p>
+    </div>
+    <div style="height: 1200px;"></div>
+  </div>
+  <pf-v6-back-to-top scrollable-selector="#container" href="#top">Back to top</pf-v6-back-to-top>
+</div>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-back-to-top/pf-v6-back-to-top.js';
+</script>
diff --git a/elements/pf-v6-back-to-top/demo/scrollable-container.html b/elements/pf-v6-back-to-top/demo/scrollable-container.html
new file mode 100644
index 0000000000..46c56cc1f7
--- /dev/null
+++ b/elements/pf-v6-back-to-top/demo/scrollable-container.html
@@ -0,0 +1,17 @@
+---
+description: Back to top inside a scrollable container using scrollable-selector to monitor a specific element.
+---
+<div style="position: relative; height: 400px;">
+  <div id="scroll-container" style="height: 400px; overflow-y: auto; border: 1px solid #d2d2d2; border-radius: 4px;">
+    <div style="padding: 1rem;" id="top">
+      <h2>Scroll down</h2>
+      <p>The back to top button will appear after scrolling 400px in this container.</p>
+    </div>
+    <div style="height: 1200px;"></div>
+  </div>
+  <pf-v6-back-to-top scrollable-selector="#scroll-container" href="#top">Back to top</pf-v6-back-to-top>
+</div>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-back-to-top/pf-v6-back-to-top.js';
+</script>
diff --git a/elements/pf-v6-back-to-top/docs/pf-v6-back-to-top.md b/elements/pf-v6-back-to-top/docs/pf-v6-back-to-top.md
new file mode 100644
index 0000000000..f3732a2dba
--- /dev/null
+++ b/elements/pf-v6-back-to-top/docs/pf-v6-back-to-top.md
@@ -0,0 +1,40 @@
+{% renderOverview %}
+  A back-to-top shortcut navigates to the top of a lengthy content page.
+
+  <pf-v6-back-to-top always-visible>Back to top</pf-v6-back-to-top>
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  ### Default
+  The component appears automatically when the user scrolls down.
+
+  {% htmlexample %}
+  <pf-v6-back-to-top>Back to top</pf-v6-back-to-top>
+  {% endhtmlexample %}
+
+  ### Always visible
+  Use `always-visible` to display the button regardless of scroll position.
+
+  {% htmlexample %}
+  <pf-v6-back-to-top always-visible>Back to top</pf-v6-back-to-top>
+  {% endhtmlexample %}
+
+  ### Link mode
+  Use `href` to render the component as a link instead of a button.
+
+  {% htmlexample %}
+  <pf-v6-back-to-top always-visible href="#top">Back to top</pf-v6-back-to-top>
+  {% endhtmlexample %}
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v6-back-to-top/docs/screenshot.png b/elements/pf-v6-back-to-top/docs/screenshot.png
new file mode 100644
index 0000000000..ae88e5dcaf
Binary files /dev/null and b/elements/pf-v6-back-to-top/docs/screenshot.png differ
diff --git a/elements/pf-v6-back-to-top/pf-v6-back-to-top.css b/elements/pf-v6-back-to-top/pf-v6-back-to-top.css
new file mode 100644
index 0000000000..099f4e3242
--- /dev/null
+++ b/elements/pf-v6-back-to-top/pf-v6-back-to-top.css
@@ -0,0 +1,85 @@
+:host {
+  display: block;
+  position: absolute;
+  /** Vertical offset from the block-end edge of the containing block. Maps to the design system's spacing scale for consistent component placement. */
+  inset-block-end: var(--pf-v6-c-back-to-top--InsetBlockEnd, 1.5rem);
+  /** Horizontal offset from the inline-end edge of the containing block. Uses the design system's spacing scale. */
+  inset-inline-end: var(--pf-v6-c-back-to-top--InsetInlineEnd, 3rem);
+}
+
+#trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  cursor: pointer;
+  border: 0;
+  text-decoration: none;
+  /** Design system body font family. */
+  font-family: var(--pf-t--global--font--family--body, 'Red Hat Text', RedHatText, Helvetica, Arial, sans-serif);
+  /** Design system default body font weight. */
+  font-weight: var(--pf-t--global--font--weight--body--default, 400);
+  /** Font size of the trigger text. Uses a smaller size from the design system's type scale for unobtrusive labeling. */
+  font-size: var(--pf-v6-c-back-to-top--c-button--FontSize, 0.75rem);
+  /** Design system body line height. */
+  line-height: var(--pf-t--global--font--line-height--body, 1.5);
+  /** Design system pill border radius for fully rounded edges. */
+  border-radius: var(--pf-t--global--border--radius--pill, 999px);
+  /** Block-start padding of the trigger. Controls vertical spacing above text content. */
+  padding-block-start: var(--pf-v6-c-back-to-top--c-button--PaddingBlockStart, 0.25rem);
+  /** Inline-end padding of the trigger. Controls horizontal spacing after text content. */
+  padding-inline-end: var(--pf-v6-c-back-to-top--c-button--PaddingInlineEnd, 0.5rem);
+  /** Block-end padding of the trigger. Controls vertical spacing below text content. */
+  padding-block-end: var(--pf-v6-c-back-to-top--c-button--PaddingBlockEnd, 0.25rem);
+  /** Inline-start padding of the trigger. Controls horizontal spacing before text content. */
+  padding-inline-start: var(--pf-v6-c-back-to-top--c-button--PaddingInlineStart, 0.5rem);
+  /** Design system action-to-action gap spacing between text and icon. */
+  gap: var(--pf-t--global--spacer--gap--action-to-action--default, 0.5rem);
+  /** Box shadow of the trigger. Uses the design system's small elevation token to lift the button above page content. */
+  box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow,
+    /** Design system small box shadow for subtle elevation. */
+    var(--pf-t--global--box-shadow--sm, 0 1px 4px 0 rgba(41, 41, 41, 0.15)));
+  /** Design system text color for content on brand-colored surfaces. */
+  color: var(--pf-t--global--text--color--on-brand--default, #1f1f1f);
+  /** Design system brand color for the trigger background. */
+  background-color: var(--pf-t--global--color--brand--default, #92c5f9);
+
+  &[hidden] {
+    display: none;
+  }
+
+  &:hover {
+    /** Design system hover text color on brand surfaces. */
+    color: var(--pf-t--global--text--color--on-brand--hover, #1f1f1f);
+    /** Design system hover brand color. */
+    background-color: var(--pf-t--global--color--brand--hover, #b9dafc);
+  }
+
+  &:active {
+    /** Design system active/clicked text color on brand surfaces. */
+    color: var(--pf-t--global--text--color--on-brand--clicked, #1f1f1f);
+    /** Design system active/clicked brand color. */
+    background-color: var(--pf-t--global--color--brand--clicked, #e0f0ff);
+  }
+
+  &:focus-visible {
+    outline:
+      /** Design system focus ring border width for interactive elements. */
+      var(--pf-t--global--border--width--action--focus, 2px) solid
+      /** Design system focus ring color for WCAG-compliant keyboard focus indication. */
+      var(--pf-t--global--focus-ring--color--100, #0066cc);
+    /** Design system focus ring gap between the element and its outline. */
+    outline-offset: var(--pf-t--global--spacer--focus-ring--gap, 2px);
+  }
+}
+
+svg {
+  vertical-align: -0.125rem;
+}
+
+@media (min-width: 768px) {
+  :host {
+    /** Vertical offset at medium (768px+) breakpoint. Provides more spacing on larger viewports per the design system's responsive spacing scale. */
+    inset-block-end: var(--pf-v6-c-back-to-top--md--InsetBlockEnd, 3rem);
+  }
+}
diff --git a/elements/pf-v6-back-to-top/pf-v6-back-to-top.ts b/elements/pf-v6-back-to-top/pf-v6-back-to-top.ts
new file mode 100644
index 0000000000..a6da1efff3
--- /dev/null
+++ b/elements/pf-v6-back-to-top/pf-v6-back-to-top.ts
@@ -0,0 +1,185 @@
+import { LitElement, html, isServer, type PropertyValues, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+
+import styles from './pf-v6-back-to-top.css';
+
+const caretUpIcon = html`<svg viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" width="1em" height="1em"><path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg>`;
+
+/**
+ * Shortcut to navigate to the top of a lengthy content page.
+ *
+ * Focusable via Tab, activated via Enter or Space. Provides an ARIA
+ * label for screen readers. Users SHOULD set `accessible-label` when
+ * no text is slotted. MUST be inside a positioned container.
+ *
+ * With `href`, renders as a link; without, a button that scrolls
+ * via JS. Respects `prefers-reduced-motion`.
+ *
+ * @summary Shortcut to navigate to the top of a lengthy content page.
+ *
+ * @slot - Visible label text for the trigger. Slotted text replaces the default ARIA label, so it MUST be descriptive for screen reader users.
+ */
+@customElement('pf-v6-back-to-top')
+export class PfV6BackToTop extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  static override readonly shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  /** Flag to always show the back to top button. */
+  @property({ reflect: true, type: Boolean, attribute: 'always-visible' }) alwaysVisible = false;
+
+  /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events. */
+  @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string;
+
+  /** Accessible name for the trigger when there is no slotted text. */
+  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  /** Page fragment link to target element, e.g. `#top`. When set, renders as a link instead of a button. */
+  @property({ reflect: true }) href?: string;
+
+  #visible = false;
+
+  #scrollElement?: Element | Window;
+
+  #hasSlottedText = false;
+
+  #logger = new Logger(this);
+
+  get #rootNode(): Document | ShadowRoot | null {
+    if (isServer) {
+      return null;
+    }
+    const root = this.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+      return root;
+    }
+    return document;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (!isServer) {
+      this.#addScrollListener();
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.#removeScrollListener();
+  }
+
+  override willUpdate(changed: PropertyValues<this>): void {
+    if (changed.has('scrollableSelector')) {
+      this.#addScrollListener();
+    }
+    if (changed.has('alwaysVisible')) {
+      this.#toggleVisibility();
+    }
+  }
+
+  override render(): TemplateResult<1> {
+    const ariaLabel = this.#hasSlottedText ? undefined : this.accessibleLabel ?? 'Back to top';
+    if (this.href) {
+      const normalizedHref = this.href.charAt(0) !== '#' ? `#${this.href}` : this.href;
+      return html`
+        <a id="trigger"
+           href="${normalizedHref}"
+           ?hidden="${!this.#visible}"
+           tabindex="${this.#visible ? 0 : -1}"
+           aria-label="${ifDefined(ariaLabel)}">
+            <slot @slotchange="${this.#onSlotchange}">Back to top</slot>
+          ${caretUpIcon}
+        </a>
+      `;
+    }
+    return html`
+      <button id="trigger"
+              ?hidden="${!this.#visible}"
+              tabindex="${this.#visible ? 0 : -1}"
+              aria-label="${ifDefined(ariaLabel)}"
+              @click="${this.#onClick}">
+        <slot @slotchange="${this.#onSlotchange}">Back to top</slot>
+        ${caretUpIcon}
+      </button>
+    `;
+  }
+
+  #onClick() {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this.#scrollElement?.scrollTo({
+      top: 0,
+      behavior: (prefersReducedMotion ? 'instant' : 'smooth'),
+    });
+  }
+
+  #onSlotchange(event: Event) {
+    const slot = event.currentTarget as HTMLSlotElement;
+    this.#hasSlottedText = slot.assignedNodes().some(
+      n => n.nodeType === Node.ELEMENT_NODE || !!n.textContent?.trim(),
+    );
+    this.requestUpdate();
+  }
+
+  #removeScrollListener() {
+    this.#scrollElement?.removeEventListener('scroll', this.#toggleVisibility);
+  }
+
+  #addScrollListener() {
+    this.#removeScrollListener();
+
+    if (this.scrollableSelector?.trim() === '') {
+      this.#logger.error(`scrollable-selector attribute cannot be empty`);
+      return;
+    }
+
+    if (isServer) {
+      return;
+    }
+
+    if (this.scrollableSelector) {
+      const scrollableElement = this.#rootNode?.querySelector?.(this.scrollableSelector);
+      if (!scrollableElement) {
+        this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);
+        return;
+      }
+      this.#scrollElement = scrollableElement;
+    } else {
+      this.#scrollElement = window;
+    }
+
+    this.#scrollElement.addEventListener('scroll', this.#toggleVisibility, { passive: true });
+    this.#toggleVisibility();
+  }
+
+  #toggleVisibility = () => {
+    if (this.alwaysVisible) {
+      this.#visible = true;
+      this.requestUpdate();
+      return;
+    }
+    const previousVisibility = this.#visible;
+    if (this.#scrollElement) {
+      const scrolled =
+          (this.#scrollElement instanceof Window) ?
+          this.#scrollElement.scrollY
+            : this.#scrollElement.scrollTop;
+      this.#visible = scrolled > 400;
+      if (previousVisibility !== this.#visible) {
+        this.requestUpdate();
+      }
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-back-to-top': PfV6BackToTop;
+  }
+}
diff --git a/elements/pf-v5-back-to-top/test/pf-back-to-top.spec.ts b/elements/pf-v6-back-to-top/test/pf-back-to-top.spec.ts
similarity index 65%
rename from elements/pf-v5-back-to-top/test/pf-back-to-top.spec.ts
rename to elements/pf-v6-back-to-top/test/pf-back-to-top.spec.ts
index 2524318a49..c7a05ead75 100644
--- a/elements/pf-v5-back-to-top/test/pf-back-to-top.spec.ts
+++ b/elements/pf-v6-back-to-top/test/pf-back-to-top.spec.ts
@@ -4,44 +4,44 @@ import { setViewport, sendKeys } from '@web/test-runner-commands';
 
 import { allUpdates } from '@patternfly/pfe-tools/test/utils.js';
 
-import { PfV5BackToTop } from '../pf-v5-back-to-top.js';
+import { PfV6BackToTop } from '../pf-v6-back-to-top.js';
 import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 
-describe('<pf-v5-back-to-top>', function() {
+describe('<pf-v6-back-to-top>', function() {
   it('imperatively instantiates', function() {
-    expect(document.createElement('pf-v5-back-to-top')).to.be.an.instanceof(PfV5BackToTop);
+    expect(document.createElement('pf-v6-back-to-top')).to.be.an.instanceof(PfV6BackToTop);
   });
 
   describe('simply instantiating', function() {
-    let element: PfV5BackToTop;
+    let element: PfV6BackToTop;
 
     beforeEach(async function() {
-      element = await createFixture<PfV5BackToTop>(html`<pf-v5-back-to-top></pf-v5-back-to-top>`);
+      element = await createFixture<PfV6BackToTop>(html`<pf-v6-back-to-top></pf-v6-back-to-top>`);
     });
 
     it('should upgrade', function() {
-      const klass = customElements.get('pf-v5-back-to-top');
+      const klass = customElements.get('pf-v6-back-to-top');
       expect(element)
           .to.be.an.instanceOf(klass)
           .and
-          .to.be.an.instanceOf(PfV5BackToTop);
+          .to.be.an.instanceOf(PfV6BackToTop);
     });
   });
 
-  describe('when rendered in a viewport with a height smaller then content length', function() {
-    let element: PfV5BackToTop;
+  describe('with href (link mode)', function() {
+    let element: PfV6BackToTop;
 
     beforeEach(async function() {
       await setViewport({ width: 320, height: 640 });
       window.scrollTo({ top: 0, behavior: 'instant' });
       await nextFrame();
-      const container = await createFixture<PfV5BackToTop>(html`
+      const container = await createFixture<PfV6BackToTop>(html`
         <div id="top">
           <div style="height: 2000px;"></div>
-          <pf-v5-back-to-top href="#top">Back to top</pf-v5-back-to-top>
+          <pf-v6-back-to-top href="#top">Back to top</pf-v6-back-to-top>
         </div>
       `);
-      element = container.querySelector('pf-v5-back-to-top')!;
+      element = container.querySelector('pf-v6-back-to-top')!;
       await allUpdates(element);
     });
 
@@ -50,7 +50,7 @@ describe('<pf-v5-back-to-top>', function() {
       expect(snapshot).to.not.axContainRole('link');
     });
 
-    it('should not be accessible', async function() {
+    it('should not be accessible when hidden', async function() {
       const snapshot = await a11ySnapshot();
       expect(snapshot).to.not.axContainName('Back to top');
     });
@@ -62,7 +62,7 @@ describe('<pf-v5-back-to-top>', function() {
         await allUpdates(element);
       });
 
-      it('should be visible', async function() {
+      it('should be visible as a link', async function() {
         expect(await a11ySnapshot())
             .to.axContainQuery({ role: 'link', name: 'Back to top' });
       });
@@ -84,7 +84,7 @@ describe('<pf-v5-back-to-top>', function() {
       });
     });
 
-    describe('when the always visible property is true', function() {
+    describe('when always-visible is true', function() {
       beforeEach(async function() {
         window.scrollTo({ top: 0, behavior: 'instant' });
         await nextFrame();
@@ -112,50 +112,66 @@ describe('<pf-v5-back-to-top>', function() {
         });
       });
     });
+  });
+
+  describe('without href (button mode)', function() {
+    let element: PfV6BackToTop;
 
-    describe('when the scroll distance is set to 1000', function() {
+    beforeEach(async function() {
+      await setViewport({ width: 320, height: 640 });
+      window.scrollTo({ top: 0, behavior: 'instant' });
+      await nextFrame();
+      const container = await createFixture<PfV6BackToTop>(html`
+        <div id="top">
+          <div style="height: 2000px;"></div>
+          <pf-v6-back-to-top>Back to top</pf-v6-back-to-top>
+        </div>
+      `);
+      element = container.querySelector('pf-v6-back-to-top')!;
+      await allUpdates(element);
+    });
+
+    it('should be hidden on init', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.not.axContainRole('button');
+    });
+
+    describe('when scrolled 401px', function() {
       beforeEach(async function() {
-        element.scrollDistance = 1000;
+        window.scrollTo({ top: 401, behavior: 'instant' });
+        await nextFrame();
         await allUpdates(element);
       });
 
-      it('should be hidden', async function() {
-        expect(await a11ySnapshot()).to.not.axContainRole('link');
+      it('should be visible as a button', async function() {
+        expect(await a11ySnapshot())
+            .to.axContainQuery({ role: 'button', name: 'Back to top' });
       });
 
-      describe('when scrolled 1001px', function() {
-        beforeEach(async function() {
-          window.scrollTo({ top: 1001, behavior: 'instant' });
-          await nextFrame();
-          await allUpdates(element);
-        });
-
-        it('should be visible', async function() {
-          expect(await a11ySnapshot())
-              .to.axContainQuery({ role: 'link', name: 'Back to top' });
-        });
+      it('should be accessible', async function() {
+        await expect(element).to.be.accessible();
       });
     });
   });
 
-  describe('when rendered in an element with an overflowed height', function() {
-    let element: PfV5BackToTop;
+  describe('in an overflowed container with scrollable-selector', function() {
+    let element: PfV6BackToTop;
 
     beforeEach(async function() {
       window.scrollTo({ top: 0, behavior: 'instant' });
       await nextFrame();
-      const container = await createFixture<PfV5BackToTop>(html`
+      const container = await createFixture<PfV6BackToTop>(html`
         <div id="top" style="height: 500px; overflow-y: scroll;">
           <div style="height: 2000px;"></div>
-          <pf-v5-back-to-top href="#top" scrollable-selector="#top">Back to top</pf-v5-back-to-top>
+          <pf-v6-back-to-top href="#top" scrollable-selector="#top">Back to top</pf-v6-back-to-top>
         </div>
       `);
-      element = container.querySelector('pf-v5-back-to-top')!;
+      element = container.querySelector('pf-v6-back-to-top')!;
       await allUpdates(element);
     });
 
     it('should be hidden on init', async function() {
-      const snapshot = await a11ySnapshot({ selector: 'pf-v5-back-to-top' });
+      const snapshot = await a11ySnapshot({ selector: 'pf-v6-back-to-top' });
       expect(snapshot?.children).to.not.be.ok;
     });
 
@@ -176,20 +192,20 @@ describe('<pf-v5-back-to-top>', function() {
   });
 
   describe('when no text is provided', function() {
-    let element: PfV5BackToTop;
-
     describe('as a link', function() {
+      let element: PfV6BackToTop;
+
       beforeEach(async function() {
         await setViewport({ width: 320, height: 640 });
         window.scrollTo({ top: 0, behavior: 'instant' });
         await nextFrame();
-        const container = await createFixture<PfV5BackToTop>(html`
+        const container = await createFixture<PfV6BackToTop>(html`
           <div id="top">
             <div style="height: 2000px;"></div>
-            <pf-v5-back-to-top href="#top"></pf-v5-back-to-top>
+            <pf-v6-back-to-top href="#top"></pf-v6-back-to-top>
           </div>
         `);
-        element = container.querySelector('pf-v5-back-to-top')!;
+        element = container.querySelector('pf-v6-back-to-top')!;
         await allUpdates(element);
       });
 
@@ -200,7 +216,7 @@ describe('<pf-v5-back-to-top>', function() {
           await allUpdates(element);
         });
 
-        it('should have a label of "Back to top"', async function() {
+        it('should have a default accessible label of "Back to top"', async function() {
           expect(await a11ySnapshot())
               .to.axContainQuery({ role: 'link', name: 'Back to top' });
         });
@@ -208,17 +224,19 @@ describe('<pf-v5-back-to-top>', function() {
     });
 
     describe('as a button', function() {
+      let element: PfV6BackToTop;
+
       beforeEach(async function() {
         await setViewport({ width: 320, height: 640 });
         window.scrollTo({ top: 0, behavior: 'instant' });
         await nextFrame();
-        const container = await createFixture<PfV5BackToTop>(html`
+        const container = await createFixture<PfV6BackToTop>(html`
           <div id="top">
             <div style="height: 2000px;"></div>
-            <pf-v5-back-to-top></pf-v5-back-to-top>
+            <pf-v6-back-to-top></pf-v6-back-to-top>
           </div>
         `);
-        element = container.querySelector('pf-v5-back-to-top')!;
+        element = container.querySelector('pf-v6-back-to-top')!;
         await allUpdates(element);
       });
 
@@ -229,7 +247,7 @@ describe('<pf-v5-back-to-top>', function() {
           await allUpdates(element);
         });
 
-        it('should have a label of "Back to top"', async function() {
+        it('should have a default accessible label of "Back to top"', async function() {
           expect(await a11ySnapshot())
               .to.axContainQuery({ role: 'button', name: 'Back to top' });
         });
@@ -237,21 +255,21 @@ describe('<pf-v5-back-to-top>', function() {
     });
   });
 
-  describe('when a label is provided', function() {
-    let element: PfV5BackToTop;
-
+  describe('when accessible-label is provided', function() {
     describe('as a link', function() {
+      let element: PfV6BackToTop;
+
       beforeEach(async function() {
         await setViewport({ width: 320, height: 640 });
         window.scrollTo({ top: 0, behavior: 'instant' });
         await nextFrame();
-        const container = await createFixture<PfV5BackToTop>(html`
+        const container = await createFixture<PfV6BackToTop>(html`
           <div id="top">
             <div style="height: 2000px;"></div>
-            <pf-v5-back-to-top href="#top" label="Return to top"></pf-v5-back-to-top>
+            <pf-v6-back-to-top href="#top" accessible-label="Return to top"></pf-v6-back-to-top>
           </div>
         `);
-        element = container.querySelector('pf-v5-back-to-top')!;
+        element = container.querySelector('pf-v6-back-to-top')!;
         await allUpdates(element);
       });
 
@@ -262,7 +280,7 @@ describe('<pf-v5-back-to-top>', function() {
           await allUpdates(element);
         });
 
-        it('should have a label of "Return to top"', async function() {
+        it('should have the custom label', async function() {
           expect(await a11ySnapshot())
               .to.axContainQuery({ role: 'link', name: 'Return to top' });
         });
@@ -270,17 +288,19 @@ describe('<pf-v5-back-to-top>', function() {
     });
 
     describe('as a button', function() {
+      let element: PfV6BackToTop;
+
       beforeEach(async function() {
         await setViewport({ width: 320, height: 640 });
         window.scrollTo({ top: 0, behavior: 'instant' });
         await nextFrame();
-        const container = await createFixture<PfV5BackToTop>(html`
+        const container = await createFixture<PfV6BackToTop>(html`
           <div id="top">
             <div style="height: 2000px;"></div>
-            <pf-v5-back-to-top label="Return to top"></pf-v5-back-to-top>
+            <pf-v6-back-to-top accessible-label="Return to top"></pf-v6-back-to-top>
           </div>
         `);
-        element = container.querySelector('pf-v5-back-to-top')!;
+        element = container.querySelector('pf-v6-back-to-top')!;
         await allUpdates(element);
       });
 
@@ -291,7 +311,7 @@ describe('<pf-v5-back-to-top>', function() {
           await allUpdates(element);
         });
 
-        it('should have a label of "Return to top"', async function() {
+        it('should have the custom label', async function() {
           expect(await a11ySnapshot())
               .to.axContainQuery({ role: 'button', name: 'Return to top' });
         });
diff --git a/elements/pf-v5-back-to-top/test/pf-back-to-top.e2e.ts b/elements/pf-v6-back-to-top/test/pf-v6-back-to-top.e2e.ts
similarity index 95%
rename from elements/pf-v5-back-to-top/test/pf-back-to-top.e2e.ts
rename to elements/pf-v6-back-to-top/test/pf-v6-back-to-top.e2e.ts
index d9c618da25..d7c293cf99 100644
--- a/elements/pf-v5-back-to-top/test/pf-back-to-top.e2e.ts
+++ b/elements/pf-v6-back-to-top/test/pf-v6-back-to-top.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-back-to-top';
+const tagName = 'pf-v6-back-to-top';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-background-image/README.md b/elements/pf-v6-background-image/README.md
new file mode 100644
index 0000000000..db172e4f0c
--- /dev/null
+++ b/elements/pf-v6-background-image/README.md
@@ -0,0 +1,19 @@
+# Background image
+
+`<pf-v6-background-image>` places an image in the background of a page or area of a page.
+
+## Usage
+
+```html
+<pf-v6-background-image src="/assets/images/background.svg"></pf-v6-background-image>
+```
+
+The element uses fixed positioning and sits behind all other content at `z-index: -1`.
+
+## Divergences from React `BackgroundImage`
+
+### Not implemented
+
+| React prop  | Notes                                          |
+|-------------|-------------------------------------------------|
+| `className` | Not needed; shadow DOM provides encapsulation. |
diff --git a/elements/pf-v6-background-image/demo/index.html b/elements/pf-v6-background-image/demo/index.html
new file mode 100644
index 0000000000..b8cf997b98
--- /dev/null
+++ b/elements/pf-v6-background-image/demo/index.html
@@ -0,0 +1,11 @@
+<pf-v6-background-image src="pf-background.svg"></pf-v6-background-image>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-background-image/pf-v6-background-image.js';
+</script>
+
+<style>
+html, body {
+  background-color: transparent;
+}
+</style>
diff --git a/elements/pf-v6-background-image/demo/pf-background.svg b/elements/pf-v6-background-image/demo/pf-background.svg
new file mode 100644
index 0000000000..b7fd73f70a
--- /dev/null
+++ b/elements/pf-v6-background-image/demo/pf-background.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="541" height="370" viewBox="0 0 541 370" fill="none">
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M459 95L541 95V177H532.214C491.779 177 459 144.221 459 103.786V95Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M451 95L369 95V177H377.786C418.221 177 451 144.221 451 103.786V95Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M357 177H276V95H284.679C324.621 95 357 127.779 357 168.214V177Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M184 177H266V95H257.214C216.779 95 184 127.779 184 168.214V177Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M184 0L266 0V82H257.214C216.779 82 184 49.2208 184 8.78571V0Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M356 82L274 82V0H282.786C323.221 0 356 32.7792 356 73.2143V82Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M449 82L368 82V0H376.679C416.621 0 449 32.7792 449 73.2143V82Z" fill="#A3A3A3"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M459 79.8036V82H461.05V80H461V79.8036H459ZM469.25 82H465.15V80H469.25V82ZM459 75.4107H461V73.2143C461 72.5441 461.009 71.8762 461.028 71.2106L459.028 71.1553C459.01 71.8394 459 72.5257 459 73.2143V75.4107ZM459.255 67.0552L461.248 67.2212C461.36 65.8871 461.508 64.5635 461.691 63.2515L459.71 62.9743C459.522 64.3232 459.37 65.6838 459.255 67.0552ZM460.394 58.9256L462.356 59.3138C462.615 58.0026 462.91 56.7044 463.241 55.4202L461.304 54.922C460.964 56.2425 460.66 57.5774 460.394 58.9256ZM462.439 50.9736L464.345 51.5805C464.75 50.3077 465.19 49.0505 465.664 47.8099L463.796 47.0963C463.309 48.372 462.856 49.6648 462.439 50.9736ZM465.369 43.3022L467.194 44.1201C467.74 42.9025 468.319 41.7029 468.93 40.5226L467.154 39.6032C466.526 40.8167 465.93 42.0501 465.369 43.3022ZM469.144 36.0105L470.865 37.0283C471.544 35.8805 472.254 34.7533 472.994 33.6479L471.332 32.5353C470.571 33.6716 469.841 34.8304 469.144 36.0105ZM473.711 29.1876L475.308 30.3914C476.111 29.327 476.942 28.2858 477.802 27.269L476.274 25.9779C475.391 27.0231 474.536 28.0934 473.711 29.1876ZM479.012 22.9163L480.465 24.2905C481.381 23.3227 482.323 22.3805 483.291 21.4652L481.916 20.0121C480.921 20.953 479.953 21.9215 479.012 22.9163ZM484.978 17.2743L486.269 18.8017C487.286 17.9422 488.327 17.1107 489.391 16.3084L488.188 14.7113C487.093 15.5361 486.023 16.3908 484.978 17.2743ZM491.535 12.3318L492.648 13.9937C493.753 13.2537 494.88 12.5439 496.028 11.8653L495.011 10.1436C493.83 10.8413 492.672 11.5711 491.535 12.3318ZM498.603 8.15388L499.523 9.93001C500.703 9.319 501.902 8.74007 503.12 8.19435L502.302 6.36926C501.05 6.93039 499.817 7.52566 498.603 8.15388ZM506.096 4.7959L506.81 6.66425C508.051 6.19038 509.308 5.75021 510.581 5.34487L509.974 3.43919C508.665 3.856 507.372 4.30862 506.096 4.7959ZM513.922 2.30366L514.42 4.24061C515.704 3.91032 517.003 3.61493 518.314 3.35554L517.926 1.39356C516.577 1.66028 515.243 1.96401 513.922 2.30366ZM521.974 0.710419L522.252 2.69112C523.564 2.5075 524.887 2.35962 526.221 2.2485L526.055 0.255402C524.684 0.369629 523.323 0.521645 521.974 0.710419ZM473.35 82V80H477.45V82H473.35ZM481.55 82V80H485.65V82H481.55ZM489.75 82V80H493.85V82H489.75ZM497.95 82V80H502.05V82H497.95ZM506.15 82V80H510.25V82H506.15ZM514.35 82V80H518.45V82L514.35 82ZM522.55 82V80H526.65V82H522.55ZM530.75 82V80H534.85V82H530.75ZM538.95 82V80H539V79.95H541V82H538.95ZM541 75.85H539V71.75H541V75.85ZM541 67.65H539V63.55H541V67.65ZM541 59.45H539V55.35H541V59.45ZM541 51.25H539V47.15H541V51.25ZM541 43.05H539V38.95H541V43.05ZM541 34.85H539V30.75H541V34.85ZM541 26.65H539V22.55H541V26.65ZM541 18.45H539V14.35H541V18.45ZM541 10.25H539V6.15H541V10.25ZM541 2.05H539V2H538.804V0H541V2.05ZM534.411 0V2H532.214C531.544 2 530.876 2.00925 530.211 2.02763L530.155 0.0283966C530.839 0.00950623 531.526 0 532.214 0H534.411Z" fill="#A3A3A3"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M275 290.196V288H277.05V290H277V290.196H275ZM285.25 288H281.15V290H285.25V288ZM275 294.589H277V296.786C277 297.456 277.009 298.124 277.028 298.789L275.028 298.845C275.01 298.161 275 297.474 275 296.786V294.589ZM275.255 302.945L277.248 302.779C277.36 304.113 277.508 305.436 277.691 306.748L275.71 307.026C275.522 305.677 275.37 304.316 275.255 302.945ZM276.394 311.074L278.356 310.686C278.615 311.997 278.91 313.296 279.241 314.58L277.304 315.078C276.964 313.757 276.66 312.423 276.394 311.074ZM278.439 319.026L280.345 318.419C280.75 319.692 281.19 320.949 281.664 322.19L279.796 322.904C279.309 321.628 278.856 320.335 278.439 319.026ZM281.369 326.698L283.194 325.88C283.74 327.098 284.319 328.297 284.93 329.477L283.154 330.397C282.526 329.183 281.93 327.95 281.369 326.698ZM285.144 333.989L286.865 332.972C287.544 334.12 288.254 335.247 288.994 336.352L287.332 337.465C286.571 336.328 285.841 335.17 285.144 333.989ZM289.711 340.812L291.308 339.609C292.111 340.673 292.942 341.714 293.802 342.731L292.274 344.022C291.391 342.977 290.536 341.907 289.711 340.812ZM295.012 347.084L296.465 345.709C297.381 346.677 298.323 347.619 299.291 348.535L297.916 349.988C296.921 349.047 295.953 348.079 295.012 347.084ZM300.978 352.726L302.269 351.198C303.286 352.058 304.327 352.889 305.391 353.692L304.188 355.289C303.093 354.464 302.023 353.609 300.978 352.726ZM307.535 357.668L308.648 356.006C309.753 356.746 310.88 357.456 312.028 358.135L311.011 359.856C309.83 359.159 308.672 358.429 307.535 357.668ZM314.603 361.846L315.523 360.07C316.703 360.681 317.902 361.26 319.12 361.806L318.302 363.631C317.05 363.07 315.817 362.474 314.603 361.846ZM322.096 365.204L322.81 363.336C324.051 363.81 325.308 364.25 326.581 364.655L325.974 366.561C324.665 366.144 323.372 365.691 322.096 365.204ZM329.922 367.696L330.42 365.759C331.704 366.09 333.003 366.385 334.314 366.644L333.926 368.606C332.577 368.34 331.243 368.036 329.922 367.696ZM337.974 369.29L338.252 367.309C339.564 367.492 340.887 367.64 342.221 367.751L342.055 369.745C340.684 369.63 339.323 369.478 337.974 369.29ZM289.35 288V290H293.45V288H289.35ZM297.55 288V290H301.65V288H297.55ZM305.75 288V290H309.85V288H305.75ZM313.95 288V290H318.05V288H313.95ZM322.15 288V290H326.25V288H322.15ZM330.35 288V290H334.45V288H330.35ZM338.55 288V290H342.65V288H338.55ZM346.75 288V290H350.85V288H346.75ZM354.95 288V290H355V290.05H357V288H354.95ZM357 294.15H355V298.25H357V294.15ZM357 302.35H355V306.45H357V302.35ZM357 310.55H355V314.65H357V310.55ZM357 318.75H355V322.85H357V318.75ZM357 326.95H355V331.05H357V326.95ZM357 335.15H355V339.25H357V335.15ZM357 343.35H355V347.45H357V343.35ZM357 351.55H355V355.65H357V351.55ZM357 359.75H355V363.85H357V359.75ZM357 367.95H355V368H354.804V370H357V367.95ZM350.411 370V368H348.214C347.544 368 346.876 367.991 346.211 367.972L346.155 369.972C346.839 369.99 347.526 370 348.214 370H350.411Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M267 288H185V370H193.786C234.221 370 267 337.221 267 296.786V288Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M173 370H92L92 288H100.679C140.621 288 173 320.779 173 361.214V370Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M0 370H82L82 288H73.2143C32.7792 288 0 320.779 0 361.214L0 370Z" fill="#A3A3A3"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M0 195.196L0 193H2.05001L2.05001 195H2V195.196H0ZM10.25 193H6.15001V195H10.25V193ZM0 199.589H2L2 201.786C2 202.456 2.00925 203.124 2.02763 203.789L0.0283928 203.845C0.00950564 203.161 0 202.474 0 201.786L0 199.589ZM0.255399 207.945L2.2485 207.779C2.35962 209.113 2.5075 210.436 2.69112 211.748L0.71042 212.026C0.521646 210.677 0.369624 209.316 0.255399 207.945ZM1.39356 216.074L3.35554 215.686C3.61493 216.997 3.91032 218.296 4.24061 219.58L2.30366 220.078C1.96402 218.757 1.66028 217.423 1.39356 216.074ZM3.43919 224.026L5.34488 223.419C5.75022 224.692 6.19038 225.949 6.66425 227.19L4.7959 227.904C4.30863 226.628 3.856 225.335 3.43919 224.026ZM6.36926 231.698L8.19436 230.88C8.74007 232.098 9.319 233.297 9.93002 234.477L8.15388 235.397C7.52566 234.183 6.93039 232.95 6.36926 231.698ZM10.1437 238.989L11.8653 237.972C12.5439 239.12 13.2537 240.247 13.9938 241.352L12.3318 242.465C11.5711 241.328 10.8413 240.17 10.1437 238.989ZM14.7113 245.812L16.3085 244.609C17.1107 245.673 17.9422 246.714 18.8017 247.731L17.2743 249.022C16.3908 247.977 15.5361 246.907 14.7113 245.812ZM20.0121 252.084L21.4652 250.709C22.3805 251.677 23.3227 252.619 24.2905 253.535L22.9163 254.988C21.9215 254.047 20.953 253.079 20.0121 252.084ZM25.9779 257.726L27.269 256.198C28.2858 257.058 29.327 257.889 30.3914 258.692L29.1876 260.289C28.0934 259.464 27.0231 258.609 25.9779 257.726ZM32.5353 262.668L33.6479 261.006C34.7533 261.746 35.8805 262.456 37.0283 263.135L36.0106 264.856C34.8305 264.159 33.6716 263.429 32.5353 262.668ZM39.6032 266.846L40.5226 265.07C41.7029 265.681 42.9025 266.26 44.1201 266.806L43.3022 268.631C42.0502 268.07 40.8167 267.474 39.6032 266.846ZM47.0963 270.204L47.8099 268.336C49.0505 268.81 50.3078 269.25 51.5805 269.655L50.9736 271.561C49.6648 271.144 48.372 270.691 47.0963 270.204ZM54.922 272.696L55.4202 270.759C56.7044 271.09 58.0026 271.385 59.3138 271.644L58.9256 273.606C57.5774 273.34 56.2425 273.036 54.922 272.696ZM62.9743 274.29L63.2515 272.309C64.5635 272.492 65.8871 272.64 67.2212 272.751L67.0552 274.745C65.6838 274.63 64.3232 274.478 62.9743 274.29ZM14.35 193V195H18.45V193H14.35ZM22.55 193V195H26.65V193H22.55ZM30.75 193V195H34.85V193H30.75ZM38.95 193V195H43.05V193H38.95ZM47.15 193V195H51.25V193H47.15ZM55.35 193V195H59.45V193H55.35ZM63.55 193V195H67.65V193H63.55ZM71.75 193V195H75.85V193H71.75ZM79.95 193V195H80V195.05H82V193H79.95ZM82 199.15H80V203.25H82V199.15ZM82 207.35H80V211.45H82V207.35ZM82 215.55H80V219.65H82V215.55ZM82 223.75H80V227.85H82V223.75ZM82 231.95H80V236.05H82V231.95ZM82 240.15H80V244.25H82V240.15ZM82 248.35H80L80 252.45H82L82 248.35ZM82 256.55H80V260.65H82V256.55ZM82 264.75H80V268.85H82V264.75ZM82 272.95H80V273H79.8036V275H82V272.95ZM75.4107 275V273H73.2143C72.5441 273 71.8762 272.991 71.2105 272.972L71.1553 274.972C71.8393 274.99 72.5257 275 73.2143 275H75.4107Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M172 275H90L90 193H98.7857C139.221 193 172 225.779 172 266.214V275Z" fill="#A3A3A3"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M539 367.804V370H536.95V368H537V367.804H539ZM528.75 370H532.85V368H528.75V370ZM539 363.411H537V361.214C537 360.544 536.991 359.876 536.972 359.211L538.972 359.155C538.99 359.839 539 360.526 539 361.214V363.411ZM538.745 355.055L536.752 355.221C536.64 353.887 536.492 352.564 536.309 351.252L538.29 350.974C538.478 352.323 538.63 353.684 538.745 355.055ZM537.606 346.926L535.644 347.314C535.385 346.003 535.09 344.704 534.759 343.42L536.696 342.922C537.036 344.243 537.34 345.577 537.606 346.926ZM535.561 338.974L533.655 339.581C533.25 338.308 532.81 337.051 532.336 335.81L534.204 335.096C534.691 336.372 535.144 337.665 535.561 338.974ZM532.631 331.302L530.806 332.12C530.26 330.902 529.681 329.703 529.07 328.523L530.846 327.603C531.474 328.817 532.07 330.05 532.631 331.302ZM528.856 324.011L527.135 325.028C526.456 323.88 525.746 322.753 525.006 321.648L526.668 320.535C527.429 321.672 528.159 322.83 528.856 324.011ZM524.289 317.188L522.692 318.391C521.889 317.327 521.058 316.286 520.198 315.269L521.726 313.978C522.609 315.023 523.464 316.093 524.289 317.188ZM518.988 310.916L517.535 312.291C516.619 311.323 515.677 310.381 514.709 309.465L516.084 308.012C517.079 308.953 518.047 309.921 518.988 310.916ZM513.022 305.274L511.731 306.802C510.714 305.942 509.673 305.111 508.609 304.308L509.812 302.711C510.907 303.536 511.977 304.391 513.022 305.274ZM506.465 300.332L505.352 301.994C504.247 301.254 503.12 300.544 501.972 299.865L502.989 298.144C504.17 298.841 505.328 299.571 506.465 300.332ZM499.397 296.154L498.477 297.93C497.297 297.319 496.098 296.74 494.88 296.194L495.698 294.369C496.95 294.93 498.183 295.526 499.397 296.154ZM491.904 292.796L491.19 294.664C489.949 294.19 488.692 293.75 487.419 293.345L488.026 291.439C489.335 291.856 490.628 292.309 491.904 292.796ZM484.078 290.304L483.58 292.241C482.296 291.91 480.997 291.615 479.686 291.356L480.074 289.394C481.423 289.66 482.757 289.964 484.078 290.304ZM476.026 288.71L475.748 290.691C474.436 290.507 473.113 290.36 471.779 290.248L471.945 288.255C473.316 288.37 474.677 288.522 476.026 288.71ZM524.65 370V368H520.55V370H524.65ZM516.45 370V368H512.35V370H516.45ZM508.25 370V368H504.15V370H508.25ZM500.05 370V368H495.95V370H500.05ZM491.85 370V368H487.75V370H491.85ZM483.65 370V368H479.55V370H483.65ZM475.45 370V368H471.35V370H475.45ZM467.25 370V368H463.15V370H467.25ZM459.05 370V368H459V367.95H457V370H459.05ZM457 363.85H459V359.75H457V363.85ZM457 355.65H459V351.55H457V355.65ZM457 347.45H459V343.35H457V347.45ZM457 339.25H459V335.15H457V339.25ZM457 331.05H459V326.95H457V331.05ZM457 322.85H459V318.75H457V322.85ZM457 314.65H459V310.55H457V314.65ZM457 306.45H459V302.35H457V306.45ZM457 298.25H459V294.15H457V298.25ZM457 290.05H459V290H459.196V288H457V290.05ZM463.589 288V290H465.786C466.456 290 467.124 290.009 467.789 290.028L467.845 288.028C467.161 288.01 466.474 288 465.786 288H463.589Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M366 370H447V288H438.321C398.379 288 366 320.779 366 361.214V370Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M366 193H447V275H438.321C398.379 275 366 242.221 366 201.786V193Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M537 275H456V193H464.679C504.621 193 537 225.779 537 266.214V275Z" fill="#A3A3A3"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M265 272.804V275H262.975V273H263V272.804H265ZM254.875 275H258.925V273H254.875V275ZM265 268.411H263V266.214C263 265.548 262.991 264.884 262.973 264.222L264.972 264.168C264.991 264.848 265 265.53 265 266.214V268.411ZM264.751 260.092L262.757 260.255C262.649 258.929 262.505 257.612 262.325 256.308L264.307 256.035C264.491 257.376 264.639 258.729 264.751 260.092ZM263.64 252.009L261.676 252.39C261.423 251.086 261.134 249.794 260.812 248.516L262.751 248.026C263.083 249.34 263.379 250.668 263.64 252.009ZM261.641 244.097L259.733 244.694C259.336 243.426 258.906 242.174 258.442 240.938L260.315 240.235C260.791 241.506 261.234 242.794 261.641 244.097ZM258.776 236.454L256.945 237.26C256.411 236.045 255.844 234.849 255.245 233.671L257.028 232.765C257.643 233.976 258.226 235.206 258.776 236.454ZM255.078 229.179L253.348 230.183C252.683 229.036 251.987 227.91 251.261 226.806L252.932 225.707C253.678 226.843 254.394 228 255.078 229.179ZM250.596 222.36L248.988 223.55C248.2 222.484 247.383 221.442 246.538 220.424L248.077 219.147C248.945 220.193 249.786 221.265 250.596 222.36ZM245.384 216.079L243.918 217.44C243.017 216.47 242.089 215.525 241.136 214.607L242.524 213.166C243.504 214.11 244.457 215.082 245.384 216.079ZM239.506 210.418L238.201 211.933C237.198 211.07 236.171 210.234 235.121 209.428L236.339 207.842C237.419 208.671 238.475 209.53 239.506 210.418ZM233.032 205.448L231.905 207.1C230.813 206.355 229.699 205.641 228.564 204.958L229.596 203.244C230.763 203.947 231.909 204.682 233.032 205.448ZM226.041 201.239L225.108 203.008C223.94 202.392 222.752 201.808 221.547 201.258L222.378 199.438C223.618 200.004 224.839 200.605 226.041 201.239ZM218.617 197.85L217.892 199.714C216.662 199.235 215.416 198.791 214.154 198.381L214.771 196.479C216.07 196.9 217.352 197.358 218.617 197.85ZM210.853 195.331L210.346 197.266C209.071 196.932 207.783 196.633 206.482 196.371L206.877 194.41C208.216 194.68 209.541 194.988 210.853 195.331ZM202.855 193.719L202.573 195.699C201.27 195.513 199.956 195.364 198.631 195.251L198.8 193.259C200.163 193.374 201.515 193.528 202.855 193.719ZM250.825 275V273H246.775V275H250.825ZM242.725 275V273H238.675V275H242.725ZM234.625 275V273H230.575V275H234.625ZM226.525 275V273H222.475V275H226.525ZM218.425 275V273H214.375V275H218.425ZM210.325 275V273H206.275V275H210.325ZM202.225 275V273H198.175V275H202.225ZM194.125 275V273H190.075V275H194.125ZM186.025 275V273H186V272.95H184V275H186.025ZM184 268.85H186V264.75H184V268.85ZM184 260.65H186V256.55H184V260.65ZM184 252.45H186V248.35H184V252.45ZM184 244.25H186V240.15H184V244.25ZM184 236.05H186V231.95H184V236.05ZM184 227.85H186V223.75H184V227.85ZM184 219.65H186V215.55H184V219.65ZM184 211.45H186V207.35H184V211.45ZM184 203.25H186V199.15H184V203.25ZM184 195.05H186V195H186.17V193H184V195.05ZM190.509 193V195H192.679C193.344 195 194.008 195.009 194.669 195.028L194.725 193.029C194.045 193.01 193.363 193 192.679 193H190.509Z" fill="#A3A3A3"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M275 275H357V193H348.214C307.779 193 275 225.779 275 266.214V275Z" fill="#A3A3A3"/>
+</svg>
diff --git a/elements/pf-v6-background-image/docs/pf-v6-background-image.md b/elements/pf-v6-background-image/docs/pf-v6-background-image.md
new file mode 100644
index 0000000000..69ce8e71f2
--- /dev/null
+++ b/elements/pf-v6-background-image/docs/pf-v6-background-image.md
@@ -0,0 +1,21 @@
+{% renderInstallation %} {% endrenderInstallation %}
+
+{% renderOverview %}
+  {% htmlexample class="pf-v6-background-image" %}
+  <pf-v6-background-image src="/components/pf-v6-background-image/demo/pf-background.svg"></pf-v6-background-image>
+  {% endhtmlexample %}
+
+  View the [full screen demo](/components/pf-v6-background-image/demo/).
+
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  ### Basic
+  {% htmlexample class="pf-v6-background-image" %}
+  <pf-v6-background-image src="/components/pf-v6-background-image/demo/pf-background.svg"></pf-v6-background-image>
+  {% endhtmlexample %}
+{% endband %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
diff --git a/elements/pf-v6-background-image/docs/screenshot.png b/elements/pf-v6-background-image/docs/screenshot.png
new file mode 100644
index 0000000000..62852a3cd8
Binary files /dev/null and b/elements/pf-v6-background-image/docs/screenshot.png differ
diff --git a/elements/pf-v6-background-image/pf-v6-background-image.css b/elements/pf-v6-background-image/pf-v6-background-image.css
new file mode 100644
index 0000000000..d3344492a4
--- /dev/null
+++ b/elements/pf-v6-background-image/pf-v6-background-image.css
@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+#background {
+  width: 100%;
+  height: 100%;
+  /** Background color shown behind or instead of the image */
+  background-color: var(--pf-v6-c-background-image--BackgroundColor, var(--pf-t--global--background--color--primary--default, #292929));
+  /** Background image URL, automatically set via the `src` attribute */
+  background-image: var(--pf-v6-c-background-image--BackgroundImage, none);
+  background-repeat: no-repeat;
+  /** Position of the background image within the viewport */
+  background-position: var(--pf-v6-c-background-image--BackgroundPosition, bottom right);
+  /** Computed background size using clamp() for responsive scaling */
+  background-size: var(--pf-v6-c-background-image--BackgroundSize,
+    clamp(
+      /** Minimum width for responsive background sizing */
+      var(--pf-v6-c-background-image--BackgroundSize--min-width, 200px),
+      /** Responsive width percentage for background sizing */
+      var(--pf-v6-c-background-image--BackgroundSize--width, 60%),
+      /** Maximum width for responsive background sizing */
+      var(--pf-v6-c-background-image--BackgroundSize--max-width, 600px)
+    )
+  );
+}
+
+:dir(rtl) #background {
+  background-position: var(--pf-v6-c-background-image--BackgroundPosition, bottom left);
+}
diff --git a/elements/pf-v6-background-image/pf-v6-background-image.ts b/elements/pf-v6-background-image/pf-v6-background-image.ts
new file mode 100644
index 0000000000..fb91fea175
--- /dev/null
+++ b/elements/pf-v6-background-image/pf-v6-background-image.ts
@@ -0,0 +1,36 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import styles from './pf-v6-background-image.css';
+
+/**
+ * A **background image** allows you to place a decorative image in the
+ * background of your page or area of a page. Use this when you want to
+ * provide a branded backdrop. The element SHOULD be placed as a direct
+ * child of `<body>`. Users MUST set `src` to display an image. This
+ * element SHOULD NOT contain interactive content. It is hidden from
+ * screen readers via `aria-hidden` for WCAG compliance.
+ *
+ * @summary Places a decorative image in the background of a page.
+ */
+@customElement('pf-v6-background-image')
+export class PfV6BackgroundImage extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /** URL or file path of the background image */
+  @property() src?: string;
+
+  override render(): TemplateResult<1> {
+    return html`<div id="background" aria-hidden="true" style="${styleMap({
+      '--pf-v6-c-background-image--BackgroundImage': this.src ? `url('${this.src.replace(/'/g, '\\\'')}')` : undefined,
+    })}"></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-background-image': PfV6BackgroundImage;
+  }
+}
diff --git a/elements/pf-v5-background-image/test/pf-background-image.e2e.ts b/elements/pf-v6-background-image/test/pf-background-image.e2e.ts
similarity index 94%
rename from elements/pf-v5-background-image/test/pf-background-image.e2e.ts
rename to elements/pf-v6-background-image/test/pf-background-image.e2e.ts
index 9f7bc5a7a0..812dae8c9b 100644
--- a/elements/pf-v5-background-image/test/pf-background-image.e2e.ts
+++ b/elements/pf-v6-background-image/test/pf-background-image.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-background-image';
+const tagName = 'pf-v6-background-image';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-background-image/test/pf-background-image.spec.ts b/elements/pf-v6-background-image/test/pf-background-image.spec.ts
new file mode 100644
index 0000000000..241800b021
--- /dev/null
+++ b/elements/pf-v6-background-image/test/pf-background-image.spec.ts
@@ -0,0 +1,80 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+
+import { PfV6BackgroundImage } from '../pf-v6-background-image.js';
+
+describe('<pf-v6-background-image>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-background-image')).to.be.an.instanceof(PfV6BackgroundImage);
+  });
+
+  describe('simply instantiating', function() {
+    let element: PfV6BackgroundImage;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6BackgroundImage>(html`
+        <pf-v6-background-image></pf-v6-background-image>
+      `);
+    });
+
+    it('should upgrade', function() {
+      const klass = customElements.get('pf-v6-background-image');
+      expect(element)
+          .to.be.an.instanceOf(klass)
+          .and
+          .to.be.an.instanceOf(PfV6BackgroundImage);
+    });
+
+    it('should not have a background image set', function() {
+      const bg = element.shadowRoot!.querySelector('#background')!;
+      const styles = getComputedStyle(bg);
+      expect(styles.getPropertyValue('background-image')).to.equal('none');
+    });
+  });
+
+  describe('with src attribute', function() {
+    let element: PfV6BackgroundImage;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6BackgroundImage>(html`
+        <pf-v6-background-image src="/test/image.jpg"></pf-v6-background-image>
+      `);
+    });
+
+    it('should apply the background image', function() {
+      const bg = element.shadowRoot!.querySelector('#background')!;
+      const styles = getComputedStyle(bg);
+      expect(styles.getPropertyValue('background-image')).to.contain('/test/image.jpg');
+    });
+
+    it('should update background image when src changes dynamically', async function() {
+      element.src = '/test/other-image.jpg';
+      await element.updateComplete;
+      const bg = element.shadowRoot!.querySelector('#background')!;
+      const styles = getComputedStyle(bg);
+      expect(styles.getPropertyValue('background-image')).to.contain('/test/other-image.jpg');
+    });
+
+    it('should not intercept pointer events', function() {
+      const styles = getComputedStyle(element);
+      expect(styles.pointerEvents).to.equal('none');
+    });
+
+    it('should be presentational in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot();
+      interface A11yNode {
+        role?: string;
+        children?: A11yNode[];
+      }
+      function findNode(node: A11yNode): boolean {
+        if (node.role === 'img') {
+          return true;
+        } else {
+          return node.children?.some(findNode) ?? false;
+        }
+      }
+      expect(findNode(snapshot), 'no img role should exist in the tree').to.be.false;
+    });
+  });
+});
diff --git a/elements/pf-v6-badge/README.md b/elements/pf-v6-badge/README.md
new file mode 100644
index 0000000000..0996bd800c
--- /dev/null
+++ b/elements/pf-v6-badge/README.md
@@ -0,0 +1,35 @@
+# Badge
+
+A badge is used to annotate other information like a label or an object name.
+
+## Usage
+
+### Basic badge
+
+```html
+<pf-v6-badge>7</pf-v6-badge>
+```
+
+### Read and unread badges
+
+```html
+<pf-v6-badge state="read">24</pf-v6-badge>
+<pf-v6-badge state="unread">7</pf-v6-badge>
+```
+
+### Disabled badge
+
+```html
+<pf-v6-badge state="read" disabled>10</pf-v6-badge>
+```
+
+## Divergences from React `Badge`
+
+### Changed API
+
+| React prop | Web component | Difference |
+| --- | --- | --- |
+| `isRead` | `state` attribute | Boolean replaced with `'read' \| 'unread'` enum. Omitting `state` gives neutral styling. |
+| `isDisabled` | `disabled` | Dropped `is-` prefix per web component convention. |
+| `screenReaderText` | Slotted visually-hidden text | No dedicated attribute. Slot a visually-hidden `<span>` inside the badge for screen reader context: `<pf-v6-badge>3 <span class="pf-v6-screen-reader">unread messages</span></pf-v6-badge>`. Same underlying technique as React -- `ariaLabel` cannot label a generic element. |
+
diff --git a/elements/pf-v6-badge/demo/disabled.html b/elements/pf-v6-badge/demo/disabled.html
new file mode 100644
index 0000000000..002ed7ad7c
--- /dev/null
+++ b/elements/pf-v6-badge/demo/disabled.html
@@ -0,0 +1,12 @@
+---
+name: Disabled
+description: Disabled badges indicate that the associated content or action is currently unavailable.
+---
+<pf-v6-badge state="read" disabled>7</pf-v6-badge>
+<pf-v6-badge state="read" disabled>24</pf-v6-badge>
+<pf-v6-badge state="unread" disabled>240</pf-v6-badge>
+<pf-v6-badge state="unread" disabled>999+</pf-v6-badge>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
+</script>
diff --git a/elements/pf-v6-badge/demo/index.html b/elements/pf-v6-badge/demo/index.html
new file mode 100644
index 0000000000..418d93581a
--- /dev/null
+++ b/elements/pf-v6-badge/demo/index.html
@@ -0,0 +1,9 @@
+---
+name: Basic
+description: A basic badge displays a numeric value.
+---
+<pf-v6-badge>7</pf-v6-badge>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
+</script>
diff --git a/elements/pf-v6-badge/demo/read.html b/elements/pf-v6-badge/demo/read.html
new file mode 100644
index 0000000000..7442b7e468
--- /dev/null
+++ b/elements/pf-v6-badge/demo/read.html
@@ -0,0 +1,12 @@
+---
+name: Read
+description: Read badges display a numeric value with read state styling, indicating the content has been viewed.
+---
+<pf-v6-badge state="read">7</pf-v6-badge>
+<pf-v6-badge state="read">24</pf-v6-badge>
+<pf-v6-badge state="read">240</pf-v6-badge>
+<pf-v6-badge state="read">999+</pf-v6-badge>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
+</script>
diff --git a/elements/pf-v6-badge/demo/unread.html b/elements/pf-v6-badge/demo/unread.html
new file mode 100644
index 0000000000..9bafd4cba4
--- /dev/null
+++ b/elements/pf-v6-badge/demo/unread.html
@@ -0,0 +1,12 @@
+---
+name: Unread
+description: Unread badges use a bold, branded style to indicate content that has not yet been viewed.
+---
+<pf-v6-badge state="unread">7</pf-v6-badge>
+<pf-v6-badge state="unread">24</pf-v6-badge>
+<pf-v6-badge state="unread">240</pf-v6-badge>
+<pf-v6-badge state="unread">999+</pf-v6-badge>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
+</script>
diff --git a/elements/pf-v6-badge/docs/pf-v6-badge.md b/elements/pf-v6-badge/docs/pf-v6-badge.md
new file mode 100644
index 0000000000..3ace0d2a36
--- /dev/null
+++ b/elements/pf-v6-badge/docs/pf-v6-badge.md
@@ -0,0 +1,31 @@
+{% renderOverview %}
+  A badge is used to annotate other information like a label or an object name.
+
+  <pf-v6-badge state="unread">7</pf-v6-badge>
+  <pf-v6-badge state="read">24</pf-v6-badge>
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  ### Read and unread
+  {% htmlexample %}
+  <pf-v6-badge state="unread">7</pf-v6-badge>
+  <pf-v6-badge state="read">24</pf-v6-badge>
+  {% endhtmlexample %}
+
+  ### Disabled
+  {% htmlexample %}
+  <pf-v6-badge state="read" disabled>10</pf-v6-badge>
+  {% endhtmlexample %}
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v6-badge/docs/screenshot.png b/elements/pf-v6-badge/docs/screenshot.png
new file mode 100644
index 0000000000..b04ef300fb
Binary files /dev/null and b/elements/pf-v6-badge/docs/screenshot.png differ
diff --git a/elements/pf-v6-badge/pf-v6-badge.css b/elements/pf-v6-badge/pf-v6-badge.css
new file mode 100644
index 0000000000..6d0fa75bd2
--- /dev/null
+++ b/elements/pf-v6-badge/pf-v6-badge.css
@@ -0,0 +1,101 @@
+:host {
+  position: relative;
+  display: inline-block;
+  min-width:
+    /** Minimum width of the badge */
+    var(--pf-v6-c-badge--MinWidth,
+      /** Ensures badge is wide enough for single-digit content */
+      var(--pf-t--global--spacer--xl, 2rem));
+  padding-inline-start:
+    /** Inline start padding */
+    var(--pf-v6-c-badge--PaddingInlineStart,
+      /** Horizontal padding for badge content */
+      var(--pf-t--global--spacer--sm, 0.5rem));
+  padding-inline-end:
+    /** Inline end padding */
+    var(--pf-v6-c-badge--PaddingInlineEnd,
+      /** Horizontal padding for badge content */
+      var(--pf-t--global--spacer--sm, 0.5rem));
+  font-size:
+    /** Font size of the badge text */
+    var(--pf-v6-c-badge--FontSize,
+      /** Small body text size for compact display */
+      var(--pf-t--global--font--size--body--sm, 0.75rem));
+  font-weight:
+    /** Font weight of the badge text */
+    var(--pf-v6-c-badge--FontWeight,
+      /** Bold weight for badge number emphasis */
+      var(--pf-t--global--font--weight--body--bold, 700));
+  color:
+    /** Text color of the badge */
+    var(--pf-v6-c-badge--Color,
+      var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515));
+  text-align: center;
+  white-space: nowrap;
+  background-color:
+    /** Background color of the badge */
+    var(--pf-v6-c-badge--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0));
+  border-radius:
+    /** Border radius of the badge */
+    var(--pf-v6-c-badge--BorderRadius,
+      /** Pill shape for badge container */
+      var(--pf-t--global--border--radius--pill, 180em));
+}
+
+:host::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border:
+    /** Border width of the badge */
+    var(--pf-v6-c-badge--BorderWidth,
+      var(--pf-t--global--border--width--regular, 1px))
+    solid
+    /** Border color of the badge */
+    var(--pf-v6-c-badge--BorderColor, transparent);
+  border-radius: inherit;
+}
+
+:host([state="read"]) {
+  --pf-v6-c-badge--Color:
+    /** Text color in read state */
+    var(--pf-v6-c-badge--m-read--Color,
+      var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515));
+  --pf-v6-c-badge--BackgroundColor:
+    /** Background color in read state */
+    var(--pf-v6-c-badge--m-read--BackgroundColor,
+      var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0));
+  --pf-v6-c-badge--BorderColor:
+    /** Border color in read state */
+    var(--pf-v6-c-badge--m-read--BorderColor,
+      var(--pf-t--global--border--color--high-contrast, #151515));
+}
+
+:host([state="unread"]) {
+  --pf-v6-c-badge--Color:
+    /** Text color in unread state */
+    var(--pf-v6-c-badge--m-unread--Color,
+      var(--pf-t--global--text--color--on-brand--default, #fff));
+  --pf-v6-c-badge--BackgroundColor:
+    /** Background color in unread state */
+    var(--pf-v6-c-badge--m-unread--BackgroundColor,
+      var(--pf-t--global--color--brand--default, #06c));
+}
+
+:host([disabled]) {
+  --pf-v6-c-badge--Color:
+    /** Text color when disabled */
+    var(--pf-v6-c-badge--m-disabled--Color,
+      var(--pf-t--global--text--color--on-disabled, #6a6e73));
+  --pf-v6-c-badge--BackgroundColor:
+    /** Background color when disabled */
+    var(--pf-v6-c-badge--m-disabled--BackgroundColor,
+      var(--pf-t--global--background--color--disabled--default, #d2d2d2));
+  --pf-v6-c-badge--BorderColor:
+    /** Border color when disabled */
+    var(--pf-v6-c-badge--m-disabled--BorderColor,
+      var(--pf-t--global--border--color--disabled, #d2d2d2));
+  pointer-events: none;
+}
diff --git a/elements/pf-v6-badge/pf-v6-badge.ts b/elements/pf-v6-badge/pf-v6-badge.ts
new file mode 100644
index 0000000000..452f801605
--- /dev/null
+++ b/elements/pf-v6-badge/pf-v6-badge.ts
@@ -0,0 +1,61 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+
+import styles from './pf-v6-badge.css';
+
+export type BadgeState = 'unread' | 'read';
+
+/**
+ * A **badge** provides a small count or status annotation for labels,
+ * navigation items, or object names. Use a badge when you need to display
+ * a numeric count or short status indicator alongside other content.
+ *
+ * Authors SHOULD slot visually-hidden text for screen readers when the
+ * number alone lacks context, e.g. `<pf-v6-badge>3 <span class="sr-only">unread messages</span></pf-v6-badge>`.
+ *
+ * @summary Annotates content with a small count or status indicator
+ *
+ * @slot - Badge content, typically a number. Include visually-hidden text for screen reader context.
+ *
+ * @cssprop {<length>} --pf-v6-c-badge--MinWidth - Minimum badge width
+ * @cssprop {<length>} --pf-v6-c-badge--PaddingInlineStart - Inline start padding
+ * @cssprop {<length>} --pf-v6-c-badge--PaddingInlineEnd - Inline end padding
+ * @cssprop {<length>} --pf-v6-c-badge--FontSize - Badge text font size
+ * @cssprop {<number>} --pf-v6-c-badge--FontWeight - Badge text font weight
+ * @cssprop {<color>} --pf-v6-c-badge--Color - Badge text color
+ * @cssprop {<color>} --pf-v6-c-badge--BackgroundColor - Badge background color
+ * @cssprop {<length>} --pf-v6-c-badge--BorderRadius - Badge border radius
+ * @cssprop {<length>} --pf-v6-c-badge--BorderWidth - Badge border width
+ * @cssprop {<color>} --pf-v6-c-badge--BorderColor - Badge border color
+ * @cssprop {<color>} --pf-v6-c-badge--m-read--Color - Text color in read state
+ * @cssprop {<color>} --pf-v6-c-badge--m-read--BackgroundColor - Background in read state
+ * @cssprop {<color>} --pf-v6-c-badge--m-read--BorderColor - Border color in read state
+ * @cssprop {<color>} --pf-v6-c-badge--m-unread--Color - Text color in unread state
+ * @cssprop {<color>} --pf-v6-c-badge--m-unread--BackgroundColor - Background in unread state
+ * @cssprop {<color>} --pf-v6-c-badge--m-disabled--Color - Text color when disabled
+ * @cssprop {<color>} --pf-v6-c-badge--m-disabled--BackgroundColor - Background when disabled
+ * @cssprop {<color>} --pf-v6-c-badge--m-disabled--BorderColor - Border color when disabled
+ */
+@customElement('pf-v6-badge')
+export class PfV6Badge extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /**
+   * Denotes the state-of-affairs this badge represents.
+   */
+  @property({ reflect: true }) state?: BadgeState;
+
+  /** Disables the badge */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-badge': PfV6Badge;
+  }
+}
diff --git a/elements/pf-v5-badge/test/pf-badge.e2e.ts b/elements/pf-v6-badge/test/pf-v6-badge.e2e.ts
similarity index 95%
rename from elements/pf-v5-badge/test/pf-badge.e2e.ts
rename to elements/pf-v6-badge/test/pf-v6-badge.e2e.ts
index cbf4e4d311..76be61a685 100644
--- a/elements/pf-v5-badge/test/pf-badge.e2e.ts
+++ b/elements/pf-v6-badge/test/pf-v6-badge.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-badge';
+const tagName = 'pf-v6-badge';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-badge/test/pf-v6-badge.spec.ts b/elements/pf-v6-badge/test/pf-v6-badge.spec.ts
new file mode 100644
index 0000000000..f526de7ef9
--- /dev/null
+++ b/elements/pf-v6-badge/test/pf-v6-badge.spec.ts
@@ -0,0 +1,128 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js';
+import { PfV6Badge } from '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
+
+describe('<pf-v6-badge>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-badge')).to.be.an.instanceof(PfV6Badge);
+  });
+
+  it('should upgrade', async function() {
+    const el = await createFixture<PfV6Badge>(html`<pf-v6-badge>10</pf-v6-badge>`);
+    expect(el)
+        .to.be.an.instanceOf(customElements.get('pf-v6-badge'))
+        .and
+        .to.be.an.instanceOf(PfV6Badge);
+  });
+
+  describe('without state attribute', function() {
+    let element: PfV6Badge;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Badge>(html`
+        <pf-v6-badge>10</pf-v6-badge>
+      `);
+      await element.updateComplete;
+    });
+
+    it('should display default background color', function() {
+      const [r, g, b] = getColor(element, 'background-color');
+      expect([r, g, b]).to.deep.equal(hexToRgb('#f0f0f0'));
+    });
+  });
+
+  describe('with state="read"', function() {
+    let element: PfV6Badge;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Badge>(html`
+        <pf-v6-badge state="read">10</pf-v6-badge>
+      `);
+      await element.updateComplete;
+    });
+
+    it('should display read background color', function() {
+      const [r, g, b] = getColor(element, 'background-color');
+      expect([r, g, b]).to.deep.equal(hexToRgb('#f0f0f0'));
+    });
+  });
+
+  describe('with state="unread"', function() {
+    let element: PfV6Badge;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Badge>(html`
+        <pf-v6-badge state="unread">10</pf-v6-badge>
+      `);
+      await element.updateComplete;
+    });
+
+    it('should display unread background color', function() {
+      const [r, g, b] = getColor(element, 'background-color');
+      expect([r, g, b]).to.deep.equal(hexToRgb('#0066cc'));
+    });
+
+    it('should display unread text color', function() {
+      const [r, g, b] = getColor(element, 'color');
+      expect([r, g, b]).to.deep.equal(hexToRgb('#ffffff'));
+    });
+  });
+
+  describe('with disabled attribute', function() {
+    let element: PfV6Badge;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Badge>(html`
+        <pf-v6-badge state="read" disabled>10</pf-v6-badge>
+      `);
+      await element.updateComplete;
+    });
+
+    it('should display disabled background color', function() {
+      const [r, g, b] = getColor(element, 'background-color');
+      expect([r, g, b]).to.deep.equal(hexToRgb('#d2d2d2'));
+    });
+
+    it('should have pointer-events: none', function() {
+      const styles = getComputedStyle(element);
+      expect(styles.pointerEvents).to.equal('none');
+    });
+  });
+
+  describe('accessibility', function() {
+    it('should be accessible', async function() {
+      const element = await createFixture<PfV6Badge>(html`
+        <pf-v6-badge state="read">10</pf-v6-badge>
+      `);
+      await expect(element).to.be.accessible();
+    });
+
+    it('should contain text in the accessibility tree', async function() {
+      await createFixture<PfV6Badge>(html`
+        <pf-v6-badge state="read">10</pf-v6-badge>
+      `);
+      const snapshot = await a11ySnapshot();
+      const badgeNode = snapshot.children?.find(
+        (child: { name?: string }) => child.name?.includes('10')
+      );
+      expect(badgeNode).to.exist;
+    });
+  });
+
+  describe('slot content', function() {
+    let element: PfV6Badge;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Badge>(html`
+        <pf-v6-badge state="read">Custom Text</pf-v6-badge>
+      `);
+      await element.updateComplete;
+    });
+
+    it('should display slotted text content', function() {
+      expect(element.textContent?.trim()).to.equal('Custom Text');
+    });
+  });
+});
diff --git a/elements/pf-v6-banner/README.md b/elements/pf-v6-banner/README.md
new file mode 100644
index 0000000000..9a265f6dac
--- /dev/null
+++ b/elements/pf-v6-banner/README.md
@@ -0,0 +1,47 @@
+# pf-v6-banner
+
+A full-width banner for communicating short, non-dismissible messages.
+
+## Usage
+
+### Default banner
+
+```html
+<pf-v6-banner>Default banner</pf-v6-banner>
+```
+
+### Status banner with screen reader text
+
+```html
+<pf-v6-banner status="danger">
+  <span class="pf-v6-screen-reader">Danger alert:</span>
+  An error has occurred. Contact support for help.
+</pf-v6-banner>
+```
+
+### Sticky color banner
+
+```html
+<pf-v6-banner color="blue" sticky>
+  This banner sticks to the top of its container.
+</pf-v6-banner>
+```
+
+## Divergences from React `Banner`
+
+### Changed API
+
+| React prop | Web component | Difference |
+|---|---|---|
+| `isSticky` | `sticky` attribute | Renamed; dropped `is` prefix |
+| `screenReaderText` | Slotted visually-hidden text | No dedicated attribute. Slot a `<span class="pf-v6-screen-reader">` inside the banner for screen reader context. Same underlying technique as React. |
+| `color` + `status` mutual exclusion | Both accepted | React enforces via TypeScript union types (`color` and `status` cannot both be set). The web component accepts both; `status` takes visual precedence via CSS cascade. |
+
+## Migrating from `pf-v5-banner`
+
+| v5 API | v6 API | Notes |
+|---|---|---|
+| `variant` attribute (`default`, `info`, `warning`, `danger`, `success`) | `status` attribute (`success`, `warning`, `danger`, `info`, `custom`) | `variant` removed. Use `status` for semantic meaning or `color` for decorative colors. `default` variant maps to no attribute (gray). |
+| `icon` attribute (shorthand) | Slot an icon in the default slot | `icon` attribute removed. Use `<pf-v5-icon>` (or `<pf-v6-icon>` when available) as slotted content. |
+| `icon` slot (named) | Default slot | Icons are now part of the default slot content, not a separate named slot. |
+
diff --git a/elements/pf-v6-banner/demo/basic.html b/elements/pf-v6-banner/demo/basic.html
new file mode 100644
index 0000000000..91a4c58891
--- /dev/null
+++ b/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>
diff --git a/elements/pf-v6-banner/demo/index.html b/elements/pf-v6-banner/demo/index.html
new file mode 100644
index 0000000000..462905d585
--- /dev/null
+++ b/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>
diff --git a/elements/pf-v6-banner/demo/status.html b/elements/pf-v6-banner/demo/status.html
new file mode 100644
index 0000000000..96b33aea56
--- /dev/null
+++ b/elements/pf-v6-banner/demo/status.html
@@ -0,0 +1,44 @@
+---
+name: Status
+description: When a banner conveys status, use the status attribute. Include an icon and visually-hidden text for accessibility.
+---
+<pf-v6-banner status="success">
+  <pf-v5-icon icon="check-circle"></pf-v5-icon>
+  <span class="pf-v6-screen-reader">Success alert:</span>
+  Success banner
+</pf-v6-banner>
+
+<pf-v6-banner status="warning">
+  <pf-v5-icon icon="exclamation-triangle"></pf-v5-icon>
+  <span class="pf-v6-screen-reader">Warning alert:</span>
+  Warning banner
+</pf-v6-banner>
+
+<pf-v6-banner status="danger">
+  <pf-v5-icon icon="exclamation-circle"></pf-v5-icon>
+  <span class="pf-v6-screen-reader">Danger alert:</span>
+  Danger banner
+</pf-v6-banner>
+
+<pf-v6-banner status="info">
+  <pf-v5-icon icon="info-circle"></pf-v5-icon>
+  <span class="pf-v6-screen-reader">Info alert:</span>
+  Info banner
+</pf-v6-banner>
+
+<pf-v6-banner status="custom">
+  <pf-v5-icon icon="bell"></pf-v5-icon>
+  <span class="pf-v6-screen-reader">Custom alert:</span>
+  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>
diff --git a/elements/pf-v6-banner/demo/sticky.html b/elements/pf-v6-banner/demo/sticky.html
new file mode 100644
index 0000000000..3af89c14fa
--- /dev/null
+++ b/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>
diff --git a/elements/pf-v6-banner/docs/pf-v6-banner.md b/elements/pf-v6-banner/docs/pf-v6-banner.md
new file mode 100644
index 0000000000..d33e262335
--- /dev/null
+++ b/elements/pf-v6-banner/docs/pf-v6-banner.md
@@ -0,0 +1,44 @@
+{% renderOverview %}
+  A banner provides a full-width container for communicating short,
+  non-dismissible messages.
+
+  <pf-v6-banner>Default banner</pf-v6-banner>
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  ### Default
+  {% htmlexample %}
+  <pf-v6-banner>Default banner</pf-v6-banner>
+  {% endhtmlexample %}
+
+  ### Status
+  When a banner conveys status, use the `status` attribute. Include an icon
+  and visually-hidden text for screen reader context.
+
+  {% htmlexample %}
+  <pf-v6-banner status="danger">
+    <span class="pf-v6-screen-reader">Danger alert:</span>
+    Danger banner
+  </pf-v6-banner>
+  {% endhtmlexample %}
+
+  ### Sticky
+  Use the `sticky` attribute to keep the banner visible at the top of a
+  scrolling container.
+
+  {% htmlexample %}
+  <pf-v6-banner sticky>Sticky banner</pf-v6-banner>
+  {% endhtmlexample %}
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v6-banner/docs/screenshot.png b/elements/pf-v6-banner/docs/screenshot.png
new file mode 100644
index 0000000000..dc46b7ca10
Binary files /dev/null and b/elements/pf-v6-banner/docs/screenshot.png differ
diff --git a/elements/pf-v6-banner/pf-v6-banner.css b/elements/pf-v6-banner/pf-v6-banner.css
new file mode 100644
index 0000000000..5db38198bd
--- /dev/null
+++ b/elements/pf-v6-banner/pf-v6-banner.css
@@ -0,0 +1,198 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host([sticky]) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index:
+    /** Overrides the z-index when sticky */
+    var(--pf-v6-c-banner--m-sticky--ZIndex,
+      var(--pf-t--global--z-index--md, 300));
+  box-shadow:
+    /** Overrides the box shadow when sticky */
+    var(--pf-v6-c-banner--m-sticky--BoxShadow,
+      var(--pf-t--global--box-shadow--md));
+}
+
+#container {
+  --_bg:
+    /** Overrides the banner background color */
+    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:
+    /** Overrides the banner text 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:
+    /** Overrides the block padding */
+    var(--pf-v6-c-banner--PaddingBlockStart,
+      var(--pf-t--global--spacer--xs, 0.25rem));
+  --_padding-inline:
+    /** Overrides the inline padding */
+    var(--pf-v6-c-banner--PaddingInlineStart,
+      var(--pf-t--global--spacer--md, 1rem));
+  --_font-size:
+    /** Overrides the font size */
+    var(--pf-v6-c-banner--FontSize,
+      var(--pf-t--global--font--size--body--default, 0.875rem));
+  --_border-color:
+    /** Overrides the block border color, visible in high-contrast mode */
+    var(--pf-v6-c-banner--BorderColor,
+      var(--pf-t--global--border--color--high-contrast, transparent));
+  --_border-width:
+    /** Overrides the block border width, visible in high-contrast mode */
+    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:
+      /** Overrides the inline padding at the medium breakpoint */
+      var(--pf-v6-c-banner--md--PaddingInlineStart,
+        var(--pf-t--global--spacer--lg, 1.5rem));
+  }
+}
+
+/* Non-status color modifiers */
+
+:host([color="red"]) #container {
+  --_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)));
+}
+
+:host([color="orangered"]) #container {
+  --_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)));
+}
+
+:host([color="orange"]) #container {
+  --_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)));
+}
+
+:host([color="yellow"]) #container {
+  --_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)));
+}
+
+:host([color="green"]) #container {
+  --_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)));
+}
+
+:host([color="teal"]) #container {
+  --_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)));
+}
+
+:host([color="blue"]) #container {
+  --_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)));
+}
+
+:host([color="purple"]) #container {
+  --_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 (higher specificity via attribute selector ensures precedence over color) */
+
+:host([status="danger"]) #container {
+  --_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))));
+}
+
+:host([status="success"]) #container {
+  --_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))));
+}
+
+:host([status="warning"]) #container {
+  --_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))));
+}
+
+:host([status="info"]) #container {
+  --_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))));
+}
+
+:host([status="custom"]) #container {
+  --_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;
+}
+
+
diff --git a/elements/pf-v6-banner/pf-v6-banner.ts b/elements/pf-v6-banner/pf-v6-banner.ts
new file mode 100644
index 0000000000..80c667453d
--- /dev/null
+++ b/elements/pf-v6-banner/pf-v6-banner.ts
@@ -0,0 +1,113 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+
+import style from './pf-v6-banner.css';
+
+export type BannerColor =
+  | 'red'
+  | 'orangered'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'teal'
+  | 'blue'
+  | 'purple';
+
+export type BannerStatus =
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'custom';
+
+/**
+ * A banner provides a full-width container for communicating short,
+ * non-dismissible messages. Use a banner when you need to display a
+ * brief announcement that allows users to continue without interruption.
+ *
+ * Status banners SHOULD include an icon and visually-hidden text so
+ * screen readers can announce the status context (WCAG 1.3.1). Authors
+ * SHOULD AVOID using color alone to convey meaning (WCAG 1.4.1).
+ *
+ * The banner is not focusable. Slotted interactive content like links
+ * remains focusable via Tab.
+ *
+ * @summary Provides a full-width banner for brief, non-dismissible messages.
+ *
+ * @slot - Banner message content (text, links, icons). When `status` is set,
+ *         include a visually-hidden `<span>` for screen reader context, e.g.
+ *         `<span class="pf-v6-screen-reader">Danger alert:</span>`.
+ *
+ * @cssprop {<color>} --pf-v6-c-banner--BackgroundColor - Default banner background color
+ * @cssprop {<color>} --pf-v6-c-banner--Color - Default banner text color
+ * @cssprop {<length>} --pf-v6-c-banner--FontSize - Banner font size
+ * @cssprop {<length>} --pf-v6-c-banner--PaddingBlockStart - Block (vertical) padding
+ * @cssprop {<length>} --pf-v6-c-banner--PaddingInlineStart - Inline (horizontal) padding
+ * @cssprop {<length>} --pf-v6-c-banner--md--PaddingInlineStart - Inline padding at medium breakpoint
+ * @cssprop {<color>} --pf-v6-c-banner--BorderColor - Block border color (high-contrast mode)
+ * @cssprop {<length>} --pf-v6-c-banner--BorderWidth - Block border width (high-contrast mode)
+ * @cssprop {<integer>} --pf-v6-c-banner--m-sticky--ZIndex - Z-index when sticky
+ * @cssprop --pf-v6-c-banner--m-sticky--BoxShadow - Box shadow when sticky
+ * @cssprop {<color>} --pf-v6-c-banner--m-red--BackgroundColor - Red color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-red--Color - Red color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-orangered--BackgroundColor - Orangered color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-orangered--Color - Orangered color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-orange--BackgroundColor - Orange color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-orange--Color - Orange color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-yellow--BackgroundColor - Yellow color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-yellow--Color - Yellow color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-green--BackgroundColor - Green color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-green--Color - Green color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-teal--BackgroundColor - Teal color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-teal--Color - Teal color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-blue--BackgroundColor - Blue color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-blue--Color - Blue color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-purple--BackgroundColor - Purple color variant background
+ * @cssprop {<color>} --pf-v6-c-banner--m-purple--Color - Purple color variant text
+ * @cssprop {<color>} --pf-v6-c-banner--m-danger--BackgroundColor - Danger status background
+ * @cssprop {<color>} --pf-v6-c-banner--m-danger--Color - Danger status text
+ * @cssprop {<color>} --pf-v6-c-banner--m-success--BackgroundColor - Success status background
+ * @cssprop {<color>} --pf-v6-c-banner--m-success--Color - Success status text
+ * @cssprop {<color>} --pf-v6-c-banner--m-warning--BackgroundColor - Warning status background
+ * @cssprop {<color>} --pf-v6-c-banner--m-warning--Color - Warning status text
+ * @cssprop {<color>} --pf-v6-c-banner--m-info--BackgroundColor - Info status background
+ * @cssprop {<color>} --pf-v6-c-banner--m-info--Color - Info status text
+ * @cssprop {<color>} --pf-v6-c-banner--m-custom--BackgroundColor - Custom status background
+ * @cssprop {<color>} --pf-v6-c-banner--m-custom--Color - Custom status text
+ */
+@customElement('pf-v6-banner')
+export class PfV6Banner extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /**
+   * Non-status (decorative) color for the banner background.
+   * Overridden by `status` if both are set.
+   */
+  @property({ reflect: true }) color?: BannerColor;
+
+  /**
+   * Status style for the banner. Conveys semantic meaning and overrides `color`.
+   * When set, authors SHOULD slot visually-hidden text for screen readers, e.g.
+   * `<span class="pf-v6-screen-reader">Danger alert:</span>`.
+   */
+  @property({ reflect: true }) status?: BannerStatus;
+
+  /** Whether the banner sticks to the top of its container. */
+  @property({ type: Boolean, reflect: true }) sticky = false;
+
+  override render(): TemplateResult {
+    return html`
+      <div id="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-banner': PfV6Banner;
+  }
+}
diff --git a/elements/pf-v5-avatar/test/pf-avatar.e2e.ts b/elements/pf-v6-banner/test/pf-v6-banner.e2e.ts
similarity index 95%
rename from elements/pf-v5-avatar/test/pf-avatar.e2e.ts
rename to elements/pf-v6-banner/test/pf-v6-banner.e2e.ts
index 2271f89428..6a4ac98583 100644
--- a/elements/pf-v5-avatar/test/pf-avatar.e2e.ts
+++ b/elements/pf-v6-banner/test/pf-v6-banner.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-avatar';
+const tagName = 'pf-v6-banner';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-banner/test/pf-v6-banner.spec.ts b/elements/pf-v6-banner/test/pf-v6-banner.spec.ts
new file mode 100644
index 0000000000..e72f4c6a7a
--- /dev/null
+++ b/elements/pf-v6-banner/test/pf-v6-banner.spec.ts
@@ -0,0 +1,134 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfV6Banner } from '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
+
+describe('<pf-v6-banner>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-banner')).to.be.an.instanceof(PfV6Banner);
+  });
+
+  it('should upgrade', async function() {
+    const el = await createFixture<PfV6Banner>(html`<pf-v6-banner>Test</pf-v6-banner>`);
+    expect(el)
+        .to.be.an.instanceOf(customElements.get('pf-v6-banner'))
+        .and
+        .to.be.an.instanceOf(PfV6Banner);
+  });
+
+  describe('default', function() {
+    let element: PfV6Banner;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Banner>(html`
+        <pf-v6-banner>Default banner</pf-v6-banner>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('should display content in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const node = snapshot.children?.find(
+        (child: { name?: string }) => child.name?.includes('Default banner')
+      );
+      expect(node).to.exist;
+    });
+  });
+
+  describe('with color="blue"', function() {
+    let element: PfV6Banner;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Banner>(html`
+        <pf-v6-banner color="blue">Blue banner</pf-v6-banner>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with status="danger"', function() {
+    let element: PfV6Banner;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Banner>(html`
+        <pf-v6-banner status="danger">Danger banner</pf-v6-banner>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with slotted screen reader text', function() {
+    let element: PfV6Banner;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Banner>(html`
+        <pf-v6-banner status="danger">
+          <span class="pf-v6-screen-reader">Danger alert:</span>
+          An error has occurred.
+        </pf-v6-banner>
+      `);
+    });
+
+    it('should include screen reader text in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const node = snapshot.children?.find(
+        (child: { name?: string }) => child.name?.includes('Danger alert:')
+      );
+      expect(node).to.exist;
+    });
+
+    it('should include banner content in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const node = snapshot.children?.find(
+        (child: { name?: string }) => child.name?.includes('An error has occurred.')
+      );
+      expect(node).to.exist;
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with sticky', function() {
+    let element: PfV6Banner;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Banner>(html`
+        <pf-v6-banner sticky>Sticky banner</pf-v6-banner>
+      `);
+    });
+
+    it('should have sticky positioning', function() {
+      expect(getComputedStyle(element).position).to.equal('sticky');
+    });
+  });
+
+  describe('with slotted link', function() {
+    beforeEach(async function() {
+      await createFixture<PfV6Banner>(html`
+        <pf-v6-banner>
+          Banner with <a href="#">a link</a>
+        </pf-v6-banner>
+      `);
+    });
+
+    it('should include the link in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const link = snapshot.children?.find(
+        (child: { role?: string }) => child.role === 'link'
+      );
+      expect(link).to.exist;
+      expect(link).to.have.property('name', 'a link');
+    });
+  });
+});
diff --git a/elements/pf-v6-progress/README.md b/elements/pf-v6-progress/README.md
new file mode 100644
index 0000000000..57f837488f
--- /dev/null
+++ b/elements/pf-v6-progress/README.md
@@ -0,0 +1,60 @@
+# Progress
+
+A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
+
+## Usage
+
+```html
+<pf-v6-progress value="33" description="Title"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
+```
+
+With variant and measure location:
+
+```html
+<pf-v6-progress value="100"
+                description="Upload complete"
+                variant="success"
+                measure-location="outside"></pf-v6-progress>
+```
+
+With helper text:
+
+```html
+<pf-v6-progress value="33" description="Uploading">
+  <span slot="helper-text">Uploading 3 of 9 files</span>
+</pf-v6-progress>
+```
+
+## Divergences from React `Progress`
+
+### Not implemented
+
+| React prop | Notes |
+|---|---|
+| `label` | Use `value-text` for custom measure text. Rich content (ReactNode) not supported. |
+| `tooltipPosition` | Not implemented. |
+
+### Changed API
+
+| React prop | Web component | Difference |
+|---|---|---|
+| `title` | `description` attribute | Visible title text above the bar. Renamed to avoid shadowing the native HTML `title` attribute. |
+| `isTitleTruncated` | `truncated` attribute | Boolean. Truncates `description` with CSS ellipsis. |
+| `measureLocation` `"top"` | Default (no attribute) | React's `"top"` is the default; omitting `measure-location` produces the same layout. |
+| `measureLocation` | `measure-location` attribute | Singleline layout derived automatically when no `description` is set. |
+| `size` `"md"` | Default (no attribute) | React's `"md"` is the default size; omitting `size` produces the same result. |
+| `helperText` | `helper-text` slot | Slot instead of prop. Slotted elements are automatically wired to `aria-describedby` via ElementInternals. |
+| `aria-label` | `accessible-label` attribute | Screen reader name set via ElementInternals. Falls back to `description`, then `"Progress status"`. |
+| `aria-labelledby` | Native `aria-labelledby` on host | Use the native attribute directly on the host element -- the host has `role="progressbar"` so standard ARIA attributes work. |
+| `aria-describedby` | `helper-text` slot | Slot content is automatically associated via `ariaDescribedByElements`. For external descriptions, use native `aria-describedby` on the host. |
+| `hideStatusIcon` | `hide-status-icon` attribute | Boolean. Hides the variant status icon while keeping variant coloring. |
+
+### Added
+
+| Web component API | Notes |
+|---|---|
+| `helper-text` slot | Rich content below the bar, auto-wired to `aria-describedby`. |
diff --git a/elements/pf-v6-progress/demo/failure-without-measure.html b/elements/pf-v6-progress/demo/failure-without-measure.html
new file mode 100644
index 0000000000..0cc9071025
--- /dev/null
+++ b/elements/pf-v6-progress/demo/failure-without-measure.html
@@ -0,0 +1,8 @@
+---
+description: Failure variant without the percentage measure displayed.
+---
+<pf-v6-progress value="33" description="Title" measure-location="none" variant="danger"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/failure.html b/elements/pf-v6-progress/demo/failure.html
new file mode 100644
index 0000000000..1437d80d87
--- /dev/null
+++ b/elements/pf-v6-progress/demo/failure.html
@@ -0,0 +1,8 @@
+---
+description: Failure variant progress bar.
+---
+<pf-v6-progress value="33" description="Title" variant="danger"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/finite-step.html b/elements/pf-v6-progress/demo/finite-step.html
new file mode 100644
index 0000000000..3353a04ab2
--- /dev/null
+++ b/elements/pf-v6-progress/demo/finite-step.html
@@ -0,0 +1,8 @@
+---
+description: Finite step progress with custom max value and descriptive value text.
+---
+<pf-v6-progress value="2" max="5" value-text="2 of 5 units" description="Finite step"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/helper-text.html b/elements/pf-v6-progress/demo/helper-text.html
new file mode 100644
index 0000000000..98cbe2e265
--- /dev/null
+++ b/elements/pf-v6-progress/demo/helper-text.html
@@ -0,0 +1,21 @@
+---
+name: Helper text
+description: Helper text below the progress bar is automatically associated via aria-describedby. Use it for status messages or error details.
+---
+<pf-v6-progress value="33" description="Uploading">
+  <pf-v5-helper-text slot="helper-text">Uploading 3 of 9 files</pf-v5-helper-text>
+</pf-v6-progress>
+
+<br>
+
+<pf-v6-progress value="75"
+                description="Creating common projects"
+                accessible-label="Creating common projects"
+                variant="danger">
+  <pf-v5-helper-text slot="helper-text" variant="error">Failed to create common projects. 2 errors, 3 succeeded.</pf-v5-helper-text>
+</pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+  import '@patternfly/elements/pf-v5-helper-text/pf-v5-helper-text.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/index.html b/elements/pf-v6-progress/demo/index.html
new file mode 100644
index 0000000000..a8c90a783c
--- /dev/null
+++ b/elements/pf-v6-progress/demo/index.html
@@ -0,0 +1,8 @@
+---
+description: Simple progress bar at 33%.
+---
+<pf-v6-progress value="33" description="Title"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/inside-success.html b/elements/pf-v6-progress/demo/inside-success.html
new file mode 100644
index 0000000000..9068f6b736
--- /dev/null
+++ b/elements/pf-v6-progress/demo/inside-success.html
@@ -0,0 +1,8 @@
+---
+description: Success variant with measure displayed inside the bar.
+---
+<pf-v6-progress value="100" description="Title" measure-location="inside" size="lg" variant="success"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/inside-warning.html b/elements/pf-v6-progress/demo/inside-warning.html
new file mode 100644
index 0000000000..ee7a294431
--- /dev/null
+++ b/elements/pf-v6-progress/demo/inside-warning.html
@@ -0,0 +1,8 @@
+---
+description: Warning variant with measure displayed inside the bar.
+---
+<pf-v6-progress value="100" description="Title" measure-location="inside" size="lg" variant="warning"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/inside.html b/elements/pf-v6-progress/demo/inside.html
new file mode 100644
index 0000000000..86d5a7a2d0
--- /dev/null
+++ b/elements/pf-v6-progress/demo/inside.html
@@ -0,0 +1,8 @@
+---
+description: Progress bar with measure displayed inside the indicator. Requires large size.
+---
+<pf-v6-progress value="33" description="Title" measure-location="inside" size="lg"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/interactive-status.html b/elements/pf-v6-progress/demo/interactive-status.html
new file mode 100644
index 0000000000..aca4df6f3d
--- /dev/null
+++ b/elements/pf-v6-progress/demo/interactive-status.html
@@ -0,0 +1,58 @@
+---
+name: Interactive status icon and measure location
+description: Demonstrates how variant status icons and measure location interact. Use the controls to toggle options.
+---
+<form id="controls">
+  <fieldset>
+    <legend>Measure location</legend>
+    <label><input type="radio" name="measure" value="inside" checked> Inside</label>
+    <label><input type="radio" name="measure" value="outside"> Outside</label>
+    <label><input type="radio" name="measure" value="top"> Top</label>
+    <label><input type="radio" name="measure" value="none"> None</label>
+  </fieldset>
+  <label>
+    <input type="checkbox" id="hide-icon"> Hide status icon
+  </label>
+</form>
+
+<pf-v6-progress id="demo-progress"
+                value="33"
+                description="Title"
+                variant="danger"
+                measure-location="inside"
+                size="lg"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+
+  const progress = document.getElementById('demo-progress');
+
+  document.querySelectorAll('input[name="measure"]').forEach(radio => {
+    radio.addEventListener('change', function() {
+      const value = this.value;
+      if (value === 'top') {
+        progress.removeAttribute('measure-location');
+      } else {
+        progress.measureLocation = value;
+      }
+    });
+  });
+
+  document.getElementById('hide-icon').addEventListener('change', function() {
+    progress.hideStatusIcon = this.checked;
+  });
+</script>
+
+<style>
+  #controls {
+    margin-block-end: 1rem;
+  }
+
+  fieldset {
+    border: none;
+    padding: 0;
+    display: flex;
+    gap: 1rem;
+    margin-block-end: 0.5rem;
+  }
+</style>
diff --git a/elements/pf-v6-progress/demo/labelled-by.html b/elements/pf-v6-progress/demo/labelled-by.html
new file mode 100644
index 0000000000..644bfaacb5
--- /dev/null
+++ b/elements/pf-v6-progress/demo/labelled-by.html
@@ -0,0 +1,16 @@
+---
+name: Labelled by external heading
+description: Use native aria-labelledby on the host to reference an external heading. The host has role="progressbar", so standard ARIA attributes work directly.
+---
+<section>
+  <h3 id="scan-title">Compliance scanning in progress</h3>
+  <pf-v6-progress aria-labelledby="scan-title"
+                  value="60"
+                  max="100"
+                  measure-location="outside"
+                  value-text="3 of 5 runs"></pf-v6-progress>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/large.html b/elements/pf-v6-progress/demo/large.html
new file mode 100644
index 0000000000..4ce3064519
--- /dev/null
+++ b/elements/pf-v6-progress/demo/large.html
@@ -0,0 +1,8 @@
+---
+description: Large size progress bar.
+---
+<pf-v6-progress value="33" description="Title" size="lg"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/outside-failure.html b/elements/pf-v6-progress/demo/outside-failure.html
new file mode 100644
index 0000000000..908c0e5bd0
--- /dev/null
+++ b/elements/pf-v6-progress/demo/outside-failure.html
@@ -0,0 +1,8 @@
+---
+description: Failure variant with measure displayed outside the bar.
+---
+<pf-v6-progress value="33" description="Title" measure-location="outside" variant="danger"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/outside-static-width.html b/elements/pf-v6-progress/demo/outside-static-width.html
new file mode 100644
index 0000000000..20dffc23e6
--- /dev/null
+++ b/elements/pf-v6-progress/demo/outside-static-width.html
@@ -0,0 +1,18 @@
+---
+description: Progress bar with outside measure using a static minimum width for alignment across multiple bars.
+---
+<style>
+  pf-v6-progress {
+    --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
+  }
+</style>
+
+<div style="display: flex; flex-direction: column; gap: 1rem;">
+  <pf-v6-progress value="1" description="1%" measure-location="outside"></pf-v6-progress>
+  <pf-v6-progress value="50" description="50%" measure-location="outside"></pf-v6-progress>
+  <pf-v6-progress value="100" description="100%" measure-location="outside"></pf-v6-progress>
+</div>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/outside.html b/elements/pf-v6-progress/demo/outside.html
new file mode 100644
index 0000000000..8a778a3094
--- /dev/null
+++ b/elements/pf-v6-progress/demo/outside.html
@@ -0,0 +1,8 @@
+---
+description: Progress bar with measure displayed outside and to the right of the bar.
+---
+<pf-v6-progress value="33" description="Title" measure-location="outside"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/progress-step-instruction.html b/elements/pf-v6-progress/demo/progress-step-instruction.html
new file mode 100644
index 0000000000..21a9c2e5e4
--- /dev/null
+++ b/elements/pf-v6-progress/demo/progress-step-instruction.html
@@ -0,0 +1,8 @@
+---
+description: Step instruction progress with value text describing the current step.
+---
+<pf-v6-progress value="2" max="5" value-text="Step 2: Copying files" description="Progress step instruction"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/singleline.html b/elements/pf-v6-progress/demo/singleline.html
new file mode 100644
index 0000000000..04d481ce88
--- /dev/null
+++ b/elements/pf-v6-progress/demo/singleline.html
@@ -0,0 +1,8 @@
+---
+description: Single line progress bar without a description row.
+---
+<pf-v6-progress value="33"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/small.html b/elements/pf-v6-progress/demo/small.html
new file mode 100644
index 0000000000..73e1cf74d4
--- /dev/null
+++ b/elements/pf-v6-progress/demo/small.html
@@ -0,0 +1,8 @@
+---
+description: Small size progress bar.
+---
+<pf-v6-progress value="33" description="Title" size="sm"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/success.html b/elements/pf-v6-progress/demo/success.html
new file mode 100644
index 0000000000..073ab30eb8
--- /dev/null
+++ b/elements/pf-v6-progress/demo/success.html
@@ -0,0 +1,8 @@
+---
+description: Success variant progress bar.
+---
+<pf-v6-progress value="100" description="Title" variant="success"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/title-outside.html b/elements/pf-v6-progress/demo/title-outside.html
new file mode 100644
index 0000000000..d0dd3a944a
--- /dev/null
+++ b/elements/pf-v6-progress/demo/title-outside.html
@@ -0,0 +1,11 @@
+---
+description: Progress bar labeled by an external heading element.
+---
+<h3 id="progress-title">Title outside of progress bar</h3>
+<pf-v6-progress value="33"
+                accessible-labelledby="progress-title"
+                measure-location="outside"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/truncate-description.html b/elements/pf-v6-progress/demo/truncate-description.html
new file mode 100644
index 0000000000..1e61f78475
--- /dev/null
+++ b/elements/pf-v6-progress/demo/truncate-description.html
@@ -0,0 +1,11 @@
+---
+description: Progress bar with a long description that is truncated with an ellipsis.
+---
+<pf-v6-progress value="33"
+  style="max-width: 400px;"
+  description="This is a very long description that should be truncated with an ellipsis when it overflows"
+  truncated></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/warning.html b/elements/pf-v6-progress/demo/warning.html
new file mode 100644
index 0000000000..04cb812b7b
--- /dev/null
+++ b/elements/pf-v6-progress/demo/warning.html
@@ -0,0 +1,8 @@
+---
+description: Warning variant progress bar.
+---
+<pf-v6-progress value="90" description="Title" variant="warning"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/demo/without-measure.html b/elements/pf-v6-progress/demo/without-measure.html
new file mode 100644
index 0000000000..fe008d0cef
--- /dev/null
+++ b/elements/pf-v6-progress/demo/without-measure.html
@@ -0,0 +1,8 @@
+---
+description: Progress bar without the percentage measure displayed.
+---
+<pf-v6-progress value="33" description="Title" measure-location="none"></pf-v6-progress>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
+</script>
diff --git a/elements/pf-v6-progress/pf-v6-progress.css b/elements/pf-v6-progress/pf-v6-progress.css
new file mode 100644
index 0000000000..9e2a302119
--- /dev/null
+++ b/elements/pf-v6-progress/pf-v6-progress.css
@@ -0,0 +1,310 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#container {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  grid-template-columns: auto auto;
+  /** Gap between the description, bar, and helper-text rows. Defaults to `--pf-t--global--spacer--md`. */
+  gap: var(--pf-v6-c-progress--GridGap, var(--pf-t--global--spacer--md, 1rem));
+  align-items: end;
+
+  /* Size modifiers */
+
+  &.sm {
+    /** Height of the bar at small size. Defaults to `--pf-t--global--spacer--sm`. */
+    --_bar-height: var(--pf-v6-c-progress--m-sm__bar--Height,
+      var(--pf-t--global--spacer--sm, 0.5rem));
+
+    & #measure {
+      /** Font size of the measure text at small size. Defaults to `--pf-t--global--font--size--body--sm`. */
+      font-size: var(--pf-v6-c-progress--m-sm__measure--FontSize,
+        var(--pf-t--global--font--size--body--sm, 0.75rem));
+    }
+  }
+
+  &.lg {
+    /** Height of the bar at large size. Defaults to `--pf-t--global--spacer--lg`. */
+    --_bar-height: var(--pf-v6-c-progress--m-lg__bar--Height,
+      var(--pf-t--global--spacer--lg, 1.5rem));
+  }
+
+  /* Measure location modifiers */
+
+  &.outside,
+  &.singleline {
+    grid-template-columns: 1fr fit-content(50%);
+  }
+
+  &.outside {
+    & #description {
+      grid-column: 1 / 3;
+    }
+
+    & #status {
+      grid-row: 2 / 3;
+      grid-column: 2 / 3;
+      align-self: center;
+    }
+
+    & #measure {
+      display: inline-block;
+      /** Font size of the measure text in outside layout. Defaults to `--pf-t--global--font--size--sm`. */
+      font-size: var(--pf-v6-c-progress--m-outside__measure--FontSize,
+        var(--pf-t--global--font--size--sm, 0.875rem));
+    }
+
+    & #bar {
+      grid-column: 1 / 2;
+    }
+  }
+
+  &.singleline {
+    grid-template-rows: 1fr;
+
+    & #description {
+      display: none;
+    }
+
+    & #bar {
+      grid-row: 1 / 2;
+      grid-column: 1 / 2;
+    }
+
+    & #status {
+      grid-row: 1 / 2;
+      grid-column: 2 / 3;
+    }
+  }
+
+  &.inside {
+    & #indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /** Minimum width of the indicator when measure is inside. Defaults to `--pf-t--global--spacer--xl`. */
+      min-width: var(--pf-v6-c-progress--m-inside__indicator--MinWidth,
+        var(--pf-t--global--spacer--xl, 2rem));
+    }
+
+    & #measure {
+      /** Font size of the measure text inside the bar. Defaults to `--pf-t--global--font--size--sm`. */
+      font-size: var(--pf-v6-c-progress--m-inside__measure--FontSize,
+        var(--pf-t--global--font--size--sm, 0.875rem));
+      /** Color of the measure text inside the bar. Defaults to `--pf-t--global--text--color--on-brand--default`. */
+      color: var(--_inside-measure-color,
+        var(--pf-v6-c-progress--m-inside__measure--Color,
+          var(--pf-t--global--text--color--on-brand--default, #fff)));
+      text-align: center;
+    }
+  }
+
+  /* Variant modifiers */
+
+  &.success {
+    /** Indicator color for the success variant. Defaults to `--pf-t--global--color--status--success--default`. */
+    --_indicator-bg: var(--pf-v6-c-progress--m-success__indicator--BackgroundColor,
+      var(--pf-t--global--color--status--success--default, #3e8635));
+    /** Status icon color for the success variant. Defaults to `--pf-t--global--icon--color--status--success--default`. */
+    --_status-icon-color: var(--pf-v6-c-progress--m-success__status-icon--Color,
+      var(--pf-t--global--icon--color--status--success--default, #3e8635));
+    /** Inside measure text color for the success variant. Defaults to `--pf-t--global--text--color--status--on-success--default`. */
+    --_inside-measure-color: var(--pf-v6-c-progress--m-success--m-inside__measure--Color,
+      var(--pf-t--global--text--color--status--on-success--default, #fff));
+  }
+
+  &.warning {
+    /** Indicator color for the warning variant. Defaults to `--pf-t--global--color--status--warning--default`. */
+    --_indicator-bg: var(--pf-v6-c-progress--m-warning__indicator--BackgroundColor,
+      var(--pf-t--global--color--status--warning--default, #f0ab00));
+    /** Status icon color for the warning variant. Defaults to `--pf-t--global--icon--color--status--warning--default`. */
+    --_status-icon-color: var(--pf-v6-c-progress--m-warning__status-icon--Color,
+      var(--pf-t--global--icon--color--status--warning--default, #f0ab00));
+    /** Inside measure text color for the warning variant. Defaults to `--pf-t--global--text--color--status--on-warning--default`. */
+    --_inside-measure-color: var(--pf-v6-c-progress--m-warning--m-inside__measure--Color,
+      var(--pf-t--global--text--color--status--on-warning--default, #151515));
+  }
+
+  &.danger {
+    /** Indicator color for the danger variant. Defaults to `--pf-t--global--color--status--danger--default`. */
+    --_indicator-bg: var(--pf-v6-c-progress--m-danger__indicator--BackgroundColor,
+      var(--pf-t--global--color--status--danger--default, #c9190b));
+    /** Status icon color for the danger variant. Defaults to `--pf-t--global--icon--color--status--danger--default`. */
+    --_status-icon-color: var(--pf-v6-c-progress--m-danger__status-icon--Color,
+      var(--pf-t--global--icon--color--status--danger--default, #c9190b));
+    /** Inside measure text color for the danger variant. Defaults to `--pf-t--global--text--color--status--on-danger--default`. */
+    --_inside-measure-color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color,
+      var(--pf-t--global--text--color--status--on-danger--default, #fff));
+  }
+
+  /* Description truncation */
+
+  &.truncated #description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+}
+
+/* Danger animations */
+
+@media (prefers-reduced-motion: no-preference) {
+  .danger #bar {
+    animation: danger-jiggle
+      var(--pf-t--global--motion--duration--fade--default, 0.3s)
+      var(--pf-t--global--motion--timing-function--default, cubic-bezier(0.25, 0.1, 0.25, 1))
+      both;
+  }
+
+  .danger #status-icon {
+    animation: fade-in
+      var(--pf-t--global--motion--duration--fade--default, 0.3s)
+      var(--pf-t--global--motion--timing-function--default, cubic-bezier(0.25, 0.1, 0.25, 1));
+  }
+}
+
+/* Elements */
+
+#description {
+  grid-column: 1 / 2;
+  word-break: break-word;
+}
+
+#status {
+  display: flex;
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  /** Gap between the measure text and status icon. Defaults to `--pf-t--global--spacer--sm`. */
+  gap: var(--pf-v6-c-progress__status--Gap,
+    var(--pf-t--global--spacer--sm, 0.5rem));
+  align-items: start;
+  justify-content: end;
+  text-align: end;
+  word-break: break-word;
+}
+
+/** Color of the status icon. Overridden by variant. Defaults to `--pf-t--global--icon--color--regular`. */
+#status-icon {
+  color: var(--_status-icon-color,
+    var(--pf-v6-c-progress__status-icon--Color,
+      var(--pf-t--global--icon--color--regular, #151515)));
+}
+
+#bar {
+  position: relative;
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
+  align-self: center;
+  /** Height of the progress bar track. Defaults to `--pf-t--global--spacer--md`. */
+  height: var(--_bar-height,
+    var(--pf-v6-c-progress__bar--Height,
+      var(--pf-t--global--spacer--md, 1rem)));
+  overflow: hidden;
+  /** Background color of the bar track. Defaults to `--pf-t--global--color--nonstatus--gray--default`. */
+  background-color: var(--pf-v6-c-progress__bar--BackgroundColor,
+    var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0));
+  /** Border radius of the bar track. Defaults to `--pf-t--global--border--radius--medium`. */
+  border-radius: var(--pf-v6-c-progress__bar--BorderRadius,
+    var(--pf-t--global--border--radius--medium, 6px));
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+    /** Border width of the bar track for high-contrast mode. Defaults to `--pf-t--global--border--width--high-contrast--regular`. */
+    border: var(--pf-v6-c-progress__bar--BorderWidth,
+        var(--pf-t--global--border--width--high-contrast--regular, 0))
+      solid
+      /** Border color of the bar track for high-contrast mode. Defaults to `--pf-t--global--border--color--high-contrast`. */
+      var(--pf-v6-c-progress__bar--BorderColor,
+        var(--pf-t--global--border--color--high-contrast, transparent));
+    border-radius: inherit;
+  }
+}
+
+#indicator {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  /** Height of the filled indicator. Defaults to `--pf-v6-c-progress__bar--Height`. */
+  height: var(--_bar-height,
+    var(--pf-v6-c-progress__indicator--Height,
+      var(--pf-v6-c-progress__bar--Height,
+        var(--pf-t--global--spacer--md, 1rem))));
+  /** Background color of the filled indicator. Overridden by variant. Defaults to `--pf-t--global--color--brand--default`. */
+  background-color: var(--_indicator-bg,
+    var(--pf-v6-c-progress__indicator--BackgroundColor,
+      var(--pf-t--global--color--brand--default, #0066cc)));
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: '';
+    /** Border width of the indicator for high-contrast mode. Defaults to `--pf-t--global--border--width--high-contrast--extra-strong`. */
+    border: var(--pf-v6-c-progress__indicator--BorderWidth,
+        var(--pf-t--global--border--width--high-contrast--extra-strong, 0))
+      solid
+      /** Border color of the indicator for high-contrast mode. */
+      var(--pf-v6-c-progress__indicator--BorderColor, transparent);
+    border-radius: var(--pf-v6-c-progress__bar--BorderRadius,
+      var(--pf-t--global--border--radius--medium, 6px));
+  }
+}
+
+#helper-text {
+  grid-row: 3 / 4;
+  grid-column: 1 / 3;
+  /** Negative offset to bring helper text closer to the bar. */
+  margin-block-start: var(--pf-v6-c-progress__helper-text--MarginBlockStart,
+    calc(var(--pf-t--global--spacer--sm, 0.5rem) - var(--pf-v6-c-progress--GridGap,
+      var(--pf-t--global--spacer--md, 1rem))));
+}
+
+/** Minimum width of the measure display for visual alignment across stacked progress bars. Set via CSS custom property. */
+#measure {
+  min-width: var(--pf-v6-c-progress__measure--m-static-width--MinWidth, 0);
+  font-variant-numeric: tabular-nums;
+}
+
+svg {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}
+
+@keyframes danger-jiggle {
+  33% {
+    translate: -2px;
+  }
+
+  66% {
+    translate: 3px;
+  }
+
+  100% {
+    translate: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
diff --git a/elements/pf-v6-progress/pf-v6-progress.ts b/elements/pf-v6-progress/pf-v6-progress.ts
new file mode 100644
index 0000000000..cdcabec45e
--- /dev/null
+++ b/elements/pf-v6-progress/pf-v6-progress.ts
@@ -0,0 +1,205 @@
+import type { TemplateResult } from 'lit';
+import { LitElement, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+
+import styles from './pf-v6-progress.css';
+
+export type ProgressSize = 'sm' | 'lg';
+export type ProgressMeasureLocation = 'outside' | 'inside' | 'none';
+export type ProgressVariant = 'success' | 'danger' | 'warning';
+
+// TODO: replace inline SVGs with <pf-v6-icon> when available
+const checkCircleIcon = html`<svg id="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>`;
+const triangleExclamationIcon = html`<svg id="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>`;
+const circleExclamationIcon = html`<svg id="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`;
+
+const VARIANT_ICONS = new Map<ProgressVariant, TemplateResult>([
+  ['success', checkCircleIcon],
+  ['warning', triangleExclamationIcon],
+  ['danger', circleExclamationIcon],
+]);
+
+/**
+ * A progress bar provides a visual representation of completion status for an
+ * ongoing process or task. Authors SHOULD provide a `description` attribute for
+ * visible title text above the bar. The accessible name resolves in order:
+ * `accessible-label`, then `description`, then a fallback of `"Progress status"`.
+ * Authors can also use native `aria-labelledby` directly on the host element
+ * to reference an external label (the host has `role="progressbar"`).
+ *
+ * Authors SHOULD set the `variant` attribute to `success`, `warning`, or
+ * `danger` when the progress reaches a terminal state. Authors SHOULD AVOID
+ * using `measure-location="inside"` without `size="lg"`, as the measure
+ * text will not fit inside the bar at the default size.
+ *
+ * This element uses `role="progressbar"` via ElementInternals. `aria-valuenow`,
+ * `aria-valuemin`, and `aria-valuemax` are managed internally based on the
+ * `value`, `min`, and `max` properties. This element is non-interactive and
+ * does not receive keyboard focus.
+ *
+ * @summary Displays completion status of an ongoing process or task.
+ * @slot helper-text - Supplementary text below the progress bar, such as status messages or additional context. Slotted elements are automatically associated to the progressbar via `aria-describedby`.
+ */
+@customElement('pf-v6-progress')
+export class PfV6Progress extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /** Represents the value of the progress bar */
+  @property({ type: Number }) value = 0;
+
+  /** Visible title text above the progress bar */
+  @property() description?: string;
+
+  // TODO: consider promoting to an enum attribute (e.g. truncated="…" or
+  // truncated="……") to support locale-specific truncation. CSS text-overflow:
+  // ellipsis always renders U+2026 (three dots); Chinese convention is six dots
+  // (two U+2026 characters). The attribute value could set a private CSS custom
+  // property like --_truncation-string, used as text-overflow: var(--_truncation-string, ellipsis).
+  // text-overflow accepts arbitrary strings, so any value works (e.g. "……", "Read more").
+  // TODO: blocked on pf-v6-tooltip — React shows a positioned tooltip with the
+  // full description text on hover when truncated. Add tooltip-position attribute to match.
+  /** Truncate the description with ellipsis when it overflows */
+  @property({ type: Boolean }) truncated = false;
+
+  /** Screen reader label for the progress bar, set via ElementInternals. Overrides `description` for the accessible name when both are set. */
+  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  /** Maximum value for the progress bar */
+  @property({ type: Number }) max = 100;
+
+  /** Minimum value for the progress bar */
+  @property({ type: Number }) min = 0;
+
+  /** Size of the progress bar (height) */
+  @property() size?: ProgressSize;
+
+  /** Where the percentage will be displayed with the progress element */
+  @property({ attribute: 'measure-location' }) measureLocation?: ProgressMeasureLocation;
+
+  /** Variant of the progress bar */
+  @property() variant?: ProgressVariant;
+
+  /** Hide the status icon when a variant is set. Useful in tight layouts like table cells. */
+  @property({ type: Boolean, attribute: 'hide-status-icon' }) hideStatusIcon = false;
+
+  /** Custom text for aria-valuetext, used for finite step and step instruction displays */
+  @property({ attribute: 'value-text' }) valueText?: string;
+
+  #internals = InternalsController.of(this, { role: 'progressbar' });
+
+  #slots = new SlotController(this, 'helper-text');
+
+  get #calculatedPercentage(): number {
+    const { value, min, max } = this;
+    const percentage = Math.round((value - min) / (max - min) * 100);
+    if (Number.isNaN(percentage) || percentage < 0) {
+      return 0;
+    }
+    return Math.min(percentage, 100);
+  }
+
+  get #displayText(): string {
+    return this.valueText ?? `${this.#calculatedPercentage}%`;
+  }
+
+  get #icon(): TemplateResult | typeof nothing {
+    if (this.hideStatusIcon) {
+      return nothing;
+    }
+    return VARIANT_ICONS.get(this.variant!) ?? nothing;
+  }
+
+  @observes('value')
+  @observes('min')
+  @observes('max')
+  private _updateAriaValue() {
+    this.#internals.ariaValueNow = this.#calculatedPercentage.toString();
+    this.#internals.ariaValueMin = '0';
+    this.#internals.ariaValueMax = '100';
+  }
+
+  @observes('valueText')
+  private _updateAriaValueText() {
+    this.#internals.ariaValueText = this.valueText ?? null;
+  }
+
+  #updateHelperTextDescribedBy(
+    slot = this.shadowRoot?.getElementById('helper-text-slot') as HTMLSlotElement,
+  ) {
+    const elements = slot?.assignedElements() ?? [];
+    this.#internals.ariaDescribedByElements = elements.length ? elements : null;
+  }
+
+  #onHelperTextSlotchange(event: Event) {
+    this.#updateHelperTextDescribedBy(event.target as HTMLSlotElement);
+  }
+
+  override firstUpdated(): void {
+    this.#updateHelperTextDescribedBy();
+  }
+
+  @observes('accessibleLabel', { waitFor: 'connected' })
+  @observes('description', { waitFor: 'connected' })
+  private _updateAriaLabel() {
+    this.#internals.ariaLabel = this.accessibleLabel ?? this.description ?? 'Progress status';
+  }
+
+  override render(): TemplateResult<1> {
+    const pct = this.#calculatedPercentage;
+    const displayText = this.#displayText;
+    const icon = this.#icon;
+    const noMeasure = this.measureLocation === 'none';
+    const inside = this.measureLocation === 'inside';
+    const hasDescription = this.description != null;
+    const hasIcon = this.variant != null && !this.hideStatusIcon;
+    const singleline = !hasDescription;
+
+    const classes = {
+      [this.size ?? '']: !!this.size,
+      [this.measureLocation ?? '']: !!this.measureLocation && this.measureLocation !== 'none',
+      [this.variant ?? '']: !!this.variant,
+      singleline,
+      truncated: this.truncated,
+    };
+
+    return html`
+      <div id="container" class="${classMap(classes)}">
+        <div id="description"
+             ?hidden="${!hasDescription}"
+>${this.description ?? ''}</div>
+
+        <div id="status"
+             aria-hidden="true"
+             ?hidden="${noMeasure && !hasIcon}">
+          ${!inside && !noMeasure ? html`<span id="measure">${displayText}</span>` : nothing}
+          ${icon}
+        </div>
+
+        <div id="bar">
+          <div id="indicator"
+               style="${styleMap({ width: `${pct}%` })}">
+            ${inside && !noMeasure ? html`<span id="measure">${displayText}</span>` : nothing}
+          </div>
+        </div>
+
+        <div id="helper-text" ?hidden="${this.#slots.isEmpty('helper-text')}">
+          <!-- summary: Supplementary text below the progress bar -->
+          <slot id="helper-text-slot" name="helper-text" @slotchange="${this.#onHelperTextSlotchange}"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-progress': PfV6Progress;
+  }
+}
diff --git a/elements/pf-v5-progress/test/pf-progress.e2e.ts b/elements/pf-v6-progress/test/pf-progress.e2e.ts
similarity index 95%
rename from elements/pf-v5-progress/test/pf-progress.e2e.ts
rename to elements/pf-v6-progress/test/pf-progress.e2e.ts
index 5aa242fb07..261d6b0a59 100644
--- a/elements/pf-v5-progress/test/pf-progress.e2e.ts
+++ b/elements/pf-v6-progress/test/pf-progress.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-progress';
+const tagName = 'pf-v6-progress';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-progress/test/pf-progress.spec.ts b/elements/pf-v6-progress/test/pf-progress.spec.ts
new file mode 100644
index 0000000000..203686beba
--- /dev/null
+++ b/elements/pf-v6-progress/test/pf-progress.spec.ts
@@ -0,0 +1,345 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+
+import { PfV6Progress } from '../pf-v6-progress.js';
+
+describe('<pf-v6-progress>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-progress')).to.be.an.instanceof(PfV6Progress);
+  });
+
+  describe('simply instantiating', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`<pf-v6-progress></pf-v6-progress>`);
+    });
+
+    it('should upgrade', function() {
+      const klass = customElements.get('pf-v6-progress');
+      expect(element)
+          .to.be.an.instanceOf(klass)
+          .and
+          .to.be.an.instanceOf(PfV6Progress);
+    });
+  });
+
+  describe('with default values', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress value="33" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('should have value of 33', function() {
+      expect(element.value).to.equal(33);
+    });
+
+    it('should have description of "Title"', function() {
+      expect(element.description).to.equal('Title');
+    });
+
+    it('should have progressbar role in ax tree', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.axContainRole('progressbar');
+    });
+
+    it('should have aria-valuenow of 33 in ax tree', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.axContainQuery({ role: 'progressbar', value: 33 });
+    });
+
+    it('should have accessible name from description in ax tree', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.axContainQuery({ role: 'progressbar', name: 'Title' });
+    });
+  });
+
+  describe('with value and max', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress value="25" max="50" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with min and max', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress value="75" min="50" max="100" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with value-text', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress value="2" max="5" value-text="2 of 5 units" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should have valueText property', function() {
+      expect(element.valueText).to.equal('2 of 5 units');
+    });
+
+    it('should have aria-valuetext in ax tree', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.axContainQuery({ role: 'progressbar', valuetext: '2 of 5 units' });
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with size="sm"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress size="sm" value="33" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should reflect size attribute', function() {
+      expect(element.getAttribute('size')).to.equal('sm');
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with size="lg"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress size="lg" value="33" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should reflect size attribute', function() {
+      expect(element.getAttribute('size')).to.equal('lg');
+    });
+  });
+
+  describe('with measure-location="outside"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress measure-location="outside" value="33" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should reflect attribute', function() {
+      expect(element.getAttribute('measure-location')).to.equal('outside');
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with measure-location="inside"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress measure-location="inside" size="lg" value="33" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should reflect attribute', function() {
+      expect(element.getAttribute('measure-location')).to.equal('inside');
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with measure-location="none"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress measure-location="none" value="33" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('without description (singleline)', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress value="33"></pf-v6-progress>
+      `);
+    });
+
+    it('should have fallback accessible name when no description', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.axContainQuery({ role: 'progressbar', name: 'Progress status' });
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with variant="success"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress variant="success" value="100" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should reflect variant attribute', function() {
+      expect(element.getAttribute('variant')).to.equal('success');
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with variant="warning"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress variant="warning" value="100" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with variant="danger"', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress variant="danger" value="33" description="Title"></pf-v6-progress>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with truncated', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress truncated
+                        description="A very long description"
+                        value="33"></pf-v6-progress>
+      `);
+    });
+
+    it('should reflect attribute', function() {
+      expect(element.truncated).to.be.true;
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('with helper-text slot', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress value="33" description="Title">
+          <span slot="helper-text">Helper text content</span>
+        </pf-v6-progress>
+      `);
+    });
+
+    it('should be accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
+  describe('edge cases', function() {
+    describe('value below min', function() {
+      let element: PfV6Progress;
+
+      beforeEach(async function() {
+        element = await createFixture<PfV6Progress>(html`
+          <pf-v6-progress value="-10" description="Title"></pf-v6-progress>
+        `);
+      });
+
+      it('should be accessible', async function() {
+        await expect(element).to.be.accessible();
+      });
+    });
+
+    describe('value above max', function() {
+      let element: PfV6Progress;
+
+      beforeEach(async function() {
+        element = await createFixture<PfV6Progress>(html`
+          <pf-v6-progress value="200" description="Title"></pf-v6-progress>
+        `);
+      });
+
+      it('should be accessible', async function() {
+        await expect(element).to.be.accessible();
+      });
+    });
+  });
+
+  describe('updating value dynamically', function() {
+    let element: PfV6Progress;
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Progress>(html`
+        <pf-v6-progress value="33" description="Title"></pf-v6-progress>
+      `);
+      element.value = 75;
+      await element.updateComplete;
+    });
+
+    it('should update progressbar value in ax tree', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.axContainQuery({ role: 'progressbar', value: 75 });
+    });
+  });
+});
diff --git a/elements/pf-v6-spinner/README.md b/elements/pf-v6-spinner/README.md
new file mode 100644
index 0000000000..0cca461565
--- /dev/null
+++ b/elements/pf-v6-spinner/README.md
@@ -0,0 +1,45 @@
+# `<pf-v6-spinner>`
+
+A spinner indicates that an action is in progress.
+
+## Usage
+
+```html
+<pf-v6-spinner>Loading...</pf-v6-spinner>
+```
+
+### Size variations
+
+```html
+<pf-v6-spinner size="sm">Loading...</pf-v6-spinner>
+<pf-v6-spinner size="md">Loading...</pf-v6-spinner>
+<pf-v6-spinner size="lg">Loading...</pf-v6-spinner>
+<pf-v6-spinner size="xl">Loading...</pf-v6-spinner>
+```
+
+### Custom size
+
+```html
+<pf-v6-spinner style="--pf-v6-c-spinner--diameter: 80px">Loading...</pf-v6-spinner>
+```
+
+## Divergences from React `Spinner`
+
+### Changed API
+
+| React prop | Web component | Difference |
+|------------|---------------|------------|
+| `diameter` | `--pf-v6-c-spinner--diameter` CSS custom property | React abstracts the CSS custom property behind a prop. In HTML, set it directly via `style`. |
+| `aria-valuetext` | `value-text` attribute | Sets `aria-valuetext` on element internals. Defaults to `"Loading..."`. |
+| `aria-label` | `accessible-label` attribute | Sets `aria-label` on element internals. |
+| `isInline` | `inline` attribute | Boolean attribute. |
+| `size` | `size` attribute | Adds `xs` preset from PatternFly CSS not exposed in React. |
+
+### CSS custom properties
+
+| Custom property | Description |
+|-----------------|-------------|
+| `--pf-v6-c-spinner--diameter` | Spinner diameter. |
+| `--pf-v6-c-spinner--Color` | Spinner stroke color. |
+| `--pf-v6-c-spinner--StrokeWidth` | Spinner stroke width. |
+| `--pf-v6-c-spinner--AnimationDuration` | Animation cycle duration. |
diff --git a/elements/pf-v6-spinner/demo/basic.html b/elements/pf-v6-spinner/demo/basic.html
new file mode 100644
index 0000000000..38bfd69761
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/basic.html
@@ -0,0 +1,17 @@
+---
+name: Basic
+description: A basic spinner indicates that an action is in progress.
+---
+<section>
+  <pf-v6-spinner accessible-label="Loading contents">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/custom-size.html b/elements/pf-v6-spinner/demo/custom-size.html
new file mode 100644
index 0000000000..a9457a5f1d
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/custom-size.html
@@ -0,0 +1,17 @@
+---
+name: Custom size
+description: A spinner can have a custom diameter using the `--pf-v6-c-spinner--diameter` CSS custom property.
+---
+<section>
+  <pf-v6-spinner style="--pf-v6-c-spinner--diameter: 80px" accessible-label="Custom size spinner">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/inline-size.html b/elements/pf-v6-spinner/demo/inline-size.html
new file mode 100644
index 0000000000..ac12dc37a2
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/inline-size.html
@@ -0,0 +1,35 @@
+---
+name: Inline size
+description: An inline spinner inherits its font size, so its size will match the content around it.
+---
+<section>
+  <h1>
+    Heading
+    <pf-v6-spinner inline accessible-label="Spinner in a heading">Loading...</pf-v6-spinner>
+  </h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit nisi in cursus maximus.</p>
+  <h2>
+    Second level
+    <pf-v6-spinner inline accessible-label="Spinner in a subheading">Loading...</pf-v6-spinner>
+  </h2>
+  <p>
+    Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,
+    <pf-v6-spinner inline accessible-label="Spinner in a paragraph">Loading...</pf-v6-spinner>
+    sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis.
+    Suspendisse potenti.
+  </p>
+  <small>
+    Sometimes you need small text
+    <pf-v6-spinner inline accessible-label="Spinner in small text">Loading...</pf-v6-spinner>
+  </small>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/size-variations.html b/elements/pf-v6-spinner/demo/size-variations.html
new file mode 100644
index 0000000000..16c5cd04af
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/size-variations.html
@@ -0,0 +1,24 @@
+---
+name: Size variations
+description: Spinners can be sized using the `size` attribute with values `xs`, `sm`, `md`, `lg`, and `xl`.
+---
+<section>
+  <pf-v6-spinner size="xs" accessible-label="Extra small spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="sm" accessible-label="Small spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="md" accessible-label="Medium spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="lg" accessible-label="Large spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="xl" accessible-label="Extra large spinner">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/docs/pf-v6-spinner.md b/elements/pf-v6-spinner/docs/pf-v6-spinner.md
new file mode 100644
index 0000000000..399f373ab8
--- /dev/null
+++ b/elements/pf-v6-spinner/docs/pf-v6-spinner.md
@@ -0,0 +1,54 @@
+{% renderInstallation %} {% endrenderInstallation %}
+
+{% renderOverview %}
+  A spinner is an animated visual that indicates when a quick action is in progress.
+
+  <pf-v6-spinner accessible-label="Loading contents">Loading...</pf-v6-spinner>
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  ### Basic
+  {% htmlexample %}
+  <pf-v6-spinner accessible-label="Loading contents">Loading...</pf-v6-spinner>
+  {% endhtmlexample %}
+
+  ### Size variations
+  Use the `size` attribute to set the spinner size to `xs`, `sm`, `md`, `lg`, or `xl`.
+
+  {% htmlexample %}
+  <pf-v6-spinner size="xs" accessible-label="Extra small spinner"></pf-v6-spinner>
+  <pf-v6-spinner size="sm" accessible-label="Small spinner"></pf-v6-spinner>
+  <pf-v6-spinner size="md" accessible-label="Medium spinner"></pf-v6-spinner>
+  <pf-v6-spinner size="lg" accessible-label="Large spinner"></pf-v6-spinner>
+  <pf-v6-spinner size="xl" accessible-label="Extra large spinner"></pf-v6-spinner>
+  {% endhtmlexample %}
+
+  ### Custom size
+  Use the `--pf-v6-c-spinner--diameter` CSS custom property to set a custom size.
+
+  {% htmlexample %}
+  <pf-v6-spinner style="--pf-v6-c-spinner--diameter: 80px;" accessible-label="Custom size spinner"></pf-v6-spinner>
+  {% endhtmlexample %}
+
+  ### Inline
+  Set the `inline` attribute to inherit the font size from surrounding text.
+
+  {% htmlexample %}
+  <p>Content is loading <pf-v6-spinner inline accessible-label="Loading"></pf-v6-spinner></p>
+  {% endhtmlexample %}
+  
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderProperties %}{% endrenderProperties %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v6-spinner/docs/screenshot.png b/elements/pf-v6-spinner/docs/screenshot.png
new file mode 100644
index 0000000000..7342ee09c9
Binary files /dev/null and b/elements/pf-v6-spinner/docs/screenshot.png differ
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.css b/elements/pf-v6-spinner/pf-v6-spinner.css
new file mode 100644
index 0000000000..00b4ed7f85
--- /dev/null
+++ b/elements/pf-v6-spinner/pf-v6-spinner.css
@@ -0,0 +1,128 @@
+:host {
+  display: inline-block;
+  width: min-content;
+  min-height: 0;
+  aspect-ratio: 1 / 1;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+svg {
+  overflow: hidden;
+  width: var(--pf-v6-c-spinner--Width,
+    /** Custom diameter of the spinner */
+    var(--pf-v6-c-spinner--diameter,
+      /** Default spinner size */
+      var(--pf-t--global--icon--size--2xl, 3.5rem)));
+  height: var(--pf-v6-c-spinner--Height,
+    var(--pf-v6-c-spinner--diameter,
+      var(--pf-t--global--icon--size--2xl, 3.5rem)));
+  animation:
+    rotate
+    calc(
+      /** Duration of one animation cycle */
+      var(--pf-v6-c-spinner--AnimationDuration, 1.4s) * 2)
+    var(--pf-v6-c-spinner--AnimationTimingFunction, linear) infinite;
+}
+
+circle {
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  stroke:
+    /** Color of the spinner stroke */
+    var(--pf-v6-c-spinner--Color,
+      /** Brand color for spinner stroke */
+      var(--pf-t--global--icon--color--brand--default, #0066cc));
+  stroke-width:
+    /** Width of the spinner stroke */
+    var(--pf-v6-c-spinner--StrokeWidth, 10);
+  animation:
+    dash
+    var(--pf-v6-c-spinner--AnimationDuration, 1.4s)
+    var(--pf-v6-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
+}
+
+:host([size="xs"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter,
+    /** Extra-small icon size for compact spinners */
+    var(--pf-t--global--icon--size--sm, 0.75rem));
+
+  & circle {
+    stroke-width: var(--pf-v6-c-spinner--StrokeWidth, 15);
+  }
+}
+
+:host([size="sm"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter,
+    /** Small icon size */
+    var(--pf-t--global--icon--size--md, 0.875rem));
+}
+
+:host([size="md"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter,
+    /** Medium icon size */
+    var(--pf-t--global--icon--size--lg, 1rem));
+}
+
+:host([size="lg"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter,
+    /** Large icon size */
+    var(--pf-t--global--icon--size--xl, 1.5rem));
+}
+
+:host([size="xl"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter,
+    /** Extra-large icon size, default spinner diameter */
+    var(--pf-t--global--icon--size--2xl, 3.5rem));
+}
+
+:host([inline]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter, 1em);
+}
+
+@keyframes rotate {
+  0% {
+    rotate: 0deg;
+  }
+
+  100% {
+    rotate: 360deg;
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 280;
+    rotate: 0deg;
+  }
+
+  15% {
+    stroke-width: calc(
+      /** Stroke width during mid-animation thin phase */
+      var(--pf-v6-c-spinner__path--StrokeWidth,
+        var(--pf-v6-c-spinner--StrokeWidth, 10)) - 4);
+  }
+
+  40% {
+    stroke-dasharray: 220;
+    stroke-dashoffset: 150;
+  }
+
+  100% {
+    stroke-dashoffset: 280;
+    rotate: 720deg;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  svg,
+  circle {
+    animation-duration: 0s;
+  }
+}
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.ts b/elements/pf-v6-spinner/pf-v6-spinner.ts
new file mode 100644
index 0000000000..a3b55feae1
--- /dev/null
+++ b/elements/pf-v6-spinner/pf-v6-spinner.ts
@@ -0,0 +1,81 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import styles from './pf-v6-spinner.css';
+
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * A **spinner** provides an animated indicator for in-progress actions.
+ * Authors SHOULD set `accessible-label` when the default "Loading..." is
+ * insufficient. For long-running operations, use a progress bar instead.
+ * Respects `prefers-reduced-motion` by disabling animation.
+ *
+ * @summary Indicates that an action is in progress
+ *
+ * @cssprop {<length>} --pf-v6-c-spinner--diameter - Spinner diameter (overrides `size` attribute)
+ * @cssprop {<length>} --pf-v6-c-spinner--Width - Spinner width
+ * @cssprop {<length>} --pf-v6-c-spinner--Height - Spinner height
+ * @cssprop {<color>} --pf-v6-c-spinner--Color - Spinner stroke color
+ * @cssprop {<length>} --pf-v6-c-spinner--StrokeWidth - Spinner stroke width
+ * @cssprop {<time>} --pf-v6-c-spinner--AnimationDuration - Duration of one animation cycle
+ * @cssprop --pf-v6-c-spinner--AnimationTimingFunction - Animation timing function for rotation
+ * @cssprop --pf-v6-c-spinner__path--AnimationTimingFunction - Animation timing function for dash
+ * @cssprop {<length>} --pf-v6-c-spinner--m-xs--diameter - Diameter when size is xs
+ * @cssprop {<length>} --pf-v6-c-spinner--m-sm--diameter - Diameter when size is sm
+ * @cssprop {<length>} --pf-v6-c-spinner--m-md--diameter - Diameter when size is md
+ * @cssprop {<length>} --pf-v6-c-spinner--m-lg--diameter - Diameter when size is lg
+ * @cssprop {<length>} --pf-v6-c-spinner--m-xl--diameter - Diameter when size is xl
+ * @cssprop {<length>} --pf-v6-c-spinner--m-inline--diameter - Diameter when inline (defaults to 1em)
+ */
+@customElement('pf-v6-spinner')
+export class PfV6Spinner extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /** Preset sizes for the spinner */
+  @property({ reflect: true }) size?: SpinnerSize;
+
+  /**
+   * When true, the spinner inherits its font size from the surrounding text,
+   * allowing it to display inline with content.
+   */
+  @property({ type: Boolean, reflect: true }) inline = false;
+
+  /** Accessible name for the spinner */
+  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  /** Text describing the current progress state */
+  @property({ attribute: 'value-text' }) valueText?: string;
+
+  #internals = InternalsController.of(this, {
+    role: 'progressbar',
+    ariaLabel: 'Loading...',
+    ariaValueText: 'Loading...',
+  });
+
+  override willUpdate(changed: Map<PropertyKey, unknown>): void {
+    if (changed.has('accessibleLabel')) {
+      this.#internals.ariaLabel = this.accessibleLabel ?? 'Loading...';
+    }
+    if (changed.has('valueText')) {
+      this.#internals.ariaValueText = this.valueText ?? 'Loading...';
+    }
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <svg viewBox="0 0 100 100" aria-hidden="true">
+        <circle cx="50" cy="50" r="45" fill="none" />
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-spinner': PfV6Spinner;
+  }
+}
diff --git a/elements/pf-v5-spinner/test/pf-spinner.e2e.ts b/elements/pf-v6-spinner/test/pf-v6-spinner.e2e.ts
similarity index 95%
rename from elements/pf-v5-spinner/test/pf-spinner.e2e.ts
rename to elements/pf-v6-spinner/test/pf-v6-spinner.e2e.ts
index c2d15212da..a153f7a573 100644
--- a/elements/pf-v5-spinner/test/pf-spinner.e2e.ts
+++ b/elements/pf-v6-spinner/test/pf-v6-spinner.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-spinner';
+const tagName = 'pf-v6-spinner';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
new file mode 100644
index 0000000000..453fe10100
--- /dev/null
+++ b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
@@ -0,0 +1,154 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfV6Spinner } from '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+
+describe('<pf-v6-spinner>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-spinner')).to.be.an.instanceof(PfV6Spinner);
+  });
+
+  it('should upgrade', async function() {
+    const element = await createFixture<PfV6Spinner>(html`<pf-v6-spinner>Loading...</pf-v6-spinner>`);
+    expect(element, 'pf-v6-spinner should be an instance of PfV6Spinner')
+        .to.be.an.instanceOf(customElements.get('pf-v6-spinner'))
+        .and
+        .to.be.an.instanceOf(PfV6Spinner);
+  });
+
+  describe('default state', function() {
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`<pf-v6-spinner>Loading...</pf-v6-spinner>`);
+    });
+
+    it('does not sprout a size attribute by default', function() {
+      expect(element.hasAttribute('size')).to.be.false;
+    });
+
+    it('renders at xl size by default', function() {
+      const { fontSize } = getComputedStyle(document.documentElement);
+      const expected = 3.5 * parseFloat(fontSize);
+      expect(element.offsetWidth).to.equal(expected);
+    });
+
+    it('defaults inline to false', function() {
+      expect(element.inline).to.equal(false);
+    });
+
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('has progressbar role in a11y tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const spinnerNode = snapshot.children?.find(
+        (child: { role: string }) => child.role === 'progressbar'
+      );
+      expect(spinnerNode).to.exist;
+      expect(spinnerNode?.valuetext).to.equal('Loading...');
+    });
+  });
+
+  describe('accessible-label attribute', function() {
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner accessible-label="Loading results">Loading...</pf-v6-spinner>
+      `);
+    });
+
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('sets aria-label in a11y tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const spinnerNode = snapshot.children?.find(
+        (child: { role: string }) => child.role === 'progressbar'
+      );
+      expect(spinnerNode).to.exist;
+      expect(spinnerNode?.name).to.equal('Loading results');
+    });
+  });
+
+  describe('value-text attribute', function() {
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner value-text="50% complete">Loading...</pf-v6-spinner>
+      `);
+    });
+
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('sets aria-valuetext in a11y tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const spinnerNode = snapshot.children?.find(
+        (child: { role: string }) => child.role === 'progressbar'
+      );
+      expect(spinnerNode).to.exist;
+      expect(spinnerNode?.valuetext).to.equal('50% complete');
+    });
+  });
+
+  describe('size attribute', function() {
+    let element: PfV6Spinner;
+
+    function convertRemToPixels(rem: `${number}rem`) {
+      const { fontSize } = getComputedStyle(document.documentElement);
+      return parseFloat(rem) * parseFloat(fontSize);
+    }
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner>Loading...</pf-v6-spinner>
+      `);
+    });
+
+    for (const [size, expected] of [
+      ['xs', '0.75rem'],
+      ['sm', '0.875rem'],
+      ['md', '1rem'],
+      ['lg', '1.5rem'],
+      ['xl', '3.5rem'],
+    ] as const) {
+      it(size, async function() {
+        element.size = size;
+        await element.updateComplete;
+        expect(element.offsetWidth).to.equal(convertRemToPixels(expected));
+      });
+    }
+  });
+
+  describe('custom diameter via CSS custom property', function() {
+    it('sets the element diameter', async function() {
+      const customDiameterValue = 80;
+      const element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner style="--pf-v6-c-spinner--diameter: ${customDiameterValue}px">Loading...</pf-v6-spinner>
+      `);
+      expect(element.offsetWidth).to.equal(customDiameterValue);
+    });
+  });
+
+  describe('inline attribute', function() {
+    let container: HTMLParagraphElement;
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      container = await createFixture<HTMLParagraphElement>(html`
+        <p style="font-size: 32px;">
+          Text
+          <pf-v6-spinner inline accessible-label="Inline spinner">Loading...</pf-v6-spinner>
+        </p>
+      `);
+      element = container.querySelector('pf-v6-spinner')!;
+      await element.updateComplete;
+    });
+
+    it('inherits font size from surrounding content', function() {
+      expect(element.offsetWidth).to.equal(32);
+    });
+  });
+});
diff --git a/elements/pf-v6-switch/README.md b/elements/pf-v6-switch/README.md
new file mode 100644
index 0000000000..c39fa323f7
--- /dev/null
+++ b/elements/pf-v6-switch/README.md
@@ -0,0 +1,55 @@
+# pf-v6-switch
+
+A **switch** toggles the state of a setting (between on and off). Switches and
+checkboxes can often be used interchangeably, but the switch provides a more
+explicit, visible representation on a setting.
+
+## Usage
+
+```html
+<pf-v6-switch checked>Wi-Fi</pf-v6-switch>
+```
+
+### Without visible label
+
+```html
+<pf-v6-switch accessible-label="Wi-Fi" show-check-icon checked></pf-v6-switch>
+```
+
+### With external label
+
+```html
+<pf-v6-switch id="wifi"></pf-v6-switch>
+<label for="wifi">Wi-Fi</label>
+```
+
+## Divergences from React `Switch`
+
+### Intentionally omitted
+
+| React prop | Notes |
+|---|---|
+| `defaultChecked` | React-only uncontrolled pattern; web components use the `checked` attribute directly |
+| `labelOff` | Omitted per WAI-ARIA APG guidance. Switch labels must remain stable regardless of checked state. Dynamically changing labels confuse assistive technology users because the semantic context shifts alongside the state change -- the `switch` role already conveys on/off state. Teams using `labelOff` should redesign to use a single stable label describing the setting (e.g., "Notifications" rather than "Enabled"/"Disabled"). |
+
+### Changed API
+
+| React prop | Web component | Difference |
+|---|---|---|
+| `label` | Default slot | Visible label text is slotted, not a prop. Also supports external `<label for="id">` |
+| `isDisabled` | `disabled` | Dropped `is-` prefix per web component convention |
+| `isReversed` | `reversed` | Dropped `is-` prefix per web component convention |
+| `isChecked` | `checked` | Dropped `is-` prefix per web component convention |
+| `hasCheckIcon` | `show-check-icon` | Attribute name carried over from v5 for clarity |
+| `aria-label` | `accessible-label` | Abstracted behind custom attribute per PFE convention |
+| `aria-labelledby` | External `<label for="id">` | Use native label association instead |
+| `onChange` | `change` event | Standard DOM event; cancelable via `preventDefault()` to reject state change |
+
+### Added
+
+| Web component API | Notes |
+|---|---|
+| External `<label>` support | FACE element works with native `<label for="id">` or nesting in `<label>` |
+| Form association | Submits `"on"` when checked, omitted when unchecked (matches native checkbox) |
+| Form reset | Reverts to initial `checked` value on form reset |
+| Cancelable `change` event | Call `preventDefault()` to reject the toggle and revert state |
diff --git a/elements/pf-v6-switch/demo/cancelable-change.html b/elements/pf-v6-switch/demo/cancelable-change.html
new file mode 100644
index 0000000000..b889da15de
--- /dev/null
+++ b/elements/pf-v6-switch/demo/cancelable-change.html
@@ -0,0 +1,22 @@
+---
+name: Cancelable change
+description: The change event is cancelable. Calling preventDefault() rejects the toggle and reverts the switch to its previous state.
+---
+<pf-v6-switch id="locked-switch" checked>Locked setting</pf-v6-switch>
+<p id="message">This switch cannot be toggled off.</p>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+  const sw = document.getElementById('locked-switch');
+  const message = document.getElementById('message');
+
+  sw.addEventListener('change', function(event) {
+    if (!sw.checked) {
+      event.preventDefault();
+      message.textContent = 'Toggle rejected — this setting is locked on.';
+    } else {
+      message.textContent = 'This switch cannot be toggled off.';
+    }
+  });
+</script>
diff --git a/elements/pf-v6-switch/demo/checked-with-label.html b/elements/pf-v6-switch/demo/checked-with-label.html
new file mode 100644
index 0000000000..f15f5cf572
--- /dev/null
+++ b/elements/pf-v6-switch/demo/checked-with-label.html
@@ -0,0 +1,9 @@
+---
+name: Checked with label
+description: A switch with a check icon provides additional visual feedback for the checked state.
+---
+<pf-v6-switch checked show-check-icon>Togglable option for check icon example</pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/demo/disabled.html b/elements/pf-v6-switch/demo/disabled.html
new file mode 100644
index 0000000000..9a569ac21b
--- /dev/null
+++ b/elements/pf-v6-switch/demo/disabled.html
@@ -0,0 +1,26 @@
+---
+name: Disabled
+description: A disabled switch cannot be toggled.
+---
+<section>
+  <pf-v6-switch disabled checked>Togglable option for disabled checked example</pf-v6-switch>
+</section>
+<section>
+  <pf-v6-switch disabled>Togglable option for disabled unchecked example</pf-v6-switch>
+</section>
+<section>
+  <pf-v6-switch disabled checked accessible-label="Togglable option for checked with no visible label example" show-check-icon></pf-v6-switch>
+</section>
+<section>
+  <pf-v6-switch disabled accessible-label="Togglable option for unchecked with no visible label example" show-check-icon></pf-v6-switch>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
+
+<style>
+  section {
+    margin-block-end: 1rem;
+  }
+</style>
diff --git a/elements/pf-v6-switch/demo/form-association.html b/elements/pf-v6-switch/demo/form-association.html
new file mode 100644
index 0000000000..b10eb93196
--- /dev/null
+++ b/elements/pf-v6-switch/demo/form-association.html
@@ -0,0 +1,27 @@
+---
+name: Form association
+description: A switch can participate in forms. It submits "on" when checked and is omitted when unchecked. Use the reset button to restore the initial state.
+---
+<form id="settings-form">
+  <pf-v6-switch name="notifications" checked value="im-on">Notifications</pf-v6-switch>
+  <br><br>
+  <button type="submit">Submit</button>
+  <button type="reset">Reset</button>
+  <pre id="output"></pre>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+  const form = document.getElementById('settings-form');
+  const output = document.getElementById('output');
+
+  form.addEventListener('submit', function(event) {
+    event.preventDefault();
+    const data = new FormData(form);
+    const entries = [...data.entries()];
+    output.textContent = entries.length
+        ? entries.map(([k, v]) => `${k}=${v}`).join('\n')
+        : '(no values submitted)';
+  });
+</script>
diff --git a/elements/pf-v6-switch/demo/index.html b/elements/pf-v6-switch/demo/index.html
new file mode 100644
index 0000000000..b3cca80ca2
--- /dev/null
+++ b/elements/pf-v6-switch/demo/index.html
@@ -0,0 +1,9 @@
+---
+name: Basic
+description: A basic switch toggles the state of a setting.
+---
+<pf-v6-switch checked>Togglable option for basic example</pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/demo/nested-in-label.html b/elements/pf-v6-switch/demo/nested-in-label.html
new file mode 100644
index 0000000000..0422cdfdc0
--- /dev/null
+++ b/elements/pf-v6-switch/demo/nested-in-label.html
@@ -0,0 +1,41 @@
+---
+name: Nested in label
+description: A switch can be nested inside a label element for form association.
+---
+<form>
+  <fieldset>
+    <legend>Settings</legend>
+    <label>
+      <span>Dark Mode</span>
+      <pf-v6-switch id="dark-mode" name="darkMode"></pf-v6-switch>
+    </label>
+  </fieldset>
+  <button type="submit">Submit</button>
+  <output></output>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+  document.querySelector('form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    const data = new FormData(event.target);
+    document.querySelector('output').textContent =
+      JSON.stringify(Object.fromEntries(data), null, 2);
+  });
+</script>
+
+<style>
+  fieldset {
+    display: grid;
+    gap: 1rem;
+    border: none;
+    padding: 0;
+  }
+
+  label {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>
diff --git a/elements/pf-v6-switch/demo/reversed-layout.html b/elements/pf-v6-switch/demo/reversed-layout.html
new file mode 100644
index 0000000000..4aff3ec225
--- /dev/null
+++ b/elements/pf-v6-switch/demo/reversed-layout.html
@@ -0,0 +1,9 @@
+---
+name: Reversed layout
+description: A switch with reversed layout places the label before the toggle.
+---
+<pf-v6-switch reversed checked>Togglable option for reversed example</pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/demo/without-label.html b/elements/pf-v6-switch/demo/without-label.html
new file mode 100644
index 0000000000..b22ec59487
--- /dev/null
+++ b/elements/pf-v6-switch/demo/without-label.html
@@ -0,0 +1,11 @@
+---
+name: Without label
+description: >-
+  A switch without a visible label must have an accessible-label attribute
+  to remain accessible.
+---
+<pf-v6-switch accessible-label="Togglable option for no visible label example" checked show-check-icon></pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/docs/pf-v6-switch.md b/elements/pf-v6-switch/docs/pf-v6-switch.md
new file mode 100644
index 0000000000..04423b0668
--- /dev/null
+++ b/elements/pf-v6-switch/docs/pf-v6-switch.md
@@ -0,0 +1,47 @@
+{% renderOverview %}
+  <pf-v6-switch checked>Togglable option</pf-v6-switch>
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  {% htmlexample %}
+  <pf-v6-switch checked>Togglable option</pf-v6-switch>
+  {% endhtmlexample %}
+
+
+  ### Reversed layout
+  Use the `reversed` attribute to place the label before the toggle.
+
+  {% htmlexample %}
+  <pf-v6-switch reversed checked>Togglable option</pf-v6-switch>
+  {% endhtmlexample %}
+
+
+  ### Without label
+  A switch without a visible label must have an `accessible-label` attribute
+  to remain accessible.
+
+  {% htmlexample %}
+  <pf-v6-switch accessible-label="Togglable option" show-check-icon checked></pf-v6-switch>
+  {% endhtmlexample %}
+
+
+  ### Disabled
+
+  {% htmlexample %}
+  <pf-v6-switch disabled checked>Togglable option</pf-v6-switch>
+  <pf-v6-switch disabled>Togglable option</pf-v6-switch>
+  {% endhtmlexample %}
+
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v6-switch/docs/screenshot.png b/elements/pf-v6-switch/docs/screenshot.png
new file mode 100644
index 0000000000..b8a9d955b2
Binary files /dev/null and b/elements/pf-v6-switch/docs/screenshot.png differ
diff --git a/elements/pf-v6-switch/pf-v6-switch.css b/elements/pf-v6-switch/pf-v6-switch.css
new file mode 100644
index 0000000000..22a2ea2708
--- /dev/null
+++ b/elements/pf-v6-switch/pf-v6-switch.css
@@ -0,0 +1,202 @@
+:host {
+  display: inline-grid;
+  grid-template-columns: auto;
+  grid-auto-columns: 1fr;
+  color-scheme: light dark;
+  /** Gap between toggle and label */
+  column-gap: var(--pf-v6-c-switch--ColumnGap, 0.5rem);
+  /** Switch container height */
+  height: var(--pf-v6-c-switch--Height, auto);
+  /** Switch font size */
+  font-size: var(--pf-v6-c-switch--FontSize, 0.875rem);
+  /** Switch line height */
+  line-height: var(--pf-v6-c-switch--LineHeight, 1.5);
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
+}
+
+#toggle.reversed,
+#label.reversed {
+  grid-row: 1;
+}
+
+#label.reversed {
+  grid-column: 1;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+#toggle {
+  /** Toggle track background color (unchecked). Overrides the `--pf-t--global--background--color--control--default` design token. */
+  --_bg: var(--pf-v6-c-switch__toggle--BackgroundColor,
+    var(--pf-t--global--background--color--control--default, light-dark(#ffffff, #383838)));
+  /** Toggle track border color. Overrides the `--pf-t--global--border--color--control--default` design token. */
+  --_border-color: var(--pf-v6-c-switch__toggle--BorderColor,
+    var(--pf-t--global--border--color--control--default, light-dark(#c7c7c7, #a3a3a3)));
+  /** Toggle track border width. Overrides the `--pf-t--global--border--width--control--default` design token. */
+  --_border-width: var(--pf-v6-c-switch__toggle--BorderWidth,
+    var(--pf-t--global--border--width--control--default, 1px));
+  /** Knob background color (unchecked). Overrides the `--pf-t--global--icon--color--subtle` design token. */
+  --_knob-bg: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor,
+    var(--pf-t--global--icon--color--subtle, light-dark(#707070, #a3a3a3)));
+
+  position: relative;
+  display: inline-block;
+  /** Toggle track width */
+  width: var(--pf-v6-c-switch__toggle--Width,
+    calc(var(--pf-v6-c-switch__toggle--Height,
+      calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5)))
+      + var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem)
+      + var(--pf-v6-c-switch__toggle--before--Width,
+        calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem)))));
+  /** Toggle track height */
+  height: var(--pf-v6-c-switch__toggle--Height,
+    calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5)));
+  background-color: var(--_bg);
+  /** Toggle track border radius. Overrides the `--pf-t--global--border--radius--pill` design token. */
+  border-radius: var(--pf-v6-c-switch__toggle--BorderRadius,
+    var(--pf-t--global--border--radius--pill, 999px));
+
+  &:before {
+    position: absolute;
+    inset-block-start: 50%;
+    /** Knob horizontal offset (unchecked) */
+    inset-inline-start: var(--pf-v6-c-switch__toggle--before--InsetInlineStart,
+      calc((var(--pf-v6-c-switch__toggle--Height,
+        calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5)))
+        - var(--pf-v6-c-switch__toggle--before--Height,
+          var(--pf-v6-c-switch__toggle--before--Width,
+            calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));
+    display: block;
+    /** Knob width */
+    width: var(--pf-v6-c-switch__toggle--before--Width,
+      calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem)));
+    /** Knob height */
+    height: var(--pf-v6-c-switch__toggle--before--Height,
+      var(--pf-v6-c-switch__toggle--before--Width,
+        calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))));
+    content: "";
+    background-color: var(--_knob-bg);
+    border: var(--pf-v6-c-switch__toggle--before--BorderWidth,
+      var(--pf-t--global--border--width--high-contrast--regular, 0)) solid transparent;
+    /** Knob border radius. Overrides the `--pf-t--global--border--radius--large` design token. */
+    border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius,
+      var(--pf-t--global--border--radius--large, 24px));
+    transition: var(--pf-v6-c-switch__toggle--before--Transition,
+      /** Knob transition timing function. Overrides the `--pf-t--global--motion--timing-function--default` design token. */
+      translate var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction,
+        var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1)))
+      /** Knob transition duration. Overrides the `--pf-t--global--motion--duration--md` design token. */
+      var(--pf-v6-c-switch__toggle--before--TransitionDuration,
+        var(--pf-t--global--motion--duration--md, 200ms)),
+      background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction,
+        var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1)))
+      var(--pf-v6-c-switch__toggle--before--TransitionDuration,
+        var(--pf-t--global--motion--duration--md, 200ms)));
+    translate: 0 -50%;
+  }
+
+  &:after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--pf-v6-c-switch__toggle--BorderRadius,
+      var(--pf-t--global--border--radius--pill, 999px));
+  }
+
+  &.checked {
+    /** Toggle track background color (checked). Overrides the `--pf-t--global--color--brand--default` design token. */
+    --_bg: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor,
+      var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9)));
+    /** Toggle track border width (checked) */
+    --_border-width: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth,
+      var(--pf-t--global--border--width--high-contrast--regular, 0));
+    /** Toggle track border color (checked) */
+    --_border-color: var(--pf-v6-c-switch__input--checked__toggle--BorderColor, transparent);
+    /** Knob background color (checked). Overrides the `--pf-t--global--icon--color--inverse` design token. */
+    --_knob-bg: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor,
+      var(--pf-t--global--icon--color--inverse, light-dark(#ffffff, #1f1f1f)));
+
+    &::before {
+      /** Knob translate distance (checked). Base offset for knob positioning. */
+      translate: var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX,
+        calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))) -50%;
+    }
+  }
+
+  &.disabled {
+    /** Toggle track background color (disabled). Overrides the `--pf-t--global--background--color--disabled--default` design token. */
+    --_bg: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor,
+      var(--pf-t--global--background--color--disabled--default, light-dark(#c7c7c7, #a3a3a3)));
+    /** Toggle track border color (disabled). Overrides the `--pf-t--global--border--color--high-contrast` design token. */
+    --_border-color: var(--pf-v6-c-switch__input--disabled__toggle--BorderColor,
+      var(--pf-t--global--border--color--high-contrast, transparent));
+    /** Knob background color (disabled). Overrides the `--pf-t--global--icon--color--on-disabled` design token. */
+    --_knob-bg: var(--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor,
+      var(--pf-t--global--icon--color--on-disabled, light-dark(#4d4d4d, #383838)));
+
+    #check-icon {
+      /** Check icon color (disabled). Overrides the `--pf-t--global--icon--color--disabled` design token. */
+      color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color,
+        var(--pf-t--global--icon--color--disabled, light-dark(#a3a3a3, #707070)));
+    }
+  }
+}
+
+#check-icon {
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  /** Check icon horizontal offset */
+  inset-inline-start: var(--pf-v6-c-switch__toggle-icon--InsetInlineStart,
+    calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * .4));
+  display: flex;
+  align-items: center;
+  /** Check icon font size */
+  font-size: var(--pf-v6-c-switch__toggle-icon--FontSize,
+    calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * .625));
+  /** Check icon color. Overrides the `--pf-t--global--icon--color--on-brand--default` design token. */
+  color: var(--pf-v6-c-switch__toggle-icon--Color,
+    var(--pf-t--global--icon--color--on-brand--default, light-dark(#ffffff, #1f1f1f)));
+
+  &[hidden] {
+    display: none;
+  }
+
+}
+
+#label {
+  display: inline-block;
+  grid-column: 2;
+  vertical-align: top;
+  /** Label text color (unchecked). Overrides the `--pf-t--global--text--color--subtle` design token. */
+  color: var(--pf-v6-c-switch__input--not-checked__label--Color,
+    var(--pf-t--global--text--color--subtle, light-dark(#4d4d4d, #c7c7c7)));
+
+  &.checked {
+    /** Label text color (checked). Overrides the `--pf-t--global--text--color--regular` design token. */
+    color: var(--pf-v6-c-switch__input--checked__label--Color,
+      var(--pf-t--global--text--color--regular, light-dark(#151515, #ffffff)));
+  }
+
+  &.disabled {
+    /** Label text color (disabled). Overrides the `--pf-t--global--text--color--disabled` design token. */
+    color: var(--pf-v6-c-switch__input--disabled__label--Color,
+      var(--pf-t--global--text--color--disabled, light-dark(#a3a3a3, #707070)));
+  }
+}
+
+:host(:is(:focus, :focus-within)) #toggle:not(.disabled) {
+  /** Focus outline width. Overrides the `--pf-t--global--border--width--strong` design token. */
+  /** Focus outline color. Overrides the `--pf-t--global--color--brand--default` design token. */
+  outline: var(--pf-v6-c-switch__input--focus__toggle--OutlineWidth,
+    var(--pf-t--global--border--width--strong, 2px)) solid var(--pf-v6-c-switch__input--focus__toggle--OutlineColor,
+      var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9)));
+  /** Focus outline offset. Overrides the `--pf-t--global--spacer--xs` design token. */
+  outline-offset: var(--pf-v6-c-switch__input--focus__toggle--OutlineOffset,
+    var(--pf-t--global--spacer--xs, 0.25rem));
+}
diff --git a/elements/pf-v6-switch/pf-v6-switch.ts b/elements/pf-v6-switch/pf-v6-switch.ts
new file mode 100644
index 0000000000..7e77569cb1
--- /dev/null
+++ b/elements/pf-v6-switch/pf-v6-switch.ts
@@ -0,0 +1,208 @@
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+
+import styles from './pf-v6-switch.css';
+
+/**
+ * A **switch** provides a toggle control for turning a setting on or off.
+ * Each switch MUST have a visible label or an `accessible-label` attribute.
+ * Switches without visible labels SHOULD set `show-check-icon`.
+ * Keyboard: `Space` or `Enter` toggles the switch.
+ * Uses ARIA `switch` role via ElementInternals (WCAG 1.3.1, 4.1.2, 2.1.1).
+ *
+ * @summary Toggle control for on/off settings
+ *
+ * @slot - Label text displayed beside the switch toggle
+ *
+ * @fires {Event} change - Fires when the switch is toggled. Uses the native
+ *        `Event` interface with no custom detail payload.
+ *        Cancelable: call `preventDefault()` to reject the state change.
+ *
+ * @cssprop {<length>} --pf-v6-c-switch--ColumnGap - Gap between toggle and label {@default 0.5rem}
+ * @cssprop {<length>} --pf-v6-c-switch--FontSize - Switch font size {@default 0.875rem}
+ * @cssprop {<number>} --pf-v6-c-switch--LineHeight - Switch line height {@default 1.5}
+ * @cssprop {<length>} --pf-v6-c-switch--Height - Switch container height {@default auto}
+ * @cssprop {<color>} --pf-v6-c-switch__toggle--BackgroundColor - Toggle track background color (unchecked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--checked__toggle--BackgroundColor - Toggle track background color (checked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--disabled__toggle--BackgroundColor - Toggle track background color (disabled)
+ * @cssprop {<color>} --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor - Knob color (unchecked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor - Knob color (checked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor - Knob color (disabled)
+ * @cssprop {<color>} --pf-v6-c-switch__toggle-icon--Color - Check icon color
+ * @cssprop {<color>} --pf-v6-c-switch__input--not-checked__label--Color - Label color (unchecked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--checked__label--Color - Label color (checked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--disabled__label--Color - Label color (disabled)
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--BorderRadius - Toggle track border radius
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--Width - Toggle track width
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--Height - Toggle track height
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--before--Width - Knob width
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--before--Height - Knob height
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--before--BorderRadius - Knob border radius
+ * @cssprop {<color>} --pf-v6-c-switch__input--focus__toggle--OutlineColor - Focus outline color
+ * @cssprop {<length>} --pf-v6-c-switch__input--focus__toggle--OutlineWidth - Focus outline width
+ * @cssprop {<length>} --pf-v6-c-switch__input--focus__toggle--OutlineOffset - Focus outline offset
+ * @cssprop {<length>} --pf-v6-c-switch__toggle-icon--Offset - Offset used in knob and track sizing calculations
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--before--BorderWidth - Knob border width (high-contrast mode)
+ * @cssprop --pf-v6-c-switch__toggle--before--Transition - Knob transition shorthand
+ * @cssprop --pf-v6-c-switch__toggle--before--TransitionTimingFunction - Knob transition timing function
+ * @cssprop {<time>} --pf-v6-c-switch__toggle--before--TransitionDuration - Knob transition duration
+ * @cssprop {<length>} --pf-v6-c-switch__input--checked__toggle--before--TranslateX - Knob translate distance when checked
+ * @cssprop {<color>} --pf-v6-c-switch__input--disabled__toggle--BorderColor - Toggle border color (disabled)
+ * @cssprop {<length>} --pf-v6-c-switch__input--checked__toggle--BorderWidth - Toggle border width (checked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--checked__toggle--BorderColor - Toggle border color (checked)
+ * @cssprop {<color>} --pf-v6-c-switch__input--disabled__toggle-icon--Color - Check icon color (disabled)
+ * @cssprop {<length>} --pf-v6-c-switch__toggle-icon--FontSize - Check icon font size
+ * @cssprop {<length>} --pf-v6-c-switch__toggle-icon--InsetInlineStart - Check icon horizontal position
+ * @cssprop {<color>} --pf-v6-c-switch__toggle--BorderColor - Toggle border color (unchecked)
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--BorderWidth - Toggle border width (unchecked)
+ * @cssprop {<length>} --pf-v6-c-switch__toggle--before--InsetInlineStart - Knob horizontal offset (unchecked)
+ */
+@customElement('pf-v6-switch')
+export class PfV6Switch extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  static readonly formAssociated = true;
+
+  #internals = InternalsController.of(this, { role: 'switch' });
+
+  #slots = new SlotController(this, null);
+
+  /**
+   * Accessible label for the switch when there is no visible label text.
+   * Should describe the checked state, e.g. "Wi-Fi" (not "Wi-Fi on/off").
+   */
+  @property({ reflect: true, attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  /** Flag to show a check icon on the toggle when checked. */
+  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;
+
+  /** Whether the switch is checked. */
+  @property({ reflect: true, type: Boolean }) checked = false;
+
+  /** Whether the switch is disabled. */
+  @property({ reflect: true, type: Boolean }) disabled = false;
+
+  /** Reverses the layout so the label appears before the toggle. */
+  @property({ reflect: true, type: Boolean }) reversed = false;
+
+  /** Form value defaults to undefined */
+  @property() value?: string;
+
+  #initialChecked = false;
+
+  get #classes() {
+    return [
+      this.checked && 'checked',
+      this.disabled && 'disabled',
+      this.reversed && 'reversed',
+    ].filter(Boolean).join(' ');
+  }
+
+  get labels(): NodeListOf<HTMLLabelElement> {
+    return this.#internals.labels as NodeListOf<HTMLLabelElement>;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (!isServer) {
+      this.#initialChecked = this.checked;
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keyup', this.#onKeyup);
+      this.addEventListener('keydown', this.#onKeydown);
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keyup', this.#onKeyup);
+    this.removeEventListener('keydown', this.#onKeydown);
+  }
+
+  formDisabledCallback(disabled: boolean): void {
+    this.disabled = disabled;
+    this.requestUpdate();
+  }
+
+  formResetCallback(): void {
+    this.checked = this.#initialChecked;
+  }
+
+  override willUpdate(): void {
+    this.tabIndex = this.disabled ? -1 : 0;
+    this.#internals.ariaChecked = String(!!this.checked);
+    this.#internals.ariaDisabled = String(!!this.disabled);
+    this.#internals.ariaLabel = this.accessibleLabel || null;
+    this.#internals.setFormValue(this.checked ? (this.value ?? 'on') : null);
+  }
+
+  override render(): TemplateResult<1> {
+    return html`
+      <span id="toggle" class="${this.#classes}">
+        <span id="check-icon"
+              ?hidden=${!this.showCheckIcon || (this.showCheckIcon && !this.checked)}>
+          <svg role="presentation"
+               fill="currentColor"
+               height="1em"
+               width="1em"
+               viewBox="0 0 512 512">
+            <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
+          </svg>
+        </span>
+      </span>
+      <span id="label"
+            class="${this.#classes}"
+            ?hidden=${this.#slots.isEmpty()}>
+<slot></slot>
+      </span>
+    `;
+  }
+
+  #onClick(event: Event) {
+    // @ts-expect-error: firefox workaround for double-firing when switch is nested in a label
+    const { originalTarget, explicitOriginalTarget } = event;
+    if (explicitOriginalTarget) {
+      let labels: HTMLLabelElement[];
+      if (originalTarget === event.target
+          && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)
+          && labels.includes(this.closest('label') as HTMLLabelElement)) {
+        return;
+      }
+    }
+    this.#toggle();
+  }
+
+  #onKeyup(event: KeyboardEvent) {
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.preventDefault();
+        this.#toggle();
+    }
+  }
+
+  #onKeydown(event: KeyboardEvent) {
+    if (event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  #toggle() {
+    if (!this.disabled) {
+      this.checked = !this.checked;
+      if (!this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))) {
+        this.checked = !this.checked;
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-switch': PfV6Switch;
+  }
+}
diff --git a/elements/pf-v5-banner/test/pf-banner.e2e.ts b/elements/pf-v6-switch/test/pf-v6-switch.e2e.ts
similarity index 95%
rename from elements/pf-v5-banner/test/pf-banner.e2e.ts
rename to elements/pf-v6-switch/test/pf-v6-switch.e2e.ts
index c833252a2c..c3ba613d2f 100644
--- a/elements/pf-v5-banner/test/pf-banner.e2e.ts
+++ b/elements/pf-v6-switch/test/pf-v6-switch.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-banner';
+const tagName = 'pf-v6-switch';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-switch/test/pf-v6-switch.spec.ts b/elements/pf-v6-switch/test/pf-v6-switch.spec.ts
new file mode 100644
index 0000000000..532dfa1df7
--- /dev/null
+++ b/elements/pf-v6-switch/test/pf-v6-switch.spec.ts
@@ -0,0 +1,381 @@
+import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { sendKeys } from '@web/test-runner-commands';
+
+import { PfV6Switch } from '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+describe('<pf-v6-switch>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-switch')).to.be.an.instanceof(PfV6Switch);
+  });
+
+  describe('simply instantiating', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Test"></pf-v6-switch>
+      `);
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('should upgrade', function() {
+      const klass = customElements.get('pf-v6-switch');
+      expect(element)
+          .to.be.an.instanceOf(klass)
+          .and
+          .to.be.an.instanceOf(PfV6Switch);
+    });
+
+    it('has accessible role', function() {
+      expect(snapshot.role).to.equal('switch');
+    });
+
+    it('has accessible name', function() {
+      expect(snapshot.name).to.equal('Test');
+    });
+
+    it('is not checked by default', function() {
+      expect(snapshot.checked).to.be.false;
+    });
+  });
+
+  describe('with accessible-label attribute', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Dark Mode"></pf-v6-switch>
+      `);
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('has an accessible name from accessible-label', function() {
+      expect(snapshot.name).to.equal('Dark Mode');
+    });
+
+    it('keeps the same accessible name regardless of checked state', async function() {
+      element.focus();
+      await sendKeys({ press: ' ' });
+      await element.updateComplete;
+      await nextFrame();
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+      expect(snapshot.name).to.equal('Dark Mode');
+    });
+  });
+
+  describe('with slotted label text', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch>Wi-Fi enabled</pf-v6-switch>
+      `);
+      await element.updateComplete;
+    });
+
+    it('renders the label text', function() {
+      expect(element.textContent?.trim()).to.equal('Wi-Fi enabled');
+    });
+
+    it('displays the label in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+      expect(snapshot.name).to.equal('Wi-Fi enabled');
+    });
+  });
+
+  describe('with external label', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      const container = await createFixture<PfV6Switch>(html`
+        <div>
+          <pf-v6-switch id="switch"></pf-v6-switch>
+          <label for="switch">Dark Mode</label>
+        </div>
+      `);
+      element = container.querySelector('pf-v6-switch')!;
+      snapshot = await a11ySnapshot({ selector: '#switch' });
+    });
+
+    it('is accessible', function() {
+      expect(snapshot.role).to.equal('switch');
+      expect(snapshot.name).to.equal('Dark Mode');
+      expect(snapshot.checked).to.be.false;
+    });
+
+    describe('toggling the switch', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: 'Enter' });
+        await element.updateComplete;
+        await nextFrame();
+        snapshot = await a11ySnapshot({ selector: '#switch' });
+      });
+
+      it('should be checked', function() {
+        expect(element.checked).to.be.true;
+        expect(snapshot.checked).to.be.true;
+      });
+
+      it('keeps the same label', function() {
+        expect(snapshot.name).to.equal('Dark Mode');
+      });
+    });
+  });
+
+  describe('when checked attr is present', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch id="switch" accessible-label="Test" checked></pf-v6-switch>
+      `);
+      await element.updateComplete;
+      await nextFrame();
+      snapshot = await a11ySnapshot({ selector: '#switch' });
+    });
+
+    it('should be checked', function() {
+      expect(element.checked).to.be.true;
+      expect(snapshot.checked).to.be.true;
+    });
+  });
+
+  describe('when checked attr is not present', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch id="switch" accessible-label="Test"></pf-v6-switch>
+      `);
+      await element.updateComplete;
+      await nextFrame();
+      snapshot = await a11ySnapshot({ selector: '#switch' });
+    });
+
+    it('should not be checked', function() {
+      expect(element.checked).to.be.false;
+      expect(snapshot.checked).to.be.false;
+    });
+  });
+
+  describe('when checked and show-check-icon attrs are present', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch show-check-icon checked>Check icon example</pf-v6-switch>
+      `);
+    });
+
+    it('has the show-check-icon attribute', function() {
+      expect(element.showCheckIcon).to.be.true;
+      expect(element.hasAttribute('show-check-icon')).to.be.true;
+    });
+  });
+
+  describe('when disabled', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Test" disabled></pf-v6-switch>
+      `);
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('reports disabled in accessibility tree', function() {
+      expect(snapshot.disabled).to.be.true;
+    });
+
+    it('does not toggle when clicked', function() {
+      element.click();
+      expect(element.checked).to.be.false;
+    });
+  });
+
+  describe('when reversed', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch reversed checked>Reversed label</pf-v6-switch>
+      `);
+    });
+
+    it('has the reversed attribute', function() {
+      expect(element.reversed).to.be.true;
+      expect(element.hasAttribute('reversed')).to.be.true;
+    });
+  });
+
+  describe('when nested inside a label element', function() {
+    let label: HTMLLabelElement;
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      label = await createFixture<HTMLLabelElement>(html`
+        <label>
+          <span>Dark Mode</span>
+          <pf-v6-switch id="switch"></pf-v6-switch>
+        </label>
+      `);
+      element = label.querySelector('pf-v6-switch')!;
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('does not hide label', function() {
+      expect(label.hidden).to.be.false;
+    });
+
+    it('has an accessible name', function() {
+      expect(snapshot.name).to.equal('Dark Mode');
+    });
+
+    describe('clicking the label', function() {
+      beforeEach(function() {
+        label.click();
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+
+    describe('pressing Space on the switch', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+  });
+
+  describe('keyboard interaction', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Keyboard test"></pf-v6-switch>
+      `);
+      element.focus();
+    });
+
+    describe('pressing Space', function() {
+      beforeEach(async function() {
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+
+    describe('pressing Enter', function() {
+      beforeEach(async function() {
+        await sendKeys({ press: 'Enter' });
+        await element.updateComplete;
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+  });
+
+  describe('change event', function() {
+    let element: PfV6Switch;
+    let changeCount: number;
+    beforeEach(async function() {
+      changeCount = 0;
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Event test"></pf-v6-switch>
+      `);
+      element.addEventListener('change', () => changeCount++);
+    });
+
+    describe('toggling the switch', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('fires change event', function() {
+        expect(changeCount).to.equal(1);
+      });
+    });
+
+    describe('clicking a disabled switch', function() {
+      beforeEach(function() {
+        element.disabled = true;
+        element.click();
+      });
+
+      it('does not fire change event', function() {
+        expect(changeCount).to.equal(0);
+      });
+    });
+
+    describe('preventing default on the change event', function() {
+      beforeEach(async function() {
+        element.addEventListener('change', e => e.preventDefault());
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('reverts the checked state', function() {
+        expect(element.checked).to.be.false;
+      });
+    });
+  });
+
+  describe('form association', function() {
+    let form: HTMLFormElement;
+    let element: PfV6Switch;
+    let submitData: FormData | null;
+    beforeEach(async function() {
+      submitData = null;
+      const container = await createFixture(html`
+        <form>
+          <pf-v6-switch name="toggle" accessible-label="Form test"></pf-v6-switch>
+          <button type="submit">Submit</button>
+        </form>
+      `);
+      form = container as HTMLFormElement;
+      element = form.querySelector('pf-v6-switch')!;
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        submitData = new FormData(form);
+      });
+    });
+
+    describe('submitting when unchecked', function() {
+      beforeEach(function() {
+        form.requestSubmit();
+      });
+
+      it('does not include value in form data', function() {
+        expect(submitData!.has('toggle')).to.be.false;
+      });
+    });
+
+    describe('submitting when checked', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+        form.requestSubmit();
+      });
+
+      it('includes "on" value in form data', function() {
+        expect(submitData!.get('toggle')).to.equal('on');
+      });
+    });
+  });
+});
diff --git a/elements/pf-v6-timestamp/README.md b/elements/pf-v6-timestamp/README.md
new file mode 100644
index 0000000000..d95232f4df
--- /dev/null
+++ b/elements/pf-v6-timestamp/README.md
@@ -0,0 +1,81 @@
+# pf-v6-timestamp
+
+A timestamp provides consistent formats for displaying date and time values.
+
+## Usage
+
+### Basic date and time
+
+```html
+<pf-v6-timestamp date="Mon Jan 2 15:04:05 EST 2006"
+                 date-format="full"
+                 time-format="long">
+</pf-v6-timestamp>
+```
+
+### Relative time
+
+```html
+<pf-v6-timestamp date="Mon Jan 2 15:04:05 EST 2006" relative>
+</pf-v6-timestamp>
+```
+
+### Timezone display
+
+```html
+<pf-v6-timestamp time-zone="UTC" display-suffix="UTC"></pf-v6-timestamp>
+<pf-v6-timestamp time-zone="America/New_York"></pf-v6-timestamp>
+```
+
+### Hour cycle
+
+```html
+<!-- Force 24-hour display -->
+<pf-v6-timestamp hour-cycle="h23"></pf-v6-timestamp>
+<!-- Force 12-hour display -->
+<pf-v6-timestamp hour-cycle="h12"></pf-v6-timestamp>
+```
+
+### With tooltip (composition pattern)
+
+Tooltip support uses composition with `<pf-v5-tooltip>` rather than built-in
+configuration. Use an anchor element around the trigger for keyboard
+accessibility.
+
+```html
+<pf-v5-tooltip>
+  <a href="#">
+    <pf-v6-timestamp></pf-v6-timestamp>
+  </a>
+  <pf-v6-timestamp slot="content" time-zone="UTC" display-suffix="UTC">
+  </pf-v6-timestamp>
+</pf-v5-tooltip>
+```
+
+## Divergences from React `Timestamp`
+
+### Not implemented
+
+| React prop | Notes |
+|---|---|
+| `tooltip` | Use composition with `<pf-v5-tooltip>` wrapping the timestamp instead. The web component pattern favors slot-based composition over configuration objects. See demos for examples. |
+
+### Changed API
+
+| React prop | Web component | Difference |
+|---|---|---|
+| `is12Hour={true}` | `hour-cycle="h12"` | Uses the Intl.DateTimeFormat `hourCycle` enum (`h11`, `h12`, `h23`, `h24`) instead of a boolean. More expressive: `h23` and `h24` give two 24-hour variants, `h11` and `h12` give two 12-hour variants. Absence uses locale default (same as omitting `is12Hour` in React). |
+| `is12Hour={false}` | `hour-cycle="h23"` | `h23` is the standard 24-hour format (0-23 range). |
+| `shouldDisplayUTC` | `time-zone="UTC"` | Accepts any IANA timezone identifier, not just UTC. For the "UTC" suffix shown in React's default tooltip, add `display-suffix="UTC"`. |
+| `date` (Date object) | `date` attribute (string) | Accepts any string parseable by `new Date()` rather than a Date object, since HTML attributes are strings. The `date` getter returns the ISO 8601 string for round-tripping. |
+| `customFormat` (prop) | `.customFormat` property | Set via JavaScript property only (not reflectable as attribute). |
+| `tooltip.variant="default"` | Composition with `<pf-v5-tooltip>` | Tooltip via wrapping; keyboard a11y via `<a>` element. |
+| `children` | Default slot | Slotted content replaces computed display, matching web component conventions. |
+
+### Added
+
+| Web component API | Notes |
+|---|---|
+| `time-zone` attribute | Accepts any IANA timezone identifier (e.g. `UTC`, `America/New_York`, `Europe/London`). Strictly more powerful than React's boolean `shouldDisplayUTC`. |
+| `hour-cycle` attribute | Accepts `h11`, `h12`, `h23`, `h24` per the Intl.DateTimeFormat spec. Strictly more expressive than React's boolean `is12Hour`. |
+| Default slot | Slot for custom display content (e.g. relative time text). The `datetime` attribute on the inner `<time>` element is still set from the `date` attribute. |
diff --git a/elements/pf-v6-timestamp/demo/basic-formats.html b/elements/pf-v6-timestamp/demo/basic-formats.html
new file mode 100644
index 0000000000..2e15cf1ea8
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/basic-formats.html
@@ -0,0 +1,19 @@
+---
+name: Basic formats
+description: >
+  The format of the displayed content can be customized by setting the
+  date-format and/or time-format attributes. Setting only one displays only
+  the date or time. Options are "full", "long", "medium", and "short".
+  Use display-suffix to add a custom suffix such as a timezone name.
+---
+<section>
+  <p><pf-v6-timestamp date-format="full" time-format="full"></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date-format="full"></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp time-format="full"></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date-format="medium" time-format="short" display-suffix="US Eastern"></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date-format="full" locale="es"></pf-v6-timestamp></p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/custom-content.html b/elements/pf-v6-timestamp/demo/custom-content.html
new file mode 100644
index 0000000000..77bb8d18d8
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/custom-content.html
@@ -0,0 +1,35 @@
+---
+name: Custom content
+description: >
+  To display custom content such as relative time or prefacing text, use the
+  default slot. When combined with a tooltip, set date-format and/or
+  time-format to customize tooltip content without affecting the slotted
+  display. Use an anchor element around the trigger for keyboard accessibility.
+---
+<section>
+  <p>
+    <pf-v5-tooltip>
+      <a href="#">
+        <pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative>
+          1 hour ago
+        </pf-v6-timestamp>
+      </a>
+      <pf-v6-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" date-format="long" time-format="short"></pf-v6-timestamp>
+    </pf-v5-tooltip>
+  </p>
+  <p>
+    <pf-v5-tooltip>
+      <a href="#">
+        <pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)">
+          Last updated August 9th, 2022 at 2:57 PM EDT
+        </pf-v6-timestamp>
+      </a>
+      <pf-v6-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" time-zone="UTC" display-suffix="UTC"></pf-v6-timestamp>
+    </pf-v5-tooltip>
+  </p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+  import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/custom-format.html b/elements/pf-v6-timestamp/demo/custom-format.html
new file mode 100644
index 0000000000..7f98ea845d
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/custom-format.html
@@ -0,0 +1,24 @@
+---
+name: Custom format
+description: >
+  The format can be further customized by setting the customFormat property to
+  an Intl.DateTimeFormatOptions object. This overrides date-format and
+  time-format.
+---
+<section>
+  <p><pf-v6-timestamp id="timestamp-custom-format" date="Sat Jan 01 2022 00:00:00 GMT-0500"></pf-v6-timestamp></p>
+
+  <script>
+  document.getElementById('timestamp-custom-format').customFormat = {
+    year: '2-digit',
+    month: 'short',
+    weekday: 'short',
+    day: 'numeric',
+    hour: 'numeric'
+  };
+  </script>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/custom-tooltip.html b/elements/pf-v6-timestamp/demo/custom-tooltip.html
new file mode 100644
index 0000000000..0fb827d40e
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/custom-tooltip.html
@@ -0,0 +1,28 @@
+---
+name: Custom tooltip
+description: >
+  Display any custom content within a tooltip by placing it in the tooltip's
+  content slot. Use an anchor element around the trigger for keyboard
+  accessibility.
+---
+<section>
+  <p>
+    <pf-v5-tooltip>
+      <a href="#">
+        <pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v6-timestamp>
+      </a>
+      <span slot="content">Last updated on <pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" date-format="long" time-format="short" time-zone="UTC"></pf-v6-timestamp></span>
+    </pf-v5-tooltip>
+  </p>
+  <p>
+    <pf-v5-tooltip>
+      Halloween
+      <pf-v6-timestamp slot="content" date="Mon Oct 31 2022 00:00:00 GMT-0400 (Eastern Daylight Time)" date-format="medium"></pf-v6-timestamp>
+    </pf-v5-tooltip>
+  </p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+  import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/default-tooltip.html b/elements/pf-v6-timestamp/demo/default-tooltip.html
new file mode 100644
index 0000000000..361c529ae2
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/default-tooltip.html
@@ -0,0 +1,31 @@
+---
+name: Default tooltip
+description: >
+  To render a tooltip that displays the timestamp content as a UTC time, wrap
+  the timestamp in a tooltip and add a UTC-formatted timestamp in the content
+  slot. Use an anchor element around the trigger timestamp for keyboard
+  accessibility.
+---
+<section>
+  <p>
+    <pf-v5-tooltip>
+      <a href="#">
+        <pf-v6-timestamp date="Mon Apr 21 2025 14:30:00"></pf-v6-timestamp>
+      </a>
+      <pf-v6-timestamp slot="content" date="Mon Apr 21 2025 14:30:00" time-zone="UTC" display-suffix="UTC"></pf-v6-timestamp>
+    </pf-v5-tooltip>
+  </p>
+  <p>
+    <pf-v5-tooltip>
+      <a href="#">
+        <pf-v6-timestamp date="Mon Apr 21 2025 14:30:00"></pf-v6-timestamp>
+      </a>
+      <pf-v6-timestamp slot="content" date="Mon Apr 21 2025 14:30:00" time-zone="UTC" display-suffix="Coordinated Universal Time"></pf-v6-timestamp>
+    </pf-v5-tooltip>
+  </p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+  import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/hour-cycle.html b/elements/pf-v6-timestamp/demo/hour-cycle.html
new file mode 100644
index 0000000000..8806e017d4
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/hour-cycle.html
@@ -0,0 +1,20 @@
+---
+name: Hour cycle
+description: >
+  Control hour display with the hour-cycle attribute. Values follow the
+  Intl.DateTimeFormat spec: h12 (12-hour, 1-12), h11 (12-hour, 0-11),
+  h23 (24-hour, 0-23), h24 (24-hour, 1-24). When absent, the locale
+  default is used. This replaces React's boolean is12Hour with a richer
+  set of options.
+---
+<section>
+  <p>Locale default: <pf-v6-timestamp time-format="medium"></pf-v6-timestamp></p>
+  <p>12-hour (h12): <pf-v6-timestamp time-format="medium" hour-cycle="h12"></pf-v6-timestamp></p>
+  <p>24-hour (h23): <pf-v6-timestamp time-format="medium" hour-cycle="h23"></pf-v6-timestamp></p>
+  <p>en-GB with h12: <pf-v6-timestamp time-format="medium" locale="en-GB" hour-cycle="h12"></pf-v6-timestamp></p>
+  <p>en-US with h23: <pf-v6-timestamp time-format="medium" locale="en-US" hour-cycle="h23"></pf-v6-timestamp></p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/index.html b/elements/pf-v6-timestamp/demo/index.html
new file mode 100644
index 0000000000..5f11d171c6
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/index.html
@@ -0,0 +1,15 @@
+---
+name: Default
+description: >
+  By default, a timestamp will display the current date and time based on the
+  current locale if the date attribute is not set. Setting time-zone displays
+  the date and time in the specified IANA timezone.
+---
+<section>
+  <p><pf-v6-timestamp></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp time-zone="UTC" display-suffix="UTC"></pf-v6-timestamp></p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/relative-format-with-tooltip.html b/elements/pf-v6-timestamp/demo/relative-format-with-tooltip.html
new file mode 100644
index 0000000000..42ddb71194
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/relative-format-with-tooltip.html
@@ -0,0 +1,29 @@
+---
+name: Relative format with tooltip
+description: >
+  Combine relative time with a tooltip showing the full date/time. Use an
+  anchor element around the trigger for keyboard accessibility.
+---
+<section>
+  <p>
+    <pf-v5-tooltip>
+      <a href="#">
+        <pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v6-timestamp>
+      </a>
+      <pf-v6-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v6-timestamp>
+    </pf-v5-tooltip>
+  </p>
+  <p>
+    <pf-v5-tooltip>
+      <a href="#">
+        <pf-v6-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v6-timestamp>
+      </a>
+      <pf-v6-timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v6-timestamp>
+    </pf-v5-tooltip>
+  </p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+  import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/relative-format.html b/elements/pf-v6-timestamp/demo/relative-format.html
new file mode 100644
index 0000000000..2560480ddb
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/relative-format.html
@@ -0,0 +1,17 @@
+---
+name: Relative format
+description: >
+  To display relative time (e.g. "3 years ago"), set the relative attribute.
+---
+<section>
+  <p><pf-v6-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></pf-v6-timestamp></p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+</script>
diff --git a/elements/pf-v6-timestamp/demo/timezone.html b/elements/pf-v6-timestamp/demo/timezone.html
new file mode 100644
index 0000000000..e3d8ef4bd8
--- /dev/null
+++ b/elements/pf-v6-timestamp/demo/timezone.html
@@ -0,0 +1,18 @@
+---
+name: Timezone
+description: >
+  Set the time-zone attribute to any IANA timezone identifier to display the
+  date/time in that timezone. Unlike React's boolean shouldDisplayUTC, this
+  supports any timezone. Add display-suffix to label the timezone when
+  time-format does not include timezone information.
+---
+<section>
+  <p><pf-v6-timestamp time-zone="UTC" display-suffix="UTC"></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp time-zone="America/New_York" time-format="long"></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp time-zone="Europe/London" time-format="long"></pf-v6-timestamp></p>
+  <p><pf-v6-timestamp time-zone="Asia/Tokyo" date-format="full" time-format="short" display-suffix="JST"></pf-v6-timestamp></p>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+</script>
diff --git a/elements/pf-v6-timestamp/pf-v6-timestamp.css b/elements/pf-v6-timestamp/pf-v6-timestamp.css
new file mode 100644
index 0000000000..e5f18d9ef9
--- /dev/null
+++ b/elements/pf-v6-timestamp/pf-v6-timestamp.css
@@ -0,0 +1,9 @@
+:host {
+  display: inline-block;
+  /** Maps to `--pf-t--global--font--size--body--sm` */
+  font-size: var(--pf-v6-c-timestamp--FontSize, 0.75rem);
+  /** Maps to `--pf-t--global--text--color--regular` */
+  color: var(--pf-v6-c-timestamp--Color, inherit);
+  /** Focus ring offset per PatternFly v6 spacing tokens */
+  outline-offset: var(--pf-v6-c-timestamp--OutlineOffset, 0.1875rem);
+}
diff --git a/elements/pf-v6-timestamp/pf-v6-timestamp.ts b/elements/pf-v6-timestamp/pf-v6-timestamp.ts
new file mode 100644
index 0000000000..9d5cbe9046
--- /dev/null
+++ b/elements/pf-v6-timestamp/pf-v6-timestamp.ts
@@ -0,0 +1,117 @@
+import type { PropertyValues, TemplateResult } from 'lit';
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+
+import {
+  TimestampController,
+  type DateTimeFormat,
+  type HourCycle,
+} from '@patternfly/pfe-core/controllers/timestamp-controller.js';
+
+import styles from './pf-v6-timestamp.css';
+
+export type { DateTimeFormat, HourCycle };
+
+/**
+ * A timestamp provides consistent formats for displaying date and time values.
+ * Authors should set `date` to display a specific time. Defaults to now.
+ * The `<time datetime>` element provides screen reader accessible semantics.
+ *
+ * For tooltip display, wrap the timestamp in a `<pf-v6-tooltip>` using
+ * composition rather than built-in configuration.
+ *
+ * @summary Consistently formatted date and time display.
+ * @slot - Custom content to display instead of the formatted date/time.
+ *         Useful for relative time text or prefacing content.
+ *         The inner `<time datetime>` element preserves machine-readable
+ *         semantics regardless of slotted display text; screen readers
+ *         may announce the `datetime` value for additional context.
+ */
+@customElement('pf-v6-timestamp')
+export class PfV6Timestamp extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /** Format of the displayed date portion. */
+  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: DateTimeFormat;
+
+  /** Format of the displayed time portion. */
+  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: DateTimeFormat;
+
+  /**
+   * Custom Intl.DateTimeFormatOptions for full control over formatting.
+   * Overrides `date-format` and `time-format` when set.
+   */
+  @property({ attribute: false }) customFormat?: Intl.DateTimeFormatOptions;
+
+  /** Custom suffix appended to the displayed content, e.g. a timezone name. */
+  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;
+
+  /** Locale for formatting. Defaults to the browser's current locale. */
+  @property({ reflect: true }) locale?: string;
+
+  /** Display a relative time string (e.g. "3 hours ago") instead of an absolute date. */
+  @property({ reflect: true, type: Boolean }) relative?: boolean;
+
+  /**
+   * IANA timezone identifier for display (e.g. "UTC", "America/New_York").
+   * When absent, uses the local timezone.
+   */
+  @property({ reflect: true, attribute: 'time-zone' }) timeZone?: string;
+
+  /**
+   * Hour cycle for time display. Values follow the Intl.DateTimeFormat spec:
+   * - `h11`: 12-hour (0-11)
+   * - `h12`: 12-hour (1-12)
+   * - `h23`: 24-hour (0-23)
+   * - `h24`: 24-hour (1-24)
+   * When absent, uses the locale default.
+   */
+  @property({ reflect: true, attribute: 'hour-cycle' }) hourCycle?: HourCycle;
+
+  /**
+   * The date/time to display. Accepts any value parseable by `new Date()`.
+   * Defaults to the current date/time when not set.
+   */
+  @property({ reflect: true })
+  get date(): string {
+    return this.#timestamp.isoString;
+  }
+
+  set date(string) {
+    this.#timestamp.date = new Date(string);
+  }
+
+  /** The ISO 8601 string representation of the current date value. */
+  get isoString(): string {
+    return this.#timestamp.isoString;
+  }
+
+  /** The formatted display string for the current date/time. */
+  get time(): string {
+    return this.#timestamp.time;
+  }
+
+  #timestamp = new TimestampController(this);
+
+  override willUpdate(changedProperties: PropertyValues<this>): void {
+    for (const [prop] of changedProperties) {
+      this.#timestamp.set(prop, this[prop as keyof this]);
+    }
+  }
+
+  override render(): TemplateResult<1> {
+    return html`
+      <time datetime="${this.#timestamp.isoString}">
+        <slot>${this.#timestamp.time}</slot>
+      </time>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-timestamp': PfV6Timestamp;
+  }
+}
diff --git a/elements/pf-v5-timestamp/test/pf-timestamp.e2e.ts b/elements/pf-v6-timestamp/test/pf-timestamp.e2e.ts
similarity index 86%
rename from elements/pf-v5-timestamp/test/pf-timestamp.e2e.ts
rename to elements/pf-v6-timestamp/test/pf-timestamp.e2e.ts
index da5b8ce80b..5ff18e21df 100644
--- a/elements/pf-v5-timestamp/test/pf-timestamp.e2e.ts
+++ b/elements/pf-v6-timestamp/test/pf-timestamp.e2e.ts
@@ -2,13 +2,12 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-timestamp';
+const tagName = 'pf-v6-timestamp';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
     const componentPage = new PfeDemoPage(page, tagName);
     await componentPage.navigate();
-    await page.$eval('#realtime', el => el.closest('section')?.remove());
     await componentPage.snapshot();
   });
 
diff --git a/elements/pf-v6-timestamp/test/pf-timestamp.spec.ts b/elements/pf-v6-timestamp/test/pf-timestamp.spec.ts
new file mode 100644
index 0000000000..0674740815
--- /dev/null
+++ b/elements/pf-v6-timestamp/test/pf-timestamp.spec.ts
@@ -0,0 +1,356 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfV6Timestamp } from '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
+
+describe('<pf-v6-timestamp>', function() {
+  let element: PfV6Timestamp;
+
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-timestamp')).to.be.an.instanceof(PfV6Timestamp);
+  });
+
+  describe('with no attributes', function() {
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp></pf-v6-timestamp>
+      `);
+    });
+
+    it('should be an instance of PfV6Timestamp', function() {
+      expect(element)
+          .to.be.an.instanceof(customElements.get('pf-v6-timestamp'))
+          .and
+          .to.be.an.instanceof(PfV6Timestamp);
+    });
+
+    it('shows the current date with default formatting', function() {
+      const expected = new Date().toLocaleString();
+      expect(element.time).to.equal(expected);
+    });
+
+    it('is accessible', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.have.property('children');
+    });
+  });
+
+  describe('with a specific date', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}"></pf-v6-timestamp>
+      `);
+    });
+
+    it('exposes the correct ISO string', function() {
+      const expected = new Date(dateString).toISOString();
+      expect(element.isoString).to.equal(expected);
+    });
+
+    it('shows the date with default formatting', function() {
+      expect(element.time).to.equal(new Date(dateString).toLocaleString());
+    });
+  });
+
+  describe('with date-format="full" and time-format="short"', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" date-format="full" time-format="short"></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows custom formatting', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'short' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with date-format="full" only', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" date-format="full"></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows only the date', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with time-format="short" only', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" time-format="short"></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows only the time', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', { timeStyle: 'short' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with customFormat property', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+    const options: Intl.DateTimeFormatOptions = {
+      year: '2-digit',
+      month: 'short',
+      weekday: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+    };
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" .customFormat=${options}></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows custom formatting', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', options);
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with display-suffix', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+    const suffix = 'US Eastern';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" display-suffix="${suffix}"></pf-v6-timestamp>
+      `);
+    });
+
+    it('appends the suffix to the display', function() {
+      const expected = `${new Date(dateString).toLocaleString('en-US')} ${suffix}`;
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with hour-cycle="h23"', function() {
+    const dateString = 'Sat Jan 01 2022 13:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" hour-cycle="h23"></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows 24-hour time', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', { hourCycle: 'h23' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with hour-cycle="h12"', function() {
+    const dateString = 'Sat Jan 01 2022 13:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" hour-cycle="h12"></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows 12-hour time', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', { hourCycle: 'h12' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with locale="en-GB"', function() {
+    beforeEach(async function() {
+      const date = new Date(2022, 1, 1).toString();
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${date}" locale="en-GB"></pf-v6-timestamp>
+      `);
+    });
+
+    it('formats using the specified locale', function() {
+      const date = new Date(2022, 1, 1).toString();
+      const expected = new Date(date).toLocaleString('en-GB');
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with locale="en-US"', function() {
+    beforeEach(async function() {
+      const date = new Date(2022, 1, 1, 13, 0).toString();
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${date}" locale="en-US"></pf-v6-timestamp>
+      `);
+    });
+
+    it('uses locale default hour cycle', function() {
+      const date = new Date(2022, 1, 1, 13, 0).toString();
+      const expected = new Date(date).toLocaleString('en-US');
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with locale="en-US" and hour-cycle="h23"', function() {
+    beforeEach(async function() {
+      const date = new Date(2022, 1, 1, 13, 0).toString();
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${date}" locale="en-US" hour-cycle="h23"></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows 24-hour time', function() {
+      const date = new Date(2022, 1, 1, 13, 0).toString();
+      const expected = new Date(date).toLocaleString('en-US', { hourCycle: 'h23' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with locale="en-GB" and hour-cycle="h12"', function() {
+    beforeEach(async function() {
+      const date = new Date(2022, 1, 1, 13, 0).toString();
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${date}" locale="en-GB" hour-cycle="h12"></pf-v6-timestamp>
+      `);
+    });
+
+    it('shows 12-hour time for a 24-hour locale', function() {
+      const date = new Date(2022, 1, 1, 13, 0).toString();
+      const expected = new Date(date).toLocaleString('en-GB', { hourCycle: 'h12' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with relative', function() {
+    describe('and a current date', function() {
+      beforeEach(async function() {
+        const date = new Date();
+        element = await createFixture<PfV6Timestamp>(html`
+          <pf-v6-timestamp date="${date.toString()}" relative></pf-v6-timestamp>
+        `);
+      });
+
+      it('shows "just now"', function() {
+        expect(element.time).to.match(/just now/);
+      });
+    });
+
+    describe('and a past date', function() {
+      beforeEach(async function() {
+        const date = new Date(2015, 7, 9, 14, 57, 0);
+        element = await createFixture<PfV6Timestamp>(html`
+          <pf-v6-timestamp date="${date.toString()}" relative></pf-v6-timestamp>
+        `);
+      });
+
+      it('shows relative time in the past', function() {
+        expect(element.time).to.match(/\d+ years ago/);
+      });
+    });
+
+    describe('and a future date', function() {
+      beforeEach(async function() {
+        const date = new Date(2099, 7, 9, 14, 57, 0);
+        element = await createFixture<PfV6Timestamp>(html`
+          <pf-v6-timestamp date="${date.toString()}" relative></pf-v6-timestamp>
+        `);
+      });
+
+      it('shows relative time in the future', function() {
+        expect(element.time).to.match(/in \d+ years/);
+      });
+    });
+  });
+
+  describe('with slotted content', function() {
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400">2 days ago</pf-v6-timestamp>
+      `);
+    });
+
+    it('displays the slotted content', function() {
+      expect(element.textContent).to.include('2 days ago');
+    });
+
+    it('still exposes the correct isoString', function() {
+      const date = new Date('Tue Aug 09 2022 14:57:00 GMT-0400');
+      expect(element.isoString).to.equal(date.toISOString());
+    });
+
+    it('is accessible with a time element in the tree', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.have.property('children');
+    });
+  });
+
+  describe('with time-zone="UTC"', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" time-zone="UTC"></pf-v6-timestamp>
+      `);
+    });
+
+    it('displays UTC time', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', { timeZone: 'UTC' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with time-zone="UTC" and display-suffix="UTC"', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" time-zone="UTC" display-suffix="UTC"></pf-v6-timestamp>
+      `);
+    });
+
+    it('displays UTC time with suffix', function() {
+      const expected = `${new Date(dateString).toLocaleString('en-US', { timeZone: 'UTC' })} UTC`;
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('with time-zone="America/New_York"', function() {
+    const dateString = 'Sat Jan 01 2022 12:00:00 GMT+0000';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}" time-zone="America/New_York"></pf-v6-timestamp>
+      `);
+    });
+
+    it('displays time in the specified timezone', function() {
+      const expected = new Date(dateString).toLocaleString('en-US', { timeZone: 'America/New_York' });
+      expect(element.time).to.equal(expected);
+    });
+  });
+
+  describe('date property round-trips as ISO string', function() {
+    const dateString = 'Sat Jan 01 2022 00:00:00';
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Timestamp>(html`
+        <pf-v6-timestamp date="${dateString}"></pf-v6-timestamp>
+      `);
+    });
+
+    it('returns ISO string from date getter', function() {
+      const expected = new Date(dateString).toISOString();
+      expect(element.date).to.equal(expected);
+    });
+
+    it('date getter matches isoString', function() {
+      expect(element.date).to.equal(element.isoString);
+    });
+  });
+});
diff --git a/eslint.config.js b/eslint.config.js
index 9cac24974b..b358dd075b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -13,7 +13,7 @@ export default tseslint.config(
   {
     name: 'local/ignores',
     ignores: [
-      'elements/pf-v5-icon/demo/icons/**/*.js',
+      'elements/pf-v*-icon/demo/icons/**/*.js',
       'tools/create-element/templates/**/*',
       'tools/create-element/**/*.js',
       'tools/create-element/templates/**/*',
@@ -23,11 +23,6 @@ export default tseslint.config(
     name: 'local/elements/package.json',
     files: ['elements/package.json'],
     plugins: { '@patternfly/elements': pfePlugin },
-    rules: {
-      '@patternfly/elements/no-missing-package-exports': [States.ERROR, {
-        matches: ['elements/*/pf-*.js'],
-      }],
-    },
   },
   {
     name: 'local/tools/create-element',
diff --git a/package-lock.json b/package-lock.json
index e6e5f2b58b..60e5f3713a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,8 +20,8 @@
         "@lit/react": "^1.0.8",
         "@octokit/core": "^6.1.2",
         "@patternfly/patternfly": "^4.224.5",
-        "@pwrs/cem": "^0.7.5",
-        "@pwrs/mappa": "^0.0.4",
+        "@pwrs/cem": "^0.10.5",
+        "@pwrs/mappa": "^0.0.6",
         "@rhds/elements": "^4.0.1",
         "@types/koa__router": "^12.0.5",
         "@types/node": "^22.19.0",
@@ -50,10 +50,10 @@
       "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.27.2",
         "@esbuild/linux-x64": "^0.27.2",
-        "@pwrs/cem-darwin-arm64": "^0.7.5",
-        "@pwrs/cem-darwin-x64": "^0.9.19",
-        "@pwrs/cem-linux-arm64": "^0.7.5",
-        "@pwrs/cem-linux-x64": "^0.7.5",
+        "@pwrs/cem-darwin-arm64": "^0.10.5",
+        "@pwrs/cem-darwin-x64": "^0.10.5",
+        "@pwrs/cem-linux-arm64": "^0.10.5",
+        "@pwrs/cem-linux-x64": "^0.10.5",
         "@rollup/rollup-darwin-arm64": "^4.54.0"
       }
     },
@@ -184,6 +184,19 @@
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/ssri": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
+      "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
     "node_modules/@11ty/eleventy-plugin-bundle": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.7.tgz",
@@ -1797,62 +1810,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -1882,16 +1839,16 @@
       }
     },
     "node_modules/@koa/router": {
-      "version": "15.4.0",
-      "resolved": "https://registry.npmjs.org/@koa/router/-/router-15.4.0.tgz",
-      "integrity": "sha512-vKYlXtoCfcAN8z4dHiveYX55rTYOgHEYJNumK1WM9ZAwaArhreGVkyC1LTMGfUQUJyIO/SbwRFBOHeOCY8/MaQ==",
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/@koa/router/-/router-15.5.0.tgz",
+      "integrity": "sha512-KSC0oG/5t6ITu5wqX4lJseA/dngoj14hEaohrLZEXtlUT2RRyJvwaJ0KV+5uQoaWrY3A8ClHOrBEU4g8dujn8Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "debug": "^4.4.3",
         "http-errors": "^2.0.1",
         "koa-compose": "^4.1.0",
-        "path-to-regexp": "^8.3.0"
+        "path-to-regexp": "^8.4.2"
       },
       "engines": {
         "node": ">= 20"
@@ -2433,9 +2390,9 @@
       }
     },
     "node_modules/@puppeteer/browsers": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.13.0.tgz",
-      "integrity": "sha512-46BZJYJjc/WwmKjsvDFykHtXrtomsCIrwYQPOP7VfMJoZY2bsDF9oROBABR3paDjDcmkUye1Pb1BqdcdiipaWA==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.13.1.tgz",
+      "integrity": "sha512-zmS4RTK9fbrc++WlAJhxYbfz3IjDeOmkK/CwwbLmk7ydfS9e2CiEeRJHEPvjDVElO/bwXbidwGA37Bsm6LzCnQ==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
@@ -2455,9 +2412,9 @@
       }
     },
     "node_modules/@pwrs/cem": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem/-/cem-0.7.5.tgz",
-      "integrity": "sha512-py8kyVNV0s5n1GaPuhrNE9anWk8HsQ98o0dNQX5PuH2QYJ/vdqoJtACDPmFZ+24EGJNPAbEw6tY/ejZRV9khjg==",
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem/-/cem-0.10.5.tgz",
+      "integrity": "sha512-RHyHN+CbzyoUJ6ruAKGY1AYTmRvoPvp2TOSLLdiOpDaPEEazNNhXOoR6i5vNxgQqd2eSdqgUGXY32thdL1CdTA==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -2467,34 +2424,31 @@
         "node": ">=22.0.0"
       },
       "optionalDependencies": {
-        "@pwrs/cem-darwin-arm64": "0.7.5",
-        "@pwrs/cem-darwin-x64": "0.7.5",
-        "@pwrs/cem-linux-arm64": "0.7.5",
-        "@pwrs/cem-linux-x64": "0.7.5",
-        "@pwrs/cem-win32-arm64": "0.7.5",
-        "@pwrs/cem-win32-x64": "0.7.5"
+        "@pwrs/cem-darwin-arm64": "0.10.5",
+        "@pwrs/cem-darwin-x64": "0.10.5",
+        "@pwrs/cem-linux-arm64": "0.10.5",
+        "@pwrs/cem-linux-x64": "0.10.5",
+        "@pwrs/cem-win32-arm64": "0.10.5",
+        "@pwrs/cem-win32-x64": "0.10.5"
       }
     },
     "node_modules/@pwrs/cem-darwin-arm64": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-arm64/-/cem-darwin-arm64-0.7.5.tgz",
-      "integrity": "sha512-wYCTdeikht6WqoxP3gjEriNwT5koj64FpeCo1X213oKA7ouI2n7YgC5iUxcqffjkS/TR+Lt2v39lyDoWLnvcMg==",
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-arm64/-/cem-darwin-arm64-0.10.5.tgz",
+      "integrity": "sha512-R6vqjqgGq31C1LL834LWibPwDZbHi5X0+hhtn8iJX5sv+MLib1G7Fmsu1TYOZ4Bhqd7qI0B8Qn3Vq5QAYi1RtA==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
+      "license": "GPL-3.0",
       "optional": true,
       "os": [
         "darwin"
-      ],
-      "engines": {
-        "node": ">=22.0.0"
-      }
+      ]
     },
     "node_modules/@pwrs/cem-darwin-x64": {
-      "version": "0.9.19",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-x64/-/cem-darwin-x64-0.9.19.tgz",
-      "integrity": "sha512-t7AGparX/v40j0CFYq3hMbhcYNBv0oON/iMDy9aNHU+ixolYQJoTYxsAOFpaHxRU4iAIMQQezPXvMhVCZA2Ypw==",
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-x64/-/cem-darwin-x64-0.10.5.tgz",
+      "integrity": "sha512-6i/XkhRl/jGVeB/KiLB8geDfMa4K2UpliMOb4EESnw8RqnjpY7MpFIrsmfaxbFyGTEVdrh3VScXi7FKhnCi8Sw==",
       "cpu": [
         "x64"
       ],
@@ -2505,87 +2459,58 @@
       ]
     },
     "node_modules/@pwrs/cem-linux-arm64": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-arm64/-/cem-linux-arm64-0.7.5.tgz",
-      "integrity": "sha512-w7IFT295vSg6pAQnv4fkNjygjLwpefDL7bBcxbfaCKxs1/MN+sh8wDH7064FSw6+QIw04P4gf/LMEE0zPxWM5w==",
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-arm64/-/cem-linux-arm64-0.10.5.tgz",
+      "integrity": "sha512-UTXBYzFrmLv8820hm84wWN2/thrAPVGwWCijvLfrSIawwzwnIw2GbGTAFLJscaX37Soy22dZ4wRsDOAUzvgc1Q==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
+      "license": "GPL-3.0",
       "optional": true,
       "os": [
         "linux"
-      ],
-      "engines": {
-        "node": ">=22.0.0"
-      }
+      ]
     },
     "node_modules/@pwrs/cem-linux-x64": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-x64/-/cem-linux-x64-0.7.5.tgz",
-      "integrity": "sha512-OYHVU9zwi51YNrgwez+3FaTUPmWt4SLDmH0tCRBcxHf5GHikxHqFHkpkcoroZVcg+qYAQ9+4yDbZGH6I/Jq32g==",
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-x64/-/cem-linux-x64-0.10.5.tgz",
+      "integrity": "sha512-l9/nvKsqkeCVvQlzatpTGYJ7ToXHSP0k9gp7LoK+J9JMuAZ9q9CJLM+6qn5owTICZzqgHt4YQeC92GUHuH5bnw==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
+      "license": "GPL-3.0",
       "optional": true,
       "os": [
         "linux"
-      ],
-      "engines": {
-        "node": ">=22.0.0"
-      }
+      ]
     },
     "node_modules/@pwrs/cem-win32-arm64": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-arm64/-/cem-win32-arm64-0.7.5.tgz",
-      "integrity": "sha512-9qA6D5EdP4wry43jIMGIdw32EfCkfMW3yP+502i4L32z1z98giIkQLcDkC7gcjGLb4jL3bAZORWILDFuPyw12w==",
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-arm64/-/cem-win32-arm64-0.10.5.tgz",
+      "integrity": "sha512-4pRmhzxuvBJOiNzpOTBsajYnkbSietpjarawERph/qqZDetv+Jzl/G9WRsCakX8/LeSn/pvTooR6VTein7xokA==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
+      "license": "GPL-3.0",
       "optional": true,
       "os": [
         "win32"
-      ],
-      "engines": {
-        "node": ">=22.0.0"
-      }
+      ]
     },
     "node_modules/@pwrs/cem-win32-x64": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-x64/-/cem-win32-x64-0.7.5.tgz",
-      "integrity": "sha512-CLftjDlJO2TeCPLWGfXoJrXs05iGbEuxj8oN06RMml1c/hoKgNmUWxnqooTdWioTkfkOHr2QiyKu7i60LekikQ==",
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-x64/-/cem-win32-x64-0.10.5.tgz",
+      "integrity": "sha512-oKRhEVymhAe3I/dSvpNSy46L5QJr/tqGGcByJtAfIDaAw2ZQUe1trpafPfLNJMif1jhP42fbpHnbHJRUCNIWiw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
+      "license": "GPL-3.0",
       "optional": true,
       "os": [
         "win32"
-      ],
-      "engines": {
-        "node": ">=22.0.0"
-      }
-    },
-    "node_modules/@pwrs/cem/node_modules/@pwrs/cem-darwin-x64": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-x64/-/cem-darwin-x64-0.7.5.tgz",
-      "integrity": "sha512-BeMOwesMMfcQQkQ04VUIgrEXLg78QQVhnalkAkAQLnLFfEumVRXDbcSU5KZBDLV0Rq723pKa68xzueaVbExaQA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=22.0.0"
-      }
+      ]
     },
     "node_modules/@pwrs/lit-css": {
       "version": "4.1.0",
@@ -2598,9 +2523,9 @@
       }
     },
     "node_modules/@pwrs/mappa": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@pwrs/mappa/-/mappa-0.0.4.tgz",
-      "integrity": "sha512-Bz+ZoDm2XzaqsL1hvRAaiauE1UDSlHAn/iODHy7Brs7h5J8VAszlCAlb4BYxvqnN5GFFG9in0NTpSSQajV5HvA==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@pwrs/mappa/-/mappa-0.0.6.tgz",
+      "integrity": "sha512-sTsJUTu1HkSrlZYLDNvbKthVAlYmqQdHDBuCQPHp0qsRmdQKgJaiyNSF9Ni60wDfDOI5PLZ+9bM9OY9ckRUaqw==",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "bin": {
@@ -2610,18 +2535,18 @@
         "node": ">=22.0.0"
       },
       "optionalDependencies": {
-        "@pwrs/mappa-darwin-arm64": "0.0.4",
-        "@pwrs/mappa-darwin-x64": "0.0.4",
-        "@pwrs/mappa-linux-arm64": "0.0.4",
-        "@pwrs/mappa-linux-x64": "0.0.4",
-        "@pwrs/mappa-win32-arm64": "0.0.4",
-        "@pwrs/mappa-win32-x64": "0.0.4"
+        "@pwrs/mappa-darwin-arm64": "0.0.6",
+        "@pwrs/mappa-darwin-x64": "0.0.6",
+        "@pwrs/mappa-linux-arm64": "0.0.6",
+        "@pwrs/mappa-linux-x64": "0.0.6",
+        "@pwrs/mappa-win32-arm64": "0.0.6",
+        "@pwrs/mappa-win32-x64": "0.0.6"
       }
     },
     "node_modules/@pwrs/mappa-darwin-arm64": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@pwrs/mappa-darwin-arm64/-/mappa-darwin-arm64-0.0.4.tgz",
-      "integrity": "sha512-3lobYl5Uws8gj0LIuOVhmRQbcbTJw6XhNhSZpU+jhSq0VdXrZrrMVP8/tcONqFteu6HJxtsrU45GATUjYF9r5A==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@pwrs/mappa-darwin-arm64/-/mappa-darwin-arm64-0.0.6.tgz",
+      "integrity": "sha512-oHpYAHNmdFem2mKZlnsLzG6W3YTSok5xG2juetICnw+MkgNm9vcsaQh1C0vGuHoRlbv9gnN7ji/zafpkdPQAmA==",
       "cpu": [
         "arm64"
       ],
@@ -2632,9 +2557,9 @@
       ]
     },
     "node_modules/@pwrs/mappa-darwin-x64": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@pwrs/mappa-darwin-x64/-/mappa-darwin-x64-0.0.4.tgz",
-      "integrity": "sha512-NHd4Zddn7vzQz9Eu5OytbbwUj0YA+SSOa7m1FLQ+EU95gARefLm4FDz3XHncHdAsh85xWhn13JcLyabeOuKg/w==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@pwrs/mappa-darwin-x64/-/mappa-darwin-x64-0.0.6.tgz",
+      "integrity": "sha512-652vrdmz8FMEaUHf2ddIYTaFd3YXMowvP4HgjTzR/s6TRPiHEFTUOMCDR3VHDVN3RGWuSFSE07MnX/ByhM8h5g==",
       "cpu": [
         "x64"
       ],
@@ -2645,9 +2570,9 @@
       ]
     },
     "node_modules/@pwrs/mappa-linux-arm64": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@pwrs/mappa-linux-arm64/-/mappa-linux-arm64-0.0.4.tgz",
-      "integrity": "sha512-LdL884a9nFYEkPvazUTSYeprlxe2C9p0euR7gh3sGfnooFKZ0ULqD0Zr112DJmNhjSHlkxTgo4Dx8nTi6VKXUw==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@pwrs/mappa-linux-arm64/-/mappa-linux-arm64-0.0.6.tgz",
+      "integrity": "sha512-nfkQwHHEWO20hlrPPZIIMh5tDRzB5zjcyaSwMwYkC1Stao0rAaMhT+e/qRSlUl5ns7aD4YGg8Oi5OusDJuuAXw==",
       "cpu": [
         "arm64"
       ],
@@ -2658,9 +2583,9 @@
       ]
     },
     "node_modules/@pwrs/mappa-linux-x64": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@pwrs/mappa-linux-x64/-/mappa-linux-x64-0.0.4.tgz",
-      "integrity": "sha512-mgr1pWjLouD+uMAZZ973gbb3sOJJhX0KO4mf5iSVlwG4NUMvo3kQIcHX9bryINzVZ9w64KZbt0Pi1UWm8oNJpQ==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@pwrs/mappa-linux-x64/-/mappa-linux-x64-0.0.6.tgz",
+      "integrity": "sha512-CZRcEESv4dJCQJsegser4N6BisTlNCu8CShdSchpwn7fjnLsqcm/+gXbIc3dRaK3jVpmkZLvz27m+x+O8Bt6kQ==",
       "cpu": [
         "x64"
       ],
@@ -2671,9 +2596,9 @@
       ]
     },
     "node_modules/@pwrs/mappa-win32-arm64": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@pwrs/mappa-win32-arm64/-/mappa-win32-arm64-0.0.4.tgz",
-      "integrity": "sha512-v6i1LgLr2DQD2NTdziimWbKAi/pzvU/mYV9fgpzzsH3Jj65MzfOosyxbeHOOe3RfidRcsvNkJd3WB1tQCUZH7Q==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@pwrs/mappa-win32-arm64/-/mappa-win32-arm64-0.0.6.tgz",
+      "integrity": "sha512-GobopXQAIEaIO/FQ4iS77mXtTnWoBgp69V2hjGIhvh9CmNcB8e8dOsAd5eCJwBrg6PEXN26c4lybUIU55yocGA==",
       "cpu": [
         "arm64"
       ],
@@ -2684,9 +2609,9 @@
       ]
     },
     "node_modules/@pwrs/mappa-win32-x64": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@pwrs/mappa-win32-x64/-/mappa-win32-x64-0.0.4.tgz",
-      "integrity": "sha512-en5JXuv0VHtw9PgWDFoIvLRm8Wzb6gUYPE38Usz+jeJRI2k7d0t5wuQ0d0VzoFQQSwfjXxj7Cbka4nb9tdvmjQ==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@pwrs/mappa-win32-x64/-/mappa-win32-x64-0.0.6.tgz",
+      "integrity": "sha512-YNvdC9CQH/V7IFWwu8YoBTg3nT4wAhDPk2UFRt7pdNOq0Hjm+7RJRee5lbTgAIQt5XF+fTvfV1xiVi3nvXkMzA==",
       "cpu": [
         "x64"
       ],
@@ -2815,9 +2740,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
-      "integrity": "sha512-dnlp69efPPg6Uaw2dVqzWRfAWRnYVb1XJ8CyyhIbZeaq4CA5/mLeZ1IEt9QqQxmbdvagjLIm2ZL8BxXv5lH4Yw==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.3.tgz",
+      "integrity": "sha512-x35CNW/ANXG3hE/EZpRU8MXX1JDN86hBb2wMGAtltkz7pc6cxgjpy1OMMfDosOQ+2hWqIkag/fGok1Yady9nGw==",
       "cpu": [
         "arm"
       ],
@@ -2829,9 +2754,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.2.tgz",
-      "integrity": "sha512-OqZTwDRDchGRHHm/hwLOL7uVPB9aUvI0am/eQuWMNyFHf5PSEQmyEeYYheA0EPPKUO/l0uigCp+iaTjoLjVoHg==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.3.tgz",
+      "integrity": "sha512-xw3xtkDApIOGayehp2+Rz4zimfkaX65r4t47iy+ymQB2G4iJCBBfj0ogVg5jpvjpn8UWn/+q9tprxleYeNp3Hw==",
       "cpu": [
         "arm64"
       ],
@@ -2843,9 +2768,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.2.tgz",
-      "integrity": "sha512-UwRE7CGpvSVEQS8gUMBe1uADWjNnVgP3Iusyda1nSRwNDCsRjnGc7w6El6WLQsXmZTbLZx9cecegumcitNfpmA==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.3.tgz",
+      "integrity": "sha512-vo6Y5Qfpx7/5EaamIwi0WqW2+zfiusVihKatLvtN1VFVy3D13uERk/6gZLU1UiHRL6fDXqj/ELIeVRGnvcTE1g==",
       "cpu": [
         "arm64"
       ],
@@ -2870,9 +2795,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.2.tgz",
-      "integrity": "sha512-Bcl6CYDeAgE70cqZaMojOi/eK63h5Me97ZqAQoh77VPjMysA/4ORQBRGo3rRy45x4MzVlU9uZxs8Uwy7ZaKnBw==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.3.tgz",
+      "integrity": "sha512-6HnvHCT7fDyj6R0Ph7A6x8dQS/S38MClRWeDLqc0MdfWkxjiu1HSDYrdPhqSILzjTIC/pnXbbJbo+ft+gy/9hQ==",
       "cpu": [
         "arm64"
       ],
@@ -2884,9 +2809,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.2.tgz",
-      "integrity": "sha512-LU+TPda3mAE2QB0/Hp5VyeKJivpC6+tlOXd1VMoXV/YFMvk/MNk5iXeBfB4MQGRWyOYVJ01625vjkr0Az98OJQ==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.3.tgz",
+      "integrity": "sha512-KHLgC3WKlUYW3ShFKnnosZDOJ0xjg9zp7au3sIm2bs/tGBeC2ipmvRh/N7JKi0t9Ue20C0dpEshi8WUubg+cnA==",
       "cpu": [
         "x64"
       ],
@@ -2898,9 +2823,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.2.tgz",
-      "integrity": "sha512-2QxQrM+KQ7DAW4o22j+XZ6RKdxjLD7BOWTP0Bv0tmjdyhXSsr2Ul1oJDQqh9Zf5qOwTuTc7Ek83mOFaKnodPjg==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.3.tgz",
+      "integrity": "sha512-DV6fJoxEYWJOvaZIsok7KrYl0tPvga5OZ2yvKHNNYyk/2roMLqQAbGhr78EQ5YhHpnhLKJD3S1WFusAkmUuV5g==",
       "cpu": [
         "arm"
       ],
@@ -2912,9 +2837,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.2.tgz",
-      "integrity": "sha512-TbziEu2DVsTEOPif2mKWkMeDMLoYjx95oESa9fkQQK7r/Orta0gnkcDpzwufEcAO2BLBsD7mZkXGFqEdMRRwfw==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.3.tgz",
+      "integrity": "sha512-mQKoJAzvuOs6F+TZybQO4GOTSMUu7v0WdxEk24krQ/uUxXoPTtHjuaUuPmFhtBcM4K0ons8nrE3JyhTuCFtT/w==",
       "cpu": [
         "arm"
       ],
@@ -2926,9 +2851,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.2.tgz",
-      "integrity": "sha512-bO/rVDiDUuM2YfuCUwZ1t1cP+/yqjqz+Xf2VtkdppefuOFS2OSeAfgafaHNkFn0t02hEyXngZkxtGqXcXwO8Rg==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.3.tgz",
+      "integrity": "sha512-Whjj2qoiJ6+OOJMGptTYazaJvjOJm+iKHpXQM1P3LzGjt7Ff++Tp7nH4N8J/BUA7R9IHfDyx4DJIflifwnbmIA==",
       "cpu": [
         "arm64"
       ],
@@ -2940,9 +2865,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.2.tgz",
-      "integrity": "sha512-hr26p7e93Rl0Za+JwW7EAnwAvKkehh12BU1Llm9Ykiibg4uIr2rbpxG9WCf56GuvidlTG9KiiQT/TXT1yAWxTA==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.3.tgz",
+      "integrity": "sha512-4YTNHKqGng5+yiZt3mg77nmyuCfmNfX4fPmyUapBcIk+BdwSwmCWGXOUxhXbBEkFHtoN5boLj/5NON+u5QC9tg==",
       "cpu": [
         "arm64"
       ],
@@ -2954,9 +2879,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.2.tgz",
-      "integrity": "sha512-pOjB/uSIyDt+ow3k/RcLvUAOGpysT2phDn7TTUB3n75SlIgZzM6NKAqlErPhoFU+npgY3/n+2HYIQVbF70P9/A==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.3.tgz",
+      "integrity": "sha512-SU3kNlhkpI4UqlUc2VXPGK9o886ZsSeGfMAX2ba2b8DKmMXq4AL7KUrkSWVbb7koVqx41Yczx6dx5PNargIrEA==",
       "cpu": [
         "loong64"
       ],
@@ -2968,9 +2893,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.2.tgz",
-      "integrity": "sha512-2/w+q8jszv9Ww1c+6uJT3OwqhdmGP2/4T17cu8WuwyUuuaCDDJ2ojdyYwZzCxx0GcsZBhzi3HmH+J5pZNXnd+Q==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.3.tgz",
+      "integrity": "sha512-6lDLl5h4TXpB1mTf2rQWnAk/LcXrx9vBfu/DT5TIPhvMhRWaZ5MxkIc8u4lJAmBo6klTe1ywXIUHFjylW505sg==",
       "cpu": [
         "loong64"
       ],
@@ -2982,9 +2907,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.2.tgz",
-      "integrity": "sha512-11+aL5vKheYgczxtPVVRhdptAM2H7fcDR5Gw4/bTcteuZBlH4oP9f5s9zYO9aGZvoGeBpqXI/9TZZihZ609wKw==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.3.tgz",
+      "integrity": "sha512-BMo8bOw8evlup/8G+cj5xWtPyp93xPdyoSN16Zy90Q2QZ0ZYRhCt6ZJSwbrRzG9HApFabjwj2p25TUPDWrhzqQ==",
       "cpu": [
         "ppc64"
       ],
@@ -2996,9 +2921,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.2.tgz",
-      "integrity": "sha512-i16fokAGK46IVZuV8LIIwMdtqhin9hfYkCh8pf8iC3QU3LpwL+1FSFGej+O7l3E/AoknL6Dclh2oTdnRMpTzFQ==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.3.tgz",
+      "integrity": "sha512-E0L8X1dZN1/Rph+5VPF6Xj2G7JJvMACVXtamTJIDrVI44Y3K+G8gQaMEAavbqCGTa16InptiVrX6eM6pmJ+7qA==",
       "cpu": [
         "ppc64"
       ],
@@ -3010,9 +2935,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.2.tgz",
-      "integrity": "sha512-49FkKS6RGQoriDSK/6E2GkAsAuU5kETFCh7pG4yD/ylj9rKhTmO3elsnmBvRD4PgJPds5W2PkhC82aVwmUcJ7A==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.3.tgz",
+      "integrity": "sha512-oZJ/WHaVfHUiRAtmTAeo3DcevNsVvH8mbvodjZy7D5QKvCefO371SiKRpxoDcCxB3PTRTLayWBkvmDQKTcX/sw==",
       "cpu": [
         "riscv64"
       ],
@@ -3024,9 +2949,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.2.tgz",
-      "integrity": "sha512-mjYNkHPfGpUR00DuM1ZZIgs64Hpf4bWcz9Z41+4Q+pgDx73UwWdAYyf6EG/lRFldmdHHzgrYyge5akFUW0D3mQ==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.3.tgz",
+      "integrity": "sha512-Dhbyh7j9FybM3YaTgaHmVALwA8AkUwTPccyCQ79TG9AJUsMQqgN1DDEZNr4+QUfwiWvLDumW5vdwzoeUF+TNxQ==",
       "cpu": [
         "riscv64"
       ],
@@ -3038,9 +2963,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.2.tgz",
-      "integrity": "sha512-ALyvJz965BQk8E9Al/JDKKDLH2kfKFLTGMlgkAbbYtZuJt9LU8DW3ZoDMCtQpXAltZxwBHevXz5u+gf0yA0YoA==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.3.tgz",
+      "integrity": "sha512-cJd1X5XhHHlltkaypz1UcWLA8AcoIi1aWhsvaWDskD1oz2eKCypnqvTQ8ykMNI0RSmm7NkTdSqSSD7zM0xa6Ig==",
       "cpu": [
         "s390x"
       ],
@@ -3052,9 +2977,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.2.tgz",
-      "integrity": "sha512-UQjrkIdWrKI626Du8lCQ6MJp/6V1LAo2bOK9OTu4mSn8GGXIkPXk/Vsp4bLHCd9Z9Iz2OTEaokUE90VweJgIYQ==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.3.tgz",
+      "integrity": "sha512-DAZDBHQfG2oQuhY7mc6I3/qB4LU2fQCjRvxbDwd/Jdvb9fypP4IJ4qmtu6lNjes6B531AI8cg1aKC2di97bUxA==",
       "cpu": [
         "x64"
       ],
@@ -3066,9 +2991,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.2.tgz",
-      "integrity": "sha512-bTsRGj6VlSdn/XD4CGyzMnzaBs9bsRxy79eTqTCBsA8TMIEky7qg48aPkvJvFe1HyzQ5oMZdg7AnVlWQSKLTnw==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.3.tgz",
+      "integrity": "sha512-cRxsE8c13mZOh3vP+wLDxpQBRrOHDIGOWyDL93Sy0Ga8y515fBcC2pjUfFwUe5T7tqvTvWbCpg1URM/AXdWIXA==",
       "cpu": [
         "x64"
       ],
@@ -3080,9 +3005,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.2.tgz",
-      "integrity": "sha512-6d4Z3534xitaA1FcMWP7mQPq5zGwBmGbhphh2DwaA1aNIXUu3KTOfwrWpbwI4/Gr0uANo7NTtaykFyO2hPuFLg==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.3.tgz",
+      "integrity": "sha512-QaWcIgRxqEdQdhJqW4DJctsH6HCmo5vHxY0krHSX4jMtOqfzC+dqDGuHM87bu4H8JBeibWx7jFz+h6/4C8wA5Q==",
       "cpu": [
         "x64"
       ],
@@ -3094,9 +3019,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.2.tgz",
-      "integrity": "sha512-NetAg5iO2uN7eB8zE5qrZ3CSil+7IJt4WDFLcC75Ymywq1VZVD6qJ6EvNLjZ3rEm6gB7XW5JdT60c6MN35Z85Q==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.3.tgz",
+      "integrity": "sha512-AaXwSvUi3QIPtroAUw1t5yHGIyqKEXwH54WUocFolZhpGDruJcs8c+xPNDRn4XiQsS7MEwnYsHW2l0MBLDMkWg==",
       "cpu": [
         "arm64"
       ],
@@ -3108,9 +3033,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.2.tgz",
-      "integrity": "sha512-NCYhOotpgWZ5kdxCZsv6Iudx0wX8980Q/oW4pNFNihpBKsDbEA1zpkfxJGC0yugsUuyDZ7gL37dbzwhR0VI7pQ==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.3.tgz",
+      "integrity": "sha512-65LAKM/bAWDqKNEelHlcHvm2V+Vfb8C6INFxQXRHCvaVN1rJfwr4NvdP4FyzUaLqWfaCGaadf6UbTm8xJeYfEg==",
       "cpu": [
         "arm64"
       ],
@@ -3122,9 +3047,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.2.tgz",
-      "integrity": "sha512-RXsaOqXxfoUBQoOgvmmijVxJnW2IGB0eoMO7F8FAjaj0UTywUO/luSqimWBJn04WNgUkeNhh7fs7pESXajWmkg==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.3.tgz",
+      "integrity": "sha512-EEM2gyhBF5MFnI6vMKdX1LAosE627RGBzIoGMdLloPZkXrUN0Ckqgr2Qi8+J3zip/8NVVro3/FjB+tjhZUgUHA==",
       "cpu": [
         "ia32"
       ],
@@ -3136,9 +3061,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.2.tgz",
-      "integrity": "sha512-qdAzEULD+/hzObedtmV6iBpdL5TIbKVztGiK7O3/KYSf+HIzU257+MX1EXJcyIiDbMAqmbwaufcYPvyRryeZtA==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.3.tgz",
+      "integrity": "sha512-E5Eb5H/DpxaoXH++Qkv28RcUJboMopmdDUALBczvHMf7hNIxaDZqwY5lK12UK1BHacSmvupoEWGu+n993Z0y1A==",
       "cpu": [
         "x64"
       ],
@@ -3150,9 +3075,9 @@
       "peer": true
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.2.tgz",
-      "integrity": "sha512-Nd/SgG27WoA9e+/TdK74KnHz852TLa94ovOYySo/yMPuTmpckK/jIF2jSwS3g7ELSKXK13/cVdmg1Z/DaCWKxA==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.3.tgz",
+      "integrity": "sha512-hPt/bgL5cE+Qp+/TPHBqptcAgPzgj46mPcg/16zNUmbQk0j+mOEQV/+Lqu8QRtDV3Ek95Q6FeFITpuhl6OTsAA==",
       "cpu": [
         "x64"
       ],
@@ -3251,9 +3176,9 @@
       }
     },
     "node_modules/@sinonjs/fake-timers": {
-      "version": "15.3.2",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-15.3.2.tgz",
-      "integrity": "sha512-mrn35Jl2pCpns+mE3HaZa1yPN5EYCRgiMI+135COjr2hr8Cls9DXqIZ57vZe2cz7y2XVSq92tcs6kGQcT1J8Rw==",
+      "version": "15.4.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-15.4.0.tgz",
+      "integrity": "sha512-DsG+8/LscQIQg68J6Ef3dv10u6nVyetYn923s3/sus5eaGfTo1of5WMZSLf0UJc9KDuKPilPH0UDJCjvNbDNCA==",
       "license": "BSD-3-Clause",
       "peer": true,
       "dependencies": {
@@ -3877,17 +3802,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.1.tgz",
-      "integrity": "sha512-BOziFIfE+6osHO9FoJG4zjoHUcvI7fTNBSpdAwrNH0/TLvzjsk2oo8XSSOT2HhqUyhZPfHv4UOffoJ9oEEQ7Ag==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.2.tgz",
+      "integrity": "sha512-j/bwmkBvHUtPNxzuWe5z6BEk3q54YRyGlBXkSsmfoih7zNrBvl5A9A98anlp/7JbyZcWIJ8KXo/3Tq/DjFLtuQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.59.1",
-        "@typescript-eslint/type-utils": "8.59.1",
-        "@typescript-eslint/utils": "8.59.1",
-        "@typescript-eslint/visitor-keys": "8.59.1",
+        "@typescript-eslint/scope-manager": "8.59.2",
+        "@typescript-eslint/type-utils": "8.59.2",
+        "@typescript-eslint/utils": "8.59.2",
+        "@typescript-eslint/visitor-keys": "8.59.2",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.5.0"
@@ -3900,7 +3825,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.59.1",
+        "@typescript-eslint/parser": "^8.59.2",
         "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.1.0"
       }
@@ -3916,16 +3841,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.59.1.tgz",
-      "integrity": "sha512-HDQH9O/47Dxi1ceDhBXdaldtf/WV9yRYMjbjCuNk3qnaTD564qwv61Y7+gTxwxRKzSrgO5uhtw584igXVuuZkA==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.59.2.tgz",
+      "integrity": "sha512-plR3pp6D+SSUn1HM7xvSkx12/DhoHInI2YF35KAcVFNZvlC0gtrWqx7Qq1oH2Ssgi0vlFRCTbP+DZc7B9+TtsQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.59.1",
-        "@typescript-eslint/types": "8.59.1",
-        "@typescript-eslint/typescript-estree": "8.59.1",
-        "@typescript-eslint/visitor-keys": "8.59.1",
+        "@typescript-eslint/scope-manager": "8.59.2",
+        "@typescript-eslint/types": "8.59.2",
+        "@typescript-eslint/typescript-estree": "8.59.2",
+        "@typescript-eslint/visitor-keys": "8.59.2",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3941,14 +3866,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.59.1.tgz",
-      "integrity": "sha512-+MuHQlHiEr00Of/IQbE/MmEoi44znZHbR/Pz7Opq4HryUOlRi+/44dro9Ycy8Fyo+/024IWtw8m4JUMCGTYxDg==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.59.2.tgz",
+      "integrity": "sha512-+2hqvEkeyf/0FBor67duF0Ll7Ot8jyKzDQOSrxazF/danillRq2DwR9dLptsXpoZQqxE1UisSmoZewrlPas9Vw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.59.1",
-        "@typescript-eslint/types": "^8.59.1",
+        "@typescript-eslint/tsconfig-utils": "^8.59.2",
+        "@typescript-eslint/types": "^8.59.2",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3963,14 +3888,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.59.1.tgz",
-      "integrity": "sha512-LwuHQI4pDOYVKvmH2dkaJo6YZCSgouVgnS/z7yBPKBMvgtBvyLqiLy9Z6b7+m/TRcX1NFYUqZetI5Y+aT4GEfg==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.59.2.tgz",
+      "integrity": "sha512-JzfyEpEtOU89CcFSwyNS3mu4MLvLSXqnmX05+aKBDM+TdR5jzcGOEBwxwGNxrEQ7p/z6kK2WyioCGBf2zZBnvg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/types": "8.59.1",
-        "@typescript-eslint/visitor-keys": "8.59.1"
+        "@typescript-eslint/types": "8.59.2",
+        "@typescript-eslint/visitor-keys": "8.59.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3981,9 +3906,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.59.1.tgz",
-      "integrity": "sha512-/0nEyPbX7gRsk0Uwfe4ALwwgxuA66d/l2mhRDNlAvaj4U3juhUtJNq0DsY8M2AYwwb9rEq2hrC3IcIcEt++iJA==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.59.2.tgz",
+      "integrity": "sha512-BKK4alN7oi4C/zv4VqHQ+uRU+lTa6JGIZ7s1juw7b3RHo9OfKB+bKX3u0iVZetdsUCBBkSbdWbarJbmN0fTeSw==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -3998,15 +3923,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.59.1.tgz",
-      "integrity": "sha512-klWPBR2ciQHS3f++ug/mVnWKPjBUo7icEL3FAO1lhAR1Z1i5NQYZ1EannMSRYcq5qCv5wNALlXr6fksRHyYl7w==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.59.2.tgz",
+      "integrity": "sha512-nhqaj1nmTdVVl/BP5omXNRGO38jn5iosis2vbdmupF2txCf8ylWT8lx+JlvMYYVqzGVKtjojUFoQ3JRWK+mfzQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/types": "8.59.1",
-        "@typescript-eslint/typescript-estree": "8.59.1",
-        "@typescript-eslint/utils": "8.59.1",
+        "@typescript-eslint/types": "8.59.2",
+        "@typescript-eslint/typescript-estree": "8.59.2",
+        "@typescript-eslint/utils": "8.59.2",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.5.0"
       },
@@ -4023,9 +3948,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.59.1.tgz",
-      "integrity": "sha512-ZDCjgccSdYPw5Bxh+my4Z0lJU96ZDN7jbBzvmEn0FZx3RtU1C7VWl6NbDx94bwY3V5YsgwRzJPOgeY2Q/nLG8A==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.59.2.tgz",
+      "integrity": "sha512-e82GVOE8Ps3E++Egvb6Y3Dw0S10u8NkQ9KXmtRhCWJJ8kDhOJTvtMAWnFL16kB1583goCWXsr0NieKCZMs2/0Q==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -4037,16 +3962,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.59.1.tgz",
-      "integrity": "sha512-OUd+vJS05sSkOip+BkZ/2NS8RMxrAAJemsC6vU3kmfLyeaJT0TftHkV9mcx2107MmsBVXXexhVu4F0TZXyMl4g==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.59.2.tgz",
+      "integrity": "sha512-o0XPGNwcWw+FIwStOWn+BwBuEmL6QXP0rsvAFg7ET1dey1Nr6Wb1ac8p5HEsK0ygO/6mUxlk+YWQD9xcb/nnXg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/project-service": "8.59.1",
-        "@typescript-eslint/tsconfig-utils": "8.59.1",
-        "@typescript-eslint/types": "8.59.1",
-        "@typescript-eslint/visitor-keys": "8.59.1",
+        "@typescript-eslint/project-service": "8.59.2",
+        "@typescript-eslint/tsconfig-utils": "8.59.2",
+        "@typescript-eslint/types": "8.59.2",
+        "@typescript-eslint/visitor-keys": "8.59.2",
         "debug": "^4.4.3",
         "minimatch": "^10.2.2",
         "semver": "^7.7.3",
@@ -4104,16 +4029,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.59.1.tgz",
-      "integrity": "sha512-3pIeoXhCeYH9FSCBI8P3iNwJlGuzPlYKkTlen2O9T1DSeeg8UG8jstq6BLk+Mda0qup7mgk4z4XL4OzRaxZ8LA==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.59.2.tgz",
+      "integrity": "sha512-Juw3EinkXqjaffxz6roowvV7GZT/kET5vSKKZT6upl5TXdWkLkYmNPXwDDL2Vkt2DPn0nODIS4egC/0AGxKo/Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.59.1",
-        "@typescript-eslint/types": "8.59.1",
-        "@typescript-eslint/typescript-estree": "8.59.1"
+        "@typescript-eslint/scope-manager": "8.59.2",
+        "@typescript-eslint/types": "8.59.2",
+        "@typescript-eslint/typescript-estree": "8.59.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4128,13 +4053,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.59.1.tgz",
-      "integrity": "sha512-LdDNl6C5iJExcM0Yh0PwAIBb9PrSiCsWamF/JyEZawm3kFDnRoaq3LGE4bpyRao/fWeGKKyw7icx0YxrLFC5Cg==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.59.2.tgz",
+      "integrity": "sha512-NwjLUnGy8/Zfx23fl50tRC8rYaYnM52xNRYFAXvmiil9yh1+K6aRVQMnzW6gQB/1DLgWt977lYQn7C+wtgXZiA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/types": "8.59.1",
+        "@typescript-eslint/types": "8.59.2",
         "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
@@ -4392,6 +4317,16 @@
         "node": "^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4"
       }
     },
+    "node_modules/@web/dev-server-core/node_modules/lru-cache": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
     "node_modules/@web/dev-server-core/node_modules/parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
@@ -4781,6 +4716,16 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@web/test-runner-coverage-v8/node_modules/lru-cache": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
     "node_modules/@web/test-runner-coverage-v8/node_modules/picomatch": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
@@ -4977,19 +4922,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ansi-escapes/node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "license": "(MIT OR CC0-1.0)",
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/ansi-regex": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
@@ -5151,9 +5083,9 @@
       }
     },
     "node_modules/b4a": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.0.tgz",
-      "integrity": "sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.1.tgz",
+      "integrity": "sha512-aiqre1Nr0B/6DgE2N5vwTc+2/oQZ4Wh1t4NznYY4E00y8LCt6NqdRv81so00oo27D8MVKTpUa/MwUUtBLXCoDw==",
       "license": "Apache-2.0",
       "peer": true,
       "peerDependencies": {
@@ -5212,9 +5144,9 @@
       }
     },
     "node_modules/bare-os": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.9.0.tgz",
-      "integrity": "sha512-JTjuZyNIDpw+GytMO4a6TK1VXdVKKJr6DRxEHasyuYyShV2deuiHJK/ahGZlebc+SG0/wJCB9XK8gprBGDFi/Q==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.9.1.tgz",
+      "integrity": "sha512-6M5XjcnsygQNPMCMPXSK379xrJFiZ/AEMNBmFEmQW8d/789VQATvriyi5r0HYTL9TkQ26rn3kgdTG3aisbrXkQ==",
       "license": "Apache-2.0",
       "peer": true,
       "engines": {
@@ -5259,9 +5191,9 @@
       }
     },
     "node_modules/bare-url": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.4.2.tgz",
-      "integrity": "sha512-/9a2j4ac6ckpmAHvod/ob7x439OAHst/drc2Clnq+reRYd/ovddwcF4LfoxHyNk5AuGBnPg+HqFjmE/Zpq6v0A==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.4.3.tgz",
+      "integrity": "sha512-Kccpc7ACfXaxfeInfqKcZtW4pT5YBn1mesc4sCsun6sRwtbJ4h+sNOaksUpYEJUKfN65YWC6Bw2OJEFiKxq8nQ==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
@@ -5269,9 +5201,9 @@
       }
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.24",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.24.tgz",
-      "integrity": "sha512-I2NkZOOrj2XuguvWCK6OVh9GavsNjZjK908Rq3mIBK25+GD8vPX5w2WdxVqnQ7xx3SrZJiCiZFu+/Oz50oSYSA==",
+      "version": "2.10.27",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.27.tgz",
+      "integrity": "sha512-zEs/ufmZoUd7WftKpKyXaT6RFxpQ5Qm9xytKRHvJfxFV9DFJkZph9RvJ1LcOUi0Z1ZVijMte65JbILeV+8QQEA==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -5571,9 +5503,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001791",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz",
-      "integrity": "sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==",
+      "version": "1.0.30001792",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001792.tgz",
+      "integrity": "sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==",
       "funding": [
         {
           "type": "opencollective",
@@ -5655,29 +5587,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chalk-template/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/chalk-template/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/chardet": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.1.tgz",
@@ -5920,6 +5829,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/cliui/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -5932,6 +5861,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -6393,13 +6339,13 @@
       }
     },
     "node_modules/cssnano": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.7.tgz",
-      "integrity": "sha512-N5LGn/OlhMxDTvKACwUPMzT34SSj1b022pvUAE/Vh6r2WD1aUCbc+QNIP/JjX9VVxebdJWZQ3352Lt4oF7dQ/g==",
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.9.tgz",
+      "integrity": "sha512-uPR75+5Dk/WJ/YSPR1/YDHdwMM9c5FsaARljfKWgeCKLKOtJ0we21xy/RcCjn53fZnD/f6yYEIZ8pu18+GnbNQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "cssnano-preset-default": "^7.0.15",
+        "cssnano-preset-default": "^7.0.17",
         "lilconfig": "^3.1.3"
       },
       "engines": {
@@ -6410,65 +6356,65 @@
         "url": "https://opencollective.com/cssnano"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/cssnano-preset-default": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.15.tgz",
-      "integrity": "sha512-60kx7lJ40//HA85cIfQXSOJFby2D2V1pOMNHVCxue3KFWCjRzmiQyL9OvI+NAhwUlaojOfF9eK3nGvrJLCBUfQ==",
+      "version": "7.0.17",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.17.tgz",
+      "integrity": "sha512-11qO63A+czwguQFJCaTdICvbaxn0pJzz/XghLlv+OT7WyToDxAMR0Xb3/26/l0y0hQJywwNbj/SLSQlGBHE1OA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "browserslist": "^4.28.2",
         "css-declaration-sorter": "^7.2.0",
-        "cssnano-utils": "^5.0.2",
+        "cssnano-utils": "^5.0.3",
         "postcss-calc": "^10.1.1",
-        "postcss-colormin": "^7.0.9",
-        "postcss-convert-values": "^7.0.11",
-        "postcss-discard-comments": "^7.0.7",
-        "postcss-discard-duplicates": "^7.0.3",
-        "postcss-discard-empty": "^7.0.2",
-        "postcss-discard-overridden": "^7.0.2",
-        "postcss-merge-longhand": "^7.0.6",
-        "postcss-merge-rules": "^7.0.10",
-        "postcss-minify-font-values": "^7.0.2",
-        "postcss-minify-gradients": "^7.0.4",
-        "postcss-minify-params": "^7.0.8",
-        "postcss-minify-selectors": "^7.1.0",
-        "postcss-normalize-charset": "^7.0.2",
-        "postcss-normalize-display-values": "^7.0.2",
-        "postcss-normalize-positions": "^7.0.3",
-        "postcss-normalize-repeat-style": "^7.0.3",
-        "postcss-normalize-string": "^7.0.2",
-        "postcss-normalize-timing-functions": "^7.0.2",
-        "postcss-normalize-unicode": "^7.0.8",
-        "postcss-normalize-url": "^7.0.2",
-        "postcss-normalize-whitespace": "^7.0.2",
-        "postcss-ordered-values": "^7.0.3",
-        "postcss-reduce-initial": "^7.0.8",
-        "postcss-reduce-transforms": "^7.0.2",
-        "postcss-svgo": "^7.1.2",
-        "postcss-unique-selectors": "^7.0.6"
+        "postcss-colormin": "^7.0.10",
+        "postcss-convert-values": "^7.0.12",
+        "postcss-discard-comments": "^7.0.8",
+        "postcss-discard-duplicates": "^7.0.4",
+        "postcss-discard-empty": "^7.0.3",
+        "postcss-discard-overridden": "^7.0.3",
+        "postcss-merge-longhand": "^7.0.7",
+        "postcss-merge-rules": "^7.0.11",
+        "postcss-minify-font-values": "^7.0.3",
+        "postcss-minify-gradients": "^7.0.5",
+        "postcss-minify-params": "^7.0.9",
+        "postcss-minify-selectors": "^7.1.2",
+        "postcss-normalize-charset": "^7.0.3",
+        "postcss-normalize-display-values": "^7.0.3",
+        "postcss-normalize-positions": "^7.0.4",
+        "postcss-normalize-repeat-style": "^7.0.4",
+        "postcss-normalize-string": "^7.0.3",
+        "postcss-normalize-timing-functions": "^7.0.3",
+        "postcss-normalize-unicode": "^7.0.9",
+        "postcss-normalize-url": "^7.0.3",
+        "postcss-normalize-whitespace": "^7.0.3",
+        "postcss-ordered-values": "^7.0.4",
+        "postcss-reduce-initial": "^7.0.9",
+        "postcss-reduce-transforms": "^7.0.3",
+        "postcss-svgo": "^7.1.3",
+        "postcss-unique-selectors": "^7.0.7"
       },
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/cssnano-utils": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-5.0.2.tgz",
-      "integrity": "sha512-kt41WLK7FLKfePzPi645Y+/NtW/nNM7Su6nlNUfJyRNW3JcuU3JU7+cWJc+JexTeZ8dRBvFufefdG2XpXkIo0A==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-5.0.3.tgz",
+      "integrity": "sha512-ynIREMICLxkxm7e9bCR9sh75s4Q5drICi0ua1yxo5jH2XPBqSKkl4dOh4EbFqtUmnTMhRffHgYL0EKKkMjtJTg==",
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/csso": {
@@ -6812,9 +6758,9 @@
       }
     },
     "node_modules/devtools-protocol": {
-      "version": "0.0.1595872",
-      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1595872.tgz",
-      "integrity": "sha512-kRfgp8vWVjBu/fbYCiVFiOqsCk3CrMKEo3WbgGT2NXK2dG7vawWPBljixajVgGK9II8rDO9G0oD0zLt3I1daRg==",
+      "version": "0.0.1608973",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1608973.tgz",
+      "integrity": "sha512-Tpm17fxYzt+J7VrGdc1k8YdRqS3YV7se/M6KeemEqvUbq/n7At1rWVuXMxQgpWkdwSdIEKYbU//Bve+Shm4YNQ==",
       "license": "BSD-3-Clause",
       "peer": true
     },
@@ -7012,9 +6958,9 @@
       "peer": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.345",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.345.tgz",
-      "integrity": "sha512-F9JXQGiMrz6yVNPI2qOVPvB9HzjH5cGzhs8oJ6A28V5L/YnzN/0KsuiibqF+F1Fd9qxFzD1BUnYSd8JfULxTwg==",
+      "version": "1.5.351",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.351.tgz",
+      "integrity": "sha512-9D7Iqx8RImSvCnOsj86rCH6eQjZFQoM04Jn6HnZVM0Nu/G58/gmKYQ1d12MZTbjQbQSTGI8nwEy07ErsA2slLA==",
       "license": "ISC",
       "peer": true
     },
@@ -7962,15 +7908,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -8031,18 +7968,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -8328,9 +8253,9 @@
       "license": "MIT"
     },
     "node_modules/fast-uri": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
-      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz",
+      "integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==",
       "funding": [
         {
           "type": "github",
@@ -8998,12 +8923,12 @@
       }
     },
     "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
     "node_modules/has-property-descriptors": {
@@ -9437,9 +9362,9 @@
       }
     },
     "node_modules/ip-address": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.1.tgz",
-      "integrity": "sha512-1FMu8/N15Ck1BL551Jf42NYIoin2unWjLQ2Fze/DXryJRl5twqtwNHlO39qERGbIOcKYWHdgRryhOC+NG4eaLw==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
+      "integrity": "sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -9527,13 +9452,13 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "hasown": "^2.0.2"
+        "hasown": "^2.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9840,29 +9765,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/istanbul-lib-report/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-report/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/istanbul-reports": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
@@ -10609,6 +10511,16 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/lit-analyzer/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/lit-analyzer/node_modules/parse5": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
@@ -10616,6 +10528,19 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/lit-analyzer/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/lit-element": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.2.tgz",
@@ -10791,6 +10716,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/log-update/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -10826,16 +10773,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/lru-cache": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-      "license": "ISC",
-      "peer": true,
-      "engines": {
-        "node": ">=16.14"
-      }
-    },
     "node_modules/luxon": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
@@ -11210,9 +11147,9 @@
       "peer": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
       "funding": [
         {
           "type": "github",
@@ -11388,6 +11325,16 @@
         "node": "18 || 20 || >=22"
       }
     },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/nodemon/node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@@ -11404,6 +11351,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/nodemon/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -11672,6 +11632,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/p-filter/node_modules/p-map": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+      "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -11714,16 +11684,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/p-map": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-      "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/p-timeout": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
@@ -12038,16 +11998,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/patch-package/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/patch-package/node_modules/jsonfile": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
@@ -12088,19 +12038,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/patch-package/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/patch-package/node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -12309,9 +12246,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
-      "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
+      "version": "8.5.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
+      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
       "funding": [
         {
           "type": "opencollective",
@@ -12355,13 +12292,13 @@
       }
     },
     "node_modules/postcss-colormin": {
-      "version": "7.0.9",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.9.tgz",
-      "integrity": "sha512-EZpoUlmbXQUpe+g4ZaGM2kjGlHrQ7Bjzb3xHcNrC9ysI1tGoib6DAYvxg6aB7MGxsjgLF+Qx/jwZQkJ5cKDvXA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.10.tgz",
+      "integrity": "sha512-yFr6JezOolHLta/buLE71VKPh2mXursp4saVe98/ol8ZnEWhL+racShqPKlvd/DKWLre/39B6HhcMXf7RZ3hxg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@colordx/core": "^5.2.0",
+        "@colordx/core": "^5.4.3",
         "browserslist": "^4.28.2",
         "caniuse-api": "^3.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -12370,13 +12307,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-convert-values": {
-      "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.11.tgz",
-      "integrity": "sha512-H+s7P0f9jJylSysAHs3/5MhAx7GthDO05uw1h56L2xyEqpiLTFLEqBNw3PUYzD5p/AKwWaigCXf6FGELpOw9lw==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.12.tgz",
+      "integrity": "sha512-xurKu5qqk4viR3Cp3p4xBR4KfnZm4w4ys6+UBwBmeuBSNkH7+DtLnYOYnOffgtE4yx8sH9S1VZ6RAAvROXzP2Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12387,13 +12324,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-discard-comments": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.7.tgz",
-      "integrity": "sha512-FJhE3fSte7HaRNL4iwD8LTG9vWqj3puxXIdig6LfrFqc1TJRUhY4kXOkeTXZZfTXYny+k+SO7fd2fymj1wduJg==",
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.8.tgz",
+      "integrity": "sha512-CvvS5S9WrXblFXCEJ9nVo+4z+eA7zSC7Z88V1HEJuwlQhlFnYTIjg1xJY+BCUiG2bvICap2tXii4mP22BD108Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12403,88 +12340,88 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-discard-duplicates": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-7.0.3.tgz",
-      "integrity": "sha512-9cRxXwhEM/aNZon1qZyToX4NmjbFbxOGbww+0CnbYFDbbPRGZ8jg4IbM8UlA+CzkXxM35itxyaHKNqBBg/RTDg==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-7.0.4.tgz",
+      "integrity": "sha512-VBNn1+EuMZkeGVVtz0gRfbNGtx9IFgAsAV+E2pHtXPrp4qfGBkhTIiAuE/wrb+Y6Pakg9NewAlfTpYIFAWODtw==",
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-discard-empty": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-7.0.2.tgz",
-      "integrity": "sha512-NZFouOmOwtngJVgkNeI1LtkzFdYqIurxgy4wq3qNvIiXFURTZ3b/K7q3dP3QitlWQ5imHDQL0qSorItQhoxb1g==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-7.0.3.tgz",
+      "integrity": "sha512-M2pyjQCU+/7cMHVtL6bKTHjv0lZnPLMpicgr67Dlth7AbuV9gjVTtUqaRwn6Pp6BwSDspUzhz8SaUrRykJU5Dw==",
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-discard-overridden": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-7.0.2.tgz",
-      "integrity": "sha512-Ym01X4v6U3sY8X0P1J9P+RTar+7JyLTOzDrxKSeaArFsLmkVu4KcAKPBWDYRIyZ/q4jwpSPnOnekeSSqXSXKUw==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-7.0.3.tgz",
+      "integrity": "sha512-aNovXo9UsZuRNLzHJtp13lHIvinDPfiXBPePpXkSjCbgp++iU2FqE+YxvjIsg6EdyPZsASFbfu+JcBFVsErXIQ==",
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-merge-longhand": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.6.tgz",
-      "integrity": "sha512-lDsWeKRsssX/9vKFpingoRiuvGajtOGCJhs1kyaTJ5fzaVzs0aPPYe38UZ/ukMFEA5iuRIjQJHIkH2niYO3ubQ==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.7.tgz",
+      "integrity": "sha512-b3mfYUxR388u5Pt0HPcVIUtUDn/k15UfTY9M+ORW+meCR6JLNxoZffiYvXyOYQoRYQNZyX/UFkMCM/mNHxe1qA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^7.0.10"
+        "stylehacks": "^7.0.11"
       },
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-merge-rules": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.10.tgz",
-      "integrity": "sha512-UXYKxkg8Cy1so/evF7AE/25PNXZb3E0SrvjdbtbGf+MW+doLenKqRLQzz6YZW469ktiXK2MVLFWtel/DftCV0Q==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.11.tgz",
+      "integrity": "sha512-SJUPM18g2BmPhf8BVlbwqWz4aK3pLu6u6xjfwEzra7xL6IBR10sUaiB++EzqcVfadPHrKBSMlNdP+XieykhI+Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "browserslist": "^4.28.2",
         "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^5.0.2",
+        "cssnano-utils": "^5.0.3",
         "postcss-selector-parser": "^7.1.1"
       },
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-minify-font-values": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-7.0.2.tgz",
-      "integrity": "sha512-Z82NUmnvhPrvMUaHfkaAVBmWQq9F8Dox4Dy0LiwbaTxfmDUWLQtS+0WCgKViwdWCPPajiY9YzoQftgqKdXkM5g==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-7.0.3.tgz",
+      "integrity": "sha512-yilG/VOaNI74IylQvAQQxm3/wZVBkXyYUqNUAdxqwtbWUXPsbK1q8Ms0mL83v+f8YicgcyfYCRZtWACUdYajpA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12494,49 +12431,49 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-minify-gradients": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-7.0.4.tgz",
-      "integrity": "sha512-g8MNeNyN+lbwKy8DCtJ6zU6awBL0InBsSOaKmgZ1MdRLVItLQUNFNAzzzBnOp4qowOcyyB6GetTlQ0/0UNXvag==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-7.0.5.tgz",
+      "integrity": "sha512-YraROyQRg3BI1+Hg8E05B/JPdnTm8EDSVu4P2BxdM+CRiOyfmou809+chGIqo6fQqwjPGQ947nbGncSjmTU1WQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@colordx/core": "^5.2.0",
-        "cssnano-utils": "^5.0.2",
+        "@colordx/core": "^5.4.3",
+        "cssnano-utils": "^5.0.3",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-minify-params": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.8.tgz",
-      "integrity": "sha512-DIUKM5DZGTmxN7KFKT+rxt0FdPDmRrdK/k3n3+6Po+N/QYn06juwagHcfOVBG0CfCHwcnI612GAUCZc3eT+ZEg==",
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.9.tgz",
+      "integrity": "sha512-R8itbB8BhlpoYyBm1ou0dD+vJnQ3F6adQipR4UnkCHUwlo+S9WXJaDRg1RHjC8YVAtIdrQzSWvJl40HnGDTKjA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "browserslist": "^4.28.2",
-        "cssnano-utils": "^5.0.2",
+        "cssnano-utils": "^5.0.3",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-minify-selectors": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-7.1.0.tgz",
-      "integrity": "sha512-HYl/6I0aL+UvpA10t65BSa7h+tVjBgE6oRI5N/3ylX3vtwvlDL67G3FT3vYDPnTksxr0riiyJcT0tBtyRVoloA==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-7.1.2.tgz",
+      "integrity": "sha512-aQtrEWKwqafNlExcKHQvPGsXR2+vlUqqJtf5XsCQcgsSb5PL4wlujWBYDJuWsP4UnQX1YHDHU8qRlD+1PzTQ+Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12549,7 +12486,7 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-nesting": {
@@ -12581,22 +12518,22 @@
       }
     },
     "node_modules/postcss-normalize-charset": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.2.tgz",
-      "integrity": "sha512-YoINoiR4YKlzfB95Y93b0DSxWy7FLw+1SADIaznMHb88AKizpzfF80tolmiDEbYr1UM4r4Hw+NZq37SwT5f3uw==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.3.tgz",
+      "integrity": "sha512-NoBfZu8PR4c2NlmjvrqQTzCzLY79hwcSRgNQ3ZiNK0ABzf9kYKloE/jNj+/8GQY1wsm8pRRgANk6ydLH8cwo0Q==",
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-display-values": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-7.0.2.tgz",
-      "integrity": "sha512-wu/NTSjnp8sX5TnEHVPN+eScjAtRs18ELtEduG+Ek3GxjeUDUT+VAA3PJjVIXBcVIk6fiLYFj2iKH0q99S3T2Q==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-7.0.3.tgz",
+      "integrity": "sha512-ldsCX0QIt05pKIOobZtVQ48wXJecr+czw4+e1/YjVhLMqslShgpVxgPtI2CefURR8oyVoYaU/l829MMwExDMLw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12606,13 +12543,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-positions": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-7.0.3.tgz",
-      "integrity": "sha512-1CJI++oA3yK/fQlPUcEngUfcSWS08Pkt9fK+jVgL53mmtHDBHi0YiuB0m3D9BXwZjmfvCc2GQmFqCAF/CVcPzQ==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-7.0.4.tgz",
+      "integrity": "sha512-VEvlpeGd3Ju1Hqa/oN4jaP3+ms4laYwkEL9N9u+B6k54PZjXbW1n6wI+aVprf1BQXlCYpS5+1pl/7/vHiKgARg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12622,13 +12559,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-repeat-style": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-7.0.3.tgz",
-      "integrity": "sha512-RvImJ2Ml4LZSx31qC2C8LDiz65IgBNATtwEr9r3Aue+D0cCGbj4rjNojb/uGpEm4QxnOTzFqMvaDYuKiT1Cmpg==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-7.0.4.tgz",
+      "integrity": "sha512-6mPKlY/8cSaDHxX502wERADarJsccwlky6yIrOapHH2ZgfoKAV94SbiTKfKEs4EEpdazuc3J72WsqeYk7hp9+Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12638,13 +12575,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-string": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-7.0.2.tgz",
-      "integrity": "sha512-FqtrUh2BU2MnVeLeWBbJ2rwOjuDnA91XvoImc1BbgMWIxdxiPTaquflBHsmFBA3xh3pC3wPZO9W5MaIc7wU/Xw==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-7.0.3.tgz",
+      "integrity": "sha512-HnEQPUchi1eznmDKEYrKUTqrprEq97SrpUYClgUkv7V2zRODD9DFoUsYU+m9ZOetmD5ku7fEMZB/lwy8IT6xVQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12654,13 +12591,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-timing-functions": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-7.0.2.tgz",
-      "integrity": "sha512-5H5fpXBnMACEXzn7k9RP7qWZ1eWg8cuZkUuFygStY7icOj+UucwMWXeMmdkF/iITvTVa7fP85tdRCJeznpdFfQ==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-7.0.3.tgz",
+      "integrity": "sha512-zmEzHdvpZBZu0OKlbJSfgASQvaayyAoVuWtvyr34IJ/LyS+DaOKvvR3EvFJ9RWWtNIx+CMvO125OVophaxNYew==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12670,13 +12607,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-unicode": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.8.tgz",
-      "integrity": "sha512-imCM3cwK3hvlAG4z1AzYM24m8BPA3/Jk/S71wfbn2I6+E2b+UwFaGvlNqydihXTSl3OFPeQXztqCzg+NGeSibQ==",
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.9.tgz",
+      "integrity": "sha512-DRAdWfeh/TjmhLJsw91vdiWCnUod9iwvM7xyS02/nF/sLsCR3A8l3pztrSUrWG8DSBqfX7yEk9FM0USaVJ2mSg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12687,13 +12624,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-url": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-7.0.2.tgz",
-      "integrity": "sha512-bLnNY7t76NLRb9QQyCVmCN4qwoHxiq6vABH/CXav9wTuR6dNGHGQ72AyO/+h2quWxZk3l7BqxNL1vtDi9H6y1g==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-7.0.3.tgz",
+      "integrity": "sha512-CL93wmloq5qsffmFv+bw24MIRbmhHrp53qoh1LDAb/5TtjWEXI/np4xcP/Gw9oWCb2XyWnqHYLDUwiKRoJBA1Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12703,13 +12640,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-normalize-whitespace": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-7.0.2.tgz",
-      "integrity": "sha512-TNSVkuhkeOhl36WruQlflxOb7HweoeZowSusNpfsM1+ZvqJ24Mc+xksu05ecMQxlu+0zgI8pyznO2EWqDCQbLA==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-7.0.3.tgz",
+      "integrity": "sha512-FdHjjn+Ht5Z2ZRjNOmeCbNq6lq09sUYKpmlF/Aq0XjVNSLTL6fmHlA/3swN2wP2caY9GV/tjSDcIIyS7aN7W0A==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12719,30 +12656,30 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-ordered-values": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-7.0.3.tgz",
-      "integrity": "sha512-FTt6R9RF7NAYfpOHa2XFPm89FVuo5GiIbcfwOXFy1MYF38BeiNW9ke8ybw9Pk62eEsUlRVVbxHWA3B7ERYqOOA==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-7.0.4.tgz",
+      "integrity": "sha512-nubSi49hDHQk4E8KIj+IbLY8Bg+8OcSUEhgyolgM+atnOvXjV7EjaR6bac4YGZoFyPa9mWoAF3EaYbWdFkKqVg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "cssnano-utils": "^5.0.2",
+        "cssnano-utils": "^5.0.3",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-reduce-initial": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.8.tgz",
-      "integrity": "sha512-VeVRmbgpgTZuRcDQdqnsB4iYTeS2dBRV07UdwK6V3x61F1xTQ2pgIzHBIR4rQYRlXRNKBTGYYhEL1eNA7w9vaQ==",
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.9.tgz",
+      "integrity": "sha512-ztTNPdIxXTxtBcG03E9u8v44M4ElXbMIRT7pf2onlquGula0Y83nKKxqM22FA/hMgkfCjN7ohevkVlaNwI8iOQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12753,13 +12690,13 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-reduce-transforms": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-7.0.2.tgz",
-      "integrity": "sha512-OV5P9hMnf7kEkeXVXyS5ESqxbIls7a3TqFymUAV5JICO/9YCBEU+QQhQjZiDHaLwFdV7/CL481kVeBUk5FdY3w==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-7.0.3.tgz",
+      "integrity": "sha512-FXsnN9ZwcZTT8Yf8cAHA8qIGUXcX6WfLd9JoYhrdDfmvsVhhfqkkv7m4AC3rwFOfz+GzkUa87OCKF9dUcicd+g==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12769,7 +12706,7 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-selector-parser": {
@@ -12786,9 +12723,9 @@
       }
     },
     "node_modules/postcss-svgo": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.1.2.tgz",
-      "integrity": "sha512-ixExc8m+/68yuSYQzV/1DgtTup/7nI2dN9eiDS5GMRUzeCH4q9UcqeZPwcSVhdf8ay9fRwXDUHwcY5/XzQSszQ==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.1.3.tgz",
+      "integrity": "sha512-2QfoFOYMcj8lwcVEf9WeTlkVIAm7u2QvOEhMzkQU3KUhhGX/l8hVV9EtjMv4iq3E9iI3OeeMN0YoMLbGusuigw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12799,13 +12736,13 @@
         "node": "^18.12.0 || ^20.9.0 || >= 18"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-unique-selectors": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-7.0.6.tgz",
-      "integrity": "sha512-cDxnYw1QuBMW5w3svZ0BlYF0IA4Amr+1JoTLXzu6vDFPNwohN2QU+sPZNx15b930LR7ce+/600h28/cYoxO9vw==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-7.0.7.tgz",
+      "integrity": "sha512-d+sCkaRnSefghOUdH8CMJZV9yUQhj2ojpe8Nw/lA+LV1UOfeleGkLTl6XdCFFSai9UJ+DJPb69FFuqthXYsY8w==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12815,7 +12752,7 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/postcss-value-parser": {
@@ -13151,19 +13088,19 @@
       }
     },
     "node_modules/puppeteer": {
-      "version": "24.42.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.42.0.tgz",
-      "integrity": "sha512-94MoPfFp2eY3eYIMdINkez4IOP5TMHntlZbVx06fHlQTtiQiYgaY0L2Zzfod8PVUkPqP7m3Qlre2v8YS8cudPA==",
+      "version": "24.43.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.43.0.tgz",
+      "integrity": "sha512-DRnMFz+J3s4lFUQcjqKl0/7h0jzlCZuUFU9lNjtKrnMl5WI1RwCaIItpHVu9empuPyUreYueN0sUW3/pnfdqsg==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
-        "@puppeteer/browsers": "2.13.0",
+        "@puppeteer/browsers": "2.13.1",
         "chromium-bidi": "14.0.0",
         "cosmiconfig": "^9.0.0",
-        "devtools-protocol": "0.0.1595872",
-        "puppeteer-core": "24.42.0",
-        "typed-query-selector": "^2.12.1"
+        "devtools-protocol": "0.0.1608973",
+        "puppeteer-core": "24.43.0",
+        "typed-query-selector": "^2.12.2"
       },
       "bin": {
         "puppeteer": "lib/cjs/puppeteer/node/cli.js"
@@ -13173,19 +13110,19 @@
       }
     },
     "node_modules/puppeteer-core": {
-      "version": "24.42.0",
-      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.42.0.tgz",
-      "integrity": "sha512-T4zXokk/izH01fYPhyyev1A4piWiOKrYq7CUFpdoYQxmOnXoV6YjUabmfIjCYkNspSoAXIxRid3Tw+Vg0fthYg==",
+      "version": "24.43.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.43.0.tgz",
+      "integrity": "sha512-cCRNXsUlhyPoKDz6+TiSpfZpRS3mD6Y1YFKhkdr6ik6TMfuJb7fAtXq9ThUFc4sphxObDk3BuAvdxc1Y6YOnqQ==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
-        "@puppeteer/browsers": "2.13.0",
+        "@puppeteer/browsers": "2.13.1",
         "chromium-bidi": "14.0.0",
         "debug": "^4.4.3",
-        "devtools-protocol": "0.0.1595872",
-        "typed-query-selector": "^2.12.1",
+        "devtools-protocol": "0.0.1608973",
+        "typed-query-selector": "^2.12.2",
         "webdriver-bidi-protocol": "0.4.1",
-        "ws": "^8.19.0"
+        "ws": "^8.20.0"
       },
       "engines": {
         "node": ">=18"
@@ -13383,6 +13320,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/read-pkg-up/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "license": "(MIT OR CC0-1.0)",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/read-pkg/node_modules/type-fest": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
@@ -13664,9 +13611,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.2.tgz",
-      "integrity": "sha512-J9qZyW++QK/09NyN/zeO0dG/1GdGfyp9lV8ajHnRVLfo/uFsbji5mHnDgn/qYdUHyCkM2N+8VyspgZclfAh0eQ==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.3.tgz",
+      "integrity": "sha512-pAQK9HalE84QSm4Po3EmWIZPd3FnjkShVkiMlz1iligWYkWQ7wHYd1PF/T7QZ5TVSD6uSTon5gBVMSM4JfBV+A==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -13680,31 +13627,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.60.2",
-        "@rollup/rollup-android-arm64": "4.60.2",
-        "@rollup/rollup-darwin-arm64": "4.60.2",
-        "@rollup/rollup-darwin-x64": "4.60.2",
-        "@rollup/rollup-freebsd-arm64": "4.60.2",
-        "@rollup/rollup-freebsd-x64": "4.60.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.60.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.60.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.60.2",
-        "@rollup/rollup-linux-arm64-musl": "4.60.2",
-        "@rollup/rollup-linux-loong64-gnu": "4.60.2",
-        "@rollup/rollup-linux-loong64-musl": "4.60.2",
-        "@rollup/rollup-linux-ppc64-gnu": "4.60.2",
-        "@rollup/rollup-linux-ppc64-musl": "4.60.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.60.2",
-        "@rollup/rollup-linux-riscv64-musl": "4.60.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.60.2",
-        "@rollup/rollup-linux-x64-gnu": "4.60.2",
-        "@rollup/rollup-linux-x64-musl": "4.60.2",
-        "@rollup/rollup-openbsd-x64": "4.60.2",
-        "@rollup/rollup-openharmony-arm64": "4.60.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.60.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.60.2",
-        "@rollup/rollup-win32-x64-gnu": "4.60.2",
-        "@rollup/rollup-win32-x64-msvc": "4.60.2",
+        "@rollup/rollup-android-arm-eabi": "4.60.3",
+        "@rollup/rollup-android-arm64": "4.60.3",
+        "@rollup/rollup-darwin-arm64": "4.60.3",
+        "@rollup/rollup-darwin-x64": "4.60.3",
+        "@rollup/rollup-freebsd-arm64": "4.60.3",
+        "@rollup/rollup-freebsd-x64": "4.60.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.3",
+        "@rollup/rollup-linux-arm64-musl": "4.60.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.3",
+        "@rollup/rollup-linux-loong64-musl": "4.60.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.3",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.3",
+        "@rollup/rollup-linux-x64-gnu": "4.60.3",
+        "@rollup/rollup-linux-x64-musl": "4.60.3",
+        "@rollup/rollup-openbsd-x64": "4.60.3",
+        "@rollup/rollup-openharmony-arm64": "4.60.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.3",
+        "@rollup/rollup-win32-x64-gnu": "4.60.3",
+        "@rollup/rollup-win32-x64-msvc": "4.60.3",
         "fsevents": "~2.3.2"
       }
     },
@@ -13720,9 +13667,9 @@
       }
     },
     "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.60.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.2.tgz",
-      "integrity": "sha512-gjEtURKLCC5VXm1I+2i1u9OhxFsKAQJKTVB8WvDAHF+oZlq0GTVFOlTlO1q3AlCTE/DF32c16ESvfgqR7343/g==",
+      "version": "4.60.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.3.tgz",
+      "integrity": "sha512-D+0QGcZhBzTN82weOnsSlY7V7+RMmPuF1CkbxyMAGE8+ZHeUjyb76ZiWmBlCu//AQQONvxcqRbwZTajZKqjuOw==",
       "cpu": [
         "x64"
       ],
@@ -14271,19 +14218,6 @@
       "license": "BSD-3-Clause",
       "peer": true
     },
-    "node_modules/ssri": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
-      "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -14307,17 +14241,21 @@
       }
     },
     "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/string-width-cjs": {
@@ -14366,32 +14304,12 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/string-width/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+      "peer": true
     },
     "node_modules/strip-ansi": {
       "version": "7.2.0",
@@ -14500,9 +14418,9 @@
       }
     },
     "node_modules/stylehacks": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.10.tgz",
-      "integrity": "sha512-sRJ7klmhe/Fl5woJcbJUa2qP1Ueffsl1CQI4ePvqXLkZmcIuAt09aP9uT/FOFPqXh9Rh8M5UkgEnwTdTKn/Aag==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.11.tgz",
+      "integrity": "sha512-iODNfhXVLqc5LADs+Y6Oh5wJuK5ZcHbVng8aiK3y9pjMQdc5hLrBW0eFU6FtnpNrE6PoEg/MmFTU4waotj5WNg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -14513,19 +14431,19 @@
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
       },
       "peerDependencies": {
-        "postcss": "^8.5.10"
+        "postcss": "^8.5.13"
       }
     },
     "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "license": "MIT",
       "dependencies": {
-        "has-flag": "^3.0.0"
+        "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
     "node_modules/supports-preserve-symlinks-flag": {
@@ -14901,16 +14819,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/ts-patch/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ts-patch/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -14924,19 +14832,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ts-patch/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ts-simple-type": {
       "version": "2.0.0-next.0",
       "resolved": "https://registry.npmjs.org/ts-simple-type/-/ts-simple-type-2.0.0-next.0.tgz",
@@ -15006,13 +14901,16 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
       "license": "(MIT OR CC0-1.0)",
       "peer": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/type-is": {
@@ -15050,16 +14948,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.59.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.59.1.tgz",
-      "integrity": "sha512-xqDcFVBmlrltH64lklOVp1wYxgJr6LVdg3NamBgH2OOQDLFdTKfIZXF5PfghrnXQKXZGTQs8tr1vL7fJvq8CTQ==",
+      "version": "8.59.2",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.59.2.tgz",
+      "integrity": "sha512-pJw051uomb3ZeCzGTpRb8RbEqB5Y4WWet8gl/GcTlU35BSx0PVdZ86/bqkQCyKKuraVQEK7r6kBHQXF+fBhkoQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.59.1",
-        "@typescript-eslint/parser": "8.59.1",
-        "@typescript-eslint/typescript-estree": "8.59.1",
-        "@typescript-eslint/utils": "8.59.1"
+        "@typescript-eslint/eslint-plugin": "8.59.2",
+        "@typescript-eslint/parser": "8.59.2",
+        "@typescript-eslint/typescript-estree": "8.59.2",
+        "@typescript-eslint/utils": "8.59.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -15558,17 +15456,18 @@
       }
     },
     "node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
@@ -15603,33 +15502,34 @@
         "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -15637,6 +15537,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -15683,9 +15596,9 @@
       }
     },
     "node_modules/yaml": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
-      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.4.tgz",
+      "integrity": "sha512-ml/JPOj9fOQK8RNnWojA67GbZ0ApXAUlN2UQclwv2eVgTgn7O9gg9o7paZWKMp4g0H3nTLtS9LVzhkpOFIKzog==",
       "license": "ISC",
       "peer": true,
       "bin": {
@@ -15755,6 +15668,47 @@
         "node": ">=12"
       }
     },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
@@ -15952,9 +15906,9 @@
       }
     },
     "tools/eslint-plugin/node_modules/lru-cache": {
-      "version": "11.3.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.5.tgz",
-      "integrity": "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw==",
+      "version": "11.3.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.6.tgz",
+      "integrity": "sha512-Gf/KoL3C/MlI7Bt0PGI9I+TeTC/I6r/csU58N4BSNc4lppLBeKsOdFYkK+dX0ABDUMJNfCHTyPpzwwO21Awd3A==",
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": "20 || >=22"
@@ -16025,7 +15979,7 @@
         "@lit-labs/ssr": "^4.0.0",
         "@open-wc/testing": "^4.0.0",
         "@playwright/test": "~1.57.0",
-        "@pwrs/mappa": "^0.0.4",
+        "@pwrs/mappa": "^0.0.6",
         "@rollup/plugin-replace": "^6.0.3",
         "@web/dev-server": "^0.4.6",
         "@web/dev-server-esbuild": "^1.0.4",
diff --git a/package.json b/package.json
index 05cafa8930..e7f2e95bce 100644
--- a/package.json
+++ b/package.json
@@ -173,12 +173,8 @@
       ]
     },
     "dev": {
-      "command": "web-dev-server --open --watch",
-      "service": true,
-      "dependencies": [
-        "build:elements",
-        "analyze"
-      ]
+      "command": "cem serve",
+      "service": true
     },
     "watch:core": {
       "service": true,
@@ -274,8 +270,8 @@
     "@lit/react": "^1.0.8",
     "@octokit/core": "^6.1.2",
     "@patternfly/patternfly": "^4.224.5",
-    "@pwrs/cem": "^0.7.5",
-    "@pwrs/mappa": "^0.0.4",
+    "@pwrs/cem": "^0.10.5",
+    "@pwrs/mappa": "^0.0.6",
     "@rhds/elements": "^4.0.1",
     "@types/koa__router": "^12.0.5",
     "@types/node": "^22.19.0",
@@ -301,10 +297,10 @@
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "^0.27.2",
     "@esbuild/linux-x64": "^0.27.2",
-    "@pwrs/cem-darwin-arm64": "^0.7.5",
-    "@pwrs/cem-darwin-x64": "^0.9.19",
-    "@pwrs/cem-linux-arm64": "^0.7.5",
-    "@pwrs/cem-linux-x64": "^0.7.5",
+    "@pwrs/cem-darwin-arm64": "^0.10.5",
+    "@pwrs/cem-darwin-x64": "^0.10.5",
+    "@pwrs/cem-linux-arm64": "^0.10.5",
+    "@pwrs/cem-linux-x64": "^0.10.5",
     "@rollup/rollup-darwin-arm64": "^4.54.0"
   },
   "workspaces": [
diff --git a/playwright.config.ts b/playwright.config.ts
index 8e59633326..903b8fcd34 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
   workers: process.env.CI ? 2 : 8,
 
   webServer: process.env.CI ? undefined : {
-    command: 'npx @web/dev-server --config ./docs/demo/web-dev-server.demo.config.js',
+    command: 'npx cem serve --port 8080 --rendering=chromeless',
     port: 8080,
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
diff --git a/tools/pfe-tools/11ty/DocsPage.ts b/tools/pfe-tools/11ty/DocsPage.ts
index 108687687b..10a0e8ae97 100644
--- a/tools/pfe-tools/11ty/DocsPage.ts
+++ b/tools/pfe-tools/11ty/DocsPage.ts
@@ -1,5 +1,5 @@
 import type { PfeConfig } from '../config.js';
-import { getPfeConfig } from '../config.js';
+import { getPfeConfig, matchPrefix } from '../config.js';
 import { Manifest } from '../custom-elements-manifest/lib/Manifest.js';
 
 import slugify from 'slugify';
@@ -26,7 +26,7 @@ export class DocsPage {
     this.docsTemplatePath = options?.docsTemplatePath;
     this.summary = this.manifest.getSummary(this.tagName);
     this.description = this.manifest.getDescription(this.tagName);
-    const prefix = `${config.tagPrefix.replace(/-$/, '')}-`;
+    const prefix = matchPrefix(this.tagName, config);
     const aliased = config.aliases[this.tagName] ?? this.tagName.replace(prefix, '');
     this.title = options?.title ?? Manifest.prettyTag(this.tagName, config.aliases, prefix);
     this.slug = slugify(aliased, { strict: true, lower: true });
diff --git a/tools/pfe-tools/11ty/plugins/types.ts b/tools/pfe-tools/11ty/plugins/types.ts
index f8ac6ef0f1..4eb3786ef2 100644
--- a/tools/pfe-tools/11ty/plugins/types.ts
+++ b/tools/pfe-tools/11ty/plugins/types.ts
@@ -1,17 +1,7 @@
 import type { PfeConfig } from '@patternfly/pfe-tools/config';
-import type { Manifest } from '@patternfly/pfe-tools/custom-elements-manifest/lib/Manifest.js';
 
-export interface DemoRecord {
-  title: string;
-  tagName: string;
-  tagPrefix: string;
-  primaryElementName: string;
-  manifest: Manifest;
-  slug: string;
-  filePath: string;
-  permalink: string;
-  url: string;
-}
+export type { DemoRecord } from '@patternfly/pfe-tools/custom-elements-manifest/lib/Manifest.js';
+import type { DemoRecord } from '@patternfly/pfe-tools/custom-elements-manifest/lib/Manifest.js';
 
 export interface PluginOptions extends PfeConfig {
   /** list of extra demo records not included in the custom-elements-manifest. Default [] */
diff --git a/tools/pfe-tools/config.spec.ts b/tools/pfe-tools/config.spec.ts
new file mode 100644
index 0000000000..f72350a5cf
--- /dev/null
+++ b/tools/pfe-tools/config.spec.ts
@@ -0,0 +1,75 @@
+import { describe, it } from 'node:test';
+import { strict as assert } from 'node:assert';
+
+import { getPrefixes, matchPrefix, deslugify } from './config.js';
+
+describe('getPrefixes', function() {
+  it('should return array from single string', function() {
+    assert.deepStrictEqual(getPrefixes({ tagPrefix: 'pf' }), ['pf']);
+  });
+
+  it('should return array as-is', function() {
+    assert.deepStrictEqual(getPrefixes({ tagPrefix: ['pf-v5', 'pf-v6'] }), ['pf-v5', 'pf-v6']);
+  });
+
+  it('should filter empty strings', function() {
+    assert.deepStrictEqual(getPrefixes({ tagPrefix: ['pf-v5', '', 'pf-v6'] }), ['pf-v5', 'pf-v6']);
+  });
+
+  it('should throw when tagPrefix is undefined', function() {
+    assert.throws(() => getPrefixes({ tagPrefix: undefined }), {
+      message: 'tagPrefix must contain at least one non-empty prefix',
+    });
+  });
+
+  it('should throw when tagPrefix is empty array', function() {
+    assert.throws(() => getPrefixes({ tagPrefix: [] }), {
+      message: 'tagPrefix must contain at least one non-empty prefix',
+    });
+  });
+
+  it('should throw when all entries are empty strings', function() {
+    assert.throws(() => getPrefixes({ tagPrefix: ['', ''] }), {
+      message: 'tagPrefix must contain at least one non-empty prefix',
+    });
+  });
+});
+
+describe('matchPrefix', function() {
+  it('should match pf-v5 prefix', function() {
+    assert.strictEqual(matchPrefix('pf-v5-button', { tagPrefix: ['pf-v5', 'pf-v6'] }), 'pf-v5-');
+  });
+
+  it('should match pf-v6 prefix', function() {
+    assert.strictEqual(matchPrefix('pf-v6-card', { tagPrefix: ['pf-v5', 'pf-v6'] }), 'pf-v6-');
+  });
+
+  it('should fall back to first prefix when no match', function() {
+    assert.strictEqual(matchPrefix('custom-element', { tagPrefix: ['pf-v5', 'pf-v6'] }), 'pf-v5-');
+  });
+
+  it('should work with single string prefix', function() {
+    assert.strictEqual(matchPrefix('pf-button', { tagPrefix: 'pf' }), 'pf-');
+  });
+
+  it('should strip trailing dash from config before adding canonical dash', function() {
+    assert.strictEqual(matchPrefix('pf-v5-button', { tagPrefix: 'pf-v5-' }), 'pf-v5-');
+  });
+});
+
+describe('deslugify', function() {
+  it('should return prefixed slug when slug already has a configured prefix', function() {
+    const result = deslugify('pf-v5-button');
+    assert.strictEqual(result, 'pf-v5-button');
+  });
+
+  it('should return prefixed slug for pf-v6 prefix', function() {
+    const result = deslugify('pf-v6-card');
+    assert.strictEqual(result, 'pf-v6-card');
+  });
+
+  it('should prepend first prefix when slug has no prefix', function() {
+    const result = deslugify('button');
+    assert.strictEqual(result, 'pf-v5-button');
+  });
+});
diff --git a/tools/pfe-tools/config.ts b/tools/pfe-tools/config.ts
index 11921bfdff..e63be69a01 100644
--- a/tools/pfe-tools/config.ts
+++ b/tools/pfe-tools/config.ts
@@ -30,8 +30,8 @@ export interface PfeConfig {
   sourceControlURLPrefix?: string ;
   /** absolute URL prefix for demos, with trailing slash. Default 'https://patternflyelements.org/' */
   demoURLPrefix?: string ;
-  /** custom elements namespace. Default 'pf' */
-  tagPrefix?: string;
+  /** custom elements namespace. Default 'pf'. Accepts an array for repos with multiple prefixes. */
+  tagPrefix?: string | string[];
   /** Dev Server site options */
   site?: SiteOptions;
 }
@@ -78,6 +78,27 @@ export function getPfeConfig(rootDir: string = process.cwd()): Required<PfeConfi
   };
 }
 
+/**
+ * Normalizes tagPrefix config to a non-empty array of prefixes (without trailing dash).
+ * Filters empty strings. Throws if result is empty.
+ */
+export function getPrefixes(config: Pick<PfeConfig, 'tagPrefix'>): string[] {
+  const prefixes = [config.tagPrefix].flat().filter((p): p is string => !!p);
+  if (!prefixes.length) {
+    throw new Error('tagPrefix must contain at least one non-empty prefix');
+  }
+  return prefixes;
+}
+
+/**
+ * Returns the prefix that matches the given tag name (with trailing dash),
+ * or falls back to the first configured prefix.
+ */
+export function matchPrefix(tagName: string, config: Pick<PfeConfig, 'tagPrefix'>): string {
+  const prefixes = getPrefixes(config).map(p => `${p.replace(/-$/, '')}-`);
+  return prefixes.find(p => tagName.startsWith(p)) ?? prefixes[0];
+}
+
 const slugsConfigMap = new Map<string, { config: PfeConfig; slugs: Map<string, string> }>();
 const reverseSlugifyObject = ([k, v]: [string, string]): [string, string] =>
   [slugify(v, { lower: true }), k];
@@ -102,6 +123,8 @@ export function deslugify(
   rootDir: string = process.cwd(),
 ): string {
   const { slugs, config } = getSlugsMap(rootDir);
-  const prefixedSlug = (slug.startsWith(`${config.tagPrefix}-`)) ? slug : `${config.tagPrefix}-${slug}`;
+  const prefixes = getPrefixes(config);
+  const hasPrefix = prefixes.some(p => slug.startsWith(`${p}-`));
+  const prefixedSlug = hasPrefix ? slug : `${prefixes[0]}-${slug}`;
   return slugs.get(slug) ?? prefixedSlug;
 }
diff --git a/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts b/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts
index 266e9ae229..79ff7d921e 100644
--- a/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts
+++ b/tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts
@@ -21,7 +21,7 @@ import { readFileSync } from 'node:fs';
 
 import { getAllPackages } from './get-all-packages.js';
 import slugify from 'slugify';
-import { deslugify } from '@patternfly/pfe-tools/config.js';
+import { deslugify, matchPrefix } from '@patternfly/pfe-tools/config.js';
 
 type PredicateFn = (x: unknown) => boolean;
 
@@ -214,10 +214,10 @@ export class Manifest {
   /**
    */
   getTagNames(): string[] {
-    return this.manifest?.modules
+    return [...new Set(this.manifest?.modules
         ?.flatMap?.(m => m.exports
             ?.filter?.(x => x.kind === 'custom-element-definition')
-            ?.map?.(x => x.name)) as string[] ?? [];
+            ?.map?.(x => x.name)) as string[] ?? [])];
   }
 
   /**
@@ -324,7 +324,7 @@ export class Manifest {
       const [last = ''] = filePath.split(path.sep).reverse();
       const filename = last.replace('.html', '');
       const isMainElementDemo = filename === 'index';
-      const prefix = `${options.tagPrefix.replace(/-$/, '')}-`;
+      const prefix = matchPrefix(tagName, options);
       const title = isMainElementDemo ? prettyTag(tagName, options.aliases, prefix)
         : last
             .replace(/(?:^|[-/\s])\w/g, x => x.toUpperCase())
diff --git a/tools/pfe-tools/dev-server/config.ts b/tools/pfe-tools/dev-server/config.ts
index 806e9a182f..fb79b7b8db 100644
--- a/tools/pfe-tools/dev-server/config.ts
+++ b/tools/pfe-tools/dev-server/config.ts
@@ -88,19 +88,11 @@ async function cacheBusterMiddleware(ctx: Context, next: () => Promise<any>) {
 function liveReloadTsChangesMiddleware(
   config: ReturnType<typeof normalizeOptions>,
 ): Middleware {
-  /**
-   * capture group 1:
-   *   Either config.elementsDir or `pfe-core`
-   * `/`
-   * **ANY** (_>= 0x_)
-   * `.js`
-   */
-  const TYPESCRIPT_SOURCES_RE = new RegExp(`(${config.elementsDir}|pfe-core)/.*\\.js`);
-
+  const TYPESCRIPT_SOURCES_RE = new RegExp(`(${config.elementsDir}|pfe-core)/.*\\.js$`);
   return function(ctx, next) {
-    if (!ctx.path.includes('node_modules') && ctx.path
-        .match(TYPESCRIPT_SOURCES_RE)) {
-      ctx.redirect(ctx.path.replace('.js', '.ts'));
+    if (!ctx.path.includes('node_modules')
+        && TYPESCRIPT_SOURCES_RE.test(ctx.path)) {
+      ctx.redirect(ctx.path.replace(/\.js$/, '.ts'));
     } else {
       return next();
     }
diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json
index 9951194275..1e8ec6421d 100644
--- a/tools/pfe-tools/package.json
+++ b/tools/pfe-tools/package.json
@@ -71,7 +71,7 @@
     "@lit-labs/ssr": "^4.0.0",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "~1.57.0",
-    "@pwrs/mappa": "^0.0.4",
+    "@pwrs/mappa": "^0.0.6",
     "@rollup/plugin-replace": "^6.0.3",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.4",
diff --git a/tools/pfe-tools/test/config.ts b/tools/pfe-tools/test/config.ts
index cfce355d59..b9b66f1ecf 100644
--- a/tools/pfe-tools/test/config.ts
+++ b/tools/pfe-tools/test/config.ts
@@ -8,7 +8,7 @@ import { junitReporter } from '@web/test-runner-junit-reporter';
 import { a11ySnapshotPlugin } from '@web/test-runner-commands/plugins';
 
 import { pfeDevServerConfig, type PfeDevServerConfigOptions } from '../dev-server/config.js';
-import { getPfeConfig } from '../config.js';
+import { getPfeConfig, getPrefixes } from '../config.js';
 
 export interface PfeTestRunnerConfigOptions extends PfeDevServerConfigOptions {
   files?: string[];
@@ -50,7 +50,9 @@ const exists = async (path: string | URL) => {
 export function pfeTestRunnerConfig(opts: PfeTestRunnerConfigOptions): TestRunnerConfig {
   const { open, ...devServerConfig } = pfeDevServerConfig({ ...opts, loadDemo: false });
 
-  const { elementsDir, tagPrefix } = getPfeConfig();
+  const config = getPfeConfig();
+  const { elementsDir } = config;
+  const tagPrefixes = getPrefixes(config);
 
   const configuredReporter = opts.reporter ?? 'default';
 
@@ -121,7 +123,7 @@ export function pfeTestRunnerConfig(opts: PfeTestRunnerConfigOptions): TestRunne
        */
       async function(ctx, next) {
         if (ctx.path.endsWith('.js')
-            && ctx.path.startsWith(`/${elementsDir}/${tagPrefix}-`)
+            && tagPrefixes.some(p => ctx.path.startsWith(`/${elementsDir}/${p}-`))
             && await exists(`./${ctx.path}`.replace('.js', '.ts').replace('//', '/'))) {
           ctx.redirect(ctx.path.replace('.js', '.ts'));
         } else {
diff --git a/tools/pfe-tools/test/playwright/PfeDemoPage.ts b/tools/pfe-tools/test/playwright/PfeDemoPage.ts
index 7f38a2f730..ca7b9c119d 100644
--- a/tools/pfe-tools/test/playwright/PfeDemoPage.ts
+++ b/tools/pfe-tools/test/playwright/PfeDemoPage.ts
@@ -24,9 +24,10 @@ export class PfeDemoPage {
     const selectorOverride =
         typeof pathnameOrOptions === 'string' ? undefined
       : pathnameOrOptions?.selector;
+    const slug = this.tagName.replace(/^pf-(?:v\d+-)?/, '');
     const pathname =
         typeof pathnameOrOptions === 'string' ? pathnameOrOptions
-      : `${this.workspace}/${this.tagName.replace('pf-', '')}/demo`;
+      : `${this.workspace}/${slug}/demo`;
     const url = new URL(pathname, this.origin).toString();
     // eslint-disable-next-line no-console
     console.log(`NAVIGATING to ${url}`);
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
deleted file mode 100644
index 07e31c4f30..0000000000
--- a/web-dev-server.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { pfeDevServerConfig } from '@patternfly/pfe-tools/dev-server/config.js';
-import { makeDemoEnv } from '@patternfly/pfe-tools/environment.js';
-
-import { writeFile, mkdir } from 'node:fs/promises';
-
-await mkdir(new URL('./_site/tools', import.meta.url), { recursive: true });
-await writeFile(
-  new URL('./_site/tools/environment.js', import.meta.url),
-  await makeDemoEnv(process.cwd()),
-  'utf-8',
-);
-
-export default pfeDevServerConfig({
-  // workaround for https://github.com/evanw/esbuild/issues/3019
-  tsconfig: 'tsconfig.esbuild.json',
-  importMapOptions: {
-    providers: {
-      'zero-md': 'nodemodules',
-      '@patternfly/icons': 'nodemodules',
-      '@patternfly/elements': 'monorepotypescript',
-      '@patternfly/pfe-tools': 'monorepotypescript',
-      '@patternfly/pfe-core': 'monorepotypescript',
-    },
-    inputMap: {
-      imports: {
-        '@patternfly/icons/': './node_modules/@patternfly/icons/',
-        '@patternfly/pfe-tools/environment.js': './_site/tools/environment.js',
-      },
-    },
-  },
-});
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 57e1cd9cea..a6445088f8 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -5,7 +5,7 @@ import { getPatternflyIconNodemodulesImports } from '@patternfly/pfe-tools/dev-s
 export default pfeTestRunnerConfig({
   // workaround for https://github.com/evanw/esbuild/issues/3019
   tsconfig: 'tsconfig.esbuild.json',
-  files: ['!tools/create-element/templates/**/*'],
+  files: ['!tools/create-element/templates/**/*', '!tools/pfe-tools/*.spec.ts'],
   reporter: process.env.CI ? 'summary' : 'default',
   importMapOptions: {
     providers: {