From de4cfa4c15b6adddf8db446665f5872b5a2e80f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Thu, 18 Jan 2024 08:41:27 +0200 Subject: [PATCH] fix!: v3 deprecations (#2655) * fix!: remove deprecatedCustomEvent * fix(tools)!: remove framework test wrappers We will retool this and develop something better. In the mean time, use the react wrapper components * docs: fix logo * fix(eslint-config): update ecmaVersion * fix(accordion): use pfv4 tokens * fix(tools)!: remove DocsPage renderers * fix(icon)!: remove elements/pf-icon/icons Use `@patternfly/icons` instead --- .changeset/eight-waves-join.md | 4 + .changeset/light-carrots-suffer.md | 4 + .changeset/little-singers-sell.md | 4 + .changeset/long-rings-burn.md | 4 + .changeset/odd-mice-stop.md | 28 + .changeset/olive-pens-create.md | 4 + .changeset/violet-wasps-obey.md | 4 + .gitignore | 1 - brand/logo/svg/pfe-icon-white.svg | 8 +- .../functions/deprecatedCustomEvent.ts | 11 - core/pfe-core/package.json | 4 +- docs/_data/importMap.cjs | 9 + docs/_includes/_nav.njk | 8 +- .../_includes/cem}/attributes.njk | 0 .../templates => docs/_includes/cem}/band.njk | 0 .../_includes/cem}/css-custom-properties.njk | 0 .../_includes/cem}/css-shadow-parts.njk | 0 .../_includes/cem}/events.njk | 0 .../_includes/cem}/install.njk | 0 .../_includes/cem}/methods.njk | 0 .../_includes/cem}/overview.njk | 0 .../_includes/cem}/properties.njk | 0 .../_includes/cem}/slots.njk | 0 docs/_plugins/cem-render.cjs | 423 ++++++ docs/_plugins/pfe-assets.cjs | 4 +- docs/components/demos.html | 10 +- docs/images/pfe-logo-inverse-white.svg | 68 +- docs/main.css | 1 - docs/main.mjs | 6 +- elements/package.json | 3 +- elements/pf-accordion/demo/bordered.html | 79 + .../pf-accordion/demo/content-attributes.html | 36 + elements/pf-accordion/demo/demo.css | 9 - elements/pf-accordion/demo/fixed-panel.html | 95 ++ elements/pf-accordion/demo/nested.html | 121 ++ elements/pf-accordion/demo/pf-accordion.html | 296 +--- elements/pf-accordion/demo/pf-accordion.js | 10 - .../demo/single-expanded-panel.html | 58 + elements/pf-accordion/docs/pf-accordion.md | 5 +- elements/pf-accordion/pf-accordion.css | 68 +- elements/pf-accordion/pf-accordion.ts | 65 +- elements/pf-avatar/demo/bordered.html | 50 + elements/pf-avatar/demo/dark-border.html | 49 + elements/pf-avatar/demo/dark-variant.html | 69 + elements/pf-avatar/demo/demo.css | 18 - elements/pf-avatar/demo/pf-avatar.html | 162 +- elements/pf-avatar/demo/pf-avatar.js | 1 - elements/pf-avatar/demo/sizes.html | 49 + elements/pf-badge/demo/demo.css | 9 - elements/pf-badge/demo/pf-badge.html | 30 +- elements/pf-badge/demo/pf-badge.js | 8 - elements/pf-badge/demo/read.html | 15 + elements/pf-badge/demo/threshold.html | 16 + elements/pf-badge/demo/unread.html | 15 + elements/pf-banner/demo/status-banners.html | 9 +- elements/pf-button/demo/block.html | 17 + elements/pf-button/demo/demo.css | 11 - elements/pf-button/demo/form-control.html | 26 +- elements/pf-button/demo/form-control.js | 15 - elements/pf-button/demo/pf-button.html | 115 +- elements/pf-button/demo/pf-button.js | 28 - elements/pf-button/demo/sizes.html | 29 + elements/pf-button/demo/stateful.html | 50 + elements/pf-button/demo/variants.html | 101 ++ elements/pf-card/demo/demo.css | 44 - elements/pf-card/demo/pf-card.html | 43 +- elements/pf-card/demo/pf-card.js | 23 - elements/pf-card/demo/settings.html | 94 ++ elements/pf-clipboard-copy/demo/code.html | 27 + elements/pf-clipboard-copy/demo/demo.css | 12 - .../pf-clipboard-copy/demo/expandable.html | 17 + .../demo/inline-compact-code.html | 14 + .../demo/inline-compact.html | 32 + .../demo/pf-clipboard-copy.html | 91 +- .../demo/pf-clipboard-copy.js | 1 - .../demo/read-only-expandable.html | 17 + .../demo/read-only-expanded.html | 17 + .../pf-clipboard-copy/demo/read-only.html | 14 + elements/pf-code-block/demo/demo.css | 4 - elements/pf-code-block/demo/expandable.html | 25 + elements/pf-code-block/demo/expanded.html | 25 + .../pf-code-block/demo/javascript-sample.html | 20 + elements/pf-code-block/demo/noscript.html | 51 + .../pf-code-block/demo/pf-code-block.html | 96 +- elements/pf-code-block/demo/pf-code-block.js | 2 - elements/pf-icon/BaseIcon.ts | 2 +- elements/pf-icon/demo/custom-icon-sets.html | 52 +- elements/pf-icon/demo/custom-icon-sets.js | 5 - elements/pf-icon/demo/demo.css | 53 - elements/pf-icon/demo/pf-icon.html | 54 +- elements/pf-icon/demo/pf-icon.js | 67 - elements/pf-icon/demo/sets.html | 118 +- elements/pf-icon/demo/styling-icons.html | 32 +- .../pf-jump-links/demo/centered-list.html | 18 + elements/pf-jump-links/demo/demo.css | 4 - .../expandable-vertical-with-subsection.html | 27 + elements/pf-jump-links/demo/label.html | 24 + .../pf-jump-links/demo/pf-jump-links.html | 69 +- elements/pf-jump-links/demo/pf-jump-links.js | 4 - .../demo/scrollspy-with-subsections.css | 60 - .../demo/scrollspy-with-subsections.html | 380 +++-- .../demo/scrollspy-with-subsections.js | 34 - .../demo/vertical-with-label.html | 19 + elements/pf-jump-links/demo/vertical.html | 18 + elements/pf-label/demo/compact.html | 21 + elements/pf-label/demo/demo.css | 37 - elements/pf-label/demo/filled-color.html | 32 + elements/pf-label/demo/icon.html | 33 + elements/pf-label/demo/outline-color.html | 20 + elements/pf-label/demo/patternfly.html | 121 +- elements/pf-label/demo/pf-label.html | 174 +-- elements/pf-label/demo/pf-label.js | 10 - .../pf-modal/demo/custom-header-footer.html | 59 + elements/pf-modal/demo/custom-icon.html | 54 + elements/pf-modal/demo/demo.css | 32 - elements/pf-modal/demo/description.html | 80 + elements/pf-modal/demo/no-header.html | 49 + .../pf-modal/demo/overflowing-content.html | 79 + elements/pf-modal/demo/pf-modal.html | 276 +--- elements/pf-modal/demo/pf-modal.js | 10 - elements/pf-modal/demo/styling.html | 56 + elements/pf-modal/demo/top-aligned.html | 56 + elements/pf-modal/demo/trigger-attribute.html | 60 + elements/pf-modal/demo/variants.html | 86 ++ elements/pf-modal/demo/warning-alert.html | 54 + elements/pf-panel/demo/bordered.html | 15 + elements/pf-panel/demo/demo.css | 7 - elements/pf-panel/demo/footer.html | 16 + elements/pf-panel/demo/header-and-footer.html | 17 + elements/pf-panel/demo/header.html | 16 + elements/pf-panel/demo/pf-panel.html | 152 +- elements/pf-panel/demo/pf-panel.js | 1 - elements/pf-panel/demo/raised.html | 15 + .../scrollable-with-header-and-footer.html | 56 + elements/pf-popover/demo/alert.html | 68 + elements/pf-popover/demo/content.html | 65 + elements/pf-popover/demo/demo.css | 47 - elements/pf-popover/demo/flip.html | 82 +- elements/pf-popover/demo/icons.html | 53 + elements/pf-popover/demo/pf-popover.html | 163 +- elements/pf-popover/demo/pf-popover.js | 26 - .../pf-progress-stepper/demo/alignment.html | 38 + .../pf-progress-stepper/demo/compact.html | 38 + .../demo/custom-icons.html | 18 + elements/pf-progress-stepper/demo/danger.html | 20 + elements/pf-progress-stepper/demo/demo.css | 10 - elements/pf-progress-stepper/demo/info.html | 37 + .../demo/pf-progress-stepper.html | 75 +- .../demo/pf-progress-stepper.js | 13 - .../demo/step-descriptions.html | 18 + .../pf-progress-stepper/pf-progress-step.ts | 6 +- elements/pf-progress/demo/demo.css | 6 - elements/pf-progress/demo/kitchen-sink.html | 3 + elements/pf-progress/demo/pf-progress.html | 8 +- elements/pf-progress/demo/pf-progress.js | 1 - .../demo/truncated-description.html | 22 +- elements/pf-spinner/demo/demo.css | 2 - elements/pf-spinner/demo/diameter.html | 15 + elements/pf-spinner/demo/pf-spinner.html | 24 +- elements/pf-spinner/demo/pf-spinner.js | 2 - elements/pf-spinner/demo/size.html | 18 + elements/pf-switch/demo/checked.html | 40 + elements/pf-switch/demo/demo.css | 32 - elements/pf-switch/demo/disabled.html | 44 + elements/pf-switch/demo/nested-in-label.html | 57 + elements/pf-switch/demo/pf-switch.html | 91 +- elements/pf-switch/demo/pf-switch.js | 13 - elements/pf-switch/demo/reversed.html | 41 + elements/pf-switch/demo/without-label.html | 39 + .../demo/expandable-rows-compound.html | 4 +- .../pf-tabs/demo/active-tab-is-disabled.html | 33 + elements/pf-tabs/demo/box.html | 92 ++ elements/pf-tabs/demo/demo.css | 62 - elements/pf-tabs/demo/filled-with-icons.html | 30 + elements/pf-tabs/demo/filled.html | 29 + elements/pf-tabs/demo/icons-and-text.html | 36 + elements/pf-tabs/demo/inset.html | 91 ++ elements/pf-tabs/demo/manual-activation.html | 34 + elements/pf-tabs/demo/overflow.html | 53 + elements/pf-tabs/demo/pf-tabs.html | 216 +-- elements/pf-tabs/demo/pf-tabs.js | 43 - .../pf-tabs/demo/tabs-first-in-markup.html | 33 + elements/pf-tabs/demo/vertical.html | 50 + elements/pf-tile/demo/demo.css | 59 - elements/pf-tile/demo/extra-content.html | 78 + elements/pf-tile/demo/icon.html | 33 + .../pf-tile/demo/keyboard-interaction.html | 47 + elements/pf-tile/demo/pf-tile.html | 143 +- elements/pf-tile/demo/pf-tile.js | 21 - elements/pf-tile/demo/stacked-icon.html | 32 + elements/pf-tile/demo/stacked-large-icon.html | 33 + elements/pf-tile/demo/subtext.html | 27 + elements/pf-timestamp/demo/basic-formats.html | 17 + elements/pf-timestamp/demo/custom-format.html | 23 + .../pf-timestamp/demo/custom-tooltip.html | 25 + elements/pf-timestamp/demo/pf-timestamp.html | 91 +- elements/pf-timestamp/demo/pf-timestamp.js | 3 - .../demo/relative-format-with-tooltip.html | 25 + .../pf-timestamp/demo/relative-format.html | 18 + elements/pf-timestamp/demo/tooltip.html | 25 + elements/pf-tooltip/demo/block-triggers.html | 60 + elements/pf-tooltip/demo/custom-styles.html | 60 + elements/pf-tooltip/demo/demo.css | 39 - elements/pf-tooltip/demo/flip.html | 49 +- elements/pf-tooltip/demo/performance.html | 73 +- elements/pf-tooltip/demo/performance.js | 45 - elements/pf-tooltip/demo/pf-tooltip.html | 112 +- elements/pf-tooltip/demo/pf-tooltip.js | 7 - elements/pf-tooltip/demo/placement.html | 70 + elements/pf-tooltip/demo/slotted-content.html | 42 + elements/pf-tooltip/demo/trigger.html | 13 +- elements/tsconfig.json | 2 - eleventy.config.cjs | 4 + package-lock.json | 1313 +++++++++++------ package.json | 34 +- scripts/icons.ts | 64 - tools/eslint-config/index.js | 4 +- tools/eslint-config/package.json | 12 +- tools/pfe-tools/11ty/DocsPage.ts | 179 +-- tools/pfe-tools/11ty/index.ts | 2 - .../11ty/plugins/custom-elements-manifest.cjs | 57 - tools/pfe-tools/dev-server/config.ts | 253 +--- tools/pfe-tools/dev-server/demo.ts | 1 - .../plugins/import-map-generator.ts | 113 ++ .../dev-server/plugins/pfe-dev-server.ts | 143 ++ .../{ => plugins/templates}/index.html | 21 +- tools/pfe-tools/environment.ts | 15 +- tools/pfe-tools/package.json | 19 +- tools/pfe-tools/test/config.ts | 67 +- tools/pfe-tools/test/create-fixture.ts | 47 +- tools/pfe-tools/test/react-wrapper.ts | 128 -- tools/pfe-tools/test/utils.ts | 3 - tools/pfe-tools/test/vue-wrapper.ts | 116 -- web-dev-server.config.js | 30 +- 234 files changed, 6881 insertions(+), 4802 deletions(-) create mode 100644 .changeset/eight-waves-join.md create mode 100644 .changeset/light-carrots-suffer.md create mode 100644 .changeset/little-singers-sell.md create mode 100644 .changeset/long-rings-burn.md create mode 100644 .changeset/odd-mice-stop.md create mode 100644 .changeset/olive-pens-create.md create mode 100644 .changeset/violet-wasps-obey.md delete mode 100644 core/pfe-core/functions/deprecatedCustomEvent.ts rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/attributes.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/band.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/css-custom-properties.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/css-shadow-parts.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/events.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/install.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/methods.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/overview.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/properties.njk (100%) rename {tools/pfe-tools/11ty/templates => docs/_includes/cem}/slots.njk (100%) create mode 100644 docs/_plugins/cem-render.cjs create mode 100644 elements/pf-accordion/demo/bordered.html create mode 100644 elements/pf-accordion/demo/content-attributes.html delete mode 100644 elements/pf-accordion/demo/demo.css create mode 100644 elements/pf-accordion/demo/fixed-panel.html create mode 100644 elements/pf-accordion/demo/nested.html delete mode 100644 elements/pf-accordion/demo/pf-accordion.js create mode 100644 elements/pf-accordion/demo/single-expanded-panel.html create mode 100644 elements/pf-avatar/demo/bordered.html create mode 100644 elements/pf-avatar/demo/dark-border.html create mode 100644 elements/pf-avatar/demo/dark-variant.html delete mode 100644 elements/pf-avatar/demo/demo.css delete mode 100644 elements/pf-avatar/demo/pf-avatar.js create mode 100644 elements/pf-avatar/demo/sizes.html delete mode 100644 elements/pf-badge/demo/demo.css delete mode 100644 elements/pf-badge/demo/pf-badge.js create mode 100644 elements/pf-badge/demo/read.html create mode 100644 elements/pf-badge/demo/threshold.html create mode 100644 elements/pf-badge/demo/unread.html create mode 100644 elements/pf-button/demo/block.html delete mode 100644 elements/pf-button/demo/demo.css delete mode 100644 elements/pf-button/demo/form-control.js delete mode 100644 elements/pf-button/demo/pf-button.js create mode 100644 elements/pf-button/demo/sizes.html create mode 100644 elements/pf-button/demo/stateful.html create mode 100644 elements/pf-button/demo/variants.html delete mode 100644 elements/pf-card/demo/demo.css delete mode 100644 elements/pf-card/demo/pf-card.js create mode 100644 elements/pf-card/demo/settings.html create mode 100644 elements/pf-clipboard-copy/demo/code.html delete mode 100644 elements/pf-clipboard-copy/demo/demo.css create mode 100644 elements/pf-clipboard-copy/demo/expandable.html create mode 100644 elements/pf-clipboard-copy/demo/inline-compact-code.html create mode 100644 elements/pf-clipboard-copy/demo/inline-compact.html delete mode 100644 elements/pf-clipboard-copy/demo/pf-clipboard-copy.js create mode 100644 elements/pf-clipboard-copy/demo/read-only-expandable.html create mode 100644 elements/pf-clipboard-copy/demo/read-only-expanded.html create mode 100644 elements/pf-clipboard-copy/demo/read-only.html delete mode 100644 elements/pf-code-block/demo/demo.css create mode 100644 elements/pf-code-block/demo/expandable.html create mode 100644 elements/pf-code-block/demo/expanded.html create mode 100644 elements/pf-code-block/demo/javascript-sample.html create mode 100644 elements/pf-code-block/demo/noscript.html delete mode 100644 elements/pf-code-block/demo/pf-code-block.js delete mode 100644 elements/pf-icon/demo/custom-icon-sets.js delete mode 100644 elements/pf-icon/demo/demo.css delete mode 100644 elements/pf-icon/demo/pf-icon.js create mode 100644 elements/pf-jump-links/demo/centered-list.html delete mode 100644 elements/pf-jump-links/demo/demo.css create mode 100644 elements/pf-jump-links/demo/expandable-vertical-with-subsection.html create mode 100644 elements/pf-jump-links/demo/label.html delete mode 100644 elements/pf-jump-links/demo/pf-jump-links.js delete mode 100644 elements/pf-jump-links/demo/scrollspy-with-subsections.css delete mode 100644 elements/pf-jump-links/demo/scrollspy-with-subsections.js create mode 100644 elements/pf-jump-links/demo/vertical-with-label.html create mode 100644 elements/pf-jump-links/demo/vertical.html create mode 100644 elements/pf-label/demo/compact.html delete mode 100644 elements/pf-label/demo/demo.css create mode 100644 elements/pf-label/demo/filled-color.html create mode 100644 elements/pf-label/demo/icon.html create mode 100644 elements/pf-label/demo/outline-color.html delete mode 100644 elements/pf-label/demo/pf-label.js create mode 100644 elements/pf-modal/demo/custom-header-footer.html create mode 100644 elements/pf-modal/demo/custom-icon.html delete mode 100644 elements/pf-modal/demo/demo.css create mode 100644 elements/pf-modal/demo/description.html create mode 100644 elements/pf-modal/demo/no-header.html create mode 100644 elements/pf-modal/demo/overflowing-content.html delete mode 100644 elements/pf-modal/demo/pf-modal.js create mode 100644 elements/pf-modal/demo/styling.html create mode 100644 elements/pf-modal/demo/top-aligned.html create mode 100644 elements/pf-modal/demo/trigger-attribute.html create mode 100644 elements/pf-modal/demo/variants.html create mode 100644 elements/pf-modal/demo/warning-alert.html create mode 100644 elements/pf-panel/demo/bordered.html delete mode 100644 elements/pf-panel/demo/demo.css create mode 100644 elements/pf-panel/demo/footer.html create mode 100644 elements/pf-panel/demo/header-and-footer.html create mode 100644 elements/pf-panel/demo/header.html delete mode 100644 elements/pf-panel/demo/pf-panel.js create mode 100644 elements/pf-panel/demo/raised.html create mode 100644 elements/pf-panel/demo/scrollable-with-header-and-footer.html create mode 100644 elements/pf-popover/demo/alert.html create mode 100644 elements/pf-popover/demo/content.html delete mode 100644 elements/pf-popover/demo/demo.css create mode 100644 elements/pf-popover/demo/icons.html delete mode 100644 elements/pf-popover/demo/pf-popover.js create mode 100644 elements/pf-progress-stepper/demo/alignment.html create mode 100644 elements/pf-progress-stepper/demo/compact.html create mode 100644 elements/pf-progress-stepper/demo/custom-icons.html create mode 100644 elements/pf-progress-stepper/demo/danger.html delete mode 100644 elements/pf-progress-stepper/demo/demo.css create mode 100644 elements/pf-progress-stepper/demo/info.html delete mode 100644 elements/pf-progress-stepper/demo/pf-progress-stepper.js create mode 100644 elements/pf-progress-stepper/demo/step-descriptions.html delete mode 100644 elements/pf-progress/demo/demo.css delete mode 100644 elements/pf-progress/demo/pf-progress.js delete mode 100644 elements/pf-spinner/demo/demo.css create mode 100644 elements/pf-spinner/demo/diameter.html delete mode 100644 elements/pf-spinner/demo/pf-spinner.js create mode 100644 elements/pf-spinner/demo/size.html create mode 100644 elements/pf-switch/demo/checked.html delete mode 100644 elements/pf-switch/demo/demo.css create mode 100644 elements/pf-switch/demo/disabled.html create mode 100644 elements/pf-switch/demo/nested-in-label.html delete mode 100644 elements/pf-switch/demo/pf-switch.js create mode 100644 elements/pf-switch/demo/reversed.html create mode 100644 elements/pf-switch/demo/without-label.html create mode 100644 elements/pf-tabs/demo/active-tab-is-disabled.html create mode 100644 elements/pf-tabs/demo/box.html delete mode 100644 elements/pf-tabs/demo/demo.css create mode 100644 elements/pf-tabs/demo/filled-with-icons.html create mode 100644 elements/pf-tabs/demo/filled.html create mode 100644 elements/pf-tabs/demo/icons-and-text.html create mode 100644 elements/pf-tabs/demo/inset.html create mode 100644 elements/pf-tabs/demo/manual-activation.html create mode 100644 elements/pf-tabs/demo/overflow.html delete mode 100644 elements/pf-tabs/demo/pf-tabs.js create mode 100644 elements/pf-tabs/demo/tabs-first-in-markup.html create mode 100644 elements/pf-tabs/demo/vertical.html delete mode 100644 elements/pf-tile/demo/demo.css create mode 100644 elements/pf-tile/demo/extra-content.html create mode 100644 elements/pf-tile/demo/icon.html create mode 100644 elements/pf-tile/demo/keyboard-interaction.html delete mode 100644 elements/pf-tile/demo/pf-tile.js create mode 100644 elements/pf-tile/demo/stacked-icon.html create mode 100644 elements/pf-tile/demo/stacked-large-icon.html create mode 100644 elements/pf-tile/demo/subtext.html create mode 100644 elements/pf-timestamp/demo/basic-formats.html create mode 100644 elements/pf-timestamp/demo/custom-format.html create mode 100644 elements/pf-timestamp/demo/custom-tooltip.html delete mode 100644 elements/pf-timestamp/demo/pf-timestamp.js create mode 100644 elements/pf-timestamp/demo/relative-format-with-tooltip.html create mode 100644 elements/pf-timestamp/demo/relative-format.html create mode 100644 elements/pf-timestamp/demo/tooltip.html create mode 100644 elements/pf-tooltip/demo/block-triggers.html create mode 100644 elements/pf-tooltip/demo/custom-styles.html delete mode 100644 elements/pf-tooltip/demo/demo.css delete mode 100644 elements/pf-tooltip/demo/performance.js delete mode 100644 elements/pf-tooltip/demo/pf-tooltip.js create mode 100644 elements/pf-tooltip/demo/placement.html create mode 100644 elements/pf-tooltip/demo/slotted-content.html delete mode 100644 scripts/icons.ts delete mode 100644 tools/pfe-tools/11ty/index.ts create mode 100644 tools/pfe-tools/dev-server/plugins/import-map-generator.ts create mode 100644 tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts rename tools/pfe-tools/dev-server/{ => plugins/templates}/index.html (92%) delete mode 100644 tools/pfe-tools/test/react-wrapper.ts delete mode 100644 tools/pfe-tools/test/vue-wrapper.ts diff --git a/.changeset/eight-waves-join.md b/.changeset/eight-waves-join.md new file mode 100644 index 0000000000..3c79f55e8a --- /dev/null +++ b/.changeset/eight-waves-join.md @@ -0,0 +1,4 @@ +--- +"@patternfly/elements": major +--- +Remove `/elements/pf-icon/icons/**/*`. Use `@patternfly/icons` instead. diff --git a/.changeset/light-carrots-suffer.md b/.changeset/light-carrots-suffer.md new file mode 100644 index 0000000000..732ab51fa2 --- /dev/null +++ b/.changeset/light-carrots-suffer.md @@ -0,0 +1,4 @@ +--- +"@patternfly/pfe-tools": major +--- +Remove `DocsPage` render functions diff --git a/.changeset/little-singers-sell.md b/.changeset/little-singers-sell.md new file mode 100644 index 0000000000..0f83a013af --- /dev/null +++ b/.changeset/little-singers-sell.md @@ -0,0 +1,4 @@ +--- +"@patternfly/elements": major +--- +``: use patternfly design tokens. removes `--accordion__bordered--Color` diff --git a/.changeset/long-rings-burn.md b/.changeset/long-rings-burn.md new file mode 100644 index 0000000000..bf5afd94cc --- /dev/null +++ b/.changeset/long-rings-burn.md @@ -0,0 +1,4 @@ +--- +"@patternfly/pfe-core": major +--- +Remove `deprecatedCustomEvent` diff --git a/.changeset/odd-mice-stop.md b/.changeset/odd-mice-stop.md new file mode 100644 index 0000000000..b6cc48d3d6 --- /dev/null +++ b/.changeset/odd-mice-stop.md @@ -0,0 +1,28 @@ +--- +"@patternfly/pfe-tools": major +--- +Dev server config no longer uses `nodeResolution`. Instead you must provide configuration for the import map plugin. + +```js +import { + pfeDevServerConfig, + getPatternflyIconNodemodulesImports, +} from '@patternfly/pfe-tools/dev-server/config.js'; + +export default pfeDevServerConfig({ + importMapOptions: { + providers: { + 'zero-md': 'nodemodules', + '@patternfly/icons': 'nodemodules', + '@patternfly/elements': 'nodemodules', + '@patternfly/pfe-tools': 'nodemodules', + '@patternfly/pfe-core': 'nodemodules', + }, + inputMap: { + imports: { + ...await getPatternflyIconNodemodulesImports(import.meta.url), + }, + }, + }, +}); +``` diff --git a/.changeset/olive-pens-create.md b/.changeset/olive-pens-create.md new file mode 100644 index 0000000000..c45c634edc --- /dev/null +++ b/.changeset/olive-pens-create.md @@ -0,0 +1,4 @@ +--- +"@patternfly/pfe-tools": major +--- +Remove react and vue test wrapper helpers. Use React wrapper components instead. diff --git a/.changeset/violet-wasps-obey.md b/.changeset/violet-wasps-obey.md new file mode 100644 index 0000000000..ba10edf35b --- /dev/null +++ b/.changeset/violet-wasps-obey.md @@ -0,0 +1,4 @@ +--- +"@patternfly/eslint-config-elements": patch +--- +Update ecmaVersion to 2022 diff --git a/.gitignore b/.gitignore index 7be9821d53..96e5fa5df9 100644 --- a/.gitignore +++ b/.gitignore @@ -65,7 +65,6 @@ tools/*/test/**/*.png !core/*/demo/* !tools/*/demo/* -elements/pf-icon/icons !elements/pf-icon/demo/icons/**/*.js !scripts/**/*.js diff --git a/brand/logo/svg/pfe-icon-white.svg b/brand/logo/svg/pfe-icon-white.svg index e41dfb71bb..d6fdd085c1 100644 --- a/brand/logo/svg/pfe-icon-white.svg +++ b/brand/logo/svg/pfe-icon-white.svg @@ -1 +1,7 @@ -PatternFly Elements Icon White \ No newline at end of file + + PatternFly Elements Icon White + + + + + diff --git a/core/pfe-core/functions/deprecatedCustomEvent.ts b/core/pfe-core/functions/deprecatedCustomEvent.ts deleted file mode 100644 index 61a0d32e05..0000000000 --- a/core/pfe-core/functions/deprecatedCustomEvent.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Construct a CustomEvent with the given name and detail. - * The event bubbles and is composed. - */ -export function deprecatedCustomEvent(name: string, detail?: T): CustomEvent { - return new CustomEvent(name, { - bubbles: true, - composed: true, - detail, - }); -} diff --git a/core/pfe-core/package.json b/core/pfe-core/package.json index 70b0af951b..d7909a215e 100644 --- a/core/pfe-core/package.json +++ b/core/pfe-core/package.json @@ -51,8 +51,8 @@ "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js" }, "dependencies": { - "@floating-ui/dom": "^1.5.3", - "lit": "^3.1.0" + "@floating-ui/dom": "^1.5.4", + "lit": "^3.1.1" }, "repository": { "type": "git", diff --git a/docs/_data/importMap.cjs b/docs/_data/importMap.cjs index 5a5d8a941e..9f9b0a34ad 100644 --- a/docs/_data/importMap.cjs +++ b/docs/_data/importMap.cjs @@ -109,5 +109,14 @@ module.exports = async function() { map.imports['@patternfly/pfe-tools/environment.js'] = '/tools/environment.js'; + // add imports for all icon files in /node_modules/@patternfly/icons/{far, fas, fab, patternfly}/ + const iconsImports = (await glob('./{far,fas,fab,patternfly}/*.js', { cwd: path.join(__dirname, '../../node_modules/@patternfly/icons') })) + .filter(x => !x.endsWith('.d.ts')) + .map(x => x); + + for (const icon of iconsImports) { + map.imports[`@patternfly/icons/${icon}`] = `/assets/@patternfly/icons/${icon}`; + } + return map; }; diff --git a/docs/_includes/_nav.njk b/docs/_includes/_nav.njk index d177d3ca43..4446f93151 100644 --- a/docs/_includes/_nav.njk +++ b/docs/_includes/_nav.njk @@ -6,8 +6,12 @@
- - PatternFly Elements + + PatternFly Elements diff --git a/tools/pfe-tools/11ty/templates/attributes.njk b/docs/_includes/cem/attributes.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/attributes.njk rename to docs/_includes/cem/attributes.njk diff --git a/tools/pfe-tools/11ty/templates/band.njk b/docs/_includes/cem/band.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/band.njk rename to docs/_includes/cem/band.njk diff --git a/tools/pfe-tools/11ty/templates/css-custom-properties.njk b/docs/_includes/cem/css-custom-properties.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/css-custom-properties.njk rename to docs/_includes/cem/css-custom-properties.njk diff --git a/tools/pfe-tools/11ty/templates/css-shadow-parts.njk b/docs/_includes/cem/css-shadow-parts.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/css-shadow-parts.njk rename to docs/_includes/cem/css-shadow-parts.njk diff --git a/tools/pfe-tools/11ty/templates/events.njk b/docs/_includes/cem/events.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/events.njk rename to docs/_includes/cem/events.njk diff --git a/tools/pfe-tools/11ty/templates/install.njk b/docs/_includes/cem/install.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/install.njk rename to docs/_includes/cem/install.njk diff --git a/tools/pfe-tools/11ty/templates/methods.njk b/docs/_includes/cem/methods.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/methods.njk rename to docs/_includes/cem/methods.njk diff --git a/tools/pfe-tools/11ty/templates/overview.njk b/docs/_includes/cem/overview.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/overview.njk rename to docs/_includes/cem/overview.njk diff --git a/tools/pfe-tools/11ty/templates/properties.njk b/docs/_includes/cem/properties.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/properties.njk rename to docs/_includes/cem/properties.njk diff --git a/tools/pfe-tools/11ty/templates/slots.njk b/docs/_includes/cem/slots.njk similarity index 100% rename from tools/pfe-tools/11ty/templates/slots.njk rename to docs/_includes/cem/slots.njk diff --git a/docs/_plugins/cem-render.cjs b/docs/_plugins/cem-render.cjs new file mode 100644 index 0000000000..dfe22f2563 --- /dev/null +++ b/docs/_plugins/cem-render.cjs @@ -0,0 +1,423 @@ +/** quick and dirty dedent, also provides in-editor syntax highlighting */ +const html = (...args) => + String.raw(...args) + .split('\n') + .map(x => x.replace(/^ {6}/, '')) + .join('\n'); + +/** @typedef {import('@patternfly/pfe-tools/11ty/DocsPage').DocsPage} DocsPage */ +module.exports = function(eleventyConfig) { + eleventyConfig.addPairedShortcode('renderCodeDocs', + function renderCodeDocs(content, kwargs = {}) { + const renderers = new Renderers(this, kwargs); + return renderers.renderAll(content); + } + ); +}; + +function innerMD(content = '') { + const trimmed = content.trim(); + return trimmed && `\n\n\n${trimmed}\n\n\n`; +} + +function mdHeading(content, length = 2) { + const hashes = Array.from({ length }, () => '#').join(''); + return innerMD(`${hashes} ${content}`); +} + +function type(content = '', { lang = 'ts' } = {}) { + return content.trim() && `\n\n\`\`\`${lang}\n${content.trim()}\n\n\`\`\`\n\n`; +} + +function stringifyParams(method) { + return method.parameters?.map?.(p => + `${p.name}: ${p.type?.text ?? 'unknown'}`).join(', ') ?? ''; +} + +function renderBand(content, { level } = {}) { + return html` +
+ ${mdHeading(content, { level })} + ${innerMD(content)} +
`; +} + +/** + * docs pages contain a #styling-hooks anchor as back compat for older versions of the page + * to prevent this id from rendering more than once, we track the number of times each page + * renders css custom properties. + */ +const cssStylingHookIdTracker = new WeakSet(); + +/** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */ +module.exports = function(eleventyConfig) { + eleventyConfig.addFilter('innerMD', innerMD); + eleventyConfig.addFilter('mdHeading', mdHeading); + eleventyConfig.addFilter('type', type); + eleventyConfig.addFilter('stringifyParams', stringifyParams); + eleventyConfig.addPairedShortcode('band', renderBand); + for (const shortCode of [ + 'renderAttributes', + 'renderCssCustomProperties', + 'renderCssParts', + 'renderEvents', + 'renderMethods', + 'renderOverview', + 'renderProperties', + 'renderInstallation', + 'renderSlots', + ]) { + eleventyConfig.addPairedShortcode(shortCode, function(content, kwargs) { + return Renderers.forPage(this)[shortCode](content, kwargs); + }); + } +}; + +class Renderers { + /** @type{WeakMap} */ + static renderers = new WeakMap(); + static forPage(page) { + return new Renderers(page); + } + + constructor(page) { + if (Renderers.renderers.has(page)) { + return Renderers.renderers.get(page); + } + /** + * NB: since the data for this shortcode is no a POJO, + * but a DocsPage instance, 11ty assigns it to this.ctx._ + * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93 + * @type {DocsPage} + */ + this.docsPage = page.ctx._; + this.manifest = this.docsPage.manifest; + Renderers.renderers.set(page, this); + } + + packageTagName(kwargs) { + if (kwargs.for && !kwargs.for.match(/@/)) { + return kwargs.for; + } else { + const [, tagName = this.tagName] = (kwargs?.for ?? '').match(/@[-\w]+\/(.*)/) ?? []; + return tagName ?? this.docsPage.tagName; + } + } + + /** Render the overview of a component page */ + renderOverview(content) { + return html` +
+

Overview

+
+ ${content} +
+
+ +
+

Installation

+ + ~~~shell + npm install ${this.manifest.packageJson.name} + ~~~ + +
`; + } + + /** Render the list of element attributes */ + renderAttributes(content, { header = 'Attributes', level = 2, ...kwargs } = {}) { + const _attrs = this.manifest.getAttributes(this.packageTagName(kwargs)) ?? []; + const deprecated = _attrs.filter(x => x.deprecated); + const attributes = _attrs.filter(x => !x.deprecated); + return html` +
+ ${mdHeading(header)}${!content && !attributes.length ? html` + None` : html` + ${innerMD(content)} +
${attributes?.map(attribute => html` +
${attribute.name}
+
+ ${innerMD(attribute.description)} +
${!attribute.fieldName ? '' : html` +
DOM Property
+
${attribute.fieldName}
`} +
Type
+
${type(attribute.type?.text ?? 'unknown')}
+
Default
+
${type(attribute.default ?? 'unknown')}
+
+
`).join('\n') ?? ''} +
`}${!deprecated.length ? '' : html` +
+ ${mdHeading(`Deprecated ${header}`, { level: level + 1 })} +
${deprecated.map(attribute => html` +
${attribute.name}
+
+ ${innerMD(attribute.description)} + Note: ${attribute.name} is deprecated. ${innerMD(attribute.deprecated)} +
${!attribute.fieldName ? '' : html` +
DOM Property
+
${attribute.fieldName}
`} +
Type
+
${innerMD(attribute.type?.text ?? 'unknown')}
+
Default
+
${innerMD(attribute.default ?? 'unknown')}
+
+
`).join('\n')} +
+
`} +
`; + } + + /** Render the list of element DOM properties */ + renderProperties(content, { header = 'DOM Properties', level = 2, ...kwargs } = {}) { + const allProperties = this.manifest.getProperties(this.packageTagName(kwargs)) ?? []; + const deprecated = allProperties.filter(x => x.deprecated); + const properties = allProperties.filter(x => !x.deprecated); + // TODO: inline code highlighting for type and default: render the markdown to html and extract the `` from the `
`
+    return html`
+      

+        ${mdHeading(header)}${!content && !properties.length ? html`
+        None` : html`
+        ${innerMD(content)}
+        
${properties.map(property => html`
+          
${property.name}

+          

+            ${innerMD(property.description)}
+            

+              
Type

+              
${type(property.type?.text ?? 'unknown')} 

+              
Default

+              
${type(property.default ?? 'unknown')} 

+            

+          
`).join('\n')}
+        
`}${!deprecated.length ? '' : html`
+        

+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
${deprecated.map(property => html`
+            
${property.name}

+            

+              ${innerMD(property.description)}
+              Note: ${property.name} is deprecated. ${innerMD(property.deprecated)}
+              

+                
Type

+                
${type(property.type?.text ?? 'unknown')}

+                
Default

+                
${type(property.default ?? 'unknown')}

+              

+            
`).join('\n')}
+          

+        
`}
+      
`;
+  }
+
+  /** Render a table of element CSS Custom Properties */
+  renderCssCustomProperties(content, { header = 'CSS Custom Properties', level = 2, ...kwargs } = {}) {
+    const allCssProperties = this.manifest.getCssCustomProperties(this.packageTagName(kwargs)) ?? [];
+    const cssProperties = allCssProperties.filter(x => !x.deprecated);
+    const deprecated = allCssProperties.filter(x => x.deprecated);
+    return html`
+      

+        ${mdHeading(header)}${!content && !cssProperties.length ? html`
+        None` : html`
+        ${innerMD(content)}
+        
+          
+            
+              
+              
+              
+            
+          
+          ${cssProperties.map(prop => html`
+            
+              
+              
+              
+            `).join('\n')}
+          
+        
CSS PropertyDescriptionDefault
${prop.name}${innerMD(prop.description ?? '')}${!prop.default?.startsWith('#') ? html`
+                ` : html`
+                `}
+                  ${prop.default ?? '—'}
+                
+              
`}${!deprecated.length ? '' : html`
+        

+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
+            
+              
+                
+                
+                
+              
+            
+            ${deprecated.map(prop => html`
+              
+                
+                
+                
+              `).join('\n')}
+            
+          
CSS PropertyDescriptionDefault
${prop.name}${innerMD(prop.description)}${innerMD(prop.default ?? '—')}

+        
`}
+      
`;
+  }
+
+  /** Render the list of element CSS Shadow Parts */
+  renderCssParts(content, { header = 'CSS Shadow Parts', level = 2, ...kwargs } = {}) {
+    const allParts = this.manifest.getCssParts(this.packageTagName(kwargs)) ?? [];
+    const parts = allParts.filter(x => !x.deprecated);
+    const deprecated = allParts.filter(x => x.deprecated);
+    return html`
+      

+        ${mdHeading(header)}${!content && !parts.length ? html`
+        None` : html`
+        ${innerMD(content)}
+        
${parts.map(part => html`
+          
${part.name}

+          
${innerMD(part.description)}
`).join('\n')}
+        
`}${!deprecated.length ? '' : html`
+        

+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
${deprecated.map(part => html`
+            
${part.name}

+            

+              ${innerMD(part.description)}
+              Note: ${part.name} is deprecated. ${innerMD(part.deprecated)}
+            
`).join('\n')}
+          

+        
`}
+      
`;
+  }
+
+  /** Render the list of events for the element */
+  renderEvents(content, { header = 'Events', level = 2, ...kwargs } = {}) {
+    const _events = this.manifest.getEvents(this.packageTagName(kwargs)) ?? [];
+    const deprecated = _events.filter(x => x.deprecated);
+    const events = _events.filter(x => !x.deprecated);
+    return html`
+      

+        ${mdHeading(header)}${!content && !events.length ? html`
+        None` : html`
+        ${innerMD(content)}
+        
${events.map(event => html`
+          
${event.name}

+          

+            ${innerMD(event.description)}
+            
+              Event Type: ${type(event.type?.text ?? 'unknown')}
+            
+          
`).join('\n')}
+        
`}${!deprecated.length ? '' : html`
+        

+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
${deprecated.map(event => html`
+            
${event.name}

+            

+              ${innerMD(event.description)}
+              Note: ${event.name} is deprecated. ${innerMD(event.deprecated)}
+              Event Type: ${type(event.type?.text ?? 'unknown')}
+            
`).join('\n')}
+          

+        
`}
+      
`;
+  }
+
+  /** Render the installation instructions for the element */
+  renderInstallation(content, { header = 'Installation', level = 2, tagName = this.docsPage.tagName } = {}) {
+    return html`
+      

+        
Installation

+
+      We recommend loading elements via a CDN such as [JSPM][inst-jspm] and
+      using an import map to manage your dependencies.
+
+      For more information on import maps and how to use them,
+      see the [import map reference on MDN Web Docs][inst-mdn].
+
+      If you are using node and NPM, you can install this component using npm:
+
+      ~~~shell
+      npm install ${this.manifest.packageJson.name}
+      ~~~
+
+      Then import this component into your project by using a
+      [bare module specifier][inst-bms]:
+
+      ~~~js
+      import '@patternfly/elements/${tagName}/${tagName}.js';
+      ~~~
+
+      **Please Note** You should either load elements via a CDN or
+      install them locally through NPM. *Do not do both.*
+
+      

+
+      [inst-jspm]: https://jspm.dev
+      [inst-mdn]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap/
+      [inst-bms]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules`;
+  }
+
+  /** Render the list of element methods */
+  renderMethods(content, { header = 'Methods', level = 2, ...kwargs } = {}) {
+    const allMethods = this.manifest.getMethods(this.packageTagName(kwargs)) ?? [];
+    const deprecated = allMethods.filter(x => x.deprecated);
+    const methods = allMethods.filter(x => !x.deprecated);
+    // TODO: inline code highlighting for type and default: render the markdown to html and extract the `` from the `
`
+    return html`
+      

+        ${mdHeading(header)}${!content && !methods.length ? html`
+        None` : html`
+        ${innerMD(content)}
+        
${methods.map(method => html`
+          
${method.name}(${stringifyParams(method)})

+          
${innerMD(method.description)}
`).join('\n')}
+        
`}${!deprecated.length ? '' : html`
+        

+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
${deprecated.map(method => html`
+            
${method.name}(${stringifyParams(method)})

+            

+              ${innerMD(method.description)}
+              Note: ${method.name} is deprecated. ${innerMD(method.deprecated)}
+            
`).join('\n')}
+          

+        
`}
+      
`;
+  }
+
+  /** Render the list of the element's slots */
+  renderSlots(content, { header = 'Slots', level = 2, ...kwargs } = {}) {
+    const allSlots = this.docsPage.manifest.getSlots(this.packageTagName(kwargs)) ?? [];
+    const slots = allSlots.filter(x => !x.deprecated);
+    const deprecated = allSlots.filter(x => x.deprecated);
+    return html`
+      

+        ${mdHeading(header)}${!content && !slots.length ? html`
+        None` : html`
+        ${innerMD(content)}
+        
${slots.map(slot => html`
+          
${slot.name ? html`
+            ${slot.name}` : html`
+            Default Slot`}
+          

+          
${innerMD(slot.description)}
`).join('\n')}
+        
`}${!deprecated.length ? '' : html`
+        

+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
${deprecated.map(slot => html`
+            
${slot.name ? html`
+              ${slot.name}` : html`
+              Default Slot`}
+            

+            

+              ${innerMD(slot.description)}
+              Note: ${slot.name} is deprecated. ${innerMD(slot.deprecated)}
+            
`).join('\n')}
+          

+        
`}
+      
`;
+  }
+}
diff --git a/docs/_plugins/pfe-assets.cjs b/docs/_plugins/pfe-assets.cjs
index b7657fbb27..7d4ec1e531 100644
--- a/docs/_plugins/pfe-assets.cjs
+++ b/docs/_plugins/pfe-assets.cjs
@@ -78,10 +78,12 @@ module.exports = {
     eleventyConfig.addPassthroughCopy({ 'elements/pfe.min.*': '/' } );
     eleventyConfig.addPassthroughCopy('docs/demo.{js,map,ts}');
     eleventyConfig.addPassthroughCopy('docs/main.mjs');
-    eleventyConfig.addPassthroughCopy({ 'elements/pf-icon/icons/': 'icons' });
     eleventyConfig.addPassthroughCopy({
       'node_modules/@rhds/elements': '/assets/@rhds'
     });
+    eleventyConfig.addPassthroughCopy({
+      'node_modules/@patternfly/icons/': '/assets/@patternfly/icons/'
+    });
     eleventyConfig.addPassthroughCopy('brand/**/*');
     const filesToCopy = getFilesToCopy(options);
 
diff --git a/docs/components/demos.html b/docs/components/demos.html
index ce35599c59..1f39a4d2c5 100644
--- a/docs/components/demos.html
+++ b/docs/components/demos.html
@@ -81,15 +81,7 @@
     
     
     
-    
+    
   
   
     

diff --git a/docs/images/pfe-logo-inverse-white.svg b/docs/images/pfe-logo-inverse-white.svg
index f22c4bc33c..15a24bde40 100755
--- a/docs/images/pfe-logo-inverse-white.svg
+++ b/docs/images/pfe-logo-inverse-white.svg
@@ -1,66 +1,4 @@
-
-
-
+
+  
 
+
diff --git a/docs/main.css b/docs/main.css
index d11fd8fb3b..7627728762 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -450,7 +450,6 @@ main.blog {
 
 .logo-flex-wrap > a > picture,
 .logo-flex-wrap > a > picture > img {
-  width: 100%;
   height: 100%;
 }
 
diff --git a/docs/main.mjs b/docs/main.mjs
index a7310c45e1..19b98059ba 100644
--- a/docs/main.mjs
+++ b/docs/main.mjs
@@ -1,7 +1,3 @@
-import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
 import '@rhds/elements/rh-footer/rh-global-footer.js';
 import 'element-internals-polyfill';
-
-// Workaround for bundled pf-icon: make icon imports absolute, instead of relative to the bundle
-PfIcon.getIconUrl = (set, icon) =>
-  new URL(`/components/icon/icons/${set}/${icon}.js`, import.meta.url);
+import '@patternfly/elements/pf-icon/pf-icon.js';
diff --git a/elements/package.json b/elements/package.json
index a5138b48f1..d61bc30173 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -33,7 +33,6 @@
     "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
     "./pf-icon/BaseIcon.js": "./pf-icon/BaseIcon.js",
     "./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
-    "./pf-icon/icons/*": "./pf-icon/icons/*",
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
     "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js",
     "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js",
@@ -133,7 +132,7 @@
   "dependencies": {
     "@patternfly/icons": "^1.0.2",
     "@patternfly/pfe-core": "^2.4.1",
-    "lit": "^3.1.0",
+    "lit": "^3.1.1",
     "tslib": "^2.6.2"
   }
 }
diff --git a/elements/pf-accordion/demo/bordered.html b/elements/pf-accordion/demo/bordered.html
new file mode 100644
index 0000000000..bad0d82148
--- /dev/null
+++ b/elements/pf-accordion/demo/bordered.html
@@ -0,0 +1,79 @@
+

+  

+    
Bordered

+    
+    
+    
+  
+
+  
+    
+      
Item one

+    
+    
+      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.

+    
+    
+      
Item two

+    
+    
+      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
+        faucibus erat id, maximus nunc.

+    
+    
+      
Item three

+    
+    
+      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

+    
+    
+      
Item four

+    
+    
+      

+        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae;
+        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Mauris
+        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
+        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
+        tincidunt
+        lectus, sit amet auctor eros.
+      

+      Call To Action
+    
+    
+      
Item five

+    
+    
+      
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

+    
+  
+
+
+
+
+
diff --git a/elements/pf-accordion/demo/content-attributes.html b/elements/pf-accordion/demo/content-attributes.html
new file mode 100644
index 0000000000..b8373ab1f8
--- /dev/null
+++ b/elements/pf-accordion/demo/content-attributes.html
@@ -0,0 +1,36 @@
+

+  
+    
+    
+    
+      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
+        faucibus erat id, maximus nunc.

+    
+    
+    
+    
+      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

+    
+    
+    
+    
+      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

+    
+    
+      
Level One - Item 4, Slotted (no shadow header)

+    
+    
+      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

+    
+  
+

+
+
+
+
diff --git a/elements/pf-accordion/demo/demo.css b/elements/pf-accordion/demo/demo.css
deleted file mode 100644
index 48c07ac581..0000000000
--- a/elements/pf-accordion/demo/demo.css
+++ /dev/null
@@ -1,9 +0,0 @@
-article {
-  margin-inline: 4em;
-}
-
-article header {
-  display: flex;
-  align-items: center;
-  gap: 1em;
-}
diff --git a/elements/pf-accordion/demo/fixed-panel.html b/elements/pf-accordion/demo/fixed-panel.html
new file mode 100644
index 0000000000..768c908a12
--- /dev/null
+++ b/elements/pf-accordion/demo/fixed-panel.html
@@ -0,0 +1,95 @@
+

+  
+    
+      
Item one

+    
+    
+      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.

+    
+    
+      
Item two

+    
+    
+      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
+        faucibus erat id, maximus nunc.

+    
+    
+      
Item three

+    
+    
+      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

+      Focus on me!
+    
+    
+      
Item four

+    
+    
+      

+        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae;
+        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Mauris
+        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
+        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
+        tincidunt
+        lectus, sit amet auctor eros.
+      

+      

+        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae;
+        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Mauris
+        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
+        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
+        tincidunt
+        lectus, sit amet auctor eros.
+      

+      

+        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae;
+        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Mauris
+        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
+        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
+        tincidunt
+        lectus, sit amet auctor eros.
+      

+      

+        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae;
+        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Mauris
+        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
+        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
+        tincidunt
+        lectus, sit amet auctor eros.
+      

+    
+    
+      
Item five

+    
+    
+      
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

+    
+  
+

+
+
+
+
diff --git a/elements/pf-accordion/demo/nested.html b/elements/pf-accordion/demo/nested.html
new file mode 100644
index 0000000000..f0e56bf5c2
--- /dev/null
+++ b/elements/pf-accordion/demo/nested.html
@@ -0,0 +1,121 @@
+

+  
Nested Accordion

+  
+    
+      
Level One - Item one (single attr: true)

+    
+    
+      
+        
+          
Level Two - Item one (single attr: true)

+        
+        
+          
+            
+              
Level Three - Item one (single attr: false)

+            
+            
+              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+                ultrices, faucibus erat id, maximus nunc.

+            
+            
+              
Level Three - Item Two

+            
+            
+              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+                ultrices, faucibus erat id, maximus nunc.

+            
+            
+              
Level Three - Item Three

+            
+            
+              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+                ultrices, faucibus erat id, maximus nunc.

+            
+          
+        
+        
+          
Level Two - Item Two

+        
+        
+          
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.

+        
+        
+          
Level Two - Item Three

+        
+        
+          
+            
+              
Level Three - Item one (single attr: true)

+            
+            
+              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+                ultrices, faucibus erat id, maximus nunc.

+            
+            
+              
Level Three - Item Two

+            
+            
+              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+                ultrices, faucibus erat id, maximus nunc.

+            
+            
+              
Level Three - Item Three

+            
+            
+              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+                ultrices, faucibus erat id, maximus nunc.

+            
+          
+        
+      
+    
+    
+      
Level One - Item two

+    
+    
+      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
+        faucibus erat id, maximus nunc.

+    
+    
+      
Level One - Item three

+    
+    
+      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

+    
+    
+      
Level One - Item four

+    
+    
+      

+        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae;
+        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Mauris
+        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
+        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
+        tincidunt
+        lectus, sit amet auctor eros.
+      

+    
+    
+      
Level One - Item five

+    
+    
+      
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

+    
+  
+

+
+
+
+
diff --git a/elements/pf-accordion/demo/pf-accordion.html b/elements/pf-accordion/demo/pf-accordion.html
index cf82f058cb..dc76ddd6c0 100644
--- a/elements/pf-accordion/demo/pf-accordion.html
+++ b/elements/pf-accordion/demo/pf-accordion.html
@@ -1,9 +1,5 @@
-
-
-
 

-  
Single Expanded Panel

-  
+  
     
       
Level One - Item one

     
@@ -50,287 +46,15 @@ 
Level One - Item five

   
 

 
-
-

-  
Fixed Panel

-  
-    
-      
Item one

-    
-    
-      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua.

-    
-    
-      
Item two

-    
-    
-      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
-        faucibus erat id, maximus nunc.

-    
-    
-      
Item three

-    
-    
-      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

-      Focus on me!
-    
-    
-      
Item four

-    
-    
-      

-        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae;
-        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
-        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        Mauris
-        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
-        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
-        tincidunt
-        lectus, sit amet auctor eros.
-      

-      

-        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae;
-        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
-        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        Mauris
-        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
-        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
-        tincidunt
-        lectus, sit amet auctor eros.
-      

-      

-        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae;
-        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
-        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        Mauris
-        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
-        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
-        tincidunt
-        lectus, sit amet auctor eros.
-      

-      

-        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae;
-        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
-        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        Mauris
-        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
-        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
-        tincidunt
-        lectus, sit amet auctor eros.
-      

-    
-    
-      
Item five

-    
-    
-      
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

-    
-  
-

+
 
 
-

-  

-    
Bordered

-    
-    
-    
-  

+
 
-  
-    
-      
Item one

-    
-    
-      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua.

-    
-    
-      
Item two

-    
-    
-      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
-        faucibus erat id, maximus nunc.

-    
-    
-      
Item three

-    
-    
-      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

-    
-    
-      
Item four

-    
-    
-      

-        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae;
-        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
-        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        Mauris
-        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
-        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
-        tincidunt
-        lectus, sit amet auctor eros.
-      

-      Call To Action
-    
-    
-      
Item five

-    
-    
-      
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

-    
-  
-

-
-

-  
Nested Accordion

-  
-    
-      
Level One - Item one (single attr: true)

-    
-    
-      
-        
-          
Level Two - Item one (single attr: true)

-        
-        
-          
-            
-              
Level Three - Item one (single attr: false)

-            
-            
-              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                ultrices, faucibus erat id, maximus nunc.

-            
-            
-              
Level Three - Item Two

-            
-            
-              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                ultrices, faucibus erat id, maximus nunc.

-            
-            
-              
Level Three - Item Three

-            
-            
-              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                ultrices, faucibus erat id, maximus nunc.

-            
-          
-        
-        
-          
Level Two - Item Two

-        
-        
-          
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-            ultrices, faucibus erat id, maximus nunc.

-        
-        
-          
Level Two - Item Three

-        
-        
-          
-            
-              
Level Three - Item one (single attr: true)

-            
-            
-              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                ultrices, faucibus erat id, maximus nunc.

-            
-            
-              
Level Three - Item Two

-            
-            
-              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                ultrices, faucibus erat id, maximus nunc.

-            
-            
-              
Level Three - Item Three

-            
-            
-              
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                ultrices, faucibus erat id, maximus nunc.

-            
-          
-        
-      
-    
-    
-      
Level One - Item two

-    
-    
-      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
-        faucibus erat id, maximus nunc.

-    
-    
-      
Level One - Item three

-    
-    
-      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

-    
-    
-      
Level One - Item four

-    
-    
-      

-        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae;
-        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
-        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        Mauris
-        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
-        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
-        tincidunt
-        lectus, sit amet auctor eros.
-      

-    
-    
-      
Level One - Item five

-    
-    
-      
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

-    
-  
-

-
-

-  
Accordion with attribute headers

-
-  
-    
-    
-    
-      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
-        faucibus erat id, maximus nunc.

-    
-    
-    
-    
-      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

-    
-    
-    
-    
-      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

-    
-    
-      
Level One - Item 4, Slotted (no shadow header)

-    
-    
-      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

-    
-  
-

+
diff --git a/elements/pf-accordion/demo/pf-accordion.js b/elements/pf-accordion/demo/pf-accordion.js
deleted file mode 100644
index b4551cf6f5..0000000000
--- a/elements/pf-accordion/demo/pf-accordion.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import '@patternfly/elements/pf-accordion/pf-accordion.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-
-const bordered = document.getElementById('bordered-example');
-const isLarge = document.getElementById('toggle-size');
-
-isLarge.addEventListener('change', function() {
-  bordered.toggleAttribute('large', isLarge.checked);
-});
diff --git a/elements/pf-accordion/demo/single-expanded-panel.html b/elements/pf-accordion/demo/single-expanded-panel.html
new file mode 100644
index 0000000000..164fa17229
--- /dev/null
+++ b/elements/pf-accordion/demo/single-expanded-panel.html
@@ -0,0 +1,58 @@
+

+  
+    
+      
Level One - Item one

+    
+    
+      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.

+    
+    
+      
Level One - Item two

+    
+    
+      
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
+        faucibus erat id, maximus nunc.

+    
+    
+      
Level One - Item three

+    
+    
+      
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

+    
+    
+      
Level One - Item four

+    
+    
+      

+        Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+        sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae;
+        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Mauris
+        et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
+        erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed
+        tincidunt
+        lectus, sit amet auctor eros.
+      

+    
+    
+      
Level One - Item five

+    
+    
+      
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

+    
+  
+

+
+
+
+
+
diff --git a/elements/pf-accordion/docs/pf-accordion.md b/elements/pf-accordion/docs/pf-accordion.md
index fd4ee9fcbc..12d7f530eb 100644
--- a/elements/pf-accordion/docs/pf-accordion.md
+++ b/elements/pf-accordion/docs/pf-accordion.md
@@ -1,6 +1,7 @@
 {% renderInstallation %} {% endrenderInstallation %}
 
 {% renderOverview %}
+
 
   
     
Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

@@ -29,10 +30,12 @@
     Call to action
   
 
+
 {% endrenderOverview %}
 
 {% band header="Usage" %}
   {% htmlexample %}
+
   
     
       
Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

@@ -61,8 +64,8 @@
       Call to action
     
   
-  {% endhtmlexample %}
 
+  {% endhtmlexample %}
 {% endband %}
 
 {% renderSlots %}
diff --git a/elements/pf-accordion/pf-accordion.css b/elements/pf-accordion/pf-accordion.css
index 9c8f67c623..e97465c809 100644
--- a/elements/pf-accordion/pf-accordion.css
+++ b/elements/pf-accordion/pf-accordion.css
@@ -1,8 +1,68 @@
 :host {
-  --accordion__bordered--Color: var(--rh-color-black-300, #d2d2d2);
-
-  color: var(--pf-global--Color--100, #151515);
-  background-color: var(--pf-global--BackgroundColor--100, #ffffff);
+	--pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion__toggle--before--BackgroundColor: transparent;
+	--pf-c-accordion__toggle--before--Top: 0;
+	--pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	--pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	--pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	--pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+	--pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	--pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+	--pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	--pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	--pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	--pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+	--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
+	--pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	--pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
+	--pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
+	--pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
+	--pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+	--pf-c-accordion__expanded-content-body--before--Top: 0;
+	--pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+	--pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+	--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
+	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	--pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));
+	--pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
+	--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	color: var(--pf-global--Color--100, #151515);
+	background-color: var(--pf-c-accordion--BackgroundColor);
 }
 
 :host([bordered]) ::slotted(pf-accordion-header:first-child),
diff --git a/elements/pf-accordion/pf-accordion.ts b/elements/pf-accordion/pf-accordion.ts
index dbdb92cdd7..7918318867 100644
--- a/elements/pf-accordion/pf-accordion.ts
+++ b/elements/pf-accordion/pf-accordion.ts
@@ -22,9 +22,68 @@ import style from './pf-accordion.css';
  * @slot
  *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.
  *
- * @cssproperty {} --accordion__bordered--Color
- *              Color for the borders between accordion headers when using bordered or large attributes
- *              {@default `var(--rh-color-black-300, #d2d2d2)`}
+ * @cssprop --pf-c-accordion--BackgroundColor {@default var(--pf-global--BackgroundColor--100, #fff)}
+ * @cssprop --pf-c-accordion__toggle--PaddingTop {@default var(--pf-global--spacer--sm, 0.5rem)}
+ * @cssprop --pf-c-accordion__toggle--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion__toggle--PaddingBottom {@default var(--pf-global--spacer--sm, 0.5rem)}
+ * @cssprop --pf-c-accordion__toggle--PaddingLeft {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion__toggle--before--BackgroundColor {@default transparent}
+ * @cssprop --pf-c-accordion__toggle--before--Top {@default 0}
+ * @cssprop --pf-c-accordion__toggle--hover--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}
+ * @cssprop --pf-c-accordion__toggle--focus--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}
+ * @cssprop --pf-c-accordion__toggle--active--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}
+ * @cssprop --pf-c-accordion__toggle--before--Width {@default var(--pf-global--BorderWidth--lg, 3px)}
+ * @cssprop --pf-c-accordion__toggle--m-expanded--before--BackgroundColor {@default var(--pf-global--primary-color--100, #06c)}
+ * @cssprop --pf-c-accordion__toggle-text--MaxWidth {@default calc(100% - var(--pf-global--spacer--lg, 1.5rem))}
+ * @cssprop --pf-c-accordion__toggle--hover__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
+ * @cssprop --pf-c-accordion__toggle--active__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
+ * @cssprop --pf-c-accordion__toggle--active__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}
+ * @cssprop --pf-c-accordion__toggle--focus__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
+ * @cssprop --pf-c-accordion__toggle--focus__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}
+ * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
+ * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}
+ * @cssprop --pf-c-accordion__toggle-icon--Transition {@default .2s ease-in 0s}
+ * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate {@default 90deg}
+ * @cssprop --pf-c-accordion__expanded-content--Color {@default var(--pf-global--Color--200, #6a6e73)}
+ * @cssprop --pf-c-accordion__expanded-content--FontSize {@default var(--pf-global--FontSize--sm, 0.875rem)}
+ * @cssprop --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor {@default var(--pf-global--primary-color--100, #06c)}
+ * @cssprop --pf-c-accordion__expanded-content--m-fixed--MaxHeight {@default 9.375rem}
+ * @cssprop --pf-c-accordion__expanded-content-body--PaddingTop {@default var(--pf-global--spacer--sm, 0.5rem)}
+ * @cssprop --pf-c-accordion__expanded-content-body--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion__expanded-content-body--PaddingBottom {@default var(--pf-global--spacer--sm, 0.5rem)}
+ * @cssprop --pf-c-accordion__expanded-content-body--PaddingLeft {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop {@default 0}
+ * @cssprop --pf-c-accordion__expanded-content-body--before--BackgroundColor {@default transparent}
+ * @cssprop --pf-c-accordion__expanded-content-body--before--Width {@default var(--pf-global--BorderWidth--lg, 3px)}
+ * @cssprop --pf-c-accordion__expanded-content-body--before--Top {@default 0}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingTop {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingBottom {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingLeft {@default var(--pf-global--spacer--lg, 1.5rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--FontFamily {@default var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--FontSize {@default var(--pf-global--FontSize--xl, 1.25rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
+ * @cssprop --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}
+ * @cssprop --pf-c-accordion--m-display-lg__expanded-content--FontSize {@default var(--pf-global--FontSize--md, 1rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__expanded-content--Color {@default var(--pf-global--Color--100, #151515)}
+ * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop {@default 0}
+ * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom {@default var(--pf-global--spacer--md, 1rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom {@default var(--pf-global--spacer--lg, 1.5rem)}
+ * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft {@default var(--pf-global--spacer--lg, 1.5rem)}
+ * @cssprop --pf-c-accordion--m-bordered--BorderTopWidth {@default var(--pf-global--BorderWidth--sm, 1px)}
+ * @cssprop --pf-c-accordion--m-bordered--BorderTopColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}
+ * @cssprop --pf-c-accordion--m-bordered__toggle--before--Top {@default calc(-1 * var(--pf-global--BorderWidth--sm, 1px))}
+ * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}
+ * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth {@default 0}
+ * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth {@default var(--pf-global--BorderWidth--sm, 1px)}
+ * @cssprop --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth {@default var(--pf-global--BorderWidth--sm, 1px)}
+ * @cssprop --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}
  */
 @customElement('pf-accordion')
 export class PfAccordion extends BaseAccordion {
diff --git a/elements/pf-avatar/demo/bordered.html b/elements/pf-avatar/demo/bordered.html
new file mode 100644
index 0000000000..3fa3537d49
--- /dev/null
+++ b/elements/pf-avatar/demo/bordered.html
@@ -0,0 +1,50 @@
+

+  

+    
Small

+    

+      
+    

+  

+
+  

+    
Medium

+    

+      
+    

+  

+
+  

+    
Large

+    

+      
+    

+  

+
+  

+    
Extra Large

+    

+      
+    

+  

+

+
+
+
+
+
diff --git a/elements/pf-avatar/demo/dark-border.html b/elements/pf-avatar/demo/dark-border.html
new file mode 100644
index 0000000000..1303f72925
--- /dev/null
+++ b/elements/pf-avatar/demo/dark-border.html
@@ -0,0 +1,49 @@
+

+  

+    
Small

+    

+      
+    

+  

+
+  

+    
Medium

+    

+      
+    

+  

+
+  

+    
Large

+    

+      
+    

+  

+
+  

+    
Extra Large

+    

+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-avatar/demo/dark-variant.html b/elements/pf-avatar/demo/dark-variant.html
new file mode 100644
index 0000000000..f689e176c3
--- /dev/null
+++ b/elements/pf-avatar/demo/dark-variant.html
@@ -0,0 +1,69 @@
+

+  

+    
Small

+    

+      
+    

+  

+
+  

+    
Medium

+    

+      
+    

+  

+
+  

+    
Large

+    

+      
+    

+  

+
+  

+    
Extra Large

+    

+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-avatar/demo/demo.css b/elements/pf-avatar/demo/demo.css
deleted file mode 100644
index 684ad3c4c9..0000000000
--- a/elements/pf-avatar/demo/demo.css
+++ /dev/null
@@ -1,18 +0,0 @@
-section {
-  padding: 64px 48px;
-}
-
-dl {
-  display: flex;
-  gap: 1em;
-}
-
-dl > div {
-  display: flex;
-  gap: 1em;
-  flex-flow: column;
-}
-
-dd {
-  margin: 0;
-}
diff --git a/elements/pf-avatar/demo/pf-avatar.html b/elements/pf-avatar/demo/pf-avatar.html
index ca93e59de2..bb29db1674 100644
--- a/elements/pf-avatar/demo/pf-avatar.html
+++ b/elements/pf-avatar/demo/pf-avatar.html
@@ -1,159 +1,13 @@
-
-
-
 

-  
Basic

   
 

 
-

-  
Sizes

-  

-    

-      
Small

-      

-        
-      

-    

-
-    

-      
Medium

-      

-        
-      

-    

-
-    

-      
Large

-      

-        
-      

-    

-
-    

-      
Extra Large

-      

-        
-      

-    

-  

-

-
-

-  
Bordered

-  

-    

-      
Small

-      

-        
-      

-    

-
-    

-      
Medium

-      

-        
-      

-    

-
-    

-      
Large

-      

-        
-      

-    

-
-    

-      
Extra Large

-      

-        
-      

-    

-  

-

+
 
-

-  
Dark Border

-  

-    

-      
Small

-      

-        
-      

-    

-
-    

-      
Medium

-      

-        
-      

-    

-
-    

-      
Large

-      

-        
-      

-    

-
-    

-      
Extra Large

-      

-        
-      

-    

-  

-

-
-

-  
Dark variant image

-  

-    

-      
Small

-      

-        
-      

-    

-
-    

-      
Medium

-      

-        
-      

-    

-
-    

-      
Large

-      

-        
-      

-    

-
-    

-      
Extra Large

-      

-        
-      

-    

-  

-

+
diff --git a/elements/pf-avatar/demo/pf-avatar.js b/elements/pf-avatar/demo/pf-avatar.js
deleted file mode 100644
index 6c20425624..0000000000
--- a/elements/pf-avatar/demo/pf-avatar.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@patternfly/elements/pf-avatar/pf-avatar.js';
diff --git a/elements/pf-avatar/demo/sizes.html b/elements/pf-avatar/demo/sizes.html
new file mode 100644
index 0000000000..c4ba4bde5c
--- /dev/null
+++ b/elements/pf-avatar/demo/sizes.html
@@ -0,0 +1,49 @@
+

+  

+    
Small

+    

+      
+    

+  

+
+  

+    
Medium

+    

+      
+    

+  

+
+  

+    
Large

+    

+      
+    

+  

+
+  

+    
Extra Large

+    

+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-badge/demo/demo.css b/elements/pf-badge/demo/demo.css
deleted file mode 100644
index 48d1b08fbc..0000000000
--- a/elements/pf-badge/demo/demo.css
+++ /dev/null
@@ -1,9 +0,0 @@
-:host {
-  display: grid;
-  gap: 1em; 
-}
-
-section {
-  padding: 2em;
-}
-
diff --git a/elements/pf-badge/demo/pf-badge.html b/elements/pf-badge/demo/pf-badge.html
index 9582fa9e21..be27b50dbb 100644
--- a/elements/pf-badge/demo/pf-badge.html
+++ b/elements/pf-badge/demo/pf-badge.html
@@ -1,24 +1,12 @@
-
-
-
 

-  
pf-badge

-  
State: Read

-  7
-  24
-  240
-  999
-
-  
State: Unread

-  7
-  24
-  240
-  999
-
-  
should add '+' sign if the value exceeds the threshold

-  900
-
-  
shouldn't add a '+' sign if the value doesn't exceed the threshold

-  900
+  613
 

 
+
+
diff --git a/elements/pf-badge/demo/pf-badge.js b/elements/pf-badge/demo/pf-badge.js
deleted file mode 100644
index 98c30e4525..0000000000
--- a/elements/pf-badge/demo/pf-badge.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import '@patternfly/elements/pf-badge/pf-badge.js';
-
-for (const el of document.querySelectorAll('pf-badge')) {
-  const code = el.closest('section')?.querySelector?.('code');
-  if (code) {
-    code.textContent = el.outerHTML;
-  }
-}
diff --git a/elements/pf-badge/demo/read.html b/elements/pf-badge/demo/read.html
new file mode 100644
index 0000000000..92a7897db3
--- /dev/null
+++ b/elements/pf-badge/demo/read.html
@@ -0,0 +1,15 @@
+

+  7
+  24
+  240
+  999
+

+
+
+
diff --git a/elements/pf-badge/demo/threshold.html b/elements/pf-badge/demo/threshold.html
new file mode 100644
index 0000000000..03b0eb7a5a
--- /dev/null
+++ b/elements/pf-badge/demo/threshold.html
@@ -0,0 +1,16 @@
+

+  400
+  900
+  
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

+

+
+
+
diff --git a/elements/pf-badge/demo/unread.html b/elements/pf-badge/demo/unread.html
new file mode 100644
index 0000000000..97d0f734ca
--- /dev/null
+++ b/elements/pf-badge/demo/unread.html
@@ -0,0 +1,15 @@
+

+  7
+  24
+  240
+  999
+

+
+
+
diff --git a/elements/pf-banner/demo/status-banners.html b/elements/pf-banner/demo/status-banners.html
index 88765067de..76ad1aae57 100644
--- a/elements/pf-banner/demo/status-banners.html
+++ b/elements/pf-banner/demo/status-banners.html
@@ -28,12 +28,13 @@
   Warning Banner
 
 
-
-
 
+
+
diff --git a/elements/pf-button/demo/block.html b/elements/pf-button/demo/block.html
new file mode 100644
index 0000000000..55b8fdf1c2
--- /dev/null
+++ b/elements/pf-button/demo/block.html
@@ -0,0 +1,17 @@
+

+  Block level button
+

+
+
+
diff --git a/elements/pf-button/demo/demo.css b/elements/pf-button/demo/demo.css
deleted file mode 100644
index 334ced1370..0000000000
--- a/elements/pf-button/demo/demo.css
+++ /dev/null
@@ -1,11 +0,0 @@
-[data-demo=pf-button] {
-  padding-inline: 1em;
-}
-
-section > :not(pf-button) {
-  width: 100%;
-}
-
-pf-button[loading] svg {
-  width: 0px;
-}
diff --git a/elements/pf-button/demo/form-control.html b/elements/pf-button/demo/form-control.html
index a174296ca6..1202f27a4b 100644
--- a/elements/pf-button/demo/form-control.html
+++ b/elements/pf-button/demo/form-control.html
@@ -1,5 +1,3 @@
-
-
 

   
Nothing disabled

   

@@ -35,3 +33,27 @@ 
Both disabled

   
   
 
+
+
+
+
diff --git a/elements/pf-button/demo/form-control.js b/elements/pf-button/demo/form-control.js
deleted file mode 100644
index 530690559e..0000000000
--- a/elements/pf-button/demo/form-control.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-
-for (const form of document.querySelectorAll('form')) {
-  form.addEventListener('submit', e=>e.preventDefault());
-  form.addEventListener('change', sync);
-  sync.call(form);
-}
-
-/** @this{HTMLFormElement}*/
-function sync() {
-  this.querySelector('fieldset').disabled = this.fieldset.checked;
-  this.querySelector('pf-button').disabled = this.button.checked;
-}
diff --git a/elements/pf-button/demo/pf-button.html b/elements/pf-button/demo/pf-button.html
index 9b6d521687..a9873d3254 100644
--- a/elements/pf-button/demo/pf-button.html
+++ b/elements/pf-button/demo/pf-button.html
@@ -1,106 +1,17 @@
-
-
-
 

-  
Variant examples

-
-  
PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the variant property.

-
   Primary
-  Secondary
-  Danger Secondary
-  Tertiary
-  Danger
-  Warning
-
-  
Link variant

-  Link
-  Link
-  Inline Link
-  Danger Link
-
-  
Plain button

-  
-    
-      
-    
-  
-
-  
Control variant

-  Control
-  
-    
-      
-    
-  
-  

-    Note: when using <pf-button> as an icon-button,
-    <pf-button> must have the label attribute.
-  

 

 
-

-  
Disabled

-  Primary disabled
-  Secondary disabled
-  Danger secondary disabled
-  Tertiary disabled
-  Danger disabled
-  Warning disabled
-
-  
Link variant

-  Link disabled
-  Link disabled
-  Inline link disabled
-  Danger link disabled
-
-  
Plain button

-  
-    
-      
-    
-  
-
-  
Control variant

-  Control disabled
-  
-    
-      
-    
-  
-

-
-

-  
Block level

-  Block level button
-

-
-

-  
Sizes

-  Primary small
-  Secondary small
-  Danger secondary small
-  Tertiary small
-  Danger small
-  Warning small
-
-  Primary large
-  Secondary large
-  Danger secondary large
-  Tertiary large
-  Danger large
-  Warning large
-

-
-

-  
Progress

-  
Stateful buttons have a loading indicator

-  Resume loading logs
-  
-  Click to start loading
-  
-    
-      
-    
-  
-

+
+
+
diff --git a/elements/pf-button/demo/pf-button.js b/elements/pf-button/demo/pf-button.js
deleted file mode 100644
index 82cb50e624..0000000000
--- a/elements/pf-button/demo/pf-button.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-spinner/pf-spinner.js';
-
-const logsBtn = document.getElementById('loading-logs');
-const loadBtn = document.getElementById('loading-scdr');
-const iconBtn = document.getElementById('loading-icon');
-
-logsBtn.addEventListener('click', () => {
-  logsBtn.loading = !logsBtn.loading;
-  logsBtn.textContent =
-    logsBtn.loading ? 'Pause loading logs' : 'Resume loading logs';
-});
-
-loadBtn.addEventListener('click', () => {
-  loadBtn.loading = !loadBtn.loading;
-  loadBtn.textContent =
-    loadBtn.loading ? 'Click to stop loading' : 'Click to start loading';
-});
-
-iconBtn.addEventListener('click', () => {
-  iconBtn.loading = !iconBtn.loading;
-});
-
-for (const button of document.querySelectorAll('pf-button')) {
-  // eslint-disable-next-line no-console
-  button.addEventListener('click', console.log);
-}
diff --git a/elements/pf-button/demo/sizes.html b/elements/pf-button/demo/sizes.html
new file mode 100644
index 0000000000..42c5fdfd56
--- /dev/null
+++ b/elements/pf-button/demo/sizes.html
@@ -0,0 +1,29 @@
+

+  Primary small
+  Secondary small
+  Danger secondary small
+  Tertiary small
+  Danger small
+  Warning small
+
+  Primary large
+  Secondary large
+  Danger secondary large
+  Tertiary large
+  Danger large
+  Warning large
+

+
+
+
diff --git a/elements/pf-button/demo/stateful.html b/elements/pf-button/demo/stateful.html
new file mode 100644
index 0000000000..f44ec3222d
--- /dev/null
+++ b/elements/pf-button/demo/stateful.html
@@ -0,0 +1,50 @@
+

+  
Stateful buttons have a loading indicator

+  Resume loading logs
+  
+  Click to start loading
+  
+    
+      
+    
+  
+

+
+
+
diff --git a/elements/pf-button/demo/variants.html b/elements/pf-button/demo/variants.html
new file mode 100644
index 0000000000..dc11997be0
--- /dev/null
+++ b/elements/pf-button/demo/variants.html
@@ -0,0 +1,101 @@
+

+  
PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the variant property.

+
+  Primary
+  Secondary
+  Danger Secondary
+  Tertiary
+  Danger
+  Warning
+
+  
Disabled

+  Primary
+  Secondary
+  Danger Secondary
+  Tertiary
+  Danger
+  Warning
+

+
+

+  
Link variant

+  Link
+  Link
+  Inline Link
+  Danger Link
+
+  
Disabled

+  Link
+  Link
+  Inline Link
+  Danger Link
+

+
+

+  
Plain button

+  
+    
+      
+    
+  
+
+  
Disabled

+  
+    
+      
+    
+  
+

+
+

+  
Control variant

+  Control
+  
+    
+      
+    
+  
+
+  
Disabled

+  Control
+  
+    
+      
+    
+  
+
+  

+    Note: when using <pf-button> as an icon-button,
+    <pf-button> must have the label attribute.
+  

+

+
+
+
+
diff --git a/elements/pf-card/demo/demo.css b/elements/pf-card/demo/demo.css
deleted file mode 100644
index 591561210a..0000000000
--- a/elements/pf-card/demo/demo.css
+++ /dev/null
@@ -1,44 +0,0 @@
-[data-demo] {
-  display: contents;
-}
-
-main {
-  padding: 2em;
-  background: #eeeeee;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
-}
-
-@media (min-width: 800px) {
-  main {
-    grid-template-columns: 1fr 4fr;
-    grid-template-rows: 1fr;
-  }
-}
-
-form {
-  display: grid;
-  grid-template-columns: max-content auto;
-  grid-auto-rows: max-content;
-  gap: 1em;
-}
-
-pf-card {
-  max-width: 50%;
-  margin: 0 auto;
-}
-
-.resize {
-  padding: 2em;
-  resize: vertical;
-  overflow: auto;
-  min-height: 40vh;
-  background: repeating-linear-gradient(
-    45deg,
-    #fff,
-    #fff 10px,
-    #eee 10px,
-    #eee 20px
-  );
-}
diff --git a/elements/pf-card/demo/pf-card.html b/elements/pf-card/demo/pf-card.html
index 5f779f5c16..300c4e9a5e 100644
--- a/elements/pf-card/demo/pf-card.html
+++ b/elements/pf-card/demo/pf-card.html
@@ -1,29 +1,18 @@
-
-
+
+  
Lightest card

+  
This is the lightest pf-card and a link, and a visited link with border.

+  Try
+  Buy
+
 
-

-  
-  
+
 
-  
-  
-
-  
-  
-
-  
-  
-
-  
-  
-  
-

-
-

-  
-    
Lightest card

-    
This is the lightest pf-card and a link, and a visited link with border.

-    Try
-    Buy
-  
-

+
diff --git a/elements/pf-card/demo/pf-card.js b/elements/pf-card/demo/pf-card.js
deleted file mode 100644
index 365757f5b6..0000000000
--- a/elements/pf-card/demo/pf-card.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import '@patternfly/elements/pf-card/pf-card.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-
-const form = document.getElementById('card-settings');
-const card = document.querySelector('pf-card');
-
-form.addEventListener('change', function(event) {
-  const { checked } = event.target;
-  const { attribute } = event.target.dataset;
-  switch (attribute) {
-    case 'flat':
-    case 'rounded':
-    case 'plain':
-    case 'full-height':
-      card.toggleAttribute(attribute, checked);
-      break;
-    case 'size':
-      card.setAttribute('size', form.querySelector('label[for="size"]:not([hidden])').textContent.toLowerCase());
-      break;
-  }
-});
-
diff --git a/elements/pf-card/demo/settings.html b/elements/pf-card/demo/settings.html
new file mode 100644
index 0000000000..a242b24405
--- /dev/null
+++ b/elements/pf-card/demo/settings.html
@@ -0,0 +1,94 @@
+

+  

+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+    
+  

+
+  

+    
+      
Lightest card

+      
This is the lightest pf-card and a link, and a visited link with border.

+      Try
+      Buy
+    
+  

+

+
+
+
+
diff --git a/elements/pf-clipboard-copy/demo/code.html b/elements/pf-clipboard-copy/demo/code.html
new file mode 100644
index 0000000000..f2465cad27
--- /dev/null
+++ b/elements/pf-clipboard-copy/demo/code.html
@@ -0,0 +1,27 @@
+

+  
JSON object (pre-formatted code)

+  
+    { "menu": {
+      "id": "file",
+      "value": "File",
+      "popup": {
+        "menuitem": [
+          {"value": "New", "onclick": "CreateNewDoc()"},
+          {"value": "Open", "onclick": "OpenDoc()"},
+          {"value": "Close", "onclick": "CloseDoc()"}
+        ]
+      }
+    }}
+  
+

+
+
+
+
diff --git a/elements/pf-clipboard-copy/demo/demo.css b/elements/pf-clipboard-copy/demo/demo.css
deleted file mode 100644
index 3f5dcc6016..0000000000
--- a/elements/pf-clipboard-copy/demo/demo.css
+++ /dev/null
@@ -1,12 +0,0 @@
-main {
-  padding: 1em;
-}
-
-section {
-  max-width: 832px;
-}
-
-pf-clipboard-copy + pf-clipboard-copy {
-  margin-top: 1rem;
-}
-
diff --git a/elements/pf-clipboard-copy/demo/expandable.html b/elements/pf-clipboard-copy/demo/expandable.html
new file mode 100644
index 0000000000..8f30a89bb6
--- /dev/null
+++ b/elements/pf-clipboard-copy/demo/expandable.html
@@ -0,0 +1,17 @@
+

+  
+    Got a lot of text here, need to see all of it?
+    Click that arrow on the left side and check out the resulting expansion.
+  
+

+
+
+
+
diff --git a/elements/pf-clipboard-copy/demo/inline-compact-code.html b/elements/pf-clipboard-copy/demo/inline-compact-code.html
new file mode 100644
index 0000000000..ac84d06ed3
--- /dev/null
+++ b/elements/pf-clipboard-copy/demo/inline-compact-code.html
@@ -0,0 +1,14 @@
+

+  2.3.4-2-redhat
+

+
+
+
+
diff --git a/elements/pf-clipboard-copy/demo/inline-compact.html b/elements/pf-clipboard-copy/demo/inline-compact.html
new file mode 100644
index 0000000000..0bad2390b0
--- /dev/null
+++ b/elements/pf-clipboard-copy/demo/inline-compact.html
@@ -0,0 +1,32 @@
+

+  2.3.4-2-redhat
+  
Inline compact with additional action

+  2.3.4-2-redhat
+    
+      
+    
+  
+  

+    
Inline compact in sentence

+    
Basic

+  

+  
Lorem ipsum 2.3.4-2-redhat

+
+  
Long copy string

+  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

+
+  
Long copy string in block

+  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

+

+
+
+
+
diff --git a/elements/pf-clipboard-copy/demo/pf-clipboard-copy.html b/elements/pf-clipboard-copy/demo/pf-clipboard-copy.html
index ee3849969b..695cf422f8 100644
--- a/elements/pf-clipboard-copy/demo/pf-clipboard-copy.html
+++ b/elements/pf-clipboard-copy/demo/pf-clipboard-copy.html
@@ -1,87 +1,14 @@
-
-
-
 

-  
Default

   
 

 
-

-  
Read-only

-  
-

-
-

-  
Expanded

-  
-    Got a lot of text here, need to see all of it?
-    Click that arrow on the left side and check out the resulting expansion.
-  
-

-
-

-  
Read-only expanded

-  
-    Got a lot of text here, need to see all of it?
-    Click that arrow on the left side and check out the resulting expansion.
-  
-

-
-

-  
Read-only expanded by default

-  
-    
Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

-    
asodifna osdif

-  
-

-
-

-  
JSON object (pre-formatted code)

-  
-    { "menu": {
-      "id": "file",
-      "value": "File",
-      "popup": {
-        "menuitem": [
-          {"value": "New", "onclick": "CreateNewDoc()"},
-          {"value": "Open", "onclick": "OpenDoc()"},
-          {"value": "Close", "onclick": "CloseDoc()"}
-        ]
-      }
-    }}
-  
-

-
-

-  
Inline compact

-  2.3.4-2-redhat
-

-
-

-  
Inline compact code

-  2.3.4-2-redhat
-

-
-

-  
Inline compact with additional action

-  2.3.4-2-redhat
-    
-      
-    
-  
-

+
 
-

-  

-    
Inline compact in sentence

-    
Basic

-  

-  
Lorem ipsum 2.3.4-2-redhat

-
-  
Long copy string

-  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

-
-  
Long copy string in block

-  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

-

+
diff --git a/elements/pf-clipboard-copy/demo/pf-clipboard-copy.js b/elements/pf-clipboard-copy/demo/pf-clipboard-copy.js
deleted file mode 100644
index 1556af1a81..0000000000
--- a/elements/pf-clipboard-copy/demo/pf-clipboard-copy.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';
diff --git a/elements/pf-clipboard-copy/demo/read-only-expandable.html b/elements/pf-clipboard-copy/demo/read-only-expandable.html
new file mode 100644
index 0000000000..09d7e20e50
--- /dev/null
+++ b/elements/pf-clipboard-copy/demo/read-only-expandable.html
@@ -0,0 +1,17 @@
+

+  
+    Got a lot of text here, need to see all of it?
+    Click that arrow on the left side and check out the resulting expansion.
+  
+

+
+
+
+
diff --git a/elements/pf-clipboard-copy/demo/read-only-expanded.html b/elements/pf-clipboard-copy/demo/read-only-expanded.html
new file mode 100644
index 0000000000..5fb7ed09e8
--- /dev/null
+++ b/elements/pf-clipboard-copy/demo/read-only-expanded.html
@@ -0,0 +1,17 @@
+

+  
+    
Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

+    
asodifna osdif

+  
+

+
+
+
+
diff --git a/elements/pf-clipboard-copy/demo/read-only.html b/elements/pf-clipboard-copy/demo/read-only.html
new file mode 100644
index 0000000000..8fc02f699e
--- /dev/null
+++ b/elements/pf-clipboard-copy/demo/read-only.html
@@ -0,0 +1,14 @@
+

+  
+

+
+
+
+
diff --git a/elements/pf-code-block/demo/demo.css b/elements/pf-code-block/demo/demo.css
deleted file mode 100644
index f0e292a7ed..0000000000
--- a/elements/pf-code-block/demo/demo.css
+++ /dev/null
@@ -1,4 +0,0 @@
-article { 
-  margin-left: 4em;
-  margin-right: 4em;
-}
\ No newline at end of file
diff --git a/elements/pf-code-block/demo/expandable.html b/elements/pf-code-block/demo/expandable.html
new file mode 100644
index 0000000000..d53b405681
--- /dev/null
+++ b/elements/pf-code-block/demo/expandable.html
@@ -0,0 +1,25 @@
+

+  
+    
+    
+  
+

+
+
+
+
diff --git a/elements/pf-code-block/demo/expanded.html b/elements/pf-code-block/demo/expanded.html
new file mode 100644
index 0000000000..389c655c61
--- /dev/null
+++ b/elements/pf-code-block/demo/expanded.html
@@ -0,0 +1,25 @@
+

+  
+    
+    
+  
+

+
+
+
+
diff --git a/elements/pf-code-block/demo/javascript-sample.html b/elements/pf-code-block/demo/javascript-sample.html
new file mode 100644
index 0000000000..3fa40eeccd
--- /dev/null
+++ b/elements/pf-code-block/demo/javascript-sample.html
@@ -0,0 +1,20 @@
+

+  
JavaScript snippets must use the text/javascript-sample script type.

+  
+    
+    
+  
+

+
+
+
+
diff --git a/elements/pf-code-block/demo/noscript.html b/elements/pf-code-block/demo/noscript.html
new file mode 100644
index 0000000000..558b68509b
--- /dev/null
+++ b/elements/pf-code-block/demo/noscript.html
@@ -0,0 +1,51 @@
+

+  
To display code snippets when javascript is disabled, use the following HTML snippet:

+  
+    
+    
+  
+  
+  
+

+
+
+
+
diff --git a/elements/pf-code-block/demo/pf-code-block.html b/elements/pf-code-block/demo/pf-code-block.html
index 7502c3badd..47990c0195 100644
--- a/elements/pf-code-block/demo/pf-code-block.html
+++ b/elements/pf-code-block/demo/pf-code-block.html
@@ -1,8 +1,4 @@
-
-
-
 

-  
Basic

   
     
-    
-  
-

+
 
-

-  
Expanded by default

-  
-    
-    
-  
-

-
-

-  
JavaScript Sample

-  
JavaScript snippets must use the text/javascript-sample script type.

-  
-    
-    
-  
-

-
-

-  
When JavaScript is Disabled

-  
To display code snippets when javascript is disabled, use the following HTML snippet:

-  
-    
-    
-  
-  
-  
-

+
diff --git a/elements/pf-code-block/demo/pf-code-block.js b/elements/pf-code-block/demo/pf-code-block.js
deleted file mode 100644
index a5d1cac97d..0000000000
--- a/elements/pf-code-block/demo/pf-code-block.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import '@patternfly/elements/pf-code-block/pf-code-block.js';
-import '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';
diff --git a/elements/pf-icon/BaseIcon.ts b/elements/pf-icon/BaseIcon.ts
index b92b750142..f8539b95db 100644
--- a/elements/pf-icon/BaseIcon.ts
+++ b/elements/pf-icon/BaseIcon.ts
@@ -46,7 +46,7 @@ export abstract class BaseIcon extends LitElement {
   }
 
   public static getIconUrl: URLGetter = (set: string, icon: string) =>
-    new URL(`./icons/${set}/${icon}.js`, import.meta.url);
+    `@patternfly/icons/${set}/${icon}.js`;
 
   private static onIntersect: IntersectionObserverCallback = records =>
     records.forEach(({ isIntersecting, target }) => {
diff --git a/elements/pf-icon/demo/custom-icon-sets.html b/elements/pf-icon/demo/custom-icon-sets.html
index 6cf35809f4..ef9ba98e14 100644
--- a/elements/pf-icon/demo/custom-icon-sets.html
+++ b/elements/pf-icon/demo/custom-icon-sets.html
@@ -1,26 +1,36 @@
-
-
-
-
Custom Icon Sets

-
Call PfIcon.addIconSet with a string (icon set name) and a function taking the
-   icon set name and the icon name, and returning a URL (object) to a javascript module whose
-   default export is a lit renderable.

-
 

+  
Custom Icon Sets

+  
Call PfIcon.addIconSet with a string (icon set name) and a function taking the
+     icon set name and the icon name, and returning a URL (object) to a javascript module whose
+     default export is a lit renderable.

+
   
   
+
+  
+    
+  
 

 
-
-  
-
+
+
+
diff --git a/elements/pf-icon/demo/custom-icon-sets.js b/elements/pf-icon/demo/custom-icon-sets.js
deleted file mode 100644
index 5483f8bbe5..0000000000
--- a/elements/pf-icon/demo/custom-icon-sets.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import '/docs/zero-md.js';
-import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
-
-PfIcon.addIconSet('rh', (set, icon) =>
-  new URL(`./icons/${set}/${icon}.js`, import.meta.url));
diff --git a/elements/pf-icon/demo/demo.css b/elements/pf-icon/demo/demo.css
deleted file mode 100644
index a9e6d178d0..0000000000
--- a/elements/pf-icon/demo/demo.css
+++ /dev/null
@@ -1,53 +0,0 @@
-[data-demo] {
-  padding: 1em;
-}
-
-output ul {
-  --g: repeat(auto-fit, var(--pf-global--icon--FontSize--xl, 3.375rem));
-  display: grid;
-  grid-template: var(--g) / var(--g);
-  gap: 1em;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-li button {
-  padding: 0;
-  background: none;
-  border: none;
-}
-
-li button:focus {
-  color: gray;
-}
-
-dl {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--pf-global--spacer--md, 1rem);
-  align-items: end;
-}
-
-dl div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-
-dd, dt {
-  margin: 0;
-}
-
-dt {
-  order: 1;
-}
-
-#colors dt { text-transform: capitalize; }
-.danger { color: var(--pf-global--danger-color--200, #a30000); }
-.default { color: var(--pf-global--default-color--200, #009596); }
-.info { color: var(--pf-global--info-color--100, #2b9af3); }
-.success { color: var(--pf-global--success-color--100, #3e8635); }
-.warning { color: var(--pf-global--warning-color--100, #f0ab00); }
-.disabled { color: var(--pf-global--disabled-color--100, #6a6e73); }
diff --git a/elements/pf-icon/demo/pf-icon.html b/elements/pf-icon/demo/pf-icon.html
index 50b421cfbd..611437d509 100644
--- a/elements/pf-icon/demo/pf-icon.html
+++ b/elements/pf-icon/demo/pf-icon.html
@@ -1,23 +1,55 @@
 

   
Icon Sizes and Colours

   

-    
Small

-    
Medium

-    
Large

-    
X-Large

+    
Small

+    
Medium

+    
Large

+    
X-Large

   

   

-    
danger

-    
default

-    
info

-    
success

-    
warning

-    
disabled

+    
danger

+    
default

+    
info

+    
success

+    
warning

+    
disabled

   

 

 
-
 
 
+
+
diff --git a/elements/pf-icon/demo/pf-icon.js b/elements/pf-icon/demo/pf-icon.js
deleted file mode 100644
index 28f9328b76..0000000000
--- a/elements/pf-icon/demo/pf-icon.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import '@patternfly/elements/pf-icon/pf-icon.js';
-import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-
-import { iconSets } from '@patternfly/pfe-tools/environment.js';
-import { render, html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-
-import Fuse from 'fuse.js';
-
-const names = new Map([
-  ['fab', 'Font Awesome Brand'],
-  ['far', 'Font Awesome'],
-  ['fas', 'Font Awesome Solid'],
-  ['patternfly', 'PatternFly'],
-  ['custom', 'Custom'],
-]);
-
-async function copy(event) {
-  const { html } = event.target.closest('[data-icon]').dataset;
-  await navigator.clipboard.writeText(html);
-}
-
-function renderIcons(results) {
-  render(repeat(iconSets, ([setName, icons]) => repeat(icons, icon => `${setName}-${icon}`, icon => html`
-    
-  `)), list);
-  render(repeat(iconSets, ([setName, icons]) => html`
-    
${names.get(setName)}

-    
    ${repeat(icons, icon => `${setName}-${icon}`, icon => html`
-      
  • 
-        
-      
    • `)}
-    

-  `), document.getElementById('pf-icon-demo-output'));
-}
-
-const fuse = new Fuse(Array.from(iconSets, ([set, icons]) => icons.map(icon => ({ icon, set }))).flat(), {
-  includeScore: true,
-  threshold: 0.1,
-  keys: ['icon'],
-});
-
-const search = document.getElementById('icon-search');
-
-const list = document.getElementById('icons-list');
-
-search.addEventListener('input', /** @this{HTMLInputElement}*/function() {
-  renderIcons(!this.value ? undefined : fuse
-    .search(this.value)
-    .reduce((acc, { item: { set, icon } }) => ({
-      ...acc,
-      [set]: {
-        ...acc[set],
-        [icon]: true
-      }
-    }), {}));
-});
-
-renderIcons(search.value || undefined);
-
-document.querySelector('form').addEventListener('submit', e => e.preventDefault());
diff --git a/elements/pf-icon/demo/sets.html b/elements/pf-icon/demo/sets.html
index 7f8a039cd3..2e20f2aefb 100644
--- a/elements/pf-icon/demo/sets.html
+++ b/elements/pf-icon/demo/sets.html
@@ -1,17 +1,113 @@
-
Default Icon Sets

 

-
Use the text field to search for an icon name. Click the icon to copy it's HTML.

-
PatternFly Icon comes with three built-in icon sets, the default is fontawesome solid

+  
Default Icon Sets

+  
Use the text field to search for an icon name. Click the icon to copy it's HTML.

+  
PatternFly Icon comes with three built-in icon sets, the default is fontawesome solid

 
-
-
-
+  
 
+  
 

 
-
-
+
 
+
diff --git a/elements/pf-icon/demo/styling-icons.html b/elements/pf-icon/demo/styling-icons.html
index affc3f9520..7e7fb1bf06 100644
--- a/elements/pf-icon/demo/styling-icons.html
+++ b/elements/pf-icon/demo/styling-icons.html
@@ -1,11 +1,8 @@
-
-
-
-
Styling Icons

+

+  
Styling Icons

 
-
Color the icons with the CSS color property.

+  
Color the icons with the CSS color property.

 
-

   
   
   
@@ -18,13 +15,20 @@ 
Styling Icons

   
 

 
+
+
+
 
diff --git a/elements/pf-jump-links/demo/centered-list.html b/elements/pf-jump-links/demo/centered-list.html
new file mode 100644
index 0000000000..a135970593
--- /dev/null
+++ b/elements/pf-jump-links/demo/centered-list.html
@@ -0,0 +1,18 @@
+

+  
+    Inactive section
+    Active section
+    Inactive section
+  
+

+
+
+
+
diff --git a/elements/pf-jump-links/demo/demo.css b/elements/pf-jump-links/demo/demo.css
deleted file mode 100644
index 3f4fe6bf8d..0000000000
--- a/elements/pf-jump-links/demo/demo.css
+++ /dev/null
@@ -1,4 +0,0 @@
-main {
-  padding: 1em;
-}
-
diff --git a/elements/pf-jump-links/demo/expandable-vertical-with-subsection.html b/elements/pf-jump-links/demo/expandable-vertical-with-subsection.html
new file mode 100644
index 0000000000..7ac64c359b
--- /dev/null
+++ b/elements/pf-jump-links/demo/expandable-vertical-with-subsection.html
@@ -0,0 +1,27 @@
+

+  
+    Inactive section
+    
+      Section with active subsection
+      
+        Active subsection
+        Inactive subsection
+        Inactive subsection
+      
+    
+    Inactive section
+    Inactive section
+  
+

+
+
+
+
diff --git a/elements/pf-jump-links/demo/label.html b/elements/pf-jump-links/demo/label.html
new file mode 100644
index 0000000000..943eeb4423
--- /dev/null
+++ b/elements/pf-jump-links/demo/label.html
@@ -0,0 +1,24 @@
+

+  
+    Inactive section
+    Active section
+    Inactive section
+  
+  
+    Inactive section
+    Active section
+    Inactive section
+  
+

+
+
+
+
diff --git a/elements/pf-jump-links/demo/pf-jump-links.html b/elements/pf-jump-links/demo/pf-jump-links.html
index 073c125279..d4bb930006 100644
--- a/elements/pf-jump-links/demo/pf-jump-links.html
+++ b/elements/pf-jump-links/demo/pf-jump-links.html
@@ -1,8 +1,4 @@
-
-
-
 

-  
Basic

   
     Inactive section
     Active section
@@ -10,60 +6,13 @@ 
Basic

   
 

 
-

-  
With centered list

-  
-    Inactive section
-    Active section
-    Inactive section
-  
-

-
-

-  
With label

-  
-    Inactive section
-    Active section
-    Inactive section
-  
-  
-    Inactive section
-    Active section
-    Inactive section
-  
-

-
-

-  
Vertical

-  
-    Inactive section
-    Active section
-    Inactive section
-  
-

+
 
-

-  
Vertical with label

-  
-    Inactive section
-    Active section
-    Inactive section
-  
-

-
-

-  
Expandable vertical with subsection

-  
-    Inactive section
-    
-      Section with active subsection
-      
-        Active subsection
-        Inactive subsection
-        Inactive subsection
-      
-    
-    Inactive section
-    Inactive section
-  
-

+
diff --git a/elements/pf-jump-links/demo/pf-jump-links.js b/elements/pf-jump-links/demo/pf-jump-links.js
deleted file mode 100644
index 9136c3469d..0000000000
--- a/elements/pf-jump-links/demo/pf-jump-links.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-jump-links/pf-jump-links.js';
-import '@patternfly/elements/pf-jump-links/pf-jump-links-list.js';
-
diff --git a/elements/pf-jump-links/demo/scrollspy-with-subsections.css b/elements/pf-jump-links/demo/scrollspy-with-subsections.css
deleted file mode 100644
index 262a66b91a..0000000000
--- a/elements/pf-jump-links/demo/scrollspy-with-subsections.css
+++ /dev/null
@@ -1,60 +0,0 @@
-[data-demo] {
-  display: contents;
-}
-
-pf-jump-links {
-  position: sticky;
-  top: 1em;
-}
-
-main {
-  display: grid;
-  grid-template-rows: max-content auto;
-  grid-template-columns: 300px auto;
-  grid-template-areas:
-    'head head'
-    'side body';
-}
-
-main :is(header, aside, article) {
-  padding: 24px;
-}
-
-main :is(aside, article) {
-  background-color: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
-}
-
-main header {
-  grid-area: head;
-}
-
-main aside {
-  grid-area: side;
-}
-
-main article {
-  grid-area: body;
-  padding-inline-start: 48px;
-}
-
-main:is(.mobile, .horizontal) {
-  grid-template-rows: repeat(auto-fill, auto);
-  grid-template-columns: 100%;
-  grid-template-areas:
-    'head'
-    'side'
-    'body';
-}
-
-main:is(.mobile, .horizontal) aside {
-  position: sticky;
-  top: 0;
-  box-shadow: rgba(3, 3, 3, 0.16) 0px 4px 4px -4px;
-  z-index: 1;
-}
-
-
-pf-switch + label,
-pf-switch + label + label {
-  margin-inline-start: 12px;
-}
diff --git a/elements/pf-jump-links/demo/scrollspy-with-subsections.html b/elements/pf-jump-links/demo/scrollspy-with-subsections.html
index 21574c5921..a557027b79 100644
--- a/elements/pf-jump-links/demo/scrollspy-with-subsections.html
+++ b/elements/pf-jump-links/demo/scrollspy-with-subsections.html
@@ -1,144 +1,238 @@
-
-
-
-

-  
Main title

-
-  
-  
-  
-

-
-
-
-

-  
Heading 1

-  

-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
-    in culpa qui officia deserunt mollit anim id est laborum.
-  

-  

-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-    nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-    omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-    debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat.
-  

-
-  
Heading 2

-  

-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
-    in culpa qui officia deserunt mollit anim id est laborum.
-  

-  

-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-    nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-    omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-    debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat.
-  

-  Button
-
-  
Heading 3

-  

-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
-    in culpa qui officia deserunt mollit anim id est laborum.
-  

-  

-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-    nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-    omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-    debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat.
-  

-
-  
Heading 4

-  

-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
-    in culpa qui officia deserunt mollit anim id est laborum.
-  

-  

-    
-    
-    Submit
-  

-  

-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-    nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-    omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-    debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat.
-  

-
-  
Heading 5

-  

-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
-    in culpa qui officia deserunt mollit anim id est laborum.
-  

-  

-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-    nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-    omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-    debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat.
-  

-  

-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-    nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-    omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-    debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat.
-  

-

+

+  

+    
Main title

 
+    
+    
+    
+  

+
+  
+
+  

+    
Heading 1

+    

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    

+    

+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    

+
+    
Heading 2

+    

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    

+    

+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    

+    Button
+
+    
Heading 3

+    

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    

+    

+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    

+
+    
Heading 4

+    

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    

+    

+      
+      
+      Submit
+    

+    

+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    

+
+    
Heading 5

+    

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    

+    

+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    

+    

+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    

+  

+

+
+
+
+
diff --git a/elements/pf-jump-links/demo/scrollspy-with-subsections.js b/elements/pf-jump-links/demo/scrollspy-with-subsections.js
deleted file mode 100644
index 2f3199d11e..0000000000
--- a/elements/pf-jump-links/demo/scrollspy-with-subsections.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-jump-links/pf-jump-links.js';
-import '@patternfly/elements/pf-jump-links/pf-jump-links-list.js';
-
-const main = document.querySelector('main');
-const links = document.querySelector('pf-jump-links');
-const swtch = document.querySelector('pf-switch');
-const media = matchMedia('(max-width: 600px)');
-
-function sumHeights(...elements) {
-  return elements.reduce((sum, el) => sum + el?.getBoundingClientRect?.().height ?? 0, 0);
-}
-
-async function update() {
-  const { matches } = media;
-  const { checked } = swtch;
-  main.classList.toggle('mobile', matches);
-  main.classList.toggle('horizontal', !checked);
-  links.vertical = checked;
-  links.expandable = matches && checked;
-  links.centered = !checked;
-  await links.updateComplete;
-  links.offset = sumHeights(
-    document.getElementById('main-header'),
-  ) + 72;
-}
-
-media.addEventListener('change', update);
-swtch.addEventListener('change', update);
-links.addEventListener('toggle', update);
-
-update();
-
diff --git a/elements/pf-jump-links/demo/vertical-with-label.html b/elements/pf-jump-links/demo/vertical-with-label.html
new file mode 100644
index 0000000000..02572f05a6
--- /dev/null
+++ b/elements/pf-jump-links/demo/vertical-with-label.html
@@ -0,0 +1,19 @@
+

+  
Vertical with label

+  
+    Inactive section
+    Active section
+    Inactive section
+  
+

+
+
+
+
diff --git a/elements/pf-jump-links/demo/vertical.html b/elements/pf-jump-links/demo/vertical.html
new file mode 100644
index 0000000000..dcd6217667
--- /dev/null
+++ b/elements/pf-jump-links/demo/vertical.html
@@ -0,0 +1,18 @@
+

+  
+    Inactive section
+    Active section
+    Inactive section
+  
+

+
+
+
+
diff --git a/elements/pf-label/demo/compact.html b/elements/pf-label/demo/compact.html
new file mode 100644
index 0000000000..a1525205a2
--- /dev/null
+++ b/elements/pf-label/demo/compact.html
@@ -0,0 +1,21 @@
+

+  Default
+  Blue label
+  Green label
+  Orange label
+  Red label
+  Purple label
+  Cyan label
+  Gold label
+  Grey label
+

+
+
+
+
diff --git a/elements/pf-label/demo/demo.css b/elements/pf-label/demo/demo.css
deleted file mode 100644
index ea28ac717e..0000000000
--- a/elements/pf-label/demo/demo.css
+++ /dev/null
@@ -1,37 +0,0 @@
-:host {
-  display: block;
-}
-
-.example {
-  margin-top: 2rem;
-}
-
-.inline-example {
-  max-width: 20em; 
-  outline: 1px dotted red; 
-  padding: 1.2em;
-  position: relative;
-}
-
-.inline-example:before {
-  content: "max-width: 20em;";
-  position: absolute;
-  top: -1.6em;
-  left: 0;
-  background-color: red;
-  font-size: 0.8em;
-  color: white;
-  padding: 0 0.5em;
-}
-
-.visually-hidden-class {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
diff --git a/elements/pf-label/demo/filled-color.html b/elements/pf-label/demo/filled-color.html
new file mode 100644
index 0000000000..74adde4305
--- /dev/null
+++ b/elements/pf-label/demo/filled-color.html
@@ -0,0 +1,32 @@
+

+  Blue
+  Green
+  Orange
+  Red Hat
+  Purple
+  Cyan
+  Gold
+  Grey
+

+
+
+
+
diff --git a/elements/pf-label/demo/icon.html b/elements/pf-label/demo/icon.html
new file mode 100644
index 0000000000..9a08797f2f
--- /dev/null
+++ b/elements/pf-label/demo/icon.html
@@ -0,0 +1,33 @@
+

+  

+    Default
+    Blue label
+    Green label 
+    Orange label
+    Red label
+    Purple label 
+    Cyan label
+    Gold label
+  

+
+  

+    Default
+    Blue label
+    Green label
+    Orange label
+    Red label
+    Purple label
+    Cyan label
+    Gold label
+  

+

+
+
+
+
diff --git a/elements/pf-label/demo/outline-color.html b/elements/pf-label/demo/outline-color.html
new file mode 100644
index 0000000000..fe29dfd72c
--- /dev/null
+++ b/elements/pf-label/demo/outline-color.html
@@ -0,0 +1,20 @@
+

+  Blue
+  Green
+  Orange
+  Red
+  Purple
+  Cyan
+  Gold
+  Grey
+

+
+
+
+
diff --git a/elements/pf-label/demo/patternfly.html b/elements/pf-label/demo/patternfly.html
index bf4186c2a4..3404deabdb 100644
--- a/elements/pf-label/demo/patternfly.html
+++ b/elements/pf-label/demo/patternfly.html
@@ -1,189 +1,200 @@
-
-
-
 

   
Filled

   Grey
-  Grey icon
+  Grey icon
   Grey removable
-  Grey icon removable
+  Grey icon removable
   Grey link
   Grey link removable
-  Grey label with icon that overflows
+  Grey label with icon that overflows
 

 
 

   
Blue

   Blue
-  Blue icon
+  Blue icon
   Blue removable
-  Blue icon removable
+  Blue icon removable
   Blue link
   Blue link removable
-  Blue label with icon that overflows
+  Blue label with icon that overflows
 

 
 

   
Green

   Green
-  Green icon
+  Green icon
   Green removable
-  Green icon removable
+  Green icon removable
   Green link
   Green link removable
-  Green label with icon that overflows
+  Green label with icon that overflows
 

 
 

   
Orange

   Orange
-  Orange icon
+  Orange icon
   Orange removable
-  Orange icon removable
+  Orange icon removable
   Orange link
   Orange link removable
-  Orange label with icon that overflows
+  Orange label with icon that overflows
 

 
 

   
Red

   Red
-  Red icon
+  Red icon
   Red removable
-  Red icon removable
+  Red icon removable
   Red link
   Red link removable
-  Red label with icon that overflows
+  Red label with icon that overflows
 

 
 

   
Purple

   Purple
-  Purple icon
+  Purple icon
   Purple removable
-  Purple icon removable
+  Purple icon removable
   Purple link
   Purple link removable
-  Purple label with icon that overflows
+  Purple label with icon that overflows
 

 
 

   
Cyan

   Cyan
-  Cyan icon
+  Cyan icon
   Cyan removable
-  Cyan icon removable
+  Cyan icon removable
   Cyan link
   Cyan link removable
-  Cyan label with icon that overflows
+  Cyan label with icon that overflows
 

 
 

   
Gold

   Gold
-  Gold icon
+  Gold icon
   Gold removable
-  Gold icon removable
+  Gold icon removable
   Gold link
   Gold link removable
-  Gold label with icon that overflows
+  Gold label with icon that overflows
 

 
 

   
Outline

   Grey
-  Grey icon
+  Grey icon
   Grey removable
-  Grey icon removable
+  Grey icon removable
   Grey link
   Grey link removable
-  Grey label with icon that overflows
+  Grey label with icon that overflows
 

 
 

   
Outline Blue

   Blue
-  Blue icon
+  Blue icon
   Blue removable
-  Blue icon removable
+  Blue icon removable
   Blue link
   Blue link removable
-  Blue label with icon that overflows
+  Blue label with icon that overflows
 

 
 

   
Outline Green

   Green
-  Green icon
+  Green icon
   Green removable
-  Green icon removable
+  Green icon removable
   Green link
   Green link removable
-  Green label with icon that overflows
+  Green label with icon that overflows
 

 
 

   
Outline Orange

   Orange
-  Orange icon
+  Orange icon
   Orange removable
-  Orange icon removable
+  Orange icon removable
   Orange link
   Orange link removable
-  Orange label with icon that overflows
+  Orange label with icon that overflows
 

 
 

   
Outline Red

   Red
-  Red icon
+  Red icon
   Red removable
-  Red icon removable
+  Red icon removable
   Red link
   Red link removable
-  Red label with icon that overflows
+  Red label with icon that overflows
 

 
 

   
Outline Purple

   Purple
-  Purple icon
+  Purple icon
   Purple removable
-  Purple icon removable
+  Purple icon removable
   Purple link
   Purple link removable
-  Purple label with icon that overflows
+  Purple label with icon that overflows
 

 
 

   
Outline Cyan

   Cyan
-  Cyan icon
+  Cyan icon
   Cyan removable
-  Cyan icon removable
+  Cyan icon removable
   Cyan link
   Cyan link removable
-  Cyan label with icon that overflows
+  Cyan label with icon that overflows
 

 
 

   
Outline Gold

   Gold
-  Gold icon
+  Gold icon
   Gold removable
-  Gold icon removable
+  Gold icon removable
   Gold link
   Gold link removable
-  Gold label with icon that overflows
+  Gold label with icon that overflows
 

 
 

   
Outline Compact

   Gold
-  Gold icon
+  Gold icon
   Gold removable
-  Gold icon removable
+  Gold icon removable
   Gold link
   Gold link removable
-  Gold label with icon that overflows
-

+  Gold label with icon that overflows
+

+
+
+
+
diff --git a/elements/pf-label/demo/pf-label.html b/elements/pf-label/demo/pf-label.html
index 21196e0ccb..9050ebf7f6 100644
--- a/elements/pf-label/demo/pf-label.html
+++ b/elements/pf-label/demo/pf-label.html
@@ -1,171 +1,13 @@
-
-
-
-    
-  
-
-
-

-  
Filled Color

-  Blue
-  Green
-  Orange
-  Red Hat
-  Purple
-  Cyan
-  Gold
-  Grey
-  
-    
-  
-

-
-

-  
Outline Color

-  Blue
-  Green
-  Orange
-  Red
-  Purple
-  Cyan
-  Gold
-  Grey
-  

-    Example:
-    
-      
-    
-  

-

-
-

-  
With Icon

-  

-    Default
-    Blue label
-    Green label 
-    Orange label
-    Red label
-    Purple label 
-    Cyan label
-    Gold label
-  

-  

-    Default
-    Blue label
-    Green label
-    Orange label
-    Red label
-    Purple label
-    Cyan label
-    Gold label
-  

-
-  

-    Example: Default
-    
-      
-    
-  

-
-  

-    Slotted Icon:
-    
-      Red label
-      
-    
-
-    
-      
-    
-  

-
-  

-    Slotted <pf-icon>:
-    Default
-      
-    
-    
-      
-    
-  

-
-  

-    Icon attribute empty:
-    Default
-    
-      
-    
-  

 

 
-

-  
Compact

-  Default
-  Blue label
-  Green label
-  Orange label
-  Red label
-  Purple label
-  Cyan label
-  Gold label
-  Grey label
-
-  

-    Example: Default
-    
-      
-    
-  

-

+
 
+
diff --git a/elements/pf-label/demo/pf-label.js b/elements/pf-label/demo/pf-label.js
deleted file mode 100644
index 40f56aa472..0000000000
--- a/elements/pf-label/demo/pf-label.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import '/docs/zero-md.js';
-
-import '@patternfly/elements/pf-label/pf-label.js';
-
-const container = document.querySelector('[data-demo]');
-
-container.addEventListener('close', function(event) {
-  event.target.remove();
-});
-
diff --git a/elements/pf-modal/demo/custom-header-footer.html b/elements/pf-modal/demo/custom-header-footer.html
new file mode 100644
index 0000000000..8701e84c4f
--- /dev/null
+++ b/elements/pf-modal/demo/custom-header-footer.html
@@ -0,0 +1,59 @@
+

+  
+    
With custom header/footer content.

+    
Allows for custom content in the header and/or footer by slotting HTML.

+    
When static text describing the modal is available, it can be wrapped
+      with an ID referring to the
+      modal's aria-describedby value.

+    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+    

+      
+      Custom modal footer.
+    

+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/custom-icon.html b/elements/pf-modal/demo/custom-icon.html
new file mode 100644
index 0000000000..27189df3e0
--- /dev/null
+++ b/elements/pf-modal/demo/custom-icon.html
@@ -0,0 +1,54 @@
+

+  
+    

+      
+      Modal Header
+    

+    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/demo.css b/elements/pf-modal/demo/demo.css
deleted file mode 100644
index 7a6431fa49..0000000000
--- a/elements/pf-modal/demo/demo.css
+++ /dev/null
@@ -1,32 +0,0 @@
-@font-face {
-  font-family: "RedHatDisplayUpdated";
-  src: url(https://patternfly.org/v4/fonts/RedHatDisplay-updated-Regular.woff2) format("woff2");
-  font-style: normal;
-  font-weight: 300;
-  text-rendering: optimizeLegibility;
-}
-@font-face {
-  font-family: "RedHatDisplayUpdated";
-  src: url(https://patternfly.org/v4/fonts/RedHatDisplay-updated-Medium.woff2) format("woff2");
-  font-style: normal;
-  font-weight: 400;
-  text-rendering: optimizeLegibility;
-}
-@font-face {
-  font-family: "RedHatDisplayUpdated";
-  src: url(https://patternfly.org/v4/fonts/RedHatDisplay-updated-Bold.woff2) format("woff2");
-  font-style: normal;
-  font-weight: 700;
-  text-rendering: optimizeLegibility;
-}
-
-:host {
-  --pf-modal--MinWidth: 800px;
-  --pf-modal--MaxWidth: 800px;
-  --pf-modal--MaxHeight: 800px;
-}
-
-#external-lots::part(body) {
-  display: flex;
-  gap: 24px;
-}
diff --git a/elements/pf-modal/demo/description.html b/elements/pf-modal/demo/description.html
new file mode 100644
index 0000000000..8db4de88d2
--- /dev/null
+++ b/elements/pf-modal/demo/description.html
@@ -0,0 +1,80 @@
+

+  
+    
Modal with description

+    
A description is used when you want to provide more info about the modal than the title is
+      able to describe. The content in the description is static and will not scroll with the rest of the modal body.
+    

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    
Nullam dapibus, leo quis suscipit semper, nisi sapien ultricies turpis, ac tincidunt ipsum risus in nibh. Ut
+      consequat dolor risus. Vivamus ultricies lacinia ipsum, mattis egestas nisi scelerisque sit amet. Fusce eleifend,
+      sapien vel tempor convallis, magna nisl dapibus tortor, vel lobortis metus turpis vel odio. Suspendisse pharetra
+      ex nec volutpat tristique. Cras posuere et augue id maximus. Duis lobortis rutrum luctus. Integer cursus odio ac
+      enim vehicula sollicitudin. Morbi feugiat urna nulla, vel molestie enim tempus et. Fusce pellentesque ligula a
+      nibh viverra mattis. Vestibulum tincidunt diam quis enim feugiat finibus in eu felis. Morbi ac fringilla ligula.
+      Praesent nec ex nec sapien laoreet suscipit. Nullam sit amet tempor metus, a consequat purus. Pellentesque non
+      maximus nulla, tempus accumsan enim.

+    
Etiam semper metus sed urna blandit lacinia. Maecenas nibh nisl, pharetra elementum enim sed, porta vehicula
+      felis. Donec at ante consequat, aliquet urna vitae, imperdiet urna. Nam vel molestie nibh, quis ornare arcu. Donec
+      faucibus enim id accumsan laoreet. Sed laoreet leo id eleifend sagittis. Praesent eget lacinia lectus, sit amet
+      cursus eros. Aenean et augue risus.

+    
Aliquam erat volutpat. Integer nisi justo, molestie a dolor ut, ultricies efficitur est. Lorem ipsum dolor sit
+      amet, consectetur adipiscing elit. In et diam dignissim, aliquet odio quis, efficitur erat. Integer cursus
+      convallis ligula, dapibus elementum sem. Mauris blandit vitae risus id pharetra. Donec et diam eros.

+    
Curabitur urna est, mollis vitae leo nec, vehicula pharetra dui. Mauris non est viverra, semper lacus in,
+      sollicitudin est. Fusce pharetra neque vel orci congue dignissim. Curabitur ac sem viverra, molestie mauris ac,
+      egestas tortor. Aenean ut aliquet ligula, id gravida metus. Sed semper et quam et sagittis. Pellentesque egestas
+      magna id eros interdum facilisis. Nam dignissim ante quis augue finibus tristique. Donec at augue sem. Nulla
+      mollis risus at ligula finibus, vitae volutpat ex auctor. Morbi vel cursus felis. Maecenas lobortis porttitor
+      odio, non venenatis risus varius vitae. Proin gravida mi odio, sed pretium neque luctus vitae. Mauris ut libero
+      bibendum, finibus dui non, rutrum sapien. Quisque ac bibendum erat. Vestibulum tincidunt risus nisi.

+    Confirm
+    Cancel
+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/no-header.html b/elements/pf-modal/demo/no-header.html
new file mode 100644
index 0000000000..88393b031c
--- /dev/null
+++ b/elements/pf-modal/demo/no-header.html
@@ -0,0 +1,49 @@
+

+  
+    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/overflowing-content.html b/elements/pf-modal/demo/overflowing-content.html
new file mode 100644
index 0000000000..8a4e790cc1
--- /dev/null
+++ b/elements/pf-modal/demo/overflowing-content.html
@@ -0,0 +1,79 @@
+

+  
If the content that you're passing to the modal is likely to overflow the modal content area, it is still
+    accessible via keyboard scrolling.

+  
+    
Modal with overflowing content

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    
Nullam dapibus, leo quis suscipit semper, nisi sapien ultricies turpis, ac tincidunt ipsum risus in nibh. Ut
+      consequat dolor risus. Vivamus ultricies lacinia ipsum, mattis egestas nisi scelerisque sit amet. Fusce eleifend,
+      sapien vel tempor convallis, magna nisl dapibus tortor, vel lobortis metus turpis vel odio. Suspendisse pharetra
+      ex nec volutpat tristique. Cras posuere et augue id maximus. Duis lobortis rutrum luctus. Integer cursus odio ac
+      enim vehicula sollicitudin. Morbi feugiat urna nulla, vel molestie enim tempus et. Fusce pellentesque ligula a
+      nibh viverra mattis. Vestibulum tincidunt diam quis enim feugiat finibus in eu felis. Morbi ac fringilla ligula.
+      Praesent nec ex nec sapien laoreet suscipit. Nullam sit amet tempor metus, a consequat purus. Pellentesque non
+      maximus nulla, tempus accumsan enim.

+    
Etiam semper metus sed urna blandit lacinia. Maecenas nibh nisl, pharetra elementum enim sed, porta vehicula
+      felis. Donec at ante consequat, aliquet urna vitae, imperdiet urna. Nam vel molestie nibh, quis ornare arcu. Donec
+      faucibus enim id accumsan laoreet. Sed laoreet leo id eleifend sagittis. Praesent eget lacinia lectus, sit amet
+      cursus eros. Aenean et augue risus.

+    
Aliquam erat volutpat. Integer nisi justo, molestie a dolor ut, ultricies efficitur est. Lorem ipsum dolor sit
+      amet, consectetur adipiscing elit. In et diam dignissim, aliquet odio quis, efficitur erat. Integer cursus
+      convallis ligula, dapibus elementum sem. Mauris blandit vitae risus id pharetra. Donec et diam eros.

+    
Curabitur urna est, mollis vitae leo nec, vehicula pharetra dui. Mauris non est viverra, semper lacus in,
+      sollicitudin est. Fusce pharetra neque vel orci congue dignissim. Curabitur ac sem viverra, molestie mauris ac,
+      egestas tortor. Aenean ut aliquet ligula, id gravida metus. Sed semper et quam et sagittis. Pellentesque egestas
+      magna id eros interdum facilisis. Nam dignissim ante quis augue finibus tristique. Donec at augue sem. Nulla
+      mollis risus at ligula finibus, vitae volutpat ex auctor. Morbi vel cursus felis. Maecenas lobortis porttitor
+      odio, non venenatis risus varius vitae. Proin gravida mi odio, sed pretium neque luctus vitae. Mauris ut libero
+      bibendum, finibus dui non, rutrum sapien. Quisque ac bibendum erat. Vestibulum tincidunt risus nisi.

+    Confirm
+    Cancel
+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/pf-modal.html b/elements/pf-modal/demo/pf-modal.html
index 11fd877301..9574c1cad7 100644
--- a/elements/pf-modal/demo/pf-modal.html
+++ b/elements/pf-modal/demo/pf-modal.html
@@ -1,8 +1,4 @@
-
-
-
 

-  
Basic

   
     
Simple modal header

     
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
@@ -16,234 +12,44 @@ 
Simple modal header

   Show modal
 

 
-

-  
With description

-  
-    
Modal with description

-    
A description is used when you want to provide more info about the modal than the title is
-      able to describe. The content in the description is static and will not scroll with the rest of the modal body.
-    

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    
Nullam dapibus, leo quis suscipit semper, nisi sapien ultricies turpis, ac tincidunt ipsum risus in nibh. Ut
-      consequat dolor risus. Vivamus ultricies lacinia ipsum, mattis egestas nisi scelerisque sit amet. Fusce eleifend,
-      sapien vel tempor convallis, magna nisl dapibus tortor, vel lobortis metus turpis vel odio. Suspendisse pharetra
-      ex nec volutpat tristique. Cras posuere et augue id maximus. Duis lobortis rutrum luctus. Integer cursus odio ac
-      enim vehicula sollicitudin. Morbi feugiat urna nulla, vel molestie enim tempus et. Fusce pellentesque ligula a
-      nibh viverra mattis. Vestibulum tincidunt diam quis enim feugiat finibus in eu felis. Morbi ac fringilla ligula.
-      Praesent nec ex nec sapien laoreet suscipit. Nullam sit amet tempor metus, a consequat purus. Pellentesque non
-      maximus nulla, tempus accumsan enim.

-    
Etiam semper metus sed urna blandit lacinia. Maecenas nibh nisl, pharetra elementum enim sed, porta vehicula
-      felis. Donec at ante consequat, aliquet urna vitae, imperdiet urna. Nam vel molestie nibh, quis ornare arcu. Donec
-      faucibus enim id accumsan laoreet. Sed laoreet leo id eleifend sagittis. Praesent eget lacinia lectus, sit amet
-      cursus eros. Aenean et augue risus.

-    
Aliquam erat volutpat. Integer nisi justo, molestie a dolor ut, ultricies efficitur est. Lorem ipsum dolor sit
-      amet, consectetur adipiscing elit. In et diam dignissim, aliquet odio quis, efficitur erat. Integer cursus
-      convallis ligula, dapibus elementum sem. Mauris blandit vitae risus id pharetra. Donec et diam eros.

-    
Curabitur urna est, mollis vitae leo nec, vehicula pharetra dui. Mauris non est viverra, semper lacus in,
-      sollicitudin est. Fusce pharetra neque vel orci congue dignissim. Curabitur ac sem viverra, molestie mauris ac,
-      egestas tortor. Aenean ut aliquet ligula, id gravida metus. Sed semper et quam et sagittis. Pellentesque egestas
-      magna id eros interdum facilisis. Nam dignissim ante quis augue finibus tristique. Donec at augue sem. Nulla
-      mollis risus at ligula finibus, vitae volutpat ex auctor. Morbi vel cursus felis. Maecenas lobortis porttitor
-      odio, non venenatis risus varius vitae. Proin gravida mi odio, sed pretium neque luctus vitae. Mauris ut libero
-      bibendum, finibus dui non, rutrum sapien. Quisque ac bibendum erat. Vestibulum tincidunt risus nisi.

-    Confirm
-    Cancel
-  
-  Show modal
-

-
-

-  
Top aligned

-  
-    
Top modal header

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    Confirm
-    Cancel
-  
-  Show modal
-

-
-

-  
Small

-  
-    
Small modal header

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    Confirm
-    Cancel
-  
-  Show modal
-

-
-

-  
Medium

-  
-    
Medium modal header

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    Confirm
-    Cancel
-  
-  Show modal
-

-
-

-  
Large

-  
-    
Large modal header

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    Confirm
-    Cancel
-  
-  Show modal
-

-
-

-  
--pf-c-modal-box--Width CSS Custom Property

-  
-    
Width 50% header

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    Confirm
-    Cancel
-  
-  Show modal
-

-
-

-  
Custom header and footer

-  
-    
With custom header/footer content.

-    
Allows for custom content in the header and/or footer by slotting HTML.

-    
When static text describing the modal is available, it can be wrapped
-      with an ID referring to the
-      modal's aria-describedby value.

-    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-    

-      
-      Custom modal footer.
-    

-  
-  Show modal
-

-
-

-  
No header

-  
-    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-  
-  Show modal
-

-
-

-  
Custom icon

-  
-    

-      
-      Modal Header
-    

-    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-  
-  Show modal
-

-
-

-  
Warning alert

-  
-    

-      
-      Modal Header
-    

-    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-  
-  Show modal
-

-
-

-  
With overflowing content

-  
If the content that you're passing to the modal is likely to overflow the modal content area, it is still
-    accessible via keyboard scrolling.

-  
-    
Modal with overflowing content

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    
Nullam dapibus, leo quis suscipit semper, nisi sapien ultricies turpis, ac tincidunt ipsum risus in nibh. Ut
-      consequat dolor risus. Vivamus ultricies lacinia ipsum, mattis egestas nisi scelerisque sit amet. Fusce eleifend,
-      sapien vel tempor convallis, magna nisl dapibus tortor, vel lobortis metus turpis vel odio. Suspendisse pharetra
-      ex nec volutpat tristique. Cras posuere et augue id maximus. Duis lobortis rutrum luctus. Integer cursus odio ac
-      enim vehicula sollicitudin. Morbi feugiat urna nulla, vel molestie enim tempus et. Fusce pellentesque ligula a
-      nibh viverra mattis. Vestibulum tincidunt diam quis enim feugiat finibus in eu felis. Morbi ac fringilla ligula.
-      Praesent nec ex nec sapien laoreet suscipit. Nullam sit amet tempor metus, a consequat purus. Pellentesque non
-      maximus nulla, tempus accumsan enim.

-    
Etiam semper metus sed urna blandit lacinia. Maecenas nibh nisl, pharetra elementum enim sed, porta vehicula
-      felis. Donec at ante consequat, aliquet urna vitae, imperdiet urna. Nam vel molestie nibh, quis ornare arcu. Donec
-      faucibus enim id accumsan laoreet. Sed laoreet leo id eleifend sagittis. Praesent eget lacinia lectus, sit amet
-      cursus eros. Aenean et augue risus.

-    
Aliquam erat volutpat. Integer nisi justo, molestie a dolor ut, ultricies efficitur est. Lorem ipsum dolor sit
-      amet, consectetur adipiscing elit. In et diam dignissim, aliquet odio quis, efficitur erat. Integer cursus
-      convallis ligula, dapibus elementum sem. Mauris blandit vitae risus id pharetra. Donec et diam eros.

-    
Curabitur urna est, mollis vitae leo nec, vehicula pharetra dui. Mauris non est viverra, semper lacus in,
-      sollicitudin est. Fusce pharetra neque vel orci congue dignissim. Curabitur ac sem viverra, molestie mauris ac,
-      egestas tortor. Aenean ut aliquet ligula, id gravida metus. Sed semper et quam et sagittis. Pellentesque egestas
-      magna id eros interdum facilisis. Nam dignissim ante quis augue finibus tristique. Donec at augue sem. Nulla
-      mollis risus at ligula finibus, vitae volutpat ex auctor. Morbi vel cursus felis. Maecenas lobortis porttitor
-      odio, non venenatis risus varius vitae. Proin gravida mi odio, sed pretium neque luctus vitae. Mauris ut libero
-      bibendum, finibus dui non, rutrum sapien. Quisque ac bibendum erat. Vestibulum tincidunt risus nisi.

-    Confirm
-    Cancel
-  
-  Show modal
-

-
-

-  
External trigger

-  
You may set an external button as the trigger by setting its' ID as the modal's trigger attribute.

-  
-    
External trigger

-    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-      anim id est laborum.

-    Confirm
-    Cancel
-  
-
-  
Arbitrary content can intervene between the external trigger and the modal element, as long as they are within the
-    same root.

-
-  Show modal with external trigger
-

-
+
+
+
diff --git a/elements/pf-modal/demo/pf-modal.js b/elements/pf-modal/demo/pf-modal.js
deleted file mode 100644
index a8b1c7ac38..0000000000
--- a/elements/pf-modal/demo/pf-modal.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import '@patternfly/elements/pf-card/pf-card.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-modal/pf-modal.js';
-import '@patternfly/elements/pf-icon/pf-icon.js';
-
-for (const button of document.querySelectorAll('pf-modal pf-button:not([slot="trigger"])')) {
-  button.addEventListener('click', e => {
-    e.target.closest('pf-modal').close(e.target.textContent.toLowerCase());
-  });
-}
diff --git a/elements/pf-modal/demo/styling.html b/elements/pf-modal/demo/styling.html
new file mode 100644
index 0000000000..1b5bfaa3bf
--- /dev/null
+++ b/elements/pf-modal/demo/styling.html
@@ -0,0 +1,56 @@
+

+  
--pf-c-modal-box--Width CSS Custom Property

+  
+    
Width 50% header

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    Confirm
+    Cancel
+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/top-aligned.html b/elements/pf-modal/demo/top-aligned.html
new file mode 100644
index 0000000000..32ec70ae0c
--- /dev/null
+++ b/elements/pf-modal/demo/top-aligned.html
@@ -0,0 +1,56 @@
+

+  
Top aligned

+  
+    
Top modal header

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    Confirm
+    Cancel
+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/trigger-attribute.html b/elements/pf-modal/demo/trigger-attribute.html
new file mode 100644
index 0000000000..e26fe0e851
--- /dev/null
+++ b/elements/pf-modal/demo/trigger-attribute.html
@@ -0,0 +1,60 @@
+

+  
You may set an external button as the trigger by setting its' ID as the modal's trigger attribute.

+  
+    
External trigger

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    Confirm
+    Cancel
+  
+
+  
Arbitrary content can intervene between the external trigger and the modal element, as long as they are within the
+    same root.

+
+  Show modal with external trigger
+

+
+
+
+
diff --git a/elements/pf-modal/demo/variants.html b/elements/pf-modal/demo/variants.html
new file mode 100644
index 0000000000..1b89ddea75
--- /dev/null
+++ b/elements/pf-modal/demo/variants.html
@@ -0,0 +1,86 @@
+

+  
Small

+  
+    
Small modal header

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    Confirm
+    Cancel
+  
+  Show modal
+

+
+

+  
Medium

+  
+    
Medium modal header

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    Confirm
+    Cancel
+  
+  Show modal
+

+
+

+  
Large

+  
+    
Large modal header

+    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.

+    Confirm
+    Cancel
+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-modal/demo/warning-alert.html b/elements/pf-modal/demo/warning-alert.html
new file mode 100644
index 0000000000..f2a55e6ed1
--- /dev/null
+++ b/elements/pf-modal/demo/warning-alert.html
@@ -0,0 +1,54 @@
+

+  
+    

+      
+      Modal Header
+    

+    
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+  
+  Show modal
+

+
+
+
+
diff --git a/elements/pf-panel/demo/bordered.html b/elements/pf-panel/demo/bordered.html
new file mode 100644
index 0000000000..5dc10860a0
--- /dev/null
+++ b/elements/pf-panel/demo/bordered.html
@@ -0,0 +1,15 @@
+

+  
+    
Main content

+  
+

+
+
+
+
diff --git a/elements/pf-panel/demo/demo.css b/elements/pf-panel/demo/demo.css
deleted file mode 100644
index 801b5f06d3..0000000000
--- a/elements/pf-panel/demo/demo.css
+++ /dev/null
@@ -1,7 +0,0 @@
-:host {
-  display: block;
-}
-
-main {
-  padding: 1rem;
-}
diff --git a/elements/pf-panel/demo/footer.html b/elements/pf-panel/demo/footer.html
new file mode 100644
index 0000000000..94af2061e3
--- /dev/null
+++ b/elements/pf-panel/demo/footer.html
@@ -0,0 +1,16 @@
+

+  
+    
Main content

+    
Footer content

+  
+

+
+
+
+
diff --git a/elements/pf-panel/demo/header-and-footer.html b/elements/pf-panel/demo/header-and-footer.html
new file mode 100644
index 0000000000..c46e267126
--- /dev/null
+++ b/elements/pf-panel/demo/header-and-footer.html
@@ -0,0 +1,17 @@
+

+  
+    
Header content

+    
Main content

+    
Footer content

+  
+

+
+
+
+
diff --git a/elements/pf-panel/demo/header.html b/elements/pf-panel/demo/header.html
new file mode 100644
index 0000000000..ad13b9b5bb
--- /dev/null
+++ b/elements/pf-panel/demo/header.html
@@ -0,0 +1,16 @@
+

+  
+    
Header content

+    
Main content

+  
+

+
+
+
+
diff --git a/elements/pf-panel/demo/pf-panel.html b/elements/pf-panel/demo/pf-panel.html
index ad5ef87e13..787dbf9bcb 100644
--- a/elements/pf-panel/demo/pf-panel.html
+++ b/elements/pf-panel/demo/pf-panel.html
@@ -1,151 +1,15 @@
-
-
-
-

-  
Basic

-  
-    
Main content

-  
-

-
-

-  
Header

-  
-    
Header content

-    
Main content

-  
-

-
 

-  
Footer

   
     
Main content

-    
Footer content

   
 

 
-

-  
Header and footer

-  
-    
Header content

-    
Main content

-    
Footer content

-  
-

-
-

-  
Raised

-  
-    
Main content

-  
-

-
-

-  
Bordered

-  
-    
Main content

-  
-

-
-

-  
Scrollable

-  
-    

-    A couple of years ago the Computer Science Club at Bishop's University
-    ran into a problem. Our student run computer lab was running
-    unlicensed copies of a propriety operating system. The computers also
-    had many unlicensed programs installed. It was a big mess. At that
-    time we had to make an ethical decision. We had to decide whether we
-    wanted to continue breaking the law or not. We decided against running
-    software for which we didn't have licenses as it could lead to the lab
-    being closed.
-    

-
-    

-    Once that was settled we were left with another decision. We could
-    either do fund raising and purchase propriety software legally or use
-    a Free software system like GNU/Linux which is usually available at no
-    cost. After calculating the expense of purchasing propriety software
-    licenses for 6 workstations we came to the realization that we just
-    didn't have $2,000+ to spend on software when a no cost solution was
-    available.
-    

-
-    

-    Switching all of the systems over to GNU/Linux was one of the best
-    things that we've ever done. Besides having a legal lab, we also got a
-    lot of advanced features that the proprietary software we were using
-    lacked. We can update all of the machines from one location. We can
-    easily share a printer and configure the software to limit its usage
-    so that no one particular user can use up all of our toner.
-    Centralized logins and home directories mean that you can sit down at
-    any of our 6 workstations and have access to all of your files and
-    program settings. Free software does everything that we need.
-    

-
-    

-    While there were a lot of tangible benefits, switching to Free
-    Software also has some non-tangible benefits. If someone new comes
-    into the lab and likes what they see, we have the freedom to be good
-    neighbors and share copies of the software. Being friendly and sharing
-    helps society. We are also free to browse and modify the source code
-    for the programs that we run. Being able to read  large, complete,
-    well written computer code gives us a chance to learn from others. It
-    also gives us another level of customization that proprietary software
-    just can't offer.
-    

-
-    

-      Thomas Cort, President, Bishop's University Computer Science Club
-    

-  
-

-
-

-  
Scrollable with header and footer

-  
-    
Header content

-    

-    Free software is absolutely critical to the way I perform daily
-    computer tasks.  In particular, I have grown accustomed to the high
-    level of configurability and the degree of interoperability found in
-    free software.  With free software, I find that I get the benefits one
-    might see when using solutions from a single large software vendor
-    (consistency in installation and configuration, interoperability,
-    etc.) without any of the drawbacks (vendor "lock-in" chief among
-    them).  Of course, free software isn't developed by a single vendor;
-    these benefits arise from the openness of free software, and I find
-    this openness very refreshing.
-    

-
-    

-    In my academic research in computer science, I use free software
-    almost exclusively.  I find that it is necessary in my compiler,
-    middleware, and operating systems research to be able to study and
-    tinker with the internals of existing systems and yet be free to
-    openly publish my conclusions.  This is often not possible or
-    permitted with proprietary offerings.  I often release products of my
-    research as free software, to allow others the same capacity to study
-    my work.
-    

-
-    

-    In my experience, free software does precisely what technology is
-    supposed to do: it enables me to perform tasks.  Non-free software
-    doesn't always rise to this definition of "technology."  Proprietary
-    data formats can and do lock away data.  Proprietary software can give
-    nasty surprises when it decides incorrectly that you're manipulating
-    data improperly (as, for example, when it suspects you of copyright
-    infringement, even when your actions are legitimate and legal).  Such
-    software turns technology on its head: it disables you rather than
-    enabling you.  I have not the patience to fight with technology; I
-    need it to be on my side.
-    

-
-    

-    Morgan Deters

-    

-    
Footer content

-  
-

+
 
+
diff --git a/elements/pf-panel/demo/pf-panel.js b/elements/pf-panel/demo/pf-panel.js
deleted file mode 100644
index 3d6ba5fc80..0000000000
--- a/elements/pf-panel/demo/pf-panel.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@patternfly/elements/pf-panel/pf-panel.js';
diff --git a/elements/pf-panel/demo/raised.html b/elements/pf-panel/demo/raised.html
new file mode 100644
index 0000000000..e69b7fc0f4
--- /dev/null
+++ b/elements/pf-panel/demo/raised.html
@@ -0,0 +1,15 @@
+

+  
+    
Main content

+  
+

+
+
+
+
diff --git a/elements/pf-panel/demo/scrollable-with-header-and-footer.html b/elements/pf-panel/demo/scrollable-with-header-and-footer.html
new file mode 100644
index 0000000000..ca0f4c4c18
--- /dev/null
+++ b/elements/pf-panel/demo/scrollable-with-header-and-footer.html
@@ -0,0 +1,56 @@
+

+  
+    
Header content

+    

+    Free software is absolutely critical to the way I perform daily
+    computer tasks.  In particular, I have grown accustomed to the high
+    level of configurability and the degree of interoperability found in
+    free software.  With free software, I find that I get the benefits one
+    might see when using solutions from a single large software vendor
+    (consistency in installation and configuration, interoperability,
+    etc.) without any of the drawbacks (vendor "lock-in" chief among
+    them).  Of course, free software isn't developed by a single vendor;
+    these benefits arise from the openness of free software, and I find
+    this openness very refreshing.
+    

+
+    

+    In my academic research in computer science, I use free software
+    almost exclusively.  I find that it is necessary in my compiler,
+    middleware, and operating systems research to be able to study and
+    tinker with the internals of existing systems and yet be free to
+    openly publish my conclusions.  This is often not possible or
+    permitted with proprietary offerings.  I often release products of my
+    research as free software, to allow others the same capacity to study
+    my work.
+    

+
+    

+    In my experience, free software does precisely what technology is
+    supposed to do: it enables me to perform tasks.  Non-free software
+    doesn't always rise to this definition of "technology."  Proprietary
+    data formats can and do lock away data.  Proprietary software can give
+    nasty surprises when it decides incorrectly that you're manipulating
+    data improperly (as, for example, when it suspects you of copyright
+    infringement, even when your actions are legitimate and legal).  Such
+    software turns technology on its head: it disables you rather than
+    enabling you.  I have not the patience to fight with technology; I
+    need it to be on my side.
+    

+
+    

+    Morgan Deters

+    

+    
Footer content

+  
+

+
+
+
+
diff --git a/elements/pf-popover/demo/alert.html b/elements/pf-popover/demo/alert.html
new file mode 100644
index 0000000000..3abf09ca5d
--- /dev/null
+++ b/elements/pf-popover/demo/alert.html
@@ -0,0 +1,68 @@
+

+  

+    Popover alert severity
+    
+    
+    
+    
+    
+    
+      Toggle popover
+    
+  

+

+
+
+
+
diff --git a/elements/pf-popover/demo/content.html b/elements/pf-popover/demo/content.html
new file mode 100644
index 0000000000..4ba3e0be62
--- /dev/null
+++ b/elements/pf-popover/demo/content.html
@@ -0,0 +1,65 @@
+

+  

+    Content attributes
+    
+      Toggle popover
+    
+  

+
+  

+    Content slots
+    
+      
Popover heading

+      

+        Popovers are triggered by click rather than hover.
+      

+      Popover footer
+      Toggle popover
+    
+  

+
+  

+    Custom Heading Level
+    
+      Toggle popover
+    
+  

+

+
+
+
+
diff --git a/elements/pf-popover/demo/demo.css b/elements/pf-popover/demo/demo.css
deleted file mode 100644
index 13fcaf0d8f..0000000000
--- a/elements/pf-popover/demo/demo.css
+++ /dev/null
@@ -1,47 +0,0 @@
-form {
-  padding: 0 2rem;
-  display: flex;
-  flex-flow: row wrap;
-  gap: 8px;
-}
-
-form h2 {
-  width: 100%;
-}
-
-label {
-  display: flex;
-  flex-direction: column;
-}
-
-fieldset label {
-  display: grid;
-  align-content: center;
-  display: contents;
-}
-
-select {
-  display: block;
-  margin-inline-end: auto;
-  flex-basis: 100%;
-}
-
-#position-select {
-  margin: 1rem 0;
-}
-
-#alert-select {
-  margin-bottom: 1rem;
-}
-
-#no-padding pf-popover::part(content) {
-  --pf-c-popover__content--PaddingTop: 0px;
-  --pf-c-popover__content--PaddingRight: 0px;
-  --pf-c-popover__content--PaddingBottom: 0px;
-  --pf-c-popover__content--PaddingLeft: 0px;
-}
-
-#auto-width pf-popover::part(content) {
-  --pf-c-popover--MaxWidth: none;
-  --pf-c-popover--MinWidth: auto;
-}
diff --git a/elements/pf-popover/demo/flip.html b/elements/pf-popover/demo/flip.html
index 6d94889b6d..11e9a0d1ce 100644
--- a/elements/pf-popover/demo/flip.html
+++ b/elements/pf-popover/demo/flip.html
@@ -1,6 +1,3 @@
-
-
-
 

   

     No flip
@@ -39,3 +36,82 @@
     
   

 

+
+
+
+
diff --git a/elements/pf-popover/demo/icons.html b/elements/pf-popover/demo/icons.html
new file mode 100644
index 0000000000..f29104ed8f
--- /dev/null
+++ b/elements/pf-popover/demo/icons.html
@@ -0,0 +1,53 @@
+

+  

+    Icon attribute
+    
+      Toggle popover
+    
+  

+
+  

+    Icon slot
+    
+      
+      
Popover with icon

+      
Popovers are triggered by click rather than hover.

+      
Popover footer

+      Toggle popover
+    
+  

+
+  

+    Custom Icon Set
+    
+      
+      
Popover heading

+      

+        Popovers are triggered by click rather than hover.
+      

+      Popover footer
+      Toggle popover
+    
+  

+

+
+
+
+
diff --git a/elements/pf-popover/demo/pf-popover.html b/elements/pf-popover/demo/pf-popover.html
index e36c6a8578..3a2dea0bc7 100644
--- a/elements/pf-popover/demo/pf-popover.html
+++ b/elements/pf-popover/demo/pf-popover.html
@@ -1,40 +1,4 @@
-
-
-
 

-  
Basic

-
-  

-    Content attributes
-    
-      Toggle popover
-    
-  

-
-  

-    Content slots
-    
-      
Popover heading

-      

-        Popovers are triggered by click rather than hover.
-      

-      Popover footer
-      Toggle popover
-    
-  

-
-  

-    Custom Heading Level
-    
-      Toggle popover
-    
-  

-
   

     Triggered by reference
     Popover heading
     Toggle popover
   

 
-  

-    No flip
-    
-      Toggle popover
-    
-  

-
   

     No hide on outside click
     Popover heading
     
   

 
-  

-    Flip fallback
-    
-    
-      Toggle popover
-    
-  

-
   

     Close popover from content
     
@@ -123,58 +50,42 @@ 
Popover heading

       Toggle popover
     
   

-
-  
Popover with icon in the header

-
-  

-    Icon attribute
-    
-      Toggle popover
-    
-  

-
-  

-    Icon slot
-    
-      
-      
Popover with icon

-      
Popovers are triggered by click rather than hover.

-      
Popover footer

-      Toggle popover
-    
-  

-
-  

-    Custom Icon Set
-    
-      
-      
Popover heading

-      

-        Popovers are triggered by click rather than hover.
-      

-      Popover footer
-      Toggle popover
-    
-  

 

 
-

-  

-    Popover alert severity
-    
-    
-    
-    
-    
-    
-      Toggle popover
-    
-  

-

+
+
+
diff --git a/elements/pf-popover/demo/pf-popover.js b/elements/pf-popover/demo/pf-popover.js
deleted file mode 100644
index 0a7b7ed7bf..0000000000
--- a/elements/pf-popover/demo/pf-popover.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import '@patternfly/elements/pf-popover/pf-popover.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-icon/pf-icon.js';
-
-// Positions
-const select = document.getElementById('position-select');
-select.addEventListener('change', event =>
-  event.target
-    .closest('fieldset')
-    .querySelector('pf-popover')
-    .setAttribute('position', event.target.value));
-
-// Close popover from content
-const closeButton = document.getElementById('close-button');
-closeButton?.addEventListener('click', event => event.target.closest('pf-popover').hide());
-
-// Alert variants
-const alert = document.getElementById('alert');
-alert?.addEventListener('change', event =>
-  alert
-    .querySelector('pf-popover')
-    .setAttribute('alert-severity', event.target.closest('form').elements.severity.value));
-
-document.addEventListener('submit', function(event) {
-  event.preventDefault();
-});
diff --git a/elements/pf-progress-stepper/demo/alignment.html b/elements/pf-progress-stepper/demo/alignment.html
new file mode 100644
index 0000000000..4c30e01fe4
--- /dev/null
+++ b/elements/pf-progress-stepper/demo/alignment.html
@@ -0,0 +1,38 @@
+

+  
With alignment

+  
+  
+  
+    First Step
+    Second Step
+    Third Step
+  
+

+
+
+
+
diff --git a/elements/pf-progress-stepper/demo/compact.html b/elements/pf-progress-stepper/demo/compact.html
new file mode 100644
index 0000000000..14777bad9c
--- /dev/null
+++ b/elements/pf-progress-stepper/demo/compact.html
@@ -0,0 +1,38 @@
+

+  
Compact

+  
+  
+  
+    First Step
+    Second Step
+    Third Step
+  
+

+
+
+
+
diff --git a/elements/pf-progress-stepper/demo/custom-icons.html b/elements/pf-progress-stepper/demo/custom-icons.html
new file mode 100644
index 0000000000..4801eea447
--- /dev/null
+++ b/elements/pf-progress-stepper/demo/custom-icons.html
@@ -0,0 +1,18 @@
+

+  
+    Successful completion
+    In process
+    Pending
+  
+

+
+
+
+
diff --git a/elements/pf-progress-stepper/demo/danger.html b/elements/pf-progress-stepper/demo/danger.html
new file mode 100644
index 0000000000..a38a7386e2
--- /dev/null
+++ b/elements/pf-progress-stepper/demo/danger.html
@@ -0,0 +1,20 @@
+

+  
+    First Step
+    Second Step
+    Third Step
+    Fourth Step
+    Fifth Step
+  
+

+
+
+
+
diff --git a/elements/pf-progress-stepper/demo/demo.css b/elements/pf-progress-stepper/demo/demo.css
deleted file mode 100644
index 36317637db..0000000000
--- a/elements/pf-progress-stepper/demo/demo.css
+++ /dev/null
@@ -1,10 +0,0 @@
-form,
-label pf-switch {
-  padding-inline: .5rem;
-}
-
-form,
-label {
-  display: block;
-  padding-block: .5rem;
-}
diff --git a/elements/pf-progress-stepper/demo/info.html b/elements/pf-progress-stepper/demo/info.html
new file mode 100644
index 0000000000..7ed919373b
--- /dev/null
+++ b/elements/pf-progress-stepper/demo/info.html
@@ -0,0 +1,37 @@
+

+  
+    First Step
+    Second Step
+    Third Step
+    Fourth Step
+    Fifth Step
+  
+

+
+
+
+
diff --git a/elements/pf-progress-stepper/demo/pf-progress-stepper.html b/elements/pf-progress-stepper/demo/pf-progress-stepper.html
index c5eeb00730..4dff746a06 100644
--- a/elements/pf-progress-stepper/demo/pf-progress-stepper.html
+++ b/elements/pf-progress-stepper/demo/pf-progress-stepper.html
@@ -1,73 +1,18 @@
-
-
-
-

-  
Basic

-  
-    First Step
-    Second Step
-    Third Step
-  
-

-
-

-  
With step descriptions

+

   
-    First Step
-    Second Step
-    Third Step
-  
-

-
-

-  
With alignment

-  
-  
-  
-    First Step
-    Second Step
-    Third Step
-  
-

-
-

-  
Compact

-  
-  
-  
     First Step
     Second Step
     Third Step
   
-

-
-

-  
With an issue

-  
-    First Step
-    Second Step
-    Third Step
-    Fourth Step
-    Fifth Step
-  
 

 
-

-  
With a failure

-  
-    First Step
-    Second Step
-    Third Step
-    Fourth Step
-    Fifth Step
-  
-

+
 
-

-  
With custom icons

-  
-    Successful completion
-    In process
-    Pending
-  
-

+
diff --git a/elements/pf-progress-stepper/demo/pf-progress-stepper.js b/elements/pf-progress-stepper/demo/pf-progress-stepper.js
deleted file mode 100644
index c483ac9a6b..0000000000
--- a/elements/pf-progress-stepper/demo/pf-progress-stepper.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js';
-
-/** @this{HTMLFormElement}*/
-function onChange() {
-  this.elements.progress.vertical = this.elements.vertical.checked;
-  this.elements.progress.center = this.elements.center.checked;
-}
-
-for (const form of document.querySelectorAll('form')) {
-  form.addEventListener('change', onChange);
-}
diff --git a/elements/pf-progress-stepper/demo/step-descriptions.html b/elements/pf-progress-stepper/demo/step-descriptions.html
new file mode 100644
index 0000000000..ff626f626d
--- /dev/null
+++ b/elements/pf-progress-stepper/demo/step-descriptions.html
@@ -0,0 +1,18 @@
+

+  
+    First Step
+    Second Step
+    Third Step
+  
+

+
+
+
+
diff --git a/elements/pf-progress-stepper/pf-progress-step.ts b/elements/pf-progress-stepper/pf-progress-step.ts
index 05f34347f4..33c2f5e226 100644
--- a/elements/pf-progress-stepper/pf-progress-step.ts
+++ b/elements/pf-progress-stepper/pf-progress-step.ts
@@ -13,9 +13,9 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals-
 import style from './pf-progress-step.css';
 
 const ICONS = new Map(Object.entries({
-  success: { icon: 'circle-check' },
-  danger: { icon: 'circle-exclamation' },
-  warning: { icon: 'triangle-exclamation' },
+  success: { icon: 'check-circle' },
+  danger: { icon: 'exclamation-circle' },
+  warning: { icon: 'exclamation-triangle' },
   info: { icon: 'resources-full', set: 'patternfly' },
 }));
 
diff --git a/elements/pf-progress/demo/demo.css b/elements/pf-progress/demo/demo.css
deleted file mode 100644
index 4ef939b648..0000000000
--- a/elements/pf-progress/demo/demo.css
+++ /dev/null
@@ -1,6 +0,0 @@
-[data-demo="pf-progress"] {
-  max-width: 600px;
-}
-pf-progress {
-  width: 100%;
-}
diff --git a/elements/pf-progress/demo/kitchen-sink.html b/elements/pf-progress/demo/kitchen-sink.html
index d5f19ced86..36c0dd7d80 100644
--- a/elements/pf-progress/demo/kitchen-sink.html
+++ b/elements/pf-progress/demo/kitchen-sink.html
@@ -136,3 +136,6 @@ 
Truncated description

     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"
 >
 
+
diff --git a/elements/pf-progress/demo/pf-progress.html b/elements/pf-progress/demo/pf-progress.html
index adfee3bcf2..76f32e9ec3 100644
--- a/elements/pf-progress/demo/pf-progress.html
+++ b/elements/pf-progress/demo/pf-progress.html
@@ -1,5 +1,5 @@
-
+
 
-
Default:

-
-
\ No newline at end of file
+
diff --git a/elements/pf-progress/demo/pf-progress.js b/elements/pf-progress/demo/pf-progress.js
deleted file mode 100644
index bc46f8f80b..0000000000
--- a/elements/pf-progress/demo/pf-progress.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@patternfly/elements/pf-progress/pf-progress.js';
diff --git a/elements/pf-progress/demo/truncated-description.html b/elements/pf-progress/demo/truncated-description.html
index 62993a68c4..72d7e9f0f3 100644
--- a/elements/pf-progress/demo/truncated-description.html
+++ b/elements/pf-progress/demo/truncated-description.html
@@ -1,10 +1,20 @@
-
+

+  
+

 
-
 
+
+
diff --git a/elements/pf-spinner/demo/demo.css b/elements/pf-spinner/demo/demo.css
deleted file mode 100644
index f2b024d69b..0000000000
--- a/elements/pf-spinner/demo/demo.css
+++ /dev/null
@@ -1,2 +0,0 @@
-pf-spinner {
-}
diff --git a/elements/pf-spinner/demo/diameter.html b/elements/pf-spinner/demo/diameter.html
new file mode 100644
index 0000000000..8b2a6cc957
--- /dev/null
+++ b/elements/pf-spinner/demo/diameter.html
@@ -0,0 +1,15 @@
+

+  
Custom size

+  Loading...
+

+
+
+
+
diff --git a/elements/pf-spinner/demo/pf-spinner.html b/elements/pf-spinner/demo/pf-spinner.html
index 727e572949..836cd467aa 100644
--- a/elements/pf-spinner/demo/pf-spinner.html
+++ b/elements/pf-spinner/demo/pf-spinner.html
@@ -1,20 +1,14 @@
-
-
-
 

-  
Basic

   Loading...
 

 
-

-  
Size variations

-  Loading...
-  Loading...
-  Loading...
-  Loading...
-

+
 
-

-  
Custom size

-  Loading...
-

+
diff --git a/elements/pf-spinner/demo/pf-spinner.js b/elements/pf-spinner/demo/pf-spinner.js
deleted file mode 100644
index d065c78acf..0000000000
--- a/elements/pf-spinner/demo/pf-spinner.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import '@patternfly/elements/pf-card/pf-card.js';
-import '@patternfly/elements/pf-spinner/pf-spinner.js';
diff --git a/elements/pf-spinner/demo/size.html b/elements/pf-spinner/demo/size.html
new file mode 100644
index 0000000000..6b63677aaf
--- /dev/null
+++ b/elements/pf-spinner/demo/size.html
@@ -0,0 +1,18 @@
+

+  
Size variations

+  Loading...
+  Loading...
+  Loading...
+  Loading...
+

+
+
+
+
diff --git a/elements/pf-switch/demo/checked.html b/elements/pf-switch/demo/checked.html
new file mode 100644
index 0000000000..cb009030d3
--- /dev/null
+++ b/elements/pf-switch/demo/checked.html
@@ -0,0 +1,40 @@
+

+  

+    

+      Checked with label
+      
+      
+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-switch/demo/demo.css b/elements/pf-switch/demo/demo.css
deleted file mode 100644
index 65f4c739c2..0000000000
--- a/elements/pf-switch/demo/demo.css
+++ /dev/null
@@ -1,32 +0,0 @@
-section {
-  margin: 2rem;
-}
-
-fieldset {
-  display: grid;
-  grid-template-columns: min-content max-content;
-  gap: var(--pf-c-switch--ColumnGap, var(--pf-c-switch__label--PaddingLeft, 1rem));
-}
-
-fieldset:has(#reversed) {
-  grid-template-columns: max-content min-content;
-}
-
-label {
-  color: var(--pf-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-}
-
-pf-switch:not([checked]) ~ label,
-label:has(~ pf-switch:not([checked])) {
-  color: var(--pf-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%;
-}
diff --git a/elements/pf-switch/demo/disabled.html b/elements/pf-switch/demo/disabled.html
new file mode 100644
index 0000000000..7cd8459733
--- /dev/null
+++ b/elements/pf-switch/demo/disabled.html
@@ -0,0 +1,44 @@
+

+  

+    

+      Checked and Disabled
+      
+      
+      
+    

+    

+      
+      
+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-switch/demo/nested-in-label.html b/elements/pf-switch/demo/nested-in-label.html
new file mode 100644
index 0000000000..5cfa58d910
--- /dev/null
+++ b/elements/pf-switch/demo/nested-in-label.html
@@ -0,0 +1,57 @@
+

+  

+    

+      Nested in a label
+      
+      Submit
+      Submit to read status
+    

+  

+

+
+
+
+
diff --git a/elements/pf-switch/demo/pf-switch.html b/elements/pf-switch/demo/pf-switch.html
index 834ed3c469..23d8f022d3 100644
--- a/elements/pf-switch/demo/pf-switch.html
+++ b/elements/pf-switch/demo/pf-switch.html
@@ -1,10 +1,5 @@
-
-
-
 

-  
Switch

   
A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.

-  
Basic

   

     

       Option A
@@ -39,64 +34,38 @@ 
Basic

   
 

 
-

-

-  

-    Reversed
-    
-    
-    
-  

-

-

+
 
-

-

-  

-    Checked with label
-    
-    
-    
-  

-

-

+
diff --git a/elements/pf-switch/demo/pf-switch.js b/elements/pf-switch/demo/pf-switch.js
deleted file mode 100644
index 512be38b7e..0000000000
--- a/elements/pf-switch/demo/pf-switch.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-button/pf-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);
-});
-
-document.getElementById('nested-label').addEventListener('submit', /** @this {HTMLFormElement} */function(event) {
-  event.preventDefault();
-  this.querySelector('output').textContent = `Dark mode ${this.elements.status.checked ? 'on' : 'off'}`;
-});
diff --git a/elements/pf-switch/demo/reversed.html b/elements/pf-switch/demo/reversed.html
new file mode 100644
index 0000000000..3cd351e6c6
--- /dev/null
+++ b/elements/pf-switch/demo/reversed.html
@@ -0,0 +1,41 @@
+

+  

+    

+      Reversed
+      
+      
+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-switch/demo/without-label.html b/elements/pf-switch/demo/without-label.html
new file mode 100644
index 0000000000..c6c8a50b05
--- /dev/null
+++ b/elements/pf-switch/demo/without-label.html
@@ -0,0 +1,39 @@
+

+  

+    

+      Without label
+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-table/demo/expandable-rows-compound.html b/elements/pf-table/demo/expandable-rows-compound.html
index 7ca0e5bee9..311bc8af32 100644
--- a/elements/pf-table/demo/expandable-rows-compound.html
+++ b/elements/pf-table/demo/expandable-rows-compound.html
@@ -20,7 +20,7 @@
     
     
Branches...

     
-      
+      
       4
     
     
Pull requests...

@@ -47,7 +47,7 @@
     
     
Branches...

     
-      
+      
       4
     
     
Pull requests...

diff --git a/elements/pf-tabs/demo/active-tab-is-disabled.html b/elements/pf-tabs/demo/active-tab-is-disabled.html
new file mode 100644
index 0000000000..e59585080d
--- /dev/null
+++ b/elements/pf-tabs/demo/active-tab-is-disabled.html
@@ -0,0 +1,33 @@
+

+  
+    Users
+    Users
+    Containers
+    Containers
+    Database
+    Database
+    Disabled
+    Disabled
+    Aria Disabled
+    Aria Disabled
+  
+

+
+
+
+
diff --git a/elements/pf-tabs/demo/box.html b/elements/pf-tabs/demo/box.html
new file mode 100644
index 0000000000..4d1e62ad26
--- /dev/null
+++ b/elements/pf-tabs/demo/box.html
@@ -0,0 +1,92 @@
+

+  
+    Users
+    Users
+    Containers
+    Containers
+    Database
+    Database
+    Disabled
+    Disabled
+    Aria Disabled
+    Aria Disabled
+  
+
+  

+    Box Type:
+    
+    
+    
+  

+

+
+
+
+
diff --git a/elements/pf-tabs/demo/demo.css b/elements/pf-tabs/demo/demo.css
deleted file mode 100644
index 4debbdf06a..0000000000
--- a/elements/pf-tabs/demo/demo.css
+++ /dev/null
@@ -1,62 +0,0 @@
-main {
-  display: block;
-  grid: unset;
-}
-
-.example {
-  margin: 0 auto;
-  padding: 0 16px 32px;
-  width: 100%;
-  max-width: 1008px;
-}
-
-.example:last-of-type {
-  padding-block-end: 64px;
-}
-
-.input {
-  margin-block-start: 16px;
-}
-
-@media screen and (min-width: 768px) {
-  .example {
-    padding: 0 32px 32px;
-  }
-}
-
-/*
-  Inset Examples set class on host::part(tabs-container)
-*/
-.inset-sm::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--sm, 0.5rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm, 0.5rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm, 0.5rem);
-}
-
-.inset-md::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--md, 1rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md, 1rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md, 1rem);
-}
-
-.inset-lg::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--lg, 1.5rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg, 1.5rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg, 1.5rem);
-}
-
-.inset-xl::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--xl, 2rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl, 2rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl, 2rem);
-}
-
-.inset-2xl::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--2xl, 3rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl, 3rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl, 3rem);
-}
-
-.inset-page::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset, var(--pf-global--spacer--md, 1rem));
-}
diff --git a/elements/pf-tabs/demo/filled-with-icons.html b/elements/pf-tabs/demo/filled-with-icons.html
new file mode 100644
index 0000000000..26d1ddc3e2
--- /dev/null
+++ b/elements/pf-tabs/demo/filled-with-icons.html
@@ -0,0 +1,30 @@
+

+  
+     Users      
+     Containers 
+     Database   
+    Users
+    Containers
+    Database
+  
+

+
+
+
+
diff --git a/elements/pf-tabs/demo/filled.html b/elements/pf-tabs/demo/filled.html
new file mode 100644
index 0000000000..9a681a34fc
--- /dev/null
+++ b/elements/pf-tabs/demo/filled.html
@@ -0,0 +1,29 @@
+

+  
+    Users
+    Users
+    Containers
+    Containers
+    Database
+    Database
+  
+

+
+
+
+
diff --git a/elements/pf-tabs/demo/icons-and-text.html b/elements/pf-tabs/demo/icons-and-text.html
new file mode 100644
index 0000000000..bccb27a456
--- /dev/null
+++ b/elements/pf-tabs/demo/icons-and-text.html
@@ -0,0 +1,36 @@
+

+  
+     Users          
+     Containers     
+     Database       
+     Server         
+     System         
+     Network 
+    Users
+    Containers
+    Database
+    Server
+    System
+    Network
+  
+

+
+
+
+
diff --git a/elements/pf-tabs/demo/inset.html b/elements/pf-tabs/demo/inset.html
new file mode 100644
index 0000000000..d54414bef2
--- /dev/null
+++ b/elements/pf-tabs/demo/inset.html
@@ -0,0 +1,91 @@
+

+  
+    Users
+    Users
+    Containers
+    Containers
+    Database
+    Database
+    Disabled
+    Disabled
+    Aria Disabled
+    Aria Disabled
+  
+
+  

+    
Inset size: 

+    
+    
+    
+    
+    
+    
+  

+

+
+
+
+
diff --git a/elements/pf-tabs/demo/manual-activation.html b/elements/pf-tabs/demo/manual-activation.html
new file mode 100644
index 0000000000..ceede55e3c
--- /dev/null
+++ b/elements/pf-tabs/demo/manual-activation.html
@@ -0,0 +1,34 @@
+

+  
Manual Activation

+  
+    Users
+    Containers
+    Database
+    Disabled
+    Aria Disabled
+    Users
+    Containers
+    Database
+    Disabled
+    Aria Disabled
+  
+

+
+
+
+
diff --git a/elements/pf-tabs/demo/overflow.html b/elements/pf-tabs/demo/overflow.html
new file mode 100644
index 0000000000..2d25ffd103
--- /dev/null
+++ b/elements/pf-tabs/demo/overflow.html
@@ -0,0 +1,53 @@
+

+  
+    Users
+    Users
+    Containers
+    Containers
+    Database
+    Database
+    Server
+    Server
+    System
+    System
+    Network
+    Network
+  
+
+  

+    Box variant:
+    
+    
+    
+  

+

+
+
+
+
diff --git a/elements/pf-tabs/demo/pf-tabs.html b/elements/pf-tabs/demo/pf-tabs.html
index e257a1ab36..c26682561a 100644
--- a/elements/pf-tabs/demo/pf-tabs.html
+++ b/elements/pf-tabs/demo/pf-tabs.html
@@ -1,8 +1,4 @@
-
-
-
-

-  
Default

+

   
     Users
     Users
@@ -15,192 +11,24 @@ 
Default

     Aria Disabled
     Aria Disabled
   
-

-
-

-  
Box

-  
-    Users
-    Users
-    Containers
-    Containers
-    Database
-    Database
-    Disabled
-    Disabled
-    Aria Disabled
-    Aria Disabled
-  
-
-  

-    Box Type:
-    
-    
-    
-  
-

-
-

-  
Default overflow

-    
-      Users
-      Users
-      Containers
-      Containers
-      Database
-      Database
-      Server
-      Server
-      System
-      System
-      Network
-      Network
-    
-
-  

-    Box variant:
-    
-    
-    
-  
-

-
-

-  
Vertical

-  
-    Users
-    Users
-    Containers
-    Containers
-    Database
-    Database
-    Disabled
-    Disabled
-    Aria Disabled
-    Aria Disabled
-  
-
-  

-    Box variant:
-    
-    
-    
-  
-

-
-

-  
Inset

-  
-    Users
-    Users
-    Containers
-    Containers
-    Database
-    Database
-    Disabled
-    Disabled
-    Aria Disabled
-    Aria Disabled
-  
-
-  

-    
Inset size: 

-    
-    
-    
-    
-    
-    
-  

-

-
-

-  
Icons and text

-  
-     Users          
-     Containers     
-     Database       
-     Server         
-     System         
-     Network 
-    Users
-    Containers
-    Database
-    Server
-    System
-    Network
-  
-

-
-

-  
Filled

-  
-    Users
-    Users
-    Containers
-    Containers
-    Database
-    Database
-  
-

-
-

-  
Filled with icons

-  
-     Users      
-     Containers 
-     Database   
-    Users
-    Containers
-    Database
-  
-

-
-

-  
Active Tab is Disabled

-  
-    Users
-    Users
-    Containers
-    Containers
-    Database
-    Database
-    Disabled
-    Disabled
-    Aria Disabled
-    Aria Disabled
-  
-

-
-

-  
Tabs first in markup

-  
-    Users
-    Containers
-    Database
-    Disabled
-    Aria Disabled
-    Users
-    Containers
-    Database
-    Disabled
-    Aria Disabled
-  
-

-
-
-

-  
Manual Activation

-  
-    Users
-    Containers
-    Database
-    Disabled
-    Aria Disabled
-    Users
-    Containers
-    Database
-    Disabled
-    Aria Disabled
-  
-

+

+
+
+
+
diff --git a/elements/pf-tabs/demo/pf-tabs.js b/elements/pf-tabs/demo/pf-tabs.js
deleted file mode 100644
index 55ae934a57..0000000000
--- a/elements/pf-tabs/demo/pf-tabs.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import '@patternfly/elements/pf-icon/pf-icon.js';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-tabs/pf-tabs.js';
-
-const toggleVariant = document.getElementById('toggle-variant');
-const resize = document.getElementById('overflow');
-const verticalInput = document.getElementById('toggle-vertical');
-const resizeInput = document.getElementById('toggle-resize');
-const verticalVariant = document.querySelector('pf-tabs[vertical]');
-const boxVariant = document.querySelector('pf-tabs[box]');
-const inset = document.querySelector('#inset');
-
-function variantToggle() {
-  boxVariant.setAttribute('box', toggleVariant.checked ? 'dark' : 'light');
-}
-
-function verticalToggle() {
-  if (verticalInput.checked) {
-    verticalVariant.setAttribute('box', 'dark');
-  } else {
-    verticalVariant.removeAttribute('box');
-  }
-}
-
-function resizeToggle() {
-  if (resizeInput.checked) {
-    resize.setAttribute('box', 'dark');
-  } else {
-    resize.removeAttribute('box');
-  }
-}
-
-function insetToggle(event) {
-  inset.classList = event.target.value;
-}
-
-for (const input of document.querySelectorAll('input[name="toggle-inset"]')) {
-  input.addEventListener('change', insetToggle);
-}
-
-toggleVariant.addEventListener('change', variantToggle);
-resizeInput.addEventListener('change', resizeToggle);
-verticalInput.addEventListener('change', verticalToggle);
diff --git a/elements/pf-tabs/demo/tabs-first-in-markup.html b/elements/pf-tabs/demo/tabs-first-in-markup.html
new file mode 100644
index 0000000000..055781a6b4
--- /dev/null
+++ b/elements/pf-tabs/demo/tabs-first-in-markup.html
@@ -0,0 +1,33 @@
+

+  
+    Users
+    Containers
+    Database
+    Disabled
+    Aria Disabled
+    Users
+    Containers
+    Database
+    Disabled
+    Aria Disabled
+  
+

+
+
+
+
diff --git a/elements/pf-tabs/demo/vertical.html b/elements/pf-tabs/demo/vertical.html
new file mode 100644
index 0000000000..52c1b23462
--- /dev/null
+++ b/elements/pf-tabs/demo/vertical.html
@@ -0,0 +1,50 @@
+

+  
+    Users
+    Users
+    Containers
+    Containers
+    Database
+    Database
+    Disabled
+    Disabled
+    Aria Disabled
+    Aria Disabled
+  
+
+  

+    Box variant:
+    
+    
+    
+  

+

+
+
+
+
diff --git a/elements/pf-tile/demo/demo.css b/elements/pf-tile/demo/demo.css
deleted file mode 100644
index 26d3ff4f79..0000000000
--- a/elements/pf-tile/demo/demo.css
+++ /dev/null
@@ -1,59 +0,0 @@
-:host {
-  display: block;
-}
-
-section {
-  margin: 0 auto;
-  padding: 0 16px 32px;
-  width: 100%;
-  max-width: 1008px;
-}
-
-.pf-l-flex {
-  display: var(--pf-l-flex--Display, flex);
-  flex-wrap: var(--pf-l-flex--FlexWrap, wrap);
-  align-items: var(--pf-l-flex--AlignItems, baseline);
-}
-
-.pf-l-flex > * {
-  order: var(--pf-l-flex--item--Order, 0);
-  max-width: 100%;
-  margin-right: var(--pf-l-flex--spacer, var(--pf-l-flex--spacer-base, 1rem));
-}
-
-.pf-l-flex > .pf-m-flex-1 {
-  flex: 1 0 0;
-}
-
-@media screen and (min-width: 576px) {
-  .pf-l-flex > * {
-    order: var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0));
-  }
-}
-@media screen and (min-width: 768px) {
-  .pf-l-flex > * {
-    order: var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0)));
-  }
-}
-@media screen and (min-width: 992px) {
-  .pf-l-flex > * {
-    order: var(--pf-l-flex--item--Order-on-lg, var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0))));
-  }
-}
-@media screen and (min-width: 1200px) {
-  .pf-l-flex > * {
-    order: var(--pf-l-flex--item--Order-on-xl, var(--pf-l-flex--item--Order-on-lg, var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0)))));
-  }
-}
-@media screen and (min-width: 1450px) {
-  .pf-l-flex > * {
-    order: var(--pf-l-flex--item--Order-on-2xl, var(--pf-l-flex--item--Order-on-xl, var(--pf-l-flex--item--Order-on-lg, var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0))))));
-  }
-}
-.pf-l-flex > *:last-child {
-  --pf-l-flex--spacer: 0;
-}
-
-.pf-l-flex.pf-m-flex {
-  display: var(--pf-l-flex--Display, flex);
-}
diff --git a/elements/pf-tile/demo/extra-content.html b/elements/pf-tile/demo/extra-content.html
new file mode 100644
index 0000000000..f93b7bc800
--- /dev/null
+++ b/elements/pf-tile/demo/extra-content.html
@@ -0,0 +1,78 @@
+

+  

+    

+      
+        
+        
Default

+        
This is really really long subtext that goes on for so long that it has to wrap to the next line.
+          This is really really long subtext that goes on for so long that it has to wrap to the next line.

+      
+    

+    

+      
+        
+        
Selected

+        
This is really really long subtext that goes on for so long that it has to wrap to the next line.

+      
+    

+    

+      
+        
+        
Disabled

+        
Subtext goes here

+      
+    

+  

+

+
+
+
+
diff --git a/elements/pf-tile/demo/icon.html b/elements/pf-tile/demo/icon.html
new file mode 100644
index 0000000000..6232afca6f
--- /dev/null
+++ b/elements/pf-tile/demo/icon.html
@@ -0,0 +1,33 @@
+

+  
pf-icon or svgs

+  
+    
+    
Default

+    
Subtext goes here

+  
+  
+    
+    
Selected

+    
Subtext goes here

+  
+  
+    
+    
Disabled

+    
Subtext goes here

+  
+

+
+
+
+
+
diff --git a/elements/pf-tile/demo/keyboard-interaction.html b/elements/pf-tile/demo/keyboard-interaction.html
new file mode 100644
index 0000000000..05e60dbced
--- /dev/null
+++ b/elements/pf-tile/demo/keyboard-interaction.html
@@ -0,0 +1,47 @@
+

+  
See demo source for JavaScript snippet.

+  

+    
+      
Tile 1

+    
+    
+      
Tile 2

+    
+    
+      
Tile 3

+    
+    
+      
Tile 4

+    
+  

+

+
+
+
+
diff --git a/elements/pf-tile/demo/pf-tile.html b/elements/pf-tile/demo/pf-tile.html
index 77b7b9ad0a..3c7365e008 100644
--- a/elements/pf-tile/demo/pf-tile.html
+++ b/elements/pf-tile/demo/pf-tile.html
@@ -1,143 +1,24 @@
-
-
-
-

-  
Basic

-  
-    
Default

-  
-  
-    
Selected

-  
-  
-    
Disabled

-  
-

-
-
-

-  
With subtext

-  
-    
Default

-    
Subtext goes here

-  
-  
-    
Selected

-    
Subtext goes here

-  
-  
-    
Disabled

-    
Subtext goes here

-  
-

-
-
 

-  
With icon

-  
pf-icon or svgs

   
-    
     
Default

-    
Subtext goes here

   
   
-    
     
Selected

-    
Subtext goes here

   
   
-    
-    
Disabled

-    
Subtext goes here

-  
-

-
-
-

-  
Stacked icon

-  
pf-icon or svgs

-  
-    
-    
Default

-    
Subtext goes here

-  
-  
-    
-    
Selected

-    
Subtext goes here

-  
-  
-    
-    
Disabled

-    
Subtext goes here

-  
-

-
-
-

-  
Stacked large icon

-  
pf-icon or svgs

-  
-    
-    
Default

-    
Subtext goes here

-  
-  
-    
-    
Selected

-    
Subtext goes here

-  
-  
-    
     
Disabled

-    
Subtext goes here

   
 

 
-
-

-  
With extra content

-  

-    

-      
-        
-        
Default

-        
This is really really long subtext that goes on for so long that it has to wrap to the next line.
-          This is really really long subtext that goes on for so long that it has to wrap to the next line.

-      
-    

-    

-      
-        
-        
Selected

-        
This is really really long subtext that goes on for so long that it has to wrap to the next line.

-      
-    

-    

-      
-        
-        
Disabled

-        
Subtext goes here

-      
-    

-  

-

-
-

-  
Keyboard interaction

-  
See demo source for JavaScript snippet.

-  

-    
-      
Tile 1

-    
-    
-      
Tile 2

-    
-    
-      
Tile 3

-    
-    
-      
Tile 4

-    
-  

-

+
+
+
diff --git a/elements/pf-tile/demo/pf-tile.js b/elements/pf-tile/demo/pf-tile.js
deleted file mode 100644
index eb351b5daa..0000000000
--- a/elements/pf-tile/demo/pf-tile.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import '@patternfly/elements/pf-tile/pf-tile.js';
-
-const container = document.getElementById('keyboard-interaction');
-
-function selectByEvent(event) {
-  const tile = event.composedPath().find(node => node.localName === 'pf-tile');
-  if (tile) {
-    for (const child of container.querySelectorAll('pf-tile')) {
-      child.selected = tile === child && !child.disabled;
-    }
-  }
-}
-container.addEventListener('click', selectByEvent);
-container.addEventListener('keydown', function(event) {
-  switch (event.key) {
-    case ' ':
-    case 'Enter':
-      event.preventDefault();
-      selectByEvent(event);
-  }
-});
diff --git a/elements/pf-tile/demo/stacked-icon.html b/elements/pf-tile/demo/stacked-icon.html
new file mode 100644
index 0000000000..a8d956e27c
--- /dev/null
+++ b/elements/pf-tile/demo/stacked-icon.html
@@ -0,0 +1,32 @@
+

+  
pf-icon or svgs

+  
+    
+    
Default

+    
Subtext goes here

+  
+  
+    
+    
Selected

+    
Subtext goes here

+  
+  
+    
+    
Disabled

+    
Subtext goes here

+  
+

+
+
+
+
diff --git a/elements/pf-tile/demo/stacked-large-icon.html b/elements/pf-tile/demo/stacked-large-icon.html
new file mode 100644
index 0000000000..143d3e0fd9
--- /dev/null
+++ b/elements/pf-tile/demo/stacked-large-icon.html
@@ -0,0 +1,33 @@
+

+  
pf-icon or svgs

+  
+    
+    
Default

+    
Subtext goes here

+  
+  
+    
+    
Selected

+    
Subtext goes here

+  
+  
+    
+    
Disabled

+    
Subtext goes here

+  
+

+
+
+
+
+
diff --git a/elements/pf-tile/demo/subtext.html b/elements/pf-tile/demo/subtext.html
new file mode 100644
index 0000000000..5df9e18ab0
--- /dev/null
+++ b/elements/pf-tile/demo/subtext.html
@@ -0,0 +1,27 @@
+

+  
+    
Default

+    
Subtext goes here

+  
+  
+    
Selected

+    
Subtext goes here

+  
+  
+    
Disabled

+    
Subtext goes here

+  
+

+
+
+
+
diff --git a/elements/pf-timestamp/demo/basic-formats.html b/elements/pf-timestamp/demo/basic-formats.html
new file mode 100644
index 0000000000..9893f066b5
--- /dev/null
+++ b/elements/pf-timestamp/demo/basic-formats.html
@@ -0,0 +1,17 @@
+

+  

+  

+  

+  

+  

+

+
+
+
+
diff --git a/elements/pf-timestamp/demo/custom-format.html b/elements/pf-timestamp/demo/custom-format.html
new file mode 100644
index 0000000000..3496c027ef
--- /dev/null
+++ b/elements/pf-timestamp/demo/custom-format.html
@@ -0,0 +1,23 @@
+

+  

+
+  
+

+
+
+
+
diff --git a/elements/pf-timestamp/demo/custom-tooltip.html b/elements/pf-timestamp/demo/custom-tooltip.html
new file mode 100644
index 0000000000..16cdd37df4
--- /dev/null
+++ b/elements/pf-timestamp/demo/custom-tooltip.html
@@ -0,0 +1,25 @@
+

+  

+    
+      
+      Last updated on 
+    
+  

+  

+    
+      Halloween
+      
+    
+  

+

+
+
+
+
diff --git a/elements/pf-timestamp/demo/pf-timestamp.html b/elements/pf-timestamp/demo/pf-timestamp.html
index eeeda9e4d6..09247e3874 100644
--- a/elements/pf-timestamp/demo/pf-timestamp.html
+++ b/elements/pf-timestamp/demo/pf-timestamp.html
@@ -1,88 +1,13 @@
-
-
 

-  
Default

   

 

 
-

-  
Basic formats

-  

-  

-  

-  

-  

-

-
-

-  
Custom format

-  

-
-  
-

-
-

-  
Relative formats

-  

-  

-  

-  

-  

-  

-

-
-

-  
Default tooltip

-  

-    
-      
-      
-    
-  

-  

-    
-      
-      
-    
-  

-

+
 
-

-  
Custom tooltip

-  

-    
-      
-      Last updated on 
-    
-  

-  

-    
-      Halloween
-      
-    
-  

-

-
-

-  
Relative with tooltip

-  

-    
-      
-      
-    
-  

-  

-    
-      
-      
-    
-  

-

+
diff --git a/elements/pf-timestamp/demo/pf-timestamp.js b/elements/pf-timestamp/demo/pf-timestamp.js
deleted file mode 100644
index 47239bc4bb..0000000000
--- a/elements/pf-timestamp/demo/pf-timestamp.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import '@patternfly/elements/pf-card/pf-card.js';
-import '@patternfly/elements/pf-timestamp/pf-timestamp.js';
-import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
diff --git a/elements/pf-timestamp/demo/relative-format-with-tooltip.html b/elements/pf-timestamp/demo/relative-format-with-tooltip.html
new file mode 100644
index 0000000000..cfce12626c
--- /dev/null
+++ b/elements/pf-timestamp/demo/relative-format-with-tooltip.html
@@ -0,0 +1,25 @@
+

+  

+    
+      
+      
+    
+  

+  

+    
+      
+      
+    
+  

+

+
+
+
+
diff --git a/elements/pf-timestamp/demo/relative-format.html b/elements/pf-timestamp/demo/relative-format.html
new file mode 100644
index 0000000000..110068a572
--- /dev/null
+++ b/elements/pf-timestamp/demo/relative-format.html
@@ -0,0 +1,18 @@
+

+  

+  

+  

+  

+  

+  

+

+
+
+
+
diff --git a/elements/pf-timestamp/demo/tooltip.html b/elements/pf-timestamp/demo/tooltip.html
new file mode 100644
index 0000000000..3dc04550b6
--- /dev/null
+++ b/elements/pf-timestamp/demo/tooltip.html
@@ -0,0 +1,25 @@
+

+  

+    
+      
+      
+    
+  

+  

+    
+      
+      
+    
+  

+

+
+
+
+
diff --git a/elements/pf-tooltip/demo/block-triggers.html b/elements/pf-tooltip/demo/block-triggers.html
new file mode 100644
index 0000000000..ab40eff535
--- /dev/null
+++ b/elements/pf-tooltip/demo/block-triggers.html
@@ -0,0 +1,60 @@
+

+  
Toggle Container Width

+  
+  
+  
+

+
+

+  
Block Triggers

+  
Tooltips can wrap block-level elements.
+    Tooltips which wrap focusable content must not have a tabindex greater than -1.
+  

+  
    
+    
  • Left Tooltip
    • 
+    
  • Left Start Tooltip
    • 
+    
  • Left End Tooltip
    • 
+    
  • Right Tooltip
    • 
+    
  • Right Start Tooltip
    • 
+    
  • Right End Tooltip
    • 
+    
  • Top Tooltip
    • 
+    
  • Top Start Tooltip
    • 
+    
  • Top End Tooltip
    • 
+    
  • Bottom Tooltip
    • 
+    
  • Bottom Start Tooltip
    • 
+    
  • Bottom End Tooltip
    • 
+  

+

+
+
+
+
diff --git a/elements/pf-tooltip/demo/custom-styles.html b/elements/pf-tooltip/demo/custom-styles.html
new file mode 100644
index 0000000000..e3f2fb66bb
--- /dev/null
+++ b/elements/pf-tooltip/demo/custom-styles.html
@@ -0,0 +1,60 @@
+

+  
Toggle Container Width

+  
+  
+  
+

+
+

+  
Tooltips can be styled using CSS custom properties. For example, a tooltip may have
+    
+      custom text color
+    ,
+    
+      a custom shadow
+    , or
+    
+      custom content padding
+    .
+  

+

+
+
+
+
diff --git a/elements/pf-tooltip/demo/demo.css b/elements/pf-tooltip/demo/demo.css
deleted file mode 100644
index ec4a062c89..0000000000
--- a/elements/pf-tooltip/demo/demo.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.narrow :is(section:not(#block) p, ul) {
-  max-width: 400px;
-  margin-inline: auto;
-}
-
-#block ul {
-  display: flex;
-  flex-flow: row wrap;
-  gap: 1em;
-  list-style-type: none;
-  padding: 0;
-  margin-inline: 0;
-}
-
-#block li {
-  padding: 0;
-  display: block;
-}
-
-samp {
-  font-weight: bold;
-}
-
-#custom-styles pf-tooltip:nth-of-type(1) {
-  --pf-c-tooltip__content--Color: lightblue;
-}
-
-#custom-styles pf-tooltip:nth-of-type(2) {
-  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--lg,
-      0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16),
-      0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
-}
-
-#custom-styles pf-tooltip:nth-of-type(3) {
-  --pf-c-tooltip__content--PaddingTop: 2rem;
-  --pf-c-tooltip__content--PaddingRight: 2rem;
-  --pf-c-tooltip__content--PaddingBottom: 2rem;
-  --pf-c-tooltip__content--PaddingLeft: 2rem;
-}
diff --git a/elements/pf-tooltip/demo/flip.html b/elements/pf-tooltip/demo/flip.html
index dbbc4b63dc..d22999a3c0 100644
--- a/elements/pf-tooltip/demo/flip.html
+++ b/elements/pf-tooltip/demo/flip.html
@@ -34,12 +34,53 @@
   
No flip

 
 
-
 
+
 
-
-
Performance

-
This demo measures the time needed to render 10000 tooltip elements then toggle the first tooltip.

-

-  Render
-  Reset
-  
-  

-

+

+  
Performance

+  
This demo measures the time needed to render 10000 tooltip elements then toggle the first tooltip.

+  

+    Render
+    Reset
+    
+    

+  

+

+
+
+
+
diff --git a/elements/pf-tooltip/demo/performance.js b/elements/pf-tooltip/demo/performance.js
deleted file mode 100644
index 31158b8a2f..0000000000
--- a/elements/pf-tooltip/demo/performance.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
-
-const $ = x => document.querySelector(x);
-const $$ = x => document.querySelectorAll(x);
-
-import { html, render } from 'lit';
-
-const submit = $('form pf-button');
-const target = $('#target');
-
-const getTooltip = (_, i) =>
-  html`${i + 1}`;
-
-async function measure(start) {
-  submit.loading = true;
-  submit.textContent = 'Rendering...';
-  await submit.updateComplete;
-  await new Promise(requestAnimationFrame);
-  render(Array.from({ length: 10000 }, getTooltip), target);
-  const tooltips = $$('pf-tooltip');
-  const [first] = tooltips;
-  first.show();
-  await Promise.all(Array.from(tooltips, x => x.updateComplete));
-  await first.hide();
-  return performance.now() - start;
-}
-
-$('form').addEventListener('submit', /** @this {HTMLFormElement} */async function(event) {
-  event.preventDefault();
-  const elapsed = await measure(performance.now());
-  this.output.value = `Render took ${(elapsed) / 1000} seconds`;
-  submit.loading = false;
-  submit.textContent = 'Rerender';
-});
-
-
-$('form').addEventListener('reset', /** @this {HTMLFormElement} */async function(event) {
-  event.preventDefault();
-  render('', target);
-  this.output.value = '';
-  submit.loading = false;
-  submit.textContent = 'Render';
-});
-
diff --git a/elements/pf-tooltip/demo/pf-tooltip.html b/elements/pf-tooltip/demo/pf-tooltip.html
index 7f0adfa9b6..d5132a3d01 100644
--- a/elements/pf-tooltip/demo/pf-tooltip.html
+++ b/elements/pf-tooltip/demo/pf-tooltip.html
@@ -1,7 +1,3 @@
-
-
-
-
 

   
Toggle Container Width

   
@@ -10,7 +6,6 @@ 
Toggle Container Width

 

 
 

-  
Basic

   

     A Tooltip
     is a piece of flow content with an associated secondary piece of hidden flow content.
@@ -18,94 +13,25 @@ 
Basic

   

 

 
-

-  
Slotted Tooltip Content

-  
A tooltip may contain
-    
-      HTML content
-      
-        Slotted content can be formatted, using HTML
-        tags like em, strong, or code.
-      
-     by using the content slot.
-    Slotted content must be phrasing content, so no <p>s.
-  

-

+
 
-

-  
Placement

-  

-    Tooltips can be anchored to the left:
-    Left,
-    Left Start,
-    Left End.
-    They can be anchored to the right:
-    Right,
-    Right Start,
-    Right End.
-    They can be anchored to the top:
-    Top,
-    Top Start,
-    Top End.
-    They can be anchored to the bottom:
-    Bottom,
-    Bottom Start,
-    Bottom End.
-  

-  

-    Tooltips can have content which wraps lines, but this is discouraged,
-    because tooltips are meant to contain as little content as possible.
-    When tooltips have lengthy content anchored to the left, it looks like this:
-    Left,
-    Left Start,
-    Left End.
-    When tooltips have lengthy content anchored to the right, it looks like this:
-    Right,
-    Right Start,
-    Right End.
-    When tooltips have lengthy content anchored to the top, it looks like this:
-    Top,
-    Top Start,
-    Top End.
-    When tooltips have lengthy content anchored to the bottom, it looks like this:
-    Bottom,
-    Bottom Start,
-    Bottom End.
-  

-

+
diff --git a/elements/pf-tooltip/demo/pf-tooltip.js b/elements/pf-tooltip/demo/pf-tooltip.js
deleted file mode 100644
index 16267e0fdf..0000000000
--- a/elements/pf-tooltip/demo/pf-tooltip.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-tooltip/pf-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-tooltip/demo/placement.html b/elements/pf-tooltip/demo/placement.html
new file mode 100644
index 0000000000..fdf509d97a
--- /dev/null
+++ b/elements/pf-tooltip/demo/placement.html
@@ -0,0 +1,70 @@
+

+  
Toggle Container Width

+  
+  
+  
+

+
+

+  

+    Tooltips can be anchored to the left:
+    Left,
+    Left Start,
+    Left End.
+    They can be anchored to the right:
+    Right,
+    Right Start,
+    Right End.
+    They can be anchored to the top:
+    Top,
+    Top Start,
+    Top End.
+    They can be anchored to the bottom:
+    Bottom,
+    Bottom Start,
+    Bottom End.
+  

+  

+    Tooltips can have content which wraps lines, but this is discouraged,
+    because tooltips are meant to contain as little content as possible.
+    When tooltips have lengthy content anchored to the left, it looks like this:
+    Left,
+    Left Start,
+    Left End.
+    When tooltips have lengthy content anchored to the right, it looks like this:
+    Right,
+    Right Start,
+    Right End.
+    When tooltips have lengthy content anchored to the top, it looks like this:
+    Top,
+    Top Start,
+    Top End.
+    When tooltips have lengthy content anchored to the bottom, it looks like this:
+    Bottom,
+    Bottom Start,
+    Bottom End.
+  

+

+
+
+
+
diff --git a/elements/pf-tooltip/demo/slotted-content.html b/elements/pf-tooltip/demo/slotted-content.html
new file mode 100644
index 0000000000..050e09c216
--- /dev/null
+++ b/elements/pf-tooltip/demo/slotted-content.html
@@ -0,0 +1,42 @@
+

+  
Toggle Container Width

+  
+  
+  
+

+
+

+  
A tooltip may contain
+    
+      HTML content
+      
+        Slotted content can be formatted, using HTML
+        tags like em, strong, or code.
+      
+     by using the content slot.
+    Slotted content must be phrasing content, so no <p>s.
+  

+

+
+
+
+
diff --git a/elements/pf-tooltip/demo/trigger.html b/elements/pf-tooltip/demo/trigger.html
index 1e789d4d7c..4f941198f1 100644
--- a/elements/pf-tooltip/demo/trigger.html
+++ b/elements/pf-tooltip/demo/trigger.html
@@ -1,8 +1,15 @@
-
-Button
-
+

+  
+  Button
+

+
 
 
+
diff --git a/elements/tsconfig.json b/elements/tsconfig.json
index f5de49e215..9e228ec9b3 100644
--- a/elements/tsconfig.json
+++ b/elements/tsconfig.json
@@ -4,8 +4,6 @@
     "**/*.ts"
   ],
   "exclude": [
-    "pf-icon/icons/**/*.js",
-    "pf-icon/icons/**/*",
     "*/demo/*.js",
     "pf-icon/test/rh-icon*.js",
     "custom-elements-manifest.config.js",
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index f61bd739a2..89ec3b0c28 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -6,6 +6,7 @@ const PfeAssetsPlugin = require('./docs/_plugins/pfe-assets.cjs');
 const EmptyParagraphPlugin = require('./docs/_plugins/empty-p.cjs');
 const CreateImportMapPlugin = require('./docs/_plugins/create-import-map.cjs');
 const HTMLExamplePlugin = require('./docs/_plugins/html-example.cjs');
+const CEMRenderPlugin = require('./docs/_plugins/cem-render.cjs');
 
 const AnchorsPlugin = require('@patternfly/pfe-tools/11ty/plugins/anchors.cjs');
 const CustomElementsManifestPlugin = require('@patternfly/pfe-tools/11ty/plugins/custom-elements-manifest.cjs');
@@ -34,6 +35,9 @@ module.exports = function(eleventyConfig) {
   /** Generate and consume custom elements manifests */
   eleventyConfig.addPlugin(CustomElementsManifestPlugin);
 
+  /** Render docs based on custom elements manifests */
+  eleventyConfig.addPlugin(CEMRenderPlugin);
+
   /** Collections to organize alphabetically instead of by date */
   eleventyConfig.addPlugin(OrderTagsPlugin, { tags: ['component'], order: 'alphabetical' });
 
diff --git a/package-lock.json b/package-lock.json
index 367cb8839f..cb6b6d5e65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,8 +18,8 @@
         "@actions/core": "^1.10.1",
         "@actions/exec": "^1.1.1",
         "@actions/glob": "^0.4.0",
-        "@commitlint/cli": "^18.4.3",
-        "@commitlint/config-conventional": "^18.4.3",
+        "@commitlint/cli": "^18.4.4",
+        "@commitlint/config-conventional": "^18.4.4",
         "@fortawesome/free-brands-svg-icons": "^6.4.0",
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -31,16 +31,17 @@
         "@types/numeral": "^2.0.5",
         "@types/prismjs": "^1.26.3",
         "@types/prompts": "^2.4.9",
-        "@typescript-eslint/eslint-plugin": "^6.13.2",
+        "@typescript-eslint/eslint-plugin": "^6.18.1",
         "chalk": "^5.3.0",
-        "commitlint": "^18.4.3",
+        "commitlint": "^18.4.4",
         "execa": "^8.0.1",
         "fuse.js": "^7.0.0",
         "husky": "^8.0.3",
         "leasot": "^13.3.0",
         "nunjucks": "^3.2.4",
         "prompts": "^2.4.2",
-        "wireit": "^0.14.1"
+        "wireit": "^0.14.3",
+        "zero-md": "^2.5.3"
       },
       "engines": {
         "node": "^20"
@@ -51,8 +52,8 @@
       "version": "2.4.1",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.5.3",
-        "lit": "^3.1.0"
+        "@floating-ui/dom": "^1.5.4",
+        "lit": "^3.1.1"
       }
     },
     "elements": {
@@ -62,7 +63,7 @@
       "dependencies": {
         "@patternfly/icons": "^1.0.2",
         "@patternfly/pfe-core": "^2.4.1",
-        "lit": "^3.1.0",
+        "lit": "^3.1.1",
         "tslib": "^2.6.2"
       }
     },
@@ -338,7 +339,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
       "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -427,7 +427,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
       "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -436,7 +435,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.5.tgz",
       "integrity": "sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.23.5",
@@ -466,7 +464,6 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -475,7 +472,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz",
       "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.23.5",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -490,7 +486,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
       "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -502,7 +497,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
       "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.22.9",
         "@babel/helper-validator-option": "^7.22.15",
@@ -518,7 +512,6 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -527,7 +520,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.5.tgz",
       "integrity": "sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
         "@babel/helper-environment-visitor": "^7.22.20",
@@ -550,7 +542,6 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -559,7 +550,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
       "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -568,7 +558,6 @@
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
       "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
         "@babel/types": "^7.23.0"
@@ -581,7 +570,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
       "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -593,7 +581,6 @@
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz",
       "integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.23.0"
       },
@@ -605,7 +592,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
       "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.15"
       },
@@ -617,7 +603,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
       "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
@@ -636,7 +621,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
       "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -648,7 +632,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
       "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -657,7 +640,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
       "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-member-expression-to-functions": "^7.22.15",
@@ -674,7 +656,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
       "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -686,7 +667,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
       "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -698,7 +678,6 @@
       "version": "7.22.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
       "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -726,7 +705,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
       "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -735,7 +713,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.5.tgz",
       "integrity": "sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
         "@babel/traverse": "^7.23.5",
@@ -837,7 +814,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.23.3.tgz",
       "integrity": "sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
       },
@@ -852,7 +828,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
       "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
       },
@@ -867,7 +842,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz",
       "integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
       },
@@ -882,7 +856,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
       "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.23.3",
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -899,7 +872,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.5.tgz",
       "integrity": "sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
         "@babel/helper-create-class-features-plugin": "^7.23.5",
@@ -917,7 +889,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz",
       "integrity": "sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/helper-validator-option": "^7.22.15",
@@ -947,7 +918,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
       "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.22.13",
         "@babel/parser": "^7.22.15",
@@ -961,7 +931,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz",
       "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
         "@babel/generator": "^7.23.5",
@@ -1459,16 +1428,16 @@
       }
     },
     "node_modules/@commitlint/cli": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-18.4.3.tgz",
-      "integrity": "sha512-zop98yfB3A6NveYAZ3P1Mb6bIXuCeWgnUfVNkH4yhIMQpQfzFwseadazOuSn0OOfTt0lWuFauehpm9GcqM5lww==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-18.4.4.tgz",
+      "integrity": "sha512-Ro3wIo//fV3XiV1EkdpHog6huaEyNcUAVrSmtgKqYM5g982wOWmP4FXvEDFwRMVgz878CNBvvCc33dMZ5AQJ/g==",
       "dev": true,
       "dependencies": {
-        "@commitlint/format": "^18.4.3",
-        "@commitlint/lint": "^18.4.3",
-        "@commitlint/load": "^18.4.3",
-        "@commitlint/read": "^18.4.3",
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/format": "^18.4.4",
+        "@commitlint/lint": "^18.4.4",
+        "@commitlint/load": "^18.4.4",
+        "@commitlint/read": "^18.4.4",
+        "@commitlint/types": "^18.4.4",
         "execa": "^5.0.0",
         "lodash.isfunction": "^3.0.9",
         "resolve-from": "5.0.0",
@@ -1566,9 +1535,9 @@
       }
     },
     "node_modules/@commitlint/config-conventional": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-18.4.3.tgz",
-      "integrity": "sha512-729eRRaNta7JZF07qf6SAGSghoDEp9mH7yHU0m7ff0q89W97wDrWCyZ3yoV3mcQJwbhlmVmZPTkPcm7qiAu8WA==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-18.4.4.tgz",
+      "integrity": "sha512-Bz3sPQSboBN+Et/KyZrR+OJ3z9PrHDw7Bls0/hv94PmuHBtMq1dCGxS9XzTGzxeMNlytCC4kxF083tbhPljl3Q==",
       "dev": true,
       "dependencies": {
         "conventional-changelog-conventionalcommits": "^7.0.2"
@@ -1578,12 +1547,12 @@
       }
     },
     "node_modules/@commitlint/config-validator": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-18.4.3.tgz",
-      "integrity": "sha512-FPZZmTJBARPCyef9ohRC9EANiQEKSWIdatx5OlgeHKu878dWwpyeFauVkhzuBRJFcCA4Uvz/FDtlDKs008IHcA==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-18.4.4.tgz",
+      "integrity": "sha512-/QI8KIg/h7O0Eus36fPcEcO3QPBcdXuGfZeCF5m15k0EB2bcU8s6pHNTNEa6xz9PrAefHCL+yzRJj7w20T6Mow==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/types": "^18.4.4",
         "ajv": "^8.11.0"
       },
       "engines": {
@@ -1591,12 +1560,12 @@
       }
     },
     "node_modules/@commitlint/ensure": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-18.4.3.tgz",
-      "integrity": "sha512-MI4fwD9TWDVn4plF5+7JUyLLbkOdzIRBmVeNlk4dcGlkrVA+/l5GLcpN66q9LkFsFv6G2X31y89ApA3hqnqIFg==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-18.4.4.tgz",
+      "integrity": "sha512-KjD19p6julB5WrQL+Cd8p+AePwpl1XzGAjB0jnuFMKWtji9L7ucCZUKDstGjlkBZGGzH/nvdB8K+bh5K27EVUg==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/types": "^18.4.4",
         "lodash.camelcase": "^4.3.0",
         "lodash.kebabcase": "^4.1.1",
         "lodash.snakecase": "^4.1.1",
@@ -1608,21 +1577,21 @@
       }
     },
     "node_modules/@commitlint/execute-rule": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-18.4.3.tgz",
-      "integrity": "sha512-t7FM4c+BdX9WWZCPrrbV5+0SWLgT3kCq7e7/GhHCreYifg3V8qyvO127HF796vyFql75n4TFF+5v1asOOWkV1Q==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-18.4.4.tgz",
+      "integrity": "sha512-a37Nd3bDQydtg9PCLLWM9ZC+GO7X5i4zJvrggJv5jBhaHsXeQ9ZWdO6ODYR+f0LxBXXNYK3geYXJrCWUCP8JEg==",
       "dev": true,
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/format": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/format/-/format-18.4.3.tgz",
-      "integrity": "sha512-8b+ItXYHxAhRAXFfYki5PpbuMMOmXYuzLxib65z2XTqki59YDQJGpJ/wB1kEE5MQDgSTQWtKUrA8n9zS/1uIDQ==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/format/-/format-18.4.4.tgz",
+      "integrity": "sha512-2v3V5hVlv0R3pe7p66IX5F7cjeVvGM5JqITRIbBCFvGHPJ/CG74rjTkAu0RBEiIhlk3eOaLjVGq3d5falPkLBA==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/types": "^18.4.4",
         "chalk": "^4.1.0"
       },
       "engines": {
@@ -1646,12 +1615,12 @@
       }
     },
     "node_modules/@commitlint/is-ignored": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-18.4.3.tgz",
-      "integrity": "sha512-ZseOY9UfuAI32h9w342Km4AIaTieeFskm2ZKdrG7r31+c6zGBzuny9KQhwI9puc0J3GkUquEgKJblCl7pMnjwg==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-18.4.4.tgz",
+      "integrity": "sha512-rXWes9owKBTjfTr6Od7YlflRg4N+ngkOH+dUZhk0qL/XQb26mHz0EgVgdixMVBac1OsohRwJaLmVHX+5F6vfmg==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/types": "^18.4.4",
         "semver": "7.5.4"
       },
       "engines": {
@@ -1659,31 +1628,30 @@
       }
     },
     "node_modules/@commitlint/lint": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-18.4.3.tgz",
-      "integrity": "sha512-18u3MRgEXNbnYkMOWoncvq6QB8/90m9TbERKgdPqVvS+zQ/MsuRhdvHYCIXGXZxUb0YI4DV2PC4bPneBV/fYuA==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-18.4.4.tgz",
+      "integrity": "sha512-SoyQstVxMY5Z4GnFRtRzy+NWYb+yVseXgir+7BxnpB59oH05C9XztRrhDw6OnkNeXhjINTpi1HLnuY7So+CaAQ==",
       "dev": true,
       "dependencies": {
-        "@commitlint/is-ignored": "^18.4.3",
-        "@commitlint/parse": "^18.4.3",
-        "@commitlint/rules": "^18.4.3",
-        "@commitlint/types": "^18.4.3"
+        "@commitlint/is-ignored": "^18.4.4",
+        "@commitlint/parse": "^18.4.4",
+        "@commitlint/rules": "^18.4.4",
+        "@commitlint/types": "^18.4.4"
       },
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/load": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-18.4.3.tgz",
-      "integrity": "sha512-v6j2WhvRQJrcJaj5D+EyES2WKTxPpxENmNpNG3Ww8MZGik3jWRXtph0QTzia5ZJyPh2ib5aC/6BIDymkUUM58Q==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-18.4.4.tgz",
+      "integrity": "sha512-RaDIa9qwOw2xRJ3Jr2DBXd14rmnHJIX2XdZF4kmoF1rgsg/+7cvrExLSUNAkQUNimyjCn1b/bKX2Omm+GdY0XQ==",
       "dev": true,
       "dependencies": {
-        "@commitlint/config-validator": "^18.4.3",
-        "@commitlint/execute-rule": "^18.4.3",
-        "@commitlint/resolve-extends": "^18.4.3",
-        "@commitlint/types": "^18.4.3",
-        "@types/node": "^18.11.9",
+        "@commitlint/config-validator": "^18.4.4",
+        "@commitlint/execute-rule": "^18.4.4",
+        "@commitlint/resolve-extends": "^18.4.4",
+        "@commitlint/types": "^18.4.4",
         "chalk": "^4.1.0",
         "cosmiconfig": "^8.3.6",
         "cosmiconfig-typescript-loader": "^5.0.0",
@@ -1696,15 +1664,6 @@
         "node": ">=v18"
       }
     },
-    "node_modules/@commitlint/load/node_modules/@types/node": {
-      "version": "18.19.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.3.tgz",
-      "integrity": "sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==",
-      "dev": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
     "node_modules/@commitlint/load/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1722,21 +1681,21 @@
       }
     },
     "node_modules/@commitlint/message": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-18.4.3.tgz",
-      "integrity": "sha512-ddJ7AztWUIoEMAXoewx45lKEYEOeOlBVWjk8hDMUGpprkuvWULpaXczqdjwVtjrKT3JhhN+gMs8pm5G3vB2how==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-18.4.4.tgz",
+      "integrity": "sha512-lHF95mMDYgAI1LBXveJUyg4eLaMXyOqJccCK3v55ZOEUsMPrDi8upqDjd/NmzWmESYihaOMBTAnxm+6oD1WoDQ==",
       "dev": true,
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/parse": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-18.4.3.tgz",
-      "integrity": "sha512-eoH7CXM9L+/Me96KVcfJ27EIIbA5P9sqw3DqjJhRYuhaULIsPHFs5S5GBDCqT0vKZQDx0DgxhMpW6AQbnKrFtA==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-18.4.4.tgz",
+      "integrity": "sha512-99G7dyn/OoyNWXJni0Ki0K3aJd01pEb/Im/Id6y4X7PN+kGOahjz2z/cXYYHn7xDdooqFVdiVrVLeChfgpWZ2g==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/types": "^18.4.4",
         "conventional-changelog-angular": "^7.0.0",
         "conventional-commits-parser": "^5.0.0"
       },
@@ -1745,14 +1704,13 @@
       }
     },
     "node_modules/@commitlint/read": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-18.4.3.tgz",
-      "integrity": "sha512-H4HGxaYA6OBCimZAtghL+B+SWu8ep4X7BwgmedmqWZRHxRLcX2q0bWBtUm5FsMbluxbOfrJwOs/Z0ah4roP/GQ==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-18.4.4.tgz",
+      "integrity": "sha512-r58JbWky4gAFPea/CZmvlqP9Ehbs+8gSEUqhIJOojKzTc3xlxFnZUDVPcEnnaqzQEEoV6C69VW7xuzdcBlu/FQ==",
       "dev": true,
       "dependencies": {
-        "@commitlint/top-level": "^18.4.3",
-        "@commitlint/types": "^18.4.3",
-        "fs-extra": "^11.0.0",
+        "@commitlint/top-level": "^18.4.4",
+        "@commitlint/types": "^18.4.4",
         "git-raw-commits": "^2.0.11",
         "minimist": "^1.2.6"
       },
@@ -1760,49 +1718,14 @@
         "node": ">=v18"
       }
     },
-    "node_modules/@commitlint/read/node_modules/fs-extra": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
-      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
-    "node_modules/@commitlint/read/node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/@commitlint/read/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@commitlint/resolve-extends": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-18.4.3.tgz",
-      "integrity": "sha512-30sk04LZWf8+SDgJrbJCjM90gTg2LxsD9cykCFeFu+JFHvBFq5ugzp2eO/DJGylAdVaqxej3c7eTSE64hR/lnw==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-18.4.4.tgz",
+      "integrity": "sha512-RRpIHSbRnFvmGifVk21Gqazf1QF/yeP+Kkg/e3PlkegcOKd/FGOXp/Kx9cvSO2K7ucSn4GD/oBvgasFoy+NCAw==",
       "dev": true,
       "dependencies": {
-        "@commitlint/config-validator": "^18.4.3",
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/config-validator": "^18.4.4",
+        "@commitlint/types": "^18.4.4",
         "import-fresh": "^3.0.0",
         "lodash.mergewith": "^4.6.2",
         "resolve-from": "^5.0.0",
@@ -1813,15 +1736,15 @@
       }
     },
     "node_modules/@commitlint/rules": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-18.4.3.tgz",
-      "integrity": "sha512-8KIeukDf45BiY+Lul1T0imSNXF0sMrlLG6JpLLKolkmYVQ6PxxoNOriwyZ3UTFFpaVbPy0rcITaV7U9JCAfDTA==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-18.4.4.tgz",
+      "integrity": "sha512-6Uzlsnl/GljEI+80NWjf4ThOfR8NIsbm18IfXYuCEchlwMHSxiuYG4rHSK5DNmG/+MIo8eR5VdQ0gQyt7kWzAA==",
       "dev": true,
       "dependencies": {
-        "@commitlint/ensure": "^18.4.3",
-        "@commitlint/message": "^18.4.3",
-        "@commitlint/to-lines": "^18.4.3",
-        "@commitlint/types": "^18.4.3",
+        "@commitlint/ensure": "^18.4.4",
+        "@commitlint/message": "^18.4.4",
+        "@commitlint/to-lines": "^18.4.4",
+        "@commitlint/types": "^18.4.4",
         "execa": "^5.0.0"
       },
       "engines": {
@@ -1912,18 +1835,18 @@
       }
     },
     "node_modules/@commitlint/to-lines": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-18.4.3.tgz",
-      "integrity": "sha512-fy1TAleik4Zfru1RJ8ZU6cOSvgSVhUellxd3WZV1D5RwHZETt1sZdcA4mQN2y3VcIZsUNKkW0Mq8CM9/L9harQ==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-18.4.4.tgz",
+      "integrity": "sha512-mwe2Roa59NCz/krniAdCygFabg7+fQCkIhXqBHw00XQ8Y7lw4poZLLxeGI3p3bLpcEOXdqIDrEGLwHmG5lBdwQ==",
       "dev": true,
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/top-level": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-18.4.3.tgz",
-      "integrity": "sha512-E6fJPBLPFL5R8+XUNSYkj4HekIOuGMyJo3mIx2PkYc3clel+pcWQ7TConqXxNWW4x1ugigiIY2RGot55qUq1hw==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-18.4.4.tgz",
+      "integrity": "sha512-PBwW1drgeavl9CadB7IPRUk6rkUP/O8jEkxjlC+ofuh3pw0bzJdAT+Kw7M1Yc9KtTb9xTaqUB8uvRtaybHa/tQ==",
       "dev": true,
       "dependencies": {
         "find-up": "^5.0.0"
@@ -1933,9 +1856,9 @@
       }
     },
     "node_modules/@commitlint/types": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-18.4.3.tgz",
-      "integrity": "sha512-cvzx+vtY/I2hVBZHCLrpoh+sA0hfuzHwDc+BAFPimYLjJkpHnghQM+z8W/KyLGkygJh3BtI3xXXq+dKjnSWEmA==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-18.4.4.tgz",
+      "integrity": "sha512-/FykLtodD8gKs3+VNkAUwofu4LBHankclj+I8fB2jTRvG6PV7k/OUt4P+VbM7ip853qS4F0g7Z6hLNa6JeMcAQ==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0"
@@ -2050,6 +1973,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz",
       "integrity": "sha512-pKQM0dAUPAaoAWJvPSpFtxAc1/pi0xb8wKYSUJbCBYwWA5L8vf/UowDaV0m9G3CtbiqkHI/4eKzFAqE14iY6vg==",
+      "peer": true,
       "dependencies": {
         "@web/config-loader": "0.1.3",
         "chokidar": "3.5.2",
@@ -2069,6 +1993,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
       "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "peer": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2088,12 +2013,14 @@
     "node_modules/@custom-elements-manifest/analyzer/node_modules/custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
-      "integrity": "sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A=="
+      "integrity": "sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A==",
+      "peer": true
     },
     "node_modules/@custom-elements-manifest/analyzer/node_modules/typescript": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
       "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -2102,10 +2029,38 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/@custom-elements-manifest/find-dependencies": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@custom-elements-manifest/find-dependencies/-/find-dependencies-0.0.5.tgz",
+      "integrity": "sha512-fKIMMZCDFSoL2ySUoz8knWgpV4jpb0lUXgLOvdZQMQFHxgxz1PqOJpUIypwvEVyKk3nEHRY4f10gNol02HjeCg==",
+      "dependencies": {
+        "es-module-lexer": "^0.9.3"
+      }
+    },
+    "node_modules/@custom-elements-manifest/find-dependencies/node_modules/es-module-lexer": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz",
+      "integrity": "sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
-      "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.11.tgz",
+      "integrity": "sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==",
       "cpu": [
         "arm"
       ],
@@ -2118,9 +2073,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
-      "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.11.tgz",
+      "integrity": "sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==",
       "cpu": [
         "arm64"
       ],
@@ -2133,9 +2088,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
-      "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.11.tgz",
+      "integrity": "sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==",
       "cpu": [
         "x64"
       ],
@@ -2148,9 +2103,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
-      "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz",
+      "integrity": "sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==",
       "cpu": [
         "arm64"
       ],
@@ -2163,9 +2118,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
-      "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.11.tgz",
+      "integrity": "sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==",
       "cpu": [
         "x64"
       ],
@@ -2178,9 +2133,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
-      "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.11.tgz",
+      "integrity": "sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==",
       "cpu": [
         "arm64"
       ],
@@ -2193,9 +2148,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
-      "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.11.tgz",
+      "integrity": "sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==",
       "cpu": [
         "x64"
       ],
@@ -2208,9 +2163,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
-      "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.11.tgz",
+      "integrity": "sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==",
       "cpu": [
         "arm"
       ],
@@ -2223,9 +2178,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
-      "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.11.tgz",
+      "integrity": "sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==",
       "cpu": [
         "arm64"
       ],
@@ -2238,9 +2193,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
-      "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.11.tgz",
+      "integrity": "sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==",
       "cpu": [
         "ia32"
       ],
@@ -2253,9 +2208,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
-      "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.11.tgz",
+      "integrity": "sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==",
       "cpu": [
         "loong64"
       ],
@@ -2268,9 +2223,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
-      "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.11.tgz",
+      "integrity": "sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==",
       "cpu": [
         "mips64el"
       ],
@@ -2283,9 +2238,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
-      "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.11.tgz",
+      "integrity": "sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==",
       "cpu": [
         "ppc64"
       ],
@@ -2298,9 +2253,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
-      "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.11.tgz",
+      "integrity": "sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==",
       "cpu": [
         "riscv64"
       ],
@@ -2313,9 +2268,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
-      "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.11.tgz",
+      "integrity": "sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==",
       "cpu": [
         "s390x"
       ],
@@ -2328,9 +2283,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
-      "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz",
+      "integrity": "sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==",
       "cpu": [
         "x64"
       ],
@@ -2343,9 +2298,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
-      "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.11.tgz",
+      "integrity": "sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==",
       "cpu": [
         "x64"
       ],
@@ -2358,9 +2313,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
-      "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.11.tgz",
+      "integrity": "sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==",
       "cpu": [
         "x64"
       ],
@@ -2373,9 +2328,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
-      "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.11.tgz",
+      "integrity": "sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==",
       "cpu": [
         "x64"
       ],
@@ -2388,9 +2343,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
-      "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.11.tgz",
+      "integrity": "sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==",
       "cpu": [
         "arm64"
       ],
@@ -2403,9 +2358,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
-      "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.11.tgz",
+      "integrity": "sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==",
       "cpu": [
         "ia32"
       ],
@@ -2418,9 +2373,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
-      "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz",
+      "integrity": "sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==",
       "cpu": [
         "x64"
       ],
@@ -2538,9 +2493,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
-      "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
+      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -2563,26 +2518,26 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
-      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
+      "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
       "dependencies": {
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
-      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
+      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
       "dependencies": {
-        "@floating-ui/core": "^1.4.2",
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/core": "^1.5.3",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.5.1",
@@ -2636,8 +2591,12 @@
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
-      "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
-      "dev": true
+      "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
+    },
+    "node_modules/@github/catalyst": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@github/catalyst/-/catalyst-1.6.0.tgz",
+      "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
@@ -2724,7 +2683,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2746,7 +2704,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2769,7 +2726,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@jspm/generator/-/generator-2.0.0.tgz",
       "integrity": "sha512-ZfKjivCvEGHKs19FDcVaYC2fVem54IBlxvU1+pOa47+wRhzvRX+c4eGyNVD6jkE860VrJMJYTJD2dfcGdEKrSQ==",
-      "dev": true,
       "dependencies": {
         "@babel/core": "^7.20.12",
         "@babel/plugin-syntax-import-assertions": "^7.20.0",
@@ -2785,8 +2741,7 @@
     "node_modules/@jspm/import-map": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@jspm/import-map/-/import-map-1.0.7.tgz",
-      "integrity": "sha512-/N4nGdqt1oogwpPNqgVTDADzDDcFto/3rwvyW5oEIAK2ILfxaKpStwvIymlm/3uD2Slzj5Qaqo7wjGuUiUKrHg==",
-      "dev": true
+      "integrity": "sha512-/N4nGdqt1oogwpPNqgVTDADzDDcFto/3rwvyW5oEIAK2ILfxaKpStwvIymlm/3uD2Slzj5Qaqo7wjGuUiUKrHg=="
     },
     "node_modules/@koa/router": {
       "version": "12.0.1",
@@ -2959,7 +2914,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
       "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
-      "dev": true,
       "dependencies": {
         "@gar/promisify": "^1.0.1",
         "semver": "^7.3.5"
@@ -2970,7 +2924,6 @@
       "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
       "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
       "deprecated": "This functionality has been moved to @npmcli/fs",
-      "dev": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
         "rimraf": "^3.0.2"
@@ -2983,7 +2936,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -3003,7 +2955,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -3635,6 +3586,110 @@
         "win32"
       ]
     },
+    "node_modules/@sentry/core": {
+      "version": "6.19.7",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.19.7.tgz",
+      "integrity": "sha512-tOfZ/umqB2AcHPGbIrsFLcvApdTm9ggpi/kQZFkej7kMphjT+SGBiQfYtjyg9jcRW+ilAR4JXC9BGKsdEQ+8Vw==",
+      "dependencies": {
+        "@sentry/hub": "6.19.7",
+        "@sentry/minimal": "6.19.7",
+        "@sentry/types": "6.19.7",
+        "@sentry/utils": "6.19.7",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/core/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/hub": {
+      "version": "6.19.7",
+      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.19.7.tgz",
+      "integrity": "sha512-y3OtbYFAqKHCWezF0EGGr5lcyI2KbaXW2Ik7Xp8Mu9TxbSTuwTe4rTntwg8ngPjUQU3SUHzgjqVB8qjiGqFXCA==",
+      "dependencies": {
+        "@sentry/types": "6.19.7",
+        "@sentry/utils": "6.19.7",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/hub/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/minimal": {
+      "version": "6.19.7",
+      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.19.7.tgz",
+      "integrity": "sha512-wcYmSJOdvk6VAPx8IcmZgN08XTXRwRtB1aOLZm+MVHjIZIhHoBGZJYTVQS/BWjldsamj2cX3YGbGXNunaCfYJQ==",
+      "dependencies": {
+        "@sentry/hub": "6.19.7",
+        "@sentry/types": "6.19.7",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/minimal/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/node": {
+      "version": "6.19.7",
+      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-6.19.7.tgz",
+      "integrity": "sha512-gtmRC4dAXKODMpHXKfrkfvyBL3cI8y64vEi3fDD046uqYcrWdgoQsffuBbxMAizc6Ez1ia+f0Flue6p15Qaltg==",
+      "dependencies": {
+        "@sentry/core": "6.19.7",
+        "@sentry/hub": "6.19.7",
+        "@sentry/types": "6.19.7",
+        "@sentry/utils": "6.19.7",
+        "cookie": "^0.4.1",
+        "https-proxy-agent": "^5.0.0",
+        "lru_map": "^0.3.3",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/node/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/types": {
+      "version": "6.19.7",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.19.7.tgz",
+      "integrity": "sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/utils": {
+      "version": "6.19.7",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.19.7.tgz",
+      "integrity": "sha512-z95ECmE3i9pbWoXQrD/7PgkBAzJYR+iXtPuTkpBjDKs86O3mT+PXOT3BAn79w2wkn7/i3vOGD2xVr1uiMl26dA==",
+      "dependencies": {
+        "@sentry/types": "6.19.7",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/utils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@sindresorhus/slugify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
@@ -3716,7 +3771,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -3840,9 +3894,9 @@
       "integrity": "sha512-kRiitIeUg1mPV9yH4VUJ/1uk2XjyANfeL8/7rH1tsjvHeO9PJLBHJIYsFWmAvmGj5u8rj+1TZx7PZzW2qLw3Lw=="
     },
     "node_modules/@types/eslint": {
-      "version": "8.44.8",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.8.tgz",
-      "integrity": "sha512-4K8GavROwhrYl2QXDXm0Rv9epkA8GBFu0EI+XrrnnuCl7u8CWBRusX7fXJfanhZTDWSAL24gDI/UqXyUM0Injw==",
+      "version": "8.56.2",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz",
+      "integrity": "sha512-uQDwm1wFHmbBbCZCqAlq6Do9LYwByNZHWzXppSnay9SuwJ+VRbjkbLABer54kcPnMSlG6Fdiy2yaFXm/z9Z5gw==",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -4141,9 +4195,9 @@
       }
     },
     "node_modules/@types/sinon": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-17.0.2.tgz",
-      "integrity": "sha512-Zt6heIGsdqERkxctIpvN5Pv3edgBrhoeb3yHyxffd4InN0AX2SVNKSrhdDZKGQICVOxWP/q4DyhpfPNMSrpIiA==",
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-17.0.3.tgz",
+      "integrity": "sha512-j3uovdn8ewky9kRBG19bOwaZbexJu/XjtkHyjvUgt4xfPFz18dcORIMqnYh66Fx3Powhcr85NT5+er3+oViapw==",
       "dependencies": {
         "@types/sinonjs__fake-timers": "*"
       }
@@ -4219,15 +4273,15 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.13.2.tgz",
-      "integrity": "sha512-3+9OGAWHhk4O1LlcwLBONbdXsAhLjyCFogJY/cWy2lxdVJ2JrcTF2pTGMaLl2AE7U1l31n8Py4a8bx5DLf/0dQ==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.1.tgz",
+      "integrity": "sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==",
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.13.2",
-        "@typescript-eslint/type-utils": "6.13.2",
-        "@typescript-eslint/utils": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2",
+        "@typescript-eslint/scope-manager": "6.18.1",
+        "@typescript-eslint/type-utils": "6.18.1",
+        "@typescript-eslint/utils": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -4253,14 +4307,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.13.2.tgz",
-      "integrity": "sha512-MUkcC+7Wt/QOGeVlM8aGGJZy1XV5YKjTpq9jK6r6/iLsGXhBVaGP5N0UYvFsu9BFlSpwY9kMretzdBH01rkRXg==",
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "6.13.2",
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/typescript-estree": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.1.tgz",
+      "integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "6.18.1",
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/typescript-estree": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4280,12 +4334,12 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.13.2.tgz",
-      "integrity": "sha512-CXQA0xo7z6x13FeDYCgBkjWzNqzBn8RXaE3QVQVIUm74fWJLkJkaHmHdKStrxQllGh6Q4eUGyNpMe0b1hMkXFA==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz",
+      "integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==",
       "dependencies": {
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2"
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -4296,12 +4350,12 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.13.2.tgz",
-      "integrity": "sha512-Qr6ssS1GFongzH2qfnWKkAQmMUyZSyOr0W54nZNU1MDfo+U4Mv3XveeLZzadc/yq8iYhQZHYT+eoXJqnACM1tw==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.18.1.tgz",
+      "integrity": "sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.13.2",
-        "@typescript-eslint/utils": "6.13.2",
+        "@typescript-eslint/typescript-estree": "6.18.1",
+        "@typescript-eslint/utils": "6.18.1",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -4322,9 +4376,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.13.2.tgz",
-      "integrity": "sha512-7sxbQ+EMRubQc3wTfTsycgYpSujyVbI1xw+3UMRUcrhSy+pN09y/lWzeKDbvhoqcRbHdc+APLs/PWYi/cisLPg==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.1.tgz",
+      "integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==",
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
@@ -4334,15 +4388,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.13.2.tgz",
-      "integrity": "sha512-SuD8YLQv6WHnOEtKv8D6HZUzOub855cfPnPMKvdM/Bh1plv1f7Q/0iFUDLKKlxHcEstQnaUU4QZskgQq74t+3w==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz",
+      "integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==",
       "dependencies": {
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2",
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
         "semver": "^7.5.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -4359,6 +4414,14 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -4378,17 +4441,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.13.2.tgz",
-      "integrity": "sha512-b9Ptq4eAZUym4idijCRzl61oPCwwREcfDI8xGk751Vhzig5fFZR9CyzDz4Sp/nxSLBYxUPyh4QdIDqWykFhNmQ==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.1.tgz",
+      "integrity": "sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.13.2",
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/typescript-estree": "6.13.2",
+        "@typescript-eslint/scope-manager": "6.18.1",
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/typescript-estree": "6.18.1",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -4403,11 +4480,11 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.13.2.tgz",
-      "integrity": "sha512-OGznFs0eAQXJsp+xSd6k/O1UbFi/K/L7WjqeRoFE7vadjAF9y0uppXhYNQNEqygjou782maGClOoZwPqF0Drlw==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz",
+      "integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==",
       "dependencies": {
-        "@typescript-eslint/types": "6.13.2",
+        "@typescript-eslint/types": "6.18.1",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -4777,7 +4854,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
       "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "dev": true,
       "dependencies": {
         "event-target-shim": "^5.0.0"
       },
@@ -4820,7 +4896,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "dev": true,
       "dependencies": {
         "debug": "4"
       },
@@ -4832,7 +4907,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz",
       "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==",
-      "dev": true,
       "dependencies": {
         "humanize-ms": "^1.2.1"
       },
@@ -4844,7 +4918,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
       "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dev": true,
       "dependencies": {
         "clean-stack": "^2.0.0",
         "indent-string": "^4.0.0"
@@ -5381,7 +5454,6 @@
       "version": "15.3.0",
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
       "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
-      "dev": true,
       "dependencies": {
         "@npmcli/fs": "^1.0.0",
         "@npmcli/move-file": "^1.0.1",
@@ -5410,7 +5482,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -5430,7 +5501,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -5442,7 +5512,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -5454,7 +5523,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -5468,8 +5536,7 @@
     "node_modules/cacache/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/cache-content-type": {
       "version": "1.0.1",
@@ -5740,7 +5807,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -5829,7 +5895,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -6000,13 +6065,13 @@
       }
     },
     "node_modules/commitlint": {
-      "version": "18.4.3",
-      "resolved": "https://registry.npmjs.org/commitlint/-/commitlint-18.4.3.tgz",
-      "integrity": "sha512-xNAq3MpW4xZ3VyFH+WU0ykU8LmYcCT+0K4e1IOG5346XSGCb1xJyhFu0JFpq4LfJ7E0/bVxzPY98IsjUH2SQbQ==",
+      "version": "18.4.4",
+      "resolved": "https://registry.npmjs.org/commitlint/-/commitlint-18.4.4.tgz",
+      "integrity": "sha512-O9ubyj1HKvaah/NGG76S6BPNb2J4I+17qYfGcnK7wtqXWEQ6dv/nZqydpA14PHxlpEmItEhjhqvQrnw9Q4bYpA==",
       "dev": true,
       "dependencies": {
-        "@commitlint/cli": "^18.4.3",
-        "@commitlint/types": "^18.4.3"
+        "@commitlint/cli": "^18.4.4",
+        "@commitlint/types": "^18.4.4"
       },
       "bin": {
         "commitlint": "cli.js"
@@ -6071,6 +6136,60 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/configstore/node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/configstore/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/configstore/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "node_modules/configstore/node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
     "node_modules/constantinople": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
@@ -6182,6 +6301,14 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
+    "node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cookies": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.8.0.tgz",
@@ -6276,6 +6403,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/csp_evaluator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/csp_evaluator/-/csp_evaluator-1.1.1.tgz",
+      "integrity": "sha512-N3ASg0C4kNPUaNxt1XAvzHIVuzdtr8KLgfk1O8WDyimp1GisPAHESupArO2ieHk9QWbrJ/WkQODyh21Ps/xhxw=="
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -6933,7 +7073,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
       "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
-      "dev": true,
       "dependencies": {
         "is-obj": "^2.0.0"
       },
@@ -6982,9 +7121,9 @@
       "integrity": "sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw=="
     },
     "node_modules/element-internals-polyfill": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.3.9.tgz",
-      "integrity": "sha512-ti2fHL8rXbz5/pu50Nu45EXvORWtx1g1xWUQuZORkszbvCxosPEeHDeGzfvaaooXJNXNblogMP4atl680r9WyQ=="
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.3.10.tgz",
+      "integrity": "sha512-hflkht5sNZ2LF2sP9+OHfqGDcr8R9NIiDCuDfXep8uptqqt0OjZDaWJ/7ip+OdoIZBFJL+fFJ3+aLku1cTIEGA=="
     },
     "node_modules/eleventy-plugin-toc": {
       "version": "1.1.5",
@@ -7068,8 +7207,7 @@
     "node_modules/err-code": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
-      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
-      "dev": true
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA=="
     },
     "node_modules/errno": {
       "version": "0.1.8",
@@ -7152,6 +7290,11 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
     },
+    "node_modules/es-module-shims": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.2.tgz",
+      "integrity": "sha512-7vIYVzpOhXtpc3Yn03itB+GSgVZFW7oL4kdydA+iL+IEi7HiSLBUxM05QFw4SxTl6e++pMpGqZPo2+vdNs3TbA=="
+    },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
@@ -7190,9 +7333,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.19.9",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
-      "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.11.tgz",
+      "integrity": "sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==",
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -7201,28 +7344,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.19.9",
-        "@esbuild/android-arm64": "0.19.9",
-        "@esbuild/android-x64": "0.19.9",
-        "@esbuild/darwin-arm64": "0.19.9",
-        "@esbuild/darwin-x64": "0.19.9",
-        "@esbuild/freebsd-arm64": "0.19.9",
-        "@esbuild/freebsd-x64": "0.19.9",
-        "@esbuild/linux-arm": "0.19.9",
-        "@esbuild/linux-arm64": "0.19.9",
-        "@esbuild/linux-ia32": "0.19.9",
-        "@esbuild/linux-loong64": "0.19.9",
-        "@esbuild/linux-mips64el": "0.19.9",
-        "@esbuild/linux-ppc64": "0.19.9",
-        "@esbuild/linux-riscv64": "0.19.9",
-        "@esbuild/linux-s390x": "0.19.9",
-        "@esbuild/linux-x64": "0.19.9",
-        "@esbuild/netbsd-x64": "0.19.9",
-        "@esbuild/openbsd-x64": "0.19.9",
-        "@esbuild/sunos-x64": "0.19.9",
-        "@esbuild/win32-arm64": "0.19.9",
-        "@esbuild/win32-ia32": "0.19.9",
-        "@esbuild/win32-x64": "0.19.9"
+        "@esbuild/aix-ppc64": "0.19.11",
+        "@esbuild/android-arm": "0.19.11",
+        "@esbuild/android-arm64": "0.19.11",
+        "@esbuild/android-x64": "0.19.11",
+        "@esbuild/darwin-arm64": "0.19.11",
+        "@esbuild/darwin-x64": "0.19.11",
+        "@esbuild/freebsd-arm64": "0.19.11",
+        "@esbuild/freebsd-x64": "0.19.11",
+        "@esbuild/linux-arm": "0.19.11",
+        "@esbuild/linux-arm64": "0.19.11",
+        "@esbuild/linux-ia32": "0.19.11",
+        "@esbuild/linux-loong64": "0.19.11",
+        "@esbuild/linux-mips64el": "0.19.11",
+        "@esbuild/linux-ppc64": "0.19.11",
+        "@esbuild/linux-riscv64": "0.19.11",
+        "@esbuild/linux-s390x": "0.19.11",
+        "@esbuild/linux-x64": "0.19.11",
+        "@esbuild/netbsd-x64": "0.19.11",
+        "@esbuild/openbsd-x64": "0.19.11",
+        "@esbuild/sunos-x64": "0.19.11",
+        "@esbuild/win32-arm64": "0.19.11",
+        "@esbuild/win32-ia32": "0.19.11",
+        "@esbuild/win32-x64": "0.19.11"
       }
     },
     "node_modules/esbuild-plugin-lit-css": {
@@ -7302,14 +7446,14 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
-      "integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
+      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.55.0",
+        "@eslint/js": "8.56.0",
         "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -7386,9 +7530,9 @@
       }
     },
     "node_modules/eslint-plugin-json-schema-validator": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-json-schema-validator/-/eslint-plugin-json-schema-validator-4.7.3.tgz",
-      "integrity": "sha512-odFpNM997t484eprsTEk7YTt7JXgZ5ewCIekcOPGJLe5OFGKoRkJWtQ5lUJdRqqaOOD5vE8kGmV8fDvs0h9iNg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-json-schema-validator/-/eslint-plugin-json-schema-validator-4.7.4.tgz",
+      "integrity": "sha512-jgLoOn1G0GMb8qOS+vlzDZwL589cbmOq02yTl1Z4YdDBlicV9qm+u/KYipRBF+6pyTDAfNQn00tLUj8ewxQEAw==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.3.0",
         "ajv": "^8.0.0",
@@ -7435,12 +7579,14 @@
       }
     },
     "node_modules/eslint-plugin-jsonc": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.10.0.tgz",
-      "integrity": "sha512-9d//o6Jyh4s1RxC9fNSt1+MMaFN2ruFdXPG9XZcb/mR2KkfjADYiNL/hbU6W0Cyxfg3tS/XSFuhl5LgtMD8hmw==",
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.11.2.tgz",
+      "integrity": "sha512-F6A0MZhIGRBPOswzzn4tJFXXkPLiLwJaMlQwz/Qj1qx+bV5MCn79vBeJh2ynMmtqqHloi54KDCnsT/KWrcCcnQ==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "eslint-compat-utils": "^0.1.2",
+        "espree": "^9.6.1",
+        "graphemer": "^1.4.0",
         "jsonc-eslint-parser": "^2.0.4",
         "natural-compare": "^1.4.0"
       },
@@ -7787,7 +7933,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -8187,7 +8332,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -8199,7 +8343,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -8210,8 +8353,7 @@
     "node_modules/fs-minipass/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
@@ -8277,7 +8419,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -8594,7 +8735,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -8945,8 +9085,7 @@
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
-      "dev": true
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
     "node_modules/http-equiv-refresh": {
       "version": "1.0.0",
@@ -8971,11 +9110,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/http-link-header": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/http-link-header/-/http-link-header-1.1.1.tgz",
+      "integrity": "sha512-mW3N/rTYpCn99s1do0zx6nzFZSwLH9HGfUM4ZqLWJ16ylmYaC2v5eYGqrNTQlByx8AzUgGI+V/32gXPugs1+Sw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
       "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "dev": true,
       "dependencies": {
         "@tootallnate/once": "1",
         "agent-base": "6",
@@ -8989,7 +9135,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "dev": true,
       "dependencies": {
         "agent-base": "6",
         "debug": "4"
@@ -9015,7 +9160,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
       "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.0.0"
       }
@@ -9073,6 +9217,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-ssim": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/image-ssim/-/image-ssim-0.2.0.tgz",
+      "integrity": "sha512-W7+sO6/yhxy83L0G7xR8YAc5Z5QFtYEXXRV6EaE8tuYBZJnA3gVgp3q7X7muhLZVodeb9UfvjSbwt9VJwjIYAg=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -9124,8 +9273,7 @@
     "node_modules/infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
     },
     "node_modules/inflation": {
       "version": "2.1.0",
@@ -9167,6 +9315,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-4.4.0.tgz",
+      "integrity": "sha512-z+Bj2rS3LZSYU4+sNitdHrwnBhr0wO80ZJSW8EzKDBowwUe3Q/UsvgCGjrwa+HPzoGCLEb9HAjfJgo4j2Sac8w==",
+      "dependencies": {
+        "intl-messageformat-parser": "^1.8.1"
+      }
+    },
+    "node_modules/intl-messageformat-parser": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.8.1.tgz",
+      "integrity": "sha512-IMSCKVf0USrM/959vj3xac7s8f87sc+80Y/ipBzdKy4ifBv5Gsj2tZ41EAaURVg01QU71fYr77uA8Meh6kELbg==",
+      "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser"
+    },
     "node_modules/ip": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
@@ -9430,8 +9592,7 @@
     "node_modules/is-lambda": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
-      "dev": true
+      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ=="
     },
     "node_modules/is-module": {
       "version": "1.0.0",
@@ -9475,7 +9636,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
       "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9611,6 +9771,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
     "node_modules/is-unicode-supported": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
@@ -9773,6 +9938,19 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jpeg-js": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz",
+      "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="
+    },
+    "node_modules/js-library-detector": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/js-library-detector/-/js-library-detector-6.7.0.tgz",
+      "integrity": "sha512-c80Qupofp43y4cJ7+8TTDN/AsDwLi5oOm/plBrWI+iQt485vKXCco+yVmOwEgdo9VOdsYTuV0UlTeetVPTriXA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -9799,7 +9977,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -9865,7 +10042,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -10281,6 +10457,48 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lighthouse": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/lighthouse/-/lighthouse-10.4.0.tgz",
+      "integrity": "sha512-XQWHEWkJ8YxSPsxttBJORy5+hQrzbvGkYfeP3fJjyYKioWkF2MXfFqNK4ZuV4jL8pBu7Z91qnQP6In0bq1yXww==",
+      "dependencies": {
+        "@sentry/node": "^6.17.4",
+        "axe-core": "4.7.2",
+        "chrome-launcher": "^0.15.2",
+        "configstore": "^5.0.1",
+        "csp_evaluator": "1.1.1",
+        "devtools-protocol": "0.0.1155343",
+        "enquirer": "^2.3.6",
+        "http-link-header": "^1.1.1",
+        "intl-messageformat": "^4.4.0",
+        "jpeg-js": "^0.4.4",
+        "js-library-detector": "^6.6.0",
+        "lighthouse-logger": "^1.4.1",
+        "lighthouse-stack-packs": "1.11.0",
+        "lodash": "^4.17.21",
+        "lookup-closest-locale": "6.2.0",
+        "metaviewport-parser": "0.3.0",
+        "open": "^8.4.0",
+        "parse-cache-control": "1.0.1",
+        "ps-list": "^8.0.0",
+        "puppeteer-core": "^20.8.0",
+        "robots-parser": "^3.0.0",
+        "semver": "^5.3.0",
+        "speedline-core": "^1.4.3",
+        "third-party-web": "^0.23.3",
+        "ws": "^7.0.0",
+        "yargs": "^17.3.1",
+        "yargs-parser": "^21.0.0"
+      },
+      "bin": {
+        "chrome-debug": "core/scripts/manual-chrome-launcher.js",
+        "lighthouse": "cli/index.js",
+        "smokehouse": "cli/test/smokehouse/frontends/smokehouse-bin.js"
+      },
+      "engines": {
+        "node": ">=16.16"
+      }
+    },
     "node_modules/lighthouse-logger": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.4.2.tgz",
@@ -10303,6 +10521,60 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/lighthouse-stack-packs": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/lighthouse-stack-packs/-/lighthouse-stack-packs-1.11.0.tgz",
+      "integrity": "sha512-sRr0z1S/I26VffRLq9KJsKtLk856YrJlNGmcJmbLX8dFn3MuzVPUbstuChEhqnSxZb8TZmVfthuXuwhG9vRoSw=="
+    },
+    "node_modules/lighthouse/node_modules/axe-core": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz",
+      "integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/lighthouse/node_modules/devtools-protocol": {
+      "version": "0.0.1155343",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1155343.tgz",
+      "integrity": "sha512-oD9vGBV2wTc7fAzAM6KC0chSgs234V8+qDEeK+mcbRj2UvcuA7lgBztGi/opj/iahcXD3BSj8Ymvib628yy9FA=="
+    },
+    "node_modules/lighthouse/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/lighthouse/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lighthouse/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -10377,9 +10649,9 @@
       "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g=="
     },
     "node_modules/lit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
-      "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.1.tgz",
+      "integrity": "sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==",
       "dependencies": {
         "@lit/reactive-element": "^2.0.0",
         "lit-element": "^4.0.0",
@@ -10671,16 +10943,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/lookup-closest-locale": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/lookup-closest-locale/-/lookup-closest-locale-6.2.0.tgz",
+      "integrity": "sha512-/c2kL+Vnp1jnV6K6RpDTHK3dgg0Tu2VVp+elEiJpjfS1UyY7AjOYHohRug6wT0OpoX2qFgNORndE9RqesfVxWQ=="
+    },
     "node_modules/lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
       "integrity": "sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA=="
     },
+    "node_modules/lru_map": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz",
+      "integrity": "sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ=="
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -10722,7 +11003,6 @@
       "version": "8.0.14",
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-8.0.14.tgz",
       "integrity": "sha512-EsS89h6l4vbfJEtBZnENTOFk8mCRpY5ru36Xe5bcX1KYIli2mkSHqoFsp5O1wMDvTJJzxe/4THpCTtygjeeGWQ==",
-      "dev": true,
       "dependencies": {
         "agentkeepalive": "^4.1.3",
         "cacache": "^15.0.5",
@@ -10748,7 +11028,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -10760,7 +11039,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -10771,8 +11049,7 @@
     "node_modules/make-fetch-happen/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/map-obj": {
       "version": "4.3.0",
@@ -10932,6 +11209,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/metaviewport-parser": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/metaviewport-parser/-/metaviewport-parser-0.3.0.tgz",
+      "integrity": "sha512-EoYJ8xfjQ6kpe9VbVHvZTZHiOl4HL1Z18CrZ+qahvLXT7ZO4YTC2JMyt5FaUp9JJp6J4Ybb/z7IsCXZt86/QkQ=="
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -11084,7 +11366,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
       "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -11096,7 +11377,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -11107,14 +11387,12 @@
     "node_modules/minipass-collect/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/minipass-fetch": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
       "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.1.0",
         "minipass-sized": "^1.0.3",
@@ -11131,7 +11409,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -11142,14 +11419,12 @@
     "node_modules/minipass-fetch/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/minipass-flush": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
       "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -11161,7 +11436,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -11172,14 +11446,12 @@
     "node_modules/minipass-flush/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/minipass-pipeline": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
       "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -11191,7 +11463,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -11202,14 +11473,12 @@
     "node_modules/minipass-pipeline/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/minipass-sized": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
       "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -11221,7 +11490,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -11232,14 +11500,12 @@
     "node_modules/minipass-sized/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/minizlib": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0",
         "yallist": "^4.0.0"
@@ -11252,7 +11518,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -11263,8 +11528,7 @@
     "node_modules/minizlib/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/mitt": {
       "version": "3.0.0",
@@ -11801,7 +12065,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
       "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-      "dev": true,
       "dependencies": {
         "aggregate-error": "^3.0.0"
       },
@@ -11918,6 +12181,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-cache-control": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
+      "integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg=="
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -12294,15 +12562,24 @@
       }
     },
     "node_modules/playwright-lighthouse": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/playwright-lighthouse/-/playwright-lighthouse-3.1.0.tgz",
-      "integrity": "sha512-fBzC88BP1HcQD7K3Y/bpk+BaqSFKoCqokqGjqH7roYa85Z9gSL1fpE5RNlRa4L5zKuK/8RThh3Zh3uilqEH2Mw==",
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/playwright-lighthouse/-/playwright-lighthouse-3.2.6.tgz",
+      "integrity": "sha512-J8m2ulohHPcEccZ05Azb153ub4YWj0jvMFuleywoFuyjI5l0fZI1KGX97sOZExeV20lRvby0gDB1KD+KdJlg7A==",
       "dependencies": {
         "chalk": "^4.1.2",
+        "lighthouse": "^10.0.1",
         "ua-parser-js": "^1.0.2"
       },
       "engines": {
         "node": ">=16.x"
+      },
+      "peerDependencies": {
+        "playwright-core": "^1.19.2"
+      },
+      "peerDependenciesMeta": {
+        "playwright-core": {
+          "optional": true
+        }
       }
     },
     "node_modules/playwright-lighthouse/node_modules/chalk": {
@@ -13031,14 +13308,12 @@
     "node_modules/promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
-      "dev": true
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g=="
     },
     "node_modules/promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
       "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
-      "dev": true,
       "dependencies": {
         "err-code": "^2.0.2",
         "retry": "^0.12.0"
@@ -13168,6 +13443,17 @@
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
     },
+    "node_modules/ps-list": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/ps-list/-/ps-list-8.1.1.tgz",
+      "integrity": "sha512-OPS9kEJYVmiO48u/B9qneqhkMvgCxT+Tm28VCEJpheTpl8cJ0ffZRRNgS5mrQRTrX5yRTpaJ+hRDeefXYmmorQ==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -13848,7 +14134,6 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
-      "dev": true,
       "engines": {
         "node": ">= 4"
       }
@@ -13866,7 +14151,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.4.1.tgz",
       "integrity": "sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==",
-      "dev": true,
       "dependencies": {
         "glob": "^9.2.0"
       },
@@ -13884,7 +14168,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -13893,7 +14176,6 @@
       "version": "9.3.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-9.3.5.tgz",
       "integrity": "sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "minimatch": "^8.0.2",
@@ -13911,7 +14193,6 @@
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz",
       "integrity": "sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -13926,11 +14207,18 @@
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
       "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/robots-parser": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/robots-parser/-/robots-parser-3.0.1.tgz",
+      "integrity": "sha512-s+pyvQeIKIZ0dx5iJiQk1tPLJAWln39+MI5jtM8wnyws+G5azk+dMnMX0qfbqNetKKNgcWWOdi0sfm+FbQbgdQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.7.0.tgz",
@@ -14455,7 +14743,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-vZdmnjb9a2Tz6WEQVIurybSwElwPxMZaIc7PzqbJTrezcKNznv6giT7J7tZDZ1BojVaa1jvO/UiUdhDVB0ACoQ==",
-      "dev": true,
       "dependencies": {
         "agent-base": "^6.0.2",
         "debug": "4",
@@ -14588,6 +14875,19 @@
       "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
       "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw=="
     },
+    "node_modules/speedline-core": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/speedline-core/-/speedline-core-1.4.3.tgz",
+      "integrity": "sha512-DI7/OuAUD+GMpR6dmu8lliO2Wg5zfeh+/xsdyJZCzd8o5JgFUjCeLsBDuZjIQJdwXS3J0L/uZYrELKYqx+PXog==",
+      "dependencies": {
+        "@types/node": "*",
+        "image-ssim": "^0.2.0",
+        "jpeg-js": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/split2": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
@@ -15281,7 +15581,6 @@
       "version": "1.8.4",
       "resolved": "https://registry.npmjs.org/sver/-/sver-1.8.4.tgz",
       "integrity": "sha512-71o1zfzyawLfIWBOmw8brleKyvnbn73oVHNCsu51uPMz/HWiKkkXsI31JjHW5zqXEqnPYkIiHd8ZmL7FCimLEA==",
-      "dev": true,
       "optionalDependencies": {
         "semver": "^6.3.0"
       }
@@ -15290,7 +15589,6 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
       "optional": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -15452,7 +15750,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
       "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
-      "dev": true,
       "dependencies": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -15489,7 +15786,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
       "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -15497,8 +15793,7 @@
     "node_modules/tar/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/term-size": {
       "version": "2.2.1",
@@ -15528,6 +15823,11 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/third-party-web": {
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/third-party-web/-/third-party-web-0.23.4.tgz",
+      "integrity": "sha512-kwYnSZRhEvv0SBW2fp8SBBKRglMoBjV8xz6C31m0ewqOtknB5UL+Ihg+M81hyFY5ldkZuGWPb+e4GVDkzf/gYg=="
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -15641,9 +15941,9 @@
       }
     },
     "node_modules/ts-lit-plugin": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ts-lit-plugin/-/ts-lit-plugin-2.0.1.tgz",
-      "integrity": "sha512-Y5G03aDiMYHMLzoZ50kdeVkzgVig2mBw6PVY2oI9PcWl3ONTcDyYq6rJ0QzhlACYWP8sT0dmaPMsHMObgNNvvg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ts-lit-plugin/-/ts-lit-plugin-2.0.2.tgz",
+      "integrity": "sha512-DPXlVxhjWHxg8AyBLcfSYt2JXgpANV1ssxxwjY98o26gD8MzeiM68HFW9c2VeDd1CjoR3w7B/6/uKxwBQe+ioA==",
       "dependencies": {
         "lit-analyzer": "^2.0.1",
         "web-component-analyzer": "^2.0.0"
@@ -15857,6 +16157,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
@@ -15977,7 +16285,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
       "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
-      "dev": true,
       "dependencies": {
         "unique-slug": "^2.0.0"
       }
@@ -15986,11 +16293,21 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
       "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
-      "dev": true,
       "dependencies": {
         "imurmurhash": "^0.1.4"
       }
     },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/universal-user-agent": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
@@ -16290,9 +16607,9 @@
       }
     },
     "node_modules/wireit": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/wireit/-/wireit-0.14.1.tgz",
-      "integrity": "sha512-q5sixPM/vKQEpyaub6J9QoHAFAF9g4zBdnjoYelH9/RLAekcUf3x1dmFLACGZ6nYjqehCsTlXC1irmzU7znPhA==",
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/wireit/-/wireit-0.14.3.tgz",
+      "integrity": "sha512-vNSzIBJ1YLMM6dzGUiUMw11KmHOFiXIaOHcQPWVT4j5oCaXQSIYS5AExEzRkAAlm5F0hRPTwDUoazUHu5ZLCNQ==",
       "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
@@ -16460,6 +16777,14 @@
         }
       }
     },
+    "node_modules/xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
@@ -16476,8 +16801,7 @@
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/yaml": {
       "version": "2.3.4",
@@ -16594,6 +16918,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zero-md": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/zero-md/-/zero-md-2.5.3.tgz",
+      "integrity": "sha512-R248nqZKDT4fA3J3GdN+oa2KgdcSfxmRF3UeuGlzYVrpG1v+0WzlF669jZJOzY3qD6gaEQYCU5YOfTdqcaZ+zQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "tools/create-element": {
       "name": "@patternfly/create-element",
       "version": "1.0.2",
@@ -16659,14 +16992,14 @@
       "version": "2.0.1",
       "license": "MIT",
       "dependencies": {
-        "@types/eslint": "^8.44.8",
-        "@typescript-eslint/eslint-plugin": "^6.13.2",
-        "@typescript-eslint/parser": "^6.13.2",
-        "eslint": "^8.55.0",
+        "@types/eslint": "^8.56.2",
+        "@typescript-eslint/eslint-plugin": "^6.18.1",
+        "@typescript-eslint/parser": "^6.18.1",
+        "eslint": "^8.56.0",
         "eslint-config-google": "0.14.0",
         "eslint-plugin-html": "7.1.0",
-        "eslint-plugin-json-schema-validator": "^4.7.3",
-        "eslint-plugin-jsonc": "^2.10.0",
+        "eslint-plugin-json-schema-validator": "^4.7.4",
+        "eslint-plugin-jsonc": "^2.11.2",
         "eslint-plugin-lit-a11y": "^4.1.1",
         "eslint-plugin-no-only-tests": "^3.1.0",
         "eslint-plugin-unicorn": "46.0.0"
@@ -16841,6 +17174,7 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@changesets/cli": "^2.27.1",
         "@custom-elements-manifest/analyzer": "^0.5.7",
+        "@jspm/generator": "^2.0.0",
         "@koa/router": "^12.0.1",
         "@open-wc/testing": "^4.0.0",
         "@playwright/test": "^1.40.1",
@@ -16850,7 +17184,7 @@
         "@types/koa-send": "^4.1.6",
         "@types/mocha": "10.0.1",
         "@types/nunjucks": "^3.2.6",
-        "@types/sinon": "^17.0.2",
+        "@types/sinon": "^17.0.3",
         "@types/uglifycss": "^0.0.11",
         "@types/yargs": "^17.0.32",
         "@web/dev-server": "^0.4.1",
@@ -16871,26 +17205,27 @@
         "custom-elements-manifest": "^2.0.0",
         "dedent": "^1.5.1",
         "dotenv": "^16.3.1",
-        "element-internals-polyfill": "^1.3.9",
+        "element-internals-polyfill": "^1.3.10",
         "eleventy-plugin-toc": "^1.1.5",
-        "esbuild": "^0.19.9",
+        "es-module-shims": "^1.8.2",
+        "esbuild": "^0.19.11",
         "esbuild-plugin-lit-css": "^2.1.0",
         "esbuild-plugin-minify-html-literals": "^1.0.6",
-        "eslint": "^8.55.0",
+        "eslint": "^8.56.0",
         "execa": "^8.0.1",
         "glob": "^10.3.10",
         "html-include-element": "^0.3.0",
         "koa-send": "^5.0.1",
-        "lit": "^3.1.0",
+        "lit": "^3.1.1",
         "markdown-it-anchor": "^8.6.7",
         "nunjucks": "^3.2.4",
         "patch-package": "^8.0.0",
         "playwright": "^1.40.1",
-        "playwright-lighthouse": "^3.1.0",
+        "playwright-lighthouse": "^3.2.6",
         "pwa-helpers": "^0.9.1",
         "rollup-plugin-lit-css": "^4.0.1",
         "sinon": "^17.0.1",
-        "ts-lit-plugin": "^2.0.1",
+        "ts-lit-plugin": "^2.0.2",
         "ts-patch": "3.0.2",
         "typescript": "^5.3.3",
         "urlpattern-polyfill": "^9.0.0",
@@ -16913,6 +17248,64 @@
         "type": "opencollective",
         "url": "https://opencollective.com/11ty"
       }
+    },
+    "tools/pfe-tools/node_modules/@custom-elements-manifest/analyzer": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.9.0.tgz",
+      "integrity": "sha512-aYCc+CmUamFG3FbHO2m1hz/qik61pgYIJkN986k2BPamQmgomST1ZnRngDjUSt6RmO8NrZydxUzg+AKdEaE4EA==",
+      "dependencies": {
+        "@custom-elements-manifest/find-dependencies": "^0.0.5",
+        "@github/catalyst": "^1.6.0",
+        "@web/config-loader": "0.1.3",
+        "chokidar": "3.5.2",
+        "command-line-args": "5.1.2",
+        "comment-parser": "1.2.4",
+        "custom-elements-manifest": "1.0.0",
+        "debounce": "1.2.1",
+        "globby": "11.0.4",
+        "typescript": "~4.3.2"
+      },
+      "bin": {
+        "cem": "cem.js",
+        "custom-elements-manifest": "cem.js"
+      }
+    },
+    "tools/pfe-tools/node_modules/@custom-elements-manifest/analyzer/node_modules/custom-elements-manifest": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
+      "integrity": "sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A=="
+    },
+    "tools/pfe-tools/node_modules/@custom-elements-manifest/analyzer/node_modules/typescript": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
+      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "tools/pfe-tools/node_modules/chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index a3683c20e8..ce5164a103 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,6 @@
     "test": "wireit",
     "test:ci": "wireit",
     "test:watch": "wtr --watch",
-    "test:vue": "wtr --watch --group with-vue",
-    "test:react": "wtr --watch --group with-react",
     "e2e": "wireit",
     "e2e:update": "wireit",
     "🚚-DIST": "❓ Publish packages",
@@ -52,7 +50,6 @@
         "analyze",
         "docs",
         "build:core",
-        "build:icons",
         "build:lightdom",
         "build:elements",
         "build:create",
@@ -147,12 +144,6 @@
         "*.tsbuildinfo"
       ]
     },
-    "build:icons": {
-      "command": "npx tsx ./scripts/icons.ts",
-      "output": [
-        "elements/pf-icon/icons/*/*.js"
-      ]
-    },
     "build:bundle": {
       "command": "scripts/bundle.js",
       "dependencies": [
@@ -203,7 +194,6 @@
       "dependencies": [
         "build:core",
         "build:tools",
-        "build:icons",
         "analyze"
       ]
     },
@@ -211,7 +201,9 @@
       "command": "web-dev-server --open --watch",
       "service": true,
       "dependencies": [
-        "build:tools"
+        "build:tools",
+        "build:elements",
+        "analyze"
       ]
     },
     "watch:analyze": {
@@ -232,14 +224,13 @@
       "dependencies": [
         "build:core",
         "build:tools",
-        "build:icons",
         "analyze",
         "watch:analyze",
         "dev"
       ]
     },
     "test": {
-      "command": "wtr --group default",
+      "command": "wtr",
       "files": [
         "**/*.ts",
         "**/*.css"
@@ -247,8 +238,7 @@
       "output": [],
       "dependencies": [
         "build:tools",
-        "build:core",
-        "build:icons"
+        "build:core"
       ]
     },
     "new": {
@@ -266,8 +256,7 @@
       "output": [],
       "dependencies": [
         "build:tools",
-        "build:core",
-        "build:icons"
+        "build:core"
       ]
     },
     "e2e": {
@@ -298,8 +287,8 @@
     "@actions/core": "^1.10.1",
     "@actions/exec": "^1.1.1",
     "@actions/glob": "^0.4.0",
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -311,16 +300,17 @@
     "@types/numeral": "^2.0.5",
     "@types/prismjs": "^1.26.3",
     "@types/prompts": "^2.4.9",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
     "chalk": "^5.3.0",
-    "commitlint": "^18.4.3",
+    "commitlint": "^18.4.4",
     "execa": "^8.0.1",
     "fuse.js": "^7.0.0",
     "husky": "^8.0.3",
     "leasot": "^13.3.0",
     "nunjucks": "^3.2.4",
     "prompts": "^2.4.2",
-    "wireit": "^0.14.1"
+    "wireit": "^0.14.3",
+    "zero-md": "^2.5.3"
   },
   "workspaces": [
     "./core/*",
diff --git a/scripts/icons.ts b/scripts/icons.ts
deleted file mode 100644
index 8ca0b95860..0000000000
--- a/scripts/icons.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * TODO: remove this file altogether in @patternfly/elements 3.0.0
- * Why are we doing this in 2.x?
- * 1. We wanted to ship icon files separately from `@patternfly/elements`
- * 2. We didn't want that change to be breaking i.e. by removing those icon files from pfe
- * 3. pfe 2 shipped fontawesome 6, but `@patternfly/icons` ships fa 5
- * 4. Therefore, we first build out fa 6 into the pfe package,
- *    then overwrite any files with similar names using fa 5, by copying over the files from `@patternfly/icons`
- */
-import { $ } from 'execa';
-import { cp } from 'node:fs/promises';
-import { join } from 'node:path';
-
-async function build(setName: string, icons: import('@fortawesome/free-solid-svg-icons').IconPack) {
-  const { mkdir, writeFile } = await import('node:fs/promises');
-  delete icons.faFontAwesomeLogoFull;
-  const dir = new URL(`../elements/pf-icon/icons/${setName}/`, import.meta.url);
-  await mkdir(dir, { recursive: true });
-  for (const { iconName, icon: [width, height, , , path] } of Object.values(icons)) {
-    const name = iconName === '500px' ? 'five-hundred-px' : iconName;
-    const license = 'fontawesome. CC-BY-4.0';
-    await writeFile(
-      new URL(`./${name}.js`, dir),
-      [
-        'const t = document.createElement(\'template\');',
-        't.innerHTML=`',
-        ``,
-        ``,
-        `\`;`,
-        `export default t.content.cloneNode(true);`
-      ].join(''),
-      'utf8',
-    );
-  }
-}
-
-(async function() {
-  const cwd = process.cwd();
-  // 1: build deprecated fa 6 icons
-  await build('fab', await import('@fortawesome/free-brands-svg-icons').then(x => x.fab));
-  await build('far', await import('@fortawesome/free-regular-svg-icons').then(x => x.far));
-  await build('fas', await import('@fortawesome/free-solid-svg-icons').then(x => x.fas));
-  // 2: overwrite with icons from `@patternfly/icons`
-  const $$ = $({ cwd: process.cwd() });
-
-  // macos cp -R isn't POSIX compliant
-  // cp -R node_modules/@patternfly/icons elements/pf-icon/
-  await cp(
-    join(cwd, 'node_modules/@patternfly/icons'),
-    join(cwd, 'elements/pf-icon/icons'),
-    { recursive: true },
-  );
-
-  await $$`rm -rf elements/pf-icon/icons/.changeset`;
-  await $$`rm -f elements/pf-icon/icons/README.md`;
-  await $$`rm -f elements/pf-icon/icons/package.json`;
-  await $$`rm -f elements/pf-icon/icons/**/*.md`;
-  await $$`rm -f elements/pf-icon/icons/**/*.json`;
-  await $$`rm -f elements/pf-icon/icons/LICENSE`;
-})();
diff --git a/tools/eslint-config/index.js b/tools/eslint-config/index.js
index 31e0053b5f..97bd455371 100644
--- a/tools/eslint-config/index.js
+++ b/tools/eslint-config/index.js
@@ -214,13 +214,13 @@ const config = {
   }, {
     files: ['*.mjs'],
     parserOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 2022,
       sourceType: 'module',
     },
   }, {
     files: ['*.cjs'],
     parserOptions: {
-      ecmaVersion: 2021,
+      ecmaVersion: 2022,
       sourceType: 'script',
     },
     env: { node: true },
diff --git a/tools/eslint-config/package.json b/tools/eslint-config/package.json
index 4740c92c3a..f65cc550a2 100644
--- a/tools/eslint-config/package.json
+++ b/tools/eslint-config/package.json
@@ -21,14 +21,14 @@
     "@patternfly/eslint-plugin-elements": "^1.1.0"
   },
   "dependencies": {
-    "@types/eslint": "^8.44.8",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
-    "eslint": "^8.55.0",
+    "@types/eslint": "^8.56.2",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "eslint": "^8.56.0",
     "eslint-config-google": "0.14.0",
     "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-json-schema-validator": "^4.7.3",
-    "eslint-plugin-jsonc": "^2.10.0",
+    "eslint-plugin-json-schema-validator": "^4.7.4",
+    "eslint-plugin-jsonc": "^2.11.2",
     "eslint-plugin-lit-a11y": "^4.1.1",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-unicorn": "46.0.0"
diff --git a/tools/pfe-tools/11ty/DocsPage.ts b/tools/pfe-tools/11ty/DocsPage.ts
index 7b4c9cc887..8fc1fba249 100644
--- a/tools/pfe-tools/11ty/DocsPage.ts
+++ b/tools/pfe-tools/11ty/DocsPage.ts
@@ -1,14 +1,8 @@
 import type { PfeConfig } from '../config.js';
-import type { ClassMethod } from 'custom-elements-manifest/schema';
-
-import { fileURLToPath } from 'url';
-
 import { Manifest } from '../custom-elements-manifest/lib/Manifest.js';
 
 import slugify from 'slugify';
 
-import nunjucks, { Environment } from 'nunjucks';
-
 interface DocsPageOptions extends PfeConfig {
   docsTemplatePath?: string;
   tagName?: string;
@@ -17,184 +11,21 @@ interface DocsPageOptions extends PfeConfig {
   renderTitleInOverview?: boolean;
 }
 
-export interface RenderKwargs {
-  title?: string;
-  for?: string;
-  header?: string;
-  level?: number;
-}
-
-/**
- * docs pages contain a #styling-hooks anchor as back compat for older versions of the page
- * to prevent this id from rendering more than once, we track the number of times each page
- * renders css custom properties.
- */
-const cssStylingHookIdTracker = new WeakSet();
-
-export declare class DocsPageRenderer {
-  public tagName: string;
-  public manifest: Manifest;
-  renderOverview(content: string, kwargs?: RenderKwargs): string;
-  renderAttributes(content: string, kwargs?: RenderKwargs): string;
-  renderProperties(content: string, kwargs?: RenderKwargs): string;
-  renderCssCustomProperties(content: string, kwargs?: RenderKwargs): string;
-  renderEvents(content: string, kwargs?: RenderKwargs): string;
-  renderInstallation(content: string, kwargs?: RenderKwargs): string;
-  renderCssParts(content: string, kwargs?: RenderKwargs): string;
-  renderMethods(content: string, kwargs?: RenderKwargs): string;
-  renderSlots(content: string, kwargs?: RenderKwargs): string;
-}
-
-export class DocsPage implements DocsPageRenderer {
+export class DocsPage {
   static isDocsPage = true;
-
-  public static renderBand(content: string, kwargs?: RenderKwargs) {
-    const page = new DocsPage(Manifest.empty());
-    return page.renderBand(content, kwargs);
-  }
-
-  static #templatesDir = fileURLToPath(new URL('templates', import.meta.url));
-
-  static #log = (content: string) => (console.log(content), '');
-
-  static #type = (content = '', { lang = 'ts' } = {}) => content.trim() &&
-    `\n\n\`\`\`${lang}\n${content.trim()}\n\n\`\`\`\n\n`;
-
-  static #innerMD = (content = '') => {
-    const trimmed = content.trim();
-    return trimmed && `\n\n\n${trimmed}\n\n\n`;
-  };
-
-  static #stringifyParams = (method: ClassMethod) =>
-    method.parameters?.map?.(p =>
-      `${p.name}: ${p.type?.text ?? 'unknown'}`).join(', ') ?? '';
-
   tagName: string;
   title: string;
   slug: string;
-  templates: Environment;
   description?: string | null;
   summary?: string | null;
   docsTemplatePath?: string;
-
-  constructor(
-    public manifest: Manifest,
-    private options?: DocsPageOptions) {
+  constructor(public manifest: Manifest, options?: DocsPageOptions) {
     this.tagName = options?.tagName ?? '';
     this.title = options?.title ?? Manifest.prettyTag(this.tagName);
-    this.slug = slugify(options?.aliases?.[this.tagName] ?? this.tagName.replace(/^\w+-/, ''), { strict: true, lower: true });
+    this.docsTemplatePath = options?.docsTemplatePath;
     this.summary = this.manifest.getSummary(this.tagName);
     this.description = this.manifest.getDescription(this.tagName);
-    this.templates = nunjucks.configure(DocsPage.#templatesDir);
-    this.templates.addGlobal('package', this.manifest.packageJson);
-    this.templates.addGlobal('tagName', this.tagName);
-    this.templates.addGlobal('slug', this.slug);
-    this.templates.addGlobal('title', this.title);
-    this.templates.addFilter('log', DocsPage.#log);
-    this.templates.addFilter('type', DocsPage.#type);
-    this.templates.addFilter('innerMD', DocsPage.#innerMD);
-    this.templates.addFilter('mdHeading', (header, length = 2) =>
-      DocsPage.#innerMD(`${Array.from({ length }, () => '#').join('')} ${header}`));
-    this.templates.addFilter('stringifyParams', DocsPage.#stringifyParams);
-    this.docsTemplatePath = options?.docsTemplatePath;
-  }
-
-  #packageTagName(kwargs: RenderKwargs = {}): string {
-    if (kwargs.for && !kwargs.for.match(/@/)) {
-      return kwargs.for;
-    } else {
-      const [, tagName = this.tagName] = (kwargs?.for ?? '').match(/@[-\w]+\/(.*)/) ?? [];
-      return tagName;
-    }
-  }
-
-  renderBand(content: string, kwargs?: RenderKwargs) {
-    return this.templates.render('band.njk', { content, ...kwargs });
-  }
-
-  /** Render the overview of a component page */
-  renderOverview(content: string, kwargs: RenderKwargs = {}) {
-    const description = this.manifest.getDescription(this.#packageTagName(kwargs));
-    const header = kwargs.title ?? this.title;
-    // TODO: switch to false in next major
-    const { renderTitleInOverview = true } = this.options ?? {};
-    const renderedTitle =
-        !renderTitleInOverview ? ''
-      : this.renderBand('', { level: 1, header });
-    return `${renderedTitle}\n${this.templates.render('overview.njk', { description, content, ...kwargs })}`;
-  }
-
-  /** Render the list of element attributes */
-  renderAttributes(content: string, kwargs: RenderKwargs = {}) {
-    const _attrs = this.manifest.getAttributes(this.#packageTagName(kwargs)) ?? [];
-
-    const deprecated = _attrs.filter(x => x.deprecated);
-    const attributes = _attrs.filter(x => !x.deprecated);
-
-    return this.templates.render('attributes.njk', { content, attributes, deprecated, ...kwargs });
-  }
-
-  /** Render the list of element DOM properties */
-  renderProperties(content: string, kwargs: RenderKwargs = {}) {
-    const allProperties = this.manifest.getProperties(this.#packageTagName(kwargs)) ?? [];
-
-    const deprecated = allProperties.filter(x => x.deprecated);
-    const properties = allProperties.filter(x => !x.deprecated);
-
-    return this.templates.render('properties.njk', { content, properties, deprecated, ...kwargs });
-  }
-
-  /** Render a table of element CSS Custom Properties */
-  renderCssCustomProperties(content: string, kwargs: RenderKwargs = {}) {
-    const hasStylingHooks = cssStylingHookIdTracker.has(this);
-    cssStylingHookIdTracker.add(this);
-    const allCssProperties = this.manifest.getCssCustomProperties(this.#packageTagName(kwargs)) ?? [];
-    const cssProperties = allCssProperties.filter(x => !x.deprecated);
-    const deprecated = allCssProperties.filter(x => x.deprecated);
-
-    return this.templates.render('css-custom-properties.njk', { content, cssProperties, deprecated, hasStylingHooks, ...kwargs });
-  }
-
-  /** Render the list of element CSS Shadow Parts */
-  renderCssParts(content: string, kwargs: RenderKwargs = {}) {
-    const allParts = this.manifest.getCssParts(this.#packageTagName(kwargs)) ?? [];
-
-    const parts = allParts.filter(x => !x.deprecated);
-    const deprecated = allParts.filter(x => x.deprecated);
-
-    return this.templates.render('css-shadow-parts.njk', { parts, deprecated, content, ...kwargs });
-  }
-
-  /** Render the list of events for the element */
-  renderEvents(content: string, kwargs: RenderKwargs = {}) {
-    const _events = this.manifest.getEvents(this.#packageTagName(kwargs)) ?? [];
-
-    const deprecated = _events.filter(x => x.deprecated);
-    const events = _events.filter(x => !x.deprecated);
-
-    return this.templates.render('events.njk', { content, events, deprecated, ...kwargs });
-  }
-
-  /** Render the installation instructions for the element */
-  renderInstallation(content: string, kwargs: RenderKwargs = {}) {
-    return `${this.templates.render('install.njk', { content, ...kwargs })}`;
-  }
-
-  /** Render the list of element methods */
-  renderMethods(content: string, kwargs: RenderKwargs = {}) {
-    const allMethods = this.manifest.getMethods(this.#packageTagName(kwargs)) ?? [];
-    const deprecated = allMethods.filter(x => x.deprecated);
-    const methods = allMethods.filter(x => !x.deprecated);
-
-    return this.templates.render('methods.njk', { content, methods, deprecated, ...kwargs });
-  }
-
-  /** Render the list of the element's slots */
-  renderSlots(content: string, kwargs: RenderKwargs = {}) {
-    const allSlots = this.manifest.getSlots(this.#packageTagName(kwargs)) ?? [];
-    const slots = allSlots.filter(x => !x.deprecated);
-    const deprecated = allSlots.filter(x => x.deprecated);
-
-    return this.templates.render('slots.njk', { content, slots, deprecated, ...kwargs });
+    const aliased = options?.aliases?.[this.tagName] ?? this.tagName.replace(/^\w+-/, '');
+    this.slug = slugify(aliased, { strict: true, lower: true });
   }
 }
diff --git a/tools/pfe-tools/11ty/index.ts b/tools/pfe-tools/11ty/index.ts
deleted file mode 100644
index 8ff674bfef..0000000000
--- a/tools/pfe-tools/11ty/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { DocsPage } from './DocsPage.js';
-export const { renderBand } = DocsPage;
diff --git a/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs b/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs
index 74d579ab35..cfb3eac04d 100644
--- a/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs
+++ b/tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs
@@ -5,14 +5,6 @@ const { existsSync } = require('node:fs');
 const { glob } = require('glob');
 const { stat, rm } = require('node:fs/promises');
 
-/**
- * @param {unknown} x
- * @return {x is import('../DocsPage').DocsPage}
- */
-function isDocsPage(x) {
-  return (/** @type {typeof import('../DocsPage').DocsPage}*/(x?.constructor))?.isDocsPage ?? false;
-}
-
 const isDir = dir => stat(dir).then(x => x.isDirectory, () => false);
 
 // TODO: programmable package scopes, etc
@@ -110,53 +102,4 @@ module.exports = function configFunction(eleventyConfig, pluginOpts = {}) {
     }
     return content;
   });
-
-  /** Rebuild the site in watch mode when the templates for this plugin change */
-  eleventyConfig
-    .addWatchTarget(require.resolve('@patternfly/pfe-tools/11ty')
-      .replace('index.js', '**/*.{js,njk}'));
-
-  // copied from DocsPage
-  eleventyConfig.addPairedAsyncShortcode('band',
-    /**
-     * @param {string} content
-     * @param {import('../DocsPage').RenderKwargs} kwargs
-     */
-    async function(content, kwargs) {
-      const { renderBand } = await import('@patternfly/pfe-tools/11ty');
-      return renderBand(content, kwargs);
-    });
-
-  /** @type {import('./types').RendererName} */
-  const shortCodes = [
-    'renderAttributes',
-    'renderCssCustomProperties',
-    'renderCssParts',
-    'renderEvents',
-    'renderMethods',
-    'renderOverview',
-    'renderProperties',
-    'renderInstallation',
-    'renderSlots',
-  ];
-
-  for (const shortCode of shortCodes) {
-    eleventyConfig.addPairedAsyncShortcode(shortCode,
-      /**
-       * @this {import('./types').EleventyContext}
-       * @param {string} content
-       * @param {import('../DocsPage').RenderKwargs} [kwargs]
-       */
-      async function(content, kwargs) {
-        const docsPage = isDocsPage(this.ctx?._) ? this.ctx?._ : null;
-        if (!docsPage) {
-          console.warn(
-            `{% ${shortCode} %}: No custom elements manifest data found for ${kwargs?.for ?? 'unknown element'}`,
-            `\n  inputPath: ${this.page.inputPath}`,
-            `\n  URL: ${this.page.url}`,
-          );
-        }
-        return docsPage?.[shortCode]?.(content, kwargs) ?? '';
-      });
-  }
 };
diff --git a/tools/pfe-tools/dev-server/config.ts b/tools/pfe-tools/dev-server/config.ts
index e1d6f3cfea..419e57322d 100644
--- a/tools/pfe-tools/dev-server/config.ts
+++ b/tools/pfe-tools/dev-server/config.ts
@@ -1,174 +1,62 @@
 import type { Plugin } from '@web/dev-server-core';
 import type { DevServerConfig } from '@web/dev-server';
-import type { InjectSetting } from '@web/dev-server-import-maps/dist/importMapsPlugin';
 import type { Context, Next } from 'koa';
 
-import { existsSync } from 'node:fs';
-import { dirname } from 'node:path';
-import { readFile } from 'node:fs/promises';
+import { readdir, stat } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
 
 import rollupReplace from '@rollup/plugin-replace';
-import nunjucks from 'nunjucks';
-import { glob } from 'glob';
 
 import { litCss, type LitCSSOptions } from 'web-dev-server-plugin-lit-css';
 import { fromRollup } from '@web/dev-server-rollup';
 import { esbuildPlugin } from '@web/dev-server-esbuild';
-import { importMapsPlugin } from '@web/dev-server-import-maps';
 
-import Router from '@koa/router';
-import { Manifest, type DemoRecord } from '../custom-elements-manifest/lib/Manifest.js';
-import { makeDemoEnv } from '../environment.js';
-import { getPfeConfig, deslugify, type PfeConfig } from '../config.js';
+import { getPfeConfig, type PfeConfig } from '../config.js';
+import { importMapGeneratorPlugin, type Options as ImportMapOptions } from './plugins/import-map-generator.js';
 
-const replace = fromRollup(rollupReplace);
-
-const env = nunjucks
-  .configure(dirname(fileURLToPath(import.meta.url)))
-  .addFilter('log', x => (console.log(x, '')))
-  .addFilter('deslugify', x => deslugify(x))
-  .addFilter('isElementGroup', (group: DemoRecord[], primary) =>
-    group.every(x => !!primary && x.primaryElementName === primary));
+import { pfeDevServerPlugin } from './plugins/pfe-dev-server.js';
 
-type Base = (DevServerConfig & PfeConfig);
+const replace = fromRollup(rollupReplace);
 
-export interface PfeDevServerConfigOptions extends Base {
+type BaseConfig = DevServerConfig & PfeConfig;
+export interface PfeDevServerConfigOptions extends BaseConfig {
   hostname?: string;
-  importMap?: InjectSetting['importMap'];
   litcssOptions?: LitCSSOptions;
   tsconfig?: string;
   /** Extra dev server plugins */
   loadDemo?: boolean;
   plugins?: Plugin[];
   watchFiles?: string;
+  importMapOptions?: ImportMapOptions;
 }
 
-type PfeDevServerInternalConfig = Required & { site: Required };
-
-function renderBasic(context: Context, demos: unknown[], options: PfeDevServerConfigOptions) {
-  return env.render('index.html', { context, options, demos });
-}
-
-const isPFEManifest = (x: Manifest) => x.packageJson?.name === '@patternfly/elements';
-
-/** cludge to ensure the dev server starts up only after the manifests are generated */
-async function getManifests(options: PfeDevServerInternalConfig) {
-  let count = 0;
-  let manifests = Manifest.getAll(options.rootDir);
-  while (count < 1000 && manifests.find(isPFEManifest)?.manifest === null) {
-    await new Promise(r => setTimeout(r, 50));
-    count++;
-    manifests = Manifest.getAll(options.rootDir);
-  }
-  return manifests;
-}
-
-/**
- * Renders the demo page for a given url
- */
-async function renderURL(context: Context, options: PfeDevServerInternalConfig): Promise {
-  const url = new URL(context.request.url, `http://${context.request.headers.host}`);
-  const manifests = await getManifests(options);
-  const demos = manifests
-    .flatMap(manifest => manifest.getTagNames()
-      .flatMap(tagName => manifest.getDemoMetadata(tagName, options as PfeDevServerInternalConfig)));
-  const demo = demos.find(x => x.permalink === url.pathname);
-  const manifest = demo?.manifest;
-
-  if (!manifest || !demo || !demo.filePath || !existsSync(demo.filePath)) {
-    return renderBasic(context, demos, options);
-  } else {
-    const templateContent = await readFile(demo.filePath, 'utf8');
-    return env.render('index.html', { context, options, demo, demos, templateContent, manifest });
-  }
-}
-
-/**
- * Generate HTML for each component by rendering a nunjucks template
- * Watch repository source files and reload the page when they change
- */
-function pfeDevServerPlugin(options: PfeDevServerInternalConfig): Plugin {
-  return {
-    name: 'pfe-dev-server',
-    async serverStart({ fileWatcher, app }) {
-      const { elementsDir, tagPrefix } = options;
-      const { componentSubpath } = options.site;
-
-      const router =
-        new Router()
-          .get(/\/pf-icon\/icons\/.*\.js$/, (ctx, next) => {
-            ctx.type = 'application/javascript';
-            return next();
-          })
-          .get('/tools/pfe-tools/environment.js(.js)?', async ctx => {
-            ctx.body = await makeDemoEnv(options.rootDir);
-            ctx.type = 'application/javascript';
-          })
-          // Redirect `components/jazz-hands/*.js` to `components/pf-jazz-hands/*.ts`
-          .get(`/${componentSubpath}/:element/:fileName.js`, async ctx => {
-            const { element, fileName } = ctx.params;
-            const prefixedElement = deslugify(element);
-
-            ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}.ts`);
-          })
-          // Redirect `elements/jazz-hands/*.js` to `elements/pf-jazz-hands/*.ts`
-          .get(`/${elementsDir}/:element/:fileName.js`, async ctx => {
-            const { element, fileName } = ctx.params;
-            const prefixedElement = deslugify(element);
-
-            ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}.ts`);
-          })
-          // Redirect `components/pf-jazz-hands|jazz-hands/demo/*-lightdom.css` to `components/pf-jazz-hands/*-lightdom.css`
-          // Redirect `components/jazz-hands/demo/*.js|css` to `components/pf-jazz-hands/demo/*.js|css`
-          .get(`/${componentSubpath}/:element/demo/:demoSubDir?/:fileName.:ext`, async (ctx, next) => {
-            const { element, fileName, ext } = ctx.params;
-            const prefixedElement = deslugify(element);
-
-            if (fileName.includes('-lightdom') && ext === 'css') {
-              ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}.${ext}`);
-            } else if (!element.includes(tagPrefix)) {
-              ctx.redirect(`/${elementsDir}/${prefixedElement}/demo/${fileName}.${ext}`);
-            } else {
-              return next();
-            }
-          })
-          // Redirect `components/jazz-hands/*` to `components/pf-jazz-hands/*` for requests not previously handled
-          .get(`/${componentSubpath}/:element/:splatPath*`, async (ctx, next) => {
-            const { element, splatPath } = ctx.params;
-            const prefixedElement = deslugify(element);
-
-            if (splatPath.includes('demo')) {
-              /* if its the demo directory return */
-              return next();
-            }
-            if (!element.includes(tagPrefix)) {
-              ctx.redirect(`/${elementsDir}/${prefixedElement}/${splatPath}`);
-            } else {
-              return next();
-            }
-          });
-      app.use(router.routes());
-      const files = await glob(options.watchFiles, { cwd: process.cwd() });
-      for (const file of files) {
-        fileWatcher.add(file);
-      }
-    }
+function normalizeOptions(options?: PfeDevServerConfigOptions) {
+  const config: PfeDevServerConfigOptions = {
+    ...getPfeConfig(),
+    ...options ?? {},
   };
-}
-
-function normalizeOptions(options?: PfeDevServerConfigOptions): PfeDevServerInternalConfig {
-  const config = { ...getPfeConfig(), ...options ?? {} };
+  /**
+   * Plain case: this file is running from `/node_modules/@patternfly/pfe-tools`.
+   *             two dirs up from here is `node_modules`, so we just shear it clean off the path string
+   * Other case: this file is running in the `patternfly/patternfly-elements` monorepo
+   *             two dirs up from here is the project root. There is no `/node_modules$` to replace,
+   *             so we get the correct path
+   * Edge/Corner cases: all other cases must set the `rootDir` option themselves so as to avoid 404s
+   */
+  config.rootDir = options?.rootDir ?? fileURLToPath(new URL('../../..', import.meta.url))
+    .replace(/node_modules\/$/, '/')
+    .replace(/\/node_modules$/, '/')
+    .replace('//', '/');
+  config.importMapOptions ??= {} as PfeDevServerConfigOptions['importMapOptions'];
+  config.importMapOptions!.providers ??= {};
   config.site = { ...config.site, ...options?.site ?? {} };
   config.loadDemo ??= true;
   config.watchFiles ??= '{elements,core}/**/*.{css,html}';
-
   config.litcssOptions ??= {
     include: /\.css$/,
     exclude: /(((fonts|demo)|(demo\/.*))\.css$)|(.*(-lightdom.css$))/
   };
-
-  return config as PfeDevServerInternalConfig;
+  return config as Required & { site: Required };
 }
 
 /** CORS middleware */
@@ -189,59 +77,28 @@ async function cacheBusterMiddleware(ctx: Context, next: Next) {
   }
 }
 
-// Render the demo page whenever there's a trailing slash
-function nunjucksMiddleware(options: PfeDevServerInternalConfig) {
-  return async function(ctx: Context, next: Next) {
-    const { method, path } = ctx;
-    if (options.loadDemo && !(method !== 'HEAD' && method !== 'GET' || path.includes('.'))) {
-      ctx.cwd = process.cwd();
-      ctx.type = 'html';
-      ctx.status = 200;
-      ctx.body = await renderURL(ctx, options);
-    }
-    return next();
-  };
-}
-
 /**
  * Creates a default config for PFE's dev server.
  */
 export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServerConfig {
   const config = normalizeOptions(options);
 
-  /**
-   * Plain case: this file is running from `/node_modules/@patternfly/pfe-tools`.
-   *             two dirs up from here is `node_modules`, so we just shear it clean off the path string
-   * Other case: this file is running in the `patternfly/patternfly-elements` monorepo
-   *             two dirs up from here is the project root. There is no `/node_modules$` to replace,
-   *             so we get the correct path
-   * Edge/Corner cases: all other cases must set the `rootDir` option themselves so as to avoid 404s
-   */
-  const rootDir = options?.rootDir ?? fileURLToPath(new URL('../../..', import.meta.url))
-    .replace(/node_modules\/$/, '/')
-    .replace(/\/node_modules$/, '/')
-    .replace('//', '/');
-
-  const tsconfig = options?.tsconfig;
+  const tsconfig = config?.tsconfig;
 
   return {
-    rootDir,
-
-    nodeResolve: true,
-
     ...options ?? {},
 
+    rootDir: config.rootDir,
+
     middleware: [
       cors,
       cacheBusterMiddleware,
-      nunjucksMiddleware(config),
-      ...options?.middleware ?? [],
+      ...config?.middleware ?? [],
     ],
 
     plugins: [
-      ...options?.plugins ?? [],
-
-      ...options?.importMap ? [importMapsPlugin({ inject: { importMap: options.importMap } })] : [],
+      // Dev server app which loads component demo files
+      pfeDevServerPlugin(config),
 
       // serve typescript sources as javascript
       esbuildPlugin({
@@ -257,8 +114,48 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
       // load .css files as lit CSSResult modules
       litCss(config.litcssOptions),
 
-      // Dev server app which loads component demo files
-      pfeDevServerPlugin(config),
+      importMapGeneratorPlugin({
+        ...config.importMapOptions,
+        providers: {
+          'construct-style-sheets-polyfill': 'nodemodules',
+          'element-internals-polyfill': 'nodemodules',
+          'lit-html': 'nodemodules',
+          'lit': 'nodemodules',
+          '@lit/reactive-element': 'nodemodules',
+          ...config.importMapOptions?.providers,
+        },
+        resolveHtmlUrl(fileUrl, rootUrl) {
+          const override = config.importMapOptions.resolveHtmlUrl?.(fileUrl, rootUrl);
+          if (override) {
+            return override;
+          } else {
+            return fileUrl.replace('/components/', '/elements/pf-');
+          }
+        },
+      }),
+
+      ...config?.plugins ?? [],
+
     ],
   };
 }
+
+/** Returns an import map `imports` section containing the entire `@patternfly/icons` collection, pointing to node_modules */
+export async function getPatternflyIconNodemodulesImports(rootUrl: string) {
+  const files = await readdir(new URL('./node_modules/@patternfly/icons', rootUrl));
+  const dirs = [];
+
+  for (const dir of files) {
+    if (!dir.startsWith('.') && (await stat(new URL(`./node_modules/@patternfly/icons/${dir}`, rootUrl))).isDirectory()) {
+      dirs.push(dir);
+    }
+  }
+
+  const specs = await Promise.all(dirs.flatMap(dir =>
+    readdir(new URL(`./node_modules/@patternfly/icons/${dir}`, rootUrl))
+      .then(files => files.filter(x => x.endsWith('.js')))
+      .then(icons => icons.flatMap(icon => `@patternfly/icons/${dir}/${icon}`))
+  ));
+
+  return Object.fromEntries(specs.flat().map(spec => [spec, `./node_modules/${spec}`]));
+}
diff --git a/tools/pfe-tools/dev-server/demo.ts b/tools/pfe-tools/dev-server/demo.ts
index 6ac9edd23f..9860bdc181 100644
--- a/tools/pfe-tools/dev-server/demo.ts
+++ b/tools/pfe-tools/dev-server/demo.ts
@@ -62,4 +62,3 @@ if (!Object.prototype.hasOwnProperty.call(HTMLTemplateElement.prototype, 'shadow
 if (localStorage.getItem(LS_KEY)) {
   toggleNav(false);
 }
-
diff --git a/tools/pfe-tools/dev-server/plugins/import-map-generator.ts b/tools/pfe-tools/dev-server/plugins/import-map-generator.ts
new file mode 100644
index 0000000000..8d30bd0f74
--- /dev/null
+++ b/tools/pfe-tools/dev-server/plugins/import-map-generator.ts
@@ -0,0 +1,113 @@
+import type { Middleware } from 'koa';
+import type { Plugin } from '@web/dev-server-core';
+import type { GeneratorOptions, Provider } from '@jspm/generator';
+
+import { readFile, stat } from 'node:fs/promises';
+
+import { join } from 'node:path';
+
+import { Generator } from '@jspm/generator';
+
+import { glob } from 'glob';
+
+export interface Options extends GeneratorOptions {
+  resolveHtmlUrl?: (fileUrl: string, rootUrl: string) => string;
+}
+
+const exists = async (path: string) => {
+  try {
+    await stat(path); return true;
+  } catch {
+    return false;
+  }
+};
+
+async function resolveMonorepoPackages() {
+  const cwd = process.cwd();
+
+  const { workspaces } = JSON.parse(await readFile(join(cwd, 'package.json'), 'utf-8'));
+
+  const potentialPackageDirs =
+    (await Promise.all((workspaces ?? []).map((x: string) =>
+      glob(join(cwd, x))))).flat();
+
+  const packages = new Map();
+
+  for (const dir of [cwd, ...potentialPackageDirs]) {
+    const pkgPath = join(dir, 'package.json');
+    if (await exists(pkgPath)) {
+      const { name } = JSON.parse(await readFile(pkgPath, 'utf-8'));
+      packages.set(name, dir);
+    }
+  }
+
+  return packages;
+}
+
+function getProvider(packages: Map): Provider {
+  return {
+    async pkgToUrl({ name }) {
+      const pkgPath = packages.get(name);
+      if (!pkgPath) {
+        throw new Error(`could not resolve ${name}`);
+      }
+      return `file://${pkgPath}/`;
+    },
+    // @ts-expect-error: types vs docs
+    parseUrlPkg(url: string) {
+      for (const [name, dir] of packages) {
+        if (url.startsWith(dir)) {
+          return {
+            name,
+            registry: 'monorepotypescript',
+            version: '*',
+          };
+        }
+      }
+    },
+    async resolveLatestTarget(target) {
+      return { ...target, version: '*' };
+    },
+  };
+}
+
+function generatorMiddleware(generator: Generator, options?: Partial): Middleware {
+  return async function injectMiddleware(ctx, next) {
+    if (ctx.path.endsWith('.html') || ctx.path.endsWith('/')) {
+      if (ctx.body?.length) {
+        const rootUrl = `file://${process.cwd()}/`;
+        const fileUrl = `${rootUrl.replace(/\/$/, '')}${ctx.url}`;
+        const htmlUrl = options?.resolveHtmlUrl?.(fileUrl, rootUrl) ?? fileUrl;
+        try {
+          ctx.body = await generator.htmlInject(ctx.body, {
+            htmlUrl,
+            rootUrl,
+            trace: true,
+            whitespace: true,
+            esModuleShims: true,
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+    return next();
+  };
+}
+
+export function importMapGeneratorPlugin(options?: Partial): Plugin {
+  return {
+    name: 'import-map-inject',
+    async serverStart(args) {
+      const monorepotypescript = getProvider(await resolveMonorepoPackages());
+      args.app.use(generatorMiddleware(new Generator({
+        defaultProvider: 'nodemodules',
+        env: ['development', 'production', 'browser', 'module'],
+        providers: options?.providers,
+        inputMap: options?.inputMap,
+        customProviders: { monorepotypescript },
+        resolutions: options?.resolutions,
+      }), options));
+    },
+  };
+}
diff --git a/tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts b/tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts
new file mode 100644
index 0000000000..9cbd6444c1
--- /dev/null
+++ b/tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts
@@ -0,0 +1,143 @@
+import type { Context, Next } from 'koa';
+import type { Plugin } from '@web/dev-server-core';
+import type { PfeDevServerConfigOptions } from '../config.js';
+
+import { dirname, join } from 'node:path';
+import { existsSync } from 'node:fs';
+import { readFile, stat } from 'node:fs/promises';
+
+import { fileURLToPath } from 'node:url';
+
+import Router from '@koa/router';
+import nunjucks, { type Environment } from 'nunjucks';
+
+import { makeDemoEnv } from '../../environment.js';
+import { Manifest } from '../../custom-elements-manifest/lib/Manifest.js';
+import { deslugify, type PfeConfig } from '../../config.js';
+
+type PfeDevServerInternalConfig = Required & {
+  site: Required;
+};
+
+function isPFEManifest(x: Manifest) {
+  return x.packageJson?.name === '@patternfly/elements';
+}
+
+async function isDir(path: string) {
+  try {
+    const s = await stat(path);
+    return s.isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+/** cludge to ensure the dev server starts up only after the manifests are generated */
+async function getManifests(config: PfeDevServerInternalConfig) {
+  let count = 0;
+  let manifests = Manifest.getAll(config.rootDir);
+  while (count < 1000 && manifests.find(isPFEManifest)?.manifest === null) {
+    await new Promise(r => setTimeout(r, 50));
+    count++;
+    manifests = Manifest.getAll(config.rootDir);
+  }
+  return manifests;
+}
+
+/**
+ * Renders the demo page for a given url
+ */
+async function renderURL(
+  ctx: Context,
+  env: Environment,
+  config: PfeDevServerInternalConfig,
+): Promise {
+  const url = new URL(ctx.request.url, `http://${ctx.request.headers.host}`);
+  const manifests = await getManifests(config);
+  const demos = manifests
+    .flatMap(manifest => manifest.getTagNames()
+      .flatMap(tagName => manifest.getDemoMetadata(tagName, config as PfeDevServerInternalConfig)));
+  const demo = demos.find(x => x.permalink === url.pathname);
+  const manifest = demo?.manifest;
+
+  if (!manifest || !demo || !demo.filePath || !existsSync(demo.filePath)) {
+    return env.render('index.html', { context: ctx, options: config, demos });
+  } else {
+    const templateContent = await readFile(demo.filePath, 'utf8');
+    return env.render('index.html', { context: ctx, options: config, demo, demos, templateContent, manifest });
+  }
+}
+
+/** Render the demo page whenever there's a trailing slash */
+function nunjucksMiddleware(config: PfeDevServerInternalConfig) {
+  const env = nunjucks.configure(join(dirname(fileURLToPath(import.meta.url)), 'templates'));
+  return async function(ctx: Context, next: Next) {
+    const { method, path } = ctx;
+    if (config.loadDemo && !(method !== 'HEAD' && method !== 'GET' || path.includes('.'))) {
+      ctx.cwd = process.cwd();
+      ctx.type = 'html';
+      ctx.status = 200;
+      ctx.body = await renderURL(ctx, env, config);
+    }
+    return next();
+  };
+}
+
+function getRouter(options: PfeDevServerInternalConfig) {
+  const { elementsDir, tagPrefix } = options;
+  const { componentSubpath } = options.site;
+  const router = new Router()
+    .get('/tools/pfe-tools/environment.js(.js)?', async ctx => {
+      ctx.body = await makeDemoEnv(options.rootDir);
+      ctx.type = 'application/javascript';
+    })
+
+    // Redirect `components/jazz-hands/*-lightdom.css` to `elements/pf-jazz-hands/*-lightdom.css`
+    .get(`/${componentSubpath}/:element/:fileName-lightdom.css`, async (ctx, next) => {
+      const { element, fileName } = ctx.params;
+      if (!element.startsWith(tagPrefix)) {
+        const prefixedElement = deslugify(element);
+        ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}-lightdom.css`);
+      } else {
+        return next();
+      }
+    })
+
+    // Redirect `components/jazz-hands/demo/**/*.js|css` to `components/pf-jazz-hands/demo/**/*.js|css`
+    .get(`/${componentSubpath}/:element/demo/:splat*/:fileName.:ext`, async (ctx, next) => {
+      const { element, splat, fileName, ext } = ctx.params;
+      const prefixedElement = deslugify(element);
+      if (!element.includes(tagPrefix)) {
+        ctx.redirect(`/${elementsDir}/${prefixedElement}/demo/${splat}/${fileName}.${ext}`);
+      } else {
+        return next();
+      }
+    })
+
+    // Redirect `components/jazz-hands/*` to `components/pf-jazz-hands/*` for requests not previously handled
+    .get(`/${componentSubpath}/:element/:splatPath*`, async (ctx, next) => {
+      const { element, splatPath } = ctx.params;
+      const prefixedElement = deslugify(element);
+      if (await isDir(new URL(`/${elementsDir}/${prefixedElement}`, import.meta.url).href)) {
+        ctx.redirect(`/${elementsDir}/${prefixedElement}/${splatPath}`);
+      } else {
+        return next();
+      }
+    });
+
+  return router.routes();
+}
+
+/**
+ * Generate HTML for each component by rendering a nunjucks template
+ * Watch repository source files and reload the page when they change
+ */
+export function pfeDevServerPlugin(config: PfeDevServerInternalConfig): Plugin {
+  return {
+    name: 'pfe-dev-server',
+    async serverStart({ app }) {
+      app.use(nunjucksMiddleware(config));
+      app.use(getRouter(config));
+    },
+  };
+}
diff --git a/tools/pfe-tools/dev-server/index.html b/tools/pfe-tools/dev-server/plugins/templates/index.html
similarity index 92%
rename from tools/pfe-tools/dev-server/index.html
rename to tools/pfe-tools/dev-server/plugins/templates/index.html
index 91f80f947a..b910a4a0a3 100644
--- a/tools/pfe-tools/dev-server/index.html
+++ b/tools/pfe-tools/dev-server/plugins/templates/index.html
@@ -29,14 +29,13 @@
   
   
   {% for sheet in options.site.stylesheets %}
-  
+  
   {% endfor %}
   
 
@@ -51,11 +50,19 @@
         label="Expand Main Navigation">
         
       
-      
-        {{title}}
+      
+        {{ title }}
       
-      
-        
+      
+
         {% if options.sourceControlURLPrefix %}Contribute on {{ repoHost }}{% endif %}
         {% if repoHost === 'GitHub' %}
         
@@ -78,7 +85,7 @@
         {% elseif repoHost | trim === '' %}
           
             Git Repository
-            !--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            
             
           
         {% endif %}
diff --git a/tools/pfe-tools/environment.ts b/tools/pfe-tools/environment.ts
index 678632693d..a0441f63f8 100644
--- a/tools/pfe-tools/environment.ts
+++ b/tools/pfe-tools/environment.ts
@@ -1,9 +1,18 @@
-import { readdir } from 'fs/promises';
+import { readdir, stat } from 'fs/promises';
 import { join } from 'path';
 
 export async function makeDemoEnv(cwd = process.cwd()): Promise {
-  const iconsDir = join(cwd, 'elements', 'pf-icon', 'icons');
-  const iconSetNames = await readdir(iconsDir);
+  const iconsDir = join(cwd, 'node_modules', '@patternfly', 'icons');
+  const dirContents = await readdir(iconsDir);
+  const dirNamesOrNulls = await Promise.all(dirContents.map(async x => {
+    const stats = await stat(join(iconsDir, x));
+    if (!x.startsWith('.') && stats.isDirectory()) {
+      return x;
+    } else {
+      return null;
+    }
+  }));
+  const iconSetNames = dirNamesOrNulls.filter((x): x is string => x != null);
   const iconSets = await Promise.all(iconSetNames.reverse().map(async set => {
     const files = await readdir(join(iconsDir, set));
     return [set, [...new Set(files.map(x => x.replace(/\..*$/, '')))]];
diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json
index 817ce5b7d7..73fb0222cf 100644
--- a/tools/pfe-tools/package.json
+++ b/tools/pfe-tools/package.json
@@ -25,7 +25,6 @@
     "./dev-server/config.js": "./dev-server/config.js",
     "./dev-server/demo.js": "./dev-server/demo.js",
     "./environment.js": "./environment.js",
-    "./11ty": "./11ty/index.js",
     "./11ty/DocsPage.js": "./11ty/DocsPage.js",
     "./11ty/plugins/anchors.cjs": "./11ty/plugins/anchors.cjs",
     "./11ty/plugins/custom-elements-manifest.cjs": "./11ty/plugins/custom-elements-manifest.cjs",
@@ -38,11 +37,9 @@
     "./test/create-fixture.js": "./test/create-fixture.js",
     "./test/get-composed-text.js": "./test/get-composed-text.js",
     "./test/hex-to-rgb.js": "./test/hex-to-rgb.js",
-    "./test/react-wrapper.js": "./test/react-wrapper.js",
     "./test/render-to-string.js": "./test/render-to-string.js",
     "./test/stub-logger.js": "./test/stub-logger.js",
     "./test/utils.js": "./test/utils.js",
-    "./test/vue-wrapper.js": "./test/vue-wrapper.js",
     "./typescript/transformers/css-imports.cjs": "./typescript/transformers/css-imports.cjs"
   },
   "contributors": [
@@ -67,6 +64,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@changesets/cli": "^2.27.1",
     "@custom-elements-manifest/analyzer": "^0.5.7",
+    "@jspm/generator": "^2.0.0",
     "@koa/router": "^12.0.1",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.40.1",
@@ -76,7 +74,7 @@
     "@types/koa-send": "^4.1.6",
     "@types/mocha": "10.0.1",
     "@types/nunjucks": "^3.2.6",
-    "@types/sinon": "^17.0.2",
+    "@types/sinon": "^17.0.3",
     "@types/uglifycss": "^0.0.11",
     "@types/yargs": "^17.0.32",
     "@web/dev-server": "^0.4.1",
@@ -97,26 +95,27 @@
     "custom-elements-manifest": "^2.0.0",
     "dedent": "^1.5.1",
     "dotenv": "^16.3.1",
-    "element-internals-polyfill": "^1.3.9",
+    "element-internals-polyfill": "^1.3.10",
     "eleventy-plugin-toc": "^1.1.5",
-    "esbuild": "^0.19.9",
+    "es-module-shims": "^1.8.2",
+    "esbuild": "^0.19.11",
     "esbuild-plugin-lit-css": "^2.1.0",
     "esbuild-plugin-minify-html-literals": "^1.0.6",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "execa": "^8.0.1",
     "glob": "^10.3.10",
     "html-include-element": "^0.3.0",
     "koa-send": "^5.0.1",
-    "lit": "^3.1.0",
+    "lit": "^3.1.1",
     "markdown-it-anchor": "^8.6.7",
     "nunjucks": "^3.2.4",
     "patch-package": "^8.0.0",
     "playwright": "^1.40.1",
-    "playwright-lighthouse": "^3.1.0",
+    "playwright-lighthouse": "^3.2.6",
     "pwa-helpers": "^0.9.1",
     "rollup-plugin-lit-css": "^4.0.1",
     "sinon": "^17.0.1",
-    "ts-lit-plugin": "^2.0.1",
+    "ts-lit-plugin": "^2.0.2",
     "ts-patch": "3.0.2",
     "typescript": "^5.3.3",
     "urlpattern-polyfill": "^9.0.0",
diff --git a/tools/pfe-tools/test/config.ts b/tools/pfe-tools/test/config.ts
index acf087a039..aed5f2cd72 100644
--- a/tools/pfe-tools/test/config.ts
+++ b/tools/pfe-tools/test/config.ts
@@ -1,11 +1,13 @@
 import type { TestRunnerConfig } from '@web/test-runner';
 
+import { stat } from 'node:fs/promises';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { summaryReporter, defaultReporter } from '@web/test-runner';
 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';
 
 export interface PfeTestRunnerConfigOptions extends PfeDevServerConfigOptions {
   files?: string[];
@@ -18,6 +20,13 @@ const testRunnerHtml: TestRunnerConfig['testRunnerHtml'] = testFramework => /* h
   
     
       
+      
     
     
       
@@ -25,9 +34,20 @@ const testRunnerHtml: TestRunnerConfig['testRunnerHtml'] = testFramework => /* h
   
 `;
 
+const exists = async (path: string | URL) => {
+  try {
+    await stat(path);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 export function pfeTestRunnerConfig(opts: PfeTestRunnerConfigOptions): TestRunnerConfig {
   const { open, ...devServerConfig } = pfeDevServerConfig({ ...opts, loadDemo: false });
 
+  const { elementsDir, tagPrefix } = getPfeConfig();
+
   const configuredReporter = opts.reporter ?? 'summary';
 
   const reporters = [];
@@ -54,6 +74,7 @@ export function pfeTestRunnerConfig(opts: PfeTestRunnerConfigOptions): TestRunne
 
   return {
     ...devServerConfig,
+    nodeResolve: true,
     files: ['**/*.spec.ts', '!**/*.e2e.ts', ...opts.files ?? [], '!**/node_modules/**/*', '!**/_site/**/*'],
     browsers: [
       playwrightLauncher({
@@ -71,45 +92,23 @@ export function pfeTestRunnerConfig(opts: PfeTestRunnerConfigOptions): TestRunne
       },
     },
     testRunnerHtml,
-    groups: [
-      {
-        name: 'with-vue',
-        testRunnerHtml: testFramework => /* html */`
-          
-            
-              
-              
-            
-            
-              

-              
-            
-          
-        `,
-      },
-      {
-        name: 'with-react',
-        testRunnerHtml: testFramework => /* html */`
-          
-            
-              
-              
-              
-              
-            
-            
-              

-              
-            
-          
-        `,
-      },
-    ],
     reporters,
     plugins: [
       ...devServerConfig.plugins ?? [],
       ...opts.plugins ?? [],
       a11ySnapshotPlugin(),
+    ],
+    middleware: [
+      /** redirect `.js` to `.ts` when the typescript source exists */
+      async function(ctx, next) {
+        if (ctx.path.endsWith('.js') &&
+            ctx.path.startsWith(`/${elementsDir}/${tagPrefix}-`) &&
+            await exists(`./${ctx.path}`.replace('.js', '.ts').replace('//', '/'))) {
+          ctx.redirect(ctx.path.replace('.js', '.ts'));
+        } else {
+          return next();
+        }
+      }
     ]
   };
 }
diff --git a/tools/pfe-tools/test/create-fixture.ts b/tools/pfe-tools/test/create-fixture.ts
index 20b78ee253..a009828bd9 100644
--- a/tools/pfe-tools/test/create-fixture.ts
+++ b/tools/pfe-tools/test/create-fixture.ts
@@ -1,49 +1,7 @@
 import type { TemplateResult } from 'lit';
-
+import { chai, fixtureCleanup, fixture } from '@open-wc/testing';
 import Color from 'colorjs.io';
 
-import { chai } from '@open-wc/testing';
-
-type TestHelpers = {
-  fixture: (testCase: string | TemplateResult) => Promise;
-};
-
-/**
- * Dynamically import dependencies depending on which test wrapper we're using.
- *
- * With this approach we can register wrapper specific `beforeEach` side effects that automatically
- * reset our fixtures to a clean slate before creating a new fixture.
- *
- * Most `beforeEach` side effects are stored in the helper file. The exception to this are
- * the @open-wc/testing-helpers. By default they add a `afterEach` function for fixture clean up
- * which we _do not_ want. (See https://docs.cypress.io/guides/references/best-practices#Using-after-or-afterEach-hooks)
- * By using the `index-no-side-effects` file we can move the cleanup to `beforeEach`.
- */
-const helpers: Promise = new Promise(resolve => {
-  // Check to see if we need to return a React wrapper.
-  if ('React' in window) {
-    // Dynamically import the reactWrapper helper.
-    import('./react-wrapper.js').then(resolve);
-
-  // Check to see if we need to return a Vue wrapper.
-  } else if ('Vue' in window) {
-    // Dynamically import the vueWrapper helper.
-    import('./vue-wrapper.js').then(resolve);
-
-  // If not, use a standard fixture for creating a rendered element.
-  } else {
-    import('@open-wc/testing').then(testingHelpers => {
-      // Manually cleanup after each fixture using beforEach().
-      beforeEach(() => {
-        testingHelpers.fixtureCleanup();
-      });
-      resolve({
-        fixture: el => testingHelpers.fixture(el),
-      });
-    });
-  }
-});
-
 /**
  * Creates a new testing fixture.
  *
@@ -57,7 +15,7 @@ const helpers: Promise = new Promise(resolve => {
 export async function createFixture(
   code: string | TemplateResult
 ): Promise {
-  const { fixture } = await helpers;
+  beforeEach(fixtureCleanup);
   return fixture(code);
 }
 
@@ -91,4 +49,3 @@ declare global {
     }
   }
 }
-
diff --git a/tools/pfe-tools/test/react-wrapper.ts b/tools/pfe-tools/test/react-wrapper.ts
deleted file mode 100644
index 0b8926925e..0000000000
--- a/tools/pfe-tools/test/react-wrapper.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { elementUpdated, oneEvent } from '@open-wc/testing';
-import type { TemplateResult } from 'lit';
-import { renderToString } from './render-to-string';
-
-// not worth fighting eslint over babel silliness
-/* eslint-disable @typescript-eslint/no-namespace */
-declare global {
-  namespace Babel {
-    function transform(code: string, opts?: {
-      presets?: string[];
-    }): { code: string };
-  }
-
-  namespace ReactDOM {
-    function unmountComponentAtNode(element: Element): void;
-  }
-}
-/* eslint-enable @typescript-eslint/no-namespace */
-
-function camel(str: string): string {
-  return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
-}
-
-const cssRuleMangler = (cssInJs: Record, propertyText: string) => {
-  if (!propertyText.trim()) {
-    return cssInJs;
-  }
-  const [propertyName, propertyValue] = propertyText.split(':');
-  return Object.assign(cssInJs, {
-    [camel(propertyName.trim())]: propertyValue.trim(),
-  });
-};
-
-const markupRuiner = (_: unknown, css: string) =>
-  `style={${JSON.stringify(css.split(';')
-    .reduce(cssRuleMangler, {} as Record))}}`;
-
-/**
- * Creates a new React app "wrapper" for a passed in web component.
- *
- * Awaits for React and the web component to be ready.
- *
- * Registers a side effect to clean up the React app and code
- * after each test.
- *
- * @param  code The element code you'd like to inject into React.
- *
- * @returns  Returns the new web component rendered within React.
- *
- * @deprecated use react wrapper components
- */
-export async function fixture(
-  testCase: string | TemplateResult
-): Promise {
-  const code = (typeof testCase === 'string') ? testCase : renderToString(testCase);
-  const appRoot = document.getElementById('root');
-  if (!appRoot) {
-    throw new Error('#root not found');
-  }
-
-  // Add a listener so we know when React is ready.
-  const isReactReady = oneEvent(appRoot, 'react-ready', false);
-
-  // react gonna react
-  const intentionallyCorruptedMarkup = (
-    code
-      .replace(/style="(.*)"/g, markupRuiner)
-      .replace(/disabled=""/g, 'disabled={true}')
-      .replace(/class="(.*)"/g, 'className="$1"')
-      .replace(//mg, '')
-      .replace(//g, '')
-      .replace(//g, '')
-  );
-
-  // 0. Wrap the web component in a 
 just in case
-  //    there are multiple root elements.
-  //    React needs a single element root to render.
-  //    We could use a normal 
 but this avoids
-  //    littering the DOM with extra divs.
-  // 1. Insert web component into JSX string.
-  const wrapReact = /* js */`ReactDOM.render(
-    
${intentionallyCorruptedMarkup}
,
-    document.getElementById('root'),
-    () => document.getElementById('root').dispatchEvent(new Event("react-ready"))
-  );`;
-
-  // 2. Transform JSX string into raw JS string for React.
-  const reactifiedElement = Babel.transform(
-    wrapReact,
-    { presets: ['react'] }
-  ).code;
-
-  // 3. Render our mock React component on the page
-  const newScript = document.createElement('script');
-  newScript.id = 'react-script';
-  newScript.innerHTML = reactifiedElement;
-  document.body.appendChild(newScript);
-
-  // Make sure React is ready and our component is rendered.
-  await isReactReady;
-
-  // Select the newly rendered component and make sure it's finished updating.
-  // We use the parent 
 for the selector. We need everything
-  // within that wrapper.
-  const newElement = document.querySelector('#react-wrapper > *') as T;
-  await elementUpdated(newElement);
-  // Return the ready element for testing.
-  return newElement;
-}
-
-/**
- * This registers the React cleanup as a side effect.
- */
-beforeEach(() => {
-  const reactScript = document.getElementById('react-script');
-  const appRoot = document.getElementById('root');
-  if (!appRoot) {
-    throw new Error('#root not found');
-  }
-
-  if (reactScript) {
-    // Unmount the React root component.
-    ReactDOM.unmountComponentAtNode(appRoot);
-
-    // Remove the