From 6e8fad64b10e174a4976dcf95ccb7de7be866529 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!?=
 <bennypowers@users.noreply.github.com>
Date: Thu, 16 Nov 2023 14:36:52 +0200
Subject: [PATCH] feat(card): lighter and darker palettes (#1327)

* chore: stylelint config

* feat(lib): context-picker allow attr

* feat(lib): reflect color-palette on demo

* fix(card): lighter/darker color-palettes

* fix(card): adjust whitespace to suit designs

* docs(card): custom header context demo
---
 .changeset/card-whitespace.md                 |  4 +
 .stylelintrc.yml                              | 32 +++---
 elements/rh-accordion/rh-accordion-header.css |  2 +-
 elements/rh-accordion/rh-accordion-panel.css  | 13 ++-
 elements/rh-alert/rh-alert.css                |  2 +-
 .../rh-audio-player-lightdom.css              | 13 ++-
 .../rh-audio-player-range-styles.css          | 67 +++++++------
 ...h-audio-player-scrolling-text-overflow.css | 12 ++-
 elements/rh-audio-player/rh-audio-player.css  | 97 +++++++++++--------
 elements/rh-avatar/rh-avatar.css              | 36 ++++---
 elements/rh-button/rh-button.css              |  1 -
 elements/rh-card/demo/color-context.html      | 75 ++++++++++----
 elements/rh-card/demo/variants.html           | 73 +++++++-------
 elements/rh-card/rh-card.css                  | 19 +++-
 elements/rh-card/rh-card.ts                   | 13 ++-
 elements/rh-code-block/rh-code-block.css      |  7 +-
 elements/rh-cta/rh-cta.css                    | 15 ++-
 elements/rh-footer/rh-footer-lightdom.css     | 24 +++--
 elements/rh-footer/rh-footer.css              |  7 +-
 .../rh-navigation-secondary-dropdown.css      |  4 +-
 .../rh-navigation-secondary-lightdom.css      | 28 ++++--
 .../rh-navigation-secondary-menu.css          | 21 ++--
 .../rh-navigation-secondary-overlay.css       |  7 +-
 .../rh-navigation-secondary.css               |  4 +-
 elements/rh-subnav/rh-subnav-lightdom.css     |  2 +-
 elements/rh-subnav/rh-subnav.css              | 48 ++++++---
 elements/rh-table/rh-sort-button.css          |  2 +-
 elements/rh-table/rh-table-lightdom.css       | 22 +++--
 elements/rh-table/rh-table.css                |  4 +-
 elements/rh-tabs/rh-tab-panel.css             |  2 +-
 elements/rh-tabs/rh-tab.css                   | 83 ++++++++++------
 elements/rh-tabs/rh-tabs.css                  |  3 +-
 elements/rh-tag/rh-tag.css                    |  3 +-
 elements/rh-tile/rh-tile-group.css            |  2 +-
 elements/rh-tile/rh-tile-lightdom.css         | 10 +-
 elements/rh-tile/rh-tile.css                  |  2 +-
 elements/rh-tooltip/rh-tooltip.css            | 90 ++++++++++-------
 .../rh-context-demo/rh-context-demo.css       |  1 -
 .../rh-context-demo/rh-context-demo.ts        | 13 ++-
 .../rh-context-picker/rh-context-picker.css   |  2 +-
 .../rh-context-picker/rh-context-picker.ts    | 44 ++++++---
 package-lock.json                             | 34 ++++++-
 package.json                                  |  1 +
 43 files changed, 604 insertions(+), 340 deletions(-)
 create mode 100644 .changeset/card-whitespace.md

diff --git a/.changeset/card-whitespace.md b/.changeset/card-whitespace.md
new file mode 100644
index 0000000000..9ff7dc6a58
--- /dev/null
+++ b/.changeset/card-whitespace.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: adjust whitespace of card parts to suit design
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index 117f356772..12e82834b4 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -1,4 +1,7 @@
-extends: stylelint-config-standard
+extends:
+  - stylelint-config-standard
+  - stylelint-stylistic/config
+
 ignoreFiles:
   - node_modules/**/*
 
@@ -16,18 +19,6 @@ rules:
     - ignoreShorthands:
         - /grid/
 
-  # TODO: migrate the following paragraph to stylelint-stylistic
-  # see https://github.com/elirasza/stylelint-stylistic/tree/main/lib/rules/indentation
-  string-quotes: double
-  selector-combinator-space-after: always
-  selector-combinator-space-before: always
-  indentation:
-   - 2
-   - indentInsideParens: 'once-at-root-twice-in-block'
-  max-line-length:
-    - 100
-    - ignorePattern: /--rh-font-family-/
-
   number-max-precision: 6
   no-descending-specificity:
     - true
@@ -49,10 +40,23 @@ rules:
     - ignorePseudoElements:
       - /part(.*)/
 
+  stylistic/string-quotes: double
+  stylistic/selector-combinator-space-after: always
+  stylistic/selector-combinator-space-before: always
+  stylistic/indentation:
+   - 2
+   - indentInsideParens: 'once-at-root-twice-in-block'
+  stylistic/max-line-length:
+    - 100
+    - ignorePattern: /--rh-font-family-/
+
   rhds/token-values: true
 
+  media-feature-range-notation: prefix
+
 plugins:
   - ./node_modules/@rhds/tokens/plugins/stylelint.cjs
+  - stylelint-stylistic
 
 overrides:
   - files:
@@ -60,7 +64,7 @@ overrides:
     defaultSeverity: warning
     extends: stylelint-config-standard-scss
     rules:
-      max-line-length:
+      stylistic/max-line-length:
         - 120
         - ignorePattern: /--rh-font-family-/
 
diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
index fdd866c670..89d89985d6 100644
--- a/elements/rh-accordion/rh-accordion-header.css
+++ b/elements/rh-accordion/rh-accordion-header.css
@@ -115,4 +115,4 @@ span {
 .toggle:after {
   inset-block: 0;
   inset-inline-start: 0;
-}
\ No newline at end of file
+}
diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css
index b05cdb494b..d59961e167 100644
--- a/elements/rh-accordion/rh-accordion-panel.css
+++ b/elements/rh-accordion/rh-accordion-panel.css
@@ -60,15 +60,20 @@
   border-inline-end:
     1px
     solid
-    var(--_panel-border-inline-end-color,
-      var(--rh-color-border-subtle-on-light, #c7c7c7));
+    var(
+        --_panel-border-inline-end-color,
+        var(--rh-color-border-subtle-on-light, #c7c7c7)
+      );
   background-color: var(--_background-color);
 }
 
 .content[expanded],
 :host([expanded]) .content {
-  --_panel-body--before-background-color: var(--_panel-content-body-accent-color,
-    var(--rh-color-accent-base-on-light, #0066cc));
+  --_panel-body--before-background-color:
+    var(
+        --_panel-content-body-accent-color,
+        var(--rh-color-accent-base-on-light, #0066cc)
+      );
 }
 
 .body:after {
diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css
index e181815ae0..c2a59e9a9d 100644
--- a/elements/rh-alert/rh-alert.css
+++ b/elements/rh-alert/rh-alert.css
@@ -41,7 +41,7 @@
 }
 
 :host([toast]),
-:host([variant="toast"]){
+:host([variant="toast"]) {
   --_background-color: var(--rh-color-surface-lightest, #ffffff);
 
   max-width: 550px;
diff --git a/elements/rh-audio-player/rh-audio-player-lightdom.css b/elements/rh-audio-player/rh-audio-player-lightdom.css
index 99a56ba6b8..4cec52dcb8 100644
--- a/elements/rh-audio-player/rh-audio-player-lightdom.css
+++ b/elements/rh-audio-player/rh-audio-player-lightdom.css
@@ -49,16 +49,20 @@ rh-audio-player[color-palette="dark"] {
 
 rh-audio-player[color-palette="dark"] > * {
   background-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-darkest, #151515));
+    var(
+        --rh-audio-player-background-color,
+        var(--rh-color-surface-darkest, #151515)
+      );
 }
 
 rh-audio-player-about,
 rh-audio-player-subscribe,
 rh-transcript {
   background-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
+    var(
+        --rh-audio-player-background-color,
+        var(--rh-color-surface-lightest, #ffffff)
+      );
 }
 
 rh-audio-player > [slot="series"] {
@@ -82,4 +86,3 @@ rh-audio-player [slot="heading"] {
 rh-audio-player [slot="heading"] {
   font-size: var(--rh-font-size-body-text-md, 1rem);
 }
-
diff --git a/elements/rh-audio-player/rh-audio-player-range-styles.css b/elements/rh-audio-player/rh-audio-player-range-styles.css
index fd56d0518b..4ebbe339a8 100644
--- a/elements/rh-audio-player/rh-audio-player-range-styles.css
+++ b/elements/rh-audio-player/rh-audio-player-range-styles.css
@@ -1,26 +1,27 @@
-/*
-Adapted from:
-
-Copyright (c) 2023 by S. Shahriar (https://codepen.io/ShadowShahriar/pen/zYPPYrQ)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of 
-this software and associated documentation files (the "Software"), to deal in the 
-Software without restriction, including without limitation the rights to use, 
-copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the 
-Software, and to permit persons to whom the Software is furnished to do so, 
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all 
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
-DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
-ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 
-IN THE SOFTWARE.
-*/
+/**
+ * @license Adapted from:
+ *
+ * Copyright (c) 2023 by S. Shahriar (https://codepen.io/ShadowShahriar/pen/zYPPYrQ)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in the
+ * Software without restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+ * Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
 input[type="range"] {
   display: inline-flex;
   align-items: center;
@@ -45,7 +46,6 @@ input[type="range"] {
   --_outline: var(--rh-border-width-md, 2px) solid var(--_interactive-color);
   --_thumb-color: var(--rh-audio-player-range-thumb-color, var(--_accent-color));
   --_progress-color: var(--rh-audio-player-range-progress-color, var(--_accent-color));
-  
 }
 
 input[type="range"][hidden] {
@@ -95,13 +95,15 @@ input[type="range"]::-webkit-slider-thumb {
   box-shadow: var(--box-fill);
   border-radius: var(--_thumb-width, var(--_thumb-height));
 
-  /* stylelint-disable-next-line max-line-length */
   --_clip-top: calc((var(--_thumb-height) - var(--_track-height)) * 0.5 - 0.5px);
   --_clip-bottom: calc(var(--_thumb-height) - var(--_clip-top));
   --_clip-further: calc(100% + 1px);
-
-  /* stylelint-disable-next-line max-line-length */
-  --box-fill: calc(-100vmax - var(--_thumb-width, var(--_thumb-height))) 0 0 100vmax var(--_box-fill-color, currentcolor);
+  --box-fill:
+    calc(-100vmax - var(--_thumb-width, var(--_thumb-height)))
+    0
+    0
+    100vmax
+    var(--_box-fill-color, currentcolor);
 
   clip-path:
     polygon(
@@ -122,8 +124,11 @@ input[type="range"]:disabled::-webkit-slider-thumb {
 
 input[type="range"]::-webkit-slider-runnable-track {
   border-radius: 3px;
-  /* stylelint-disable-next-line max-line-length */
-  background: linear-gradient(var(--_track-fill-color) 0 0) scroll no-repeat center / 100% calc(var(--_track-height) + 1px);
+  background:
+    linear-gradient(var(--_track-fill-color) 0 0)
+    scroll
+    no-repeat
+    center / 100% calc(var(--_track-height) + 1px);
 }
 
 input[type="range"],
@@ -164,4 +169,4 @@ input[type="range"]::-moz-range-progress {
 
 input[type="range"]:disabled::-moz-range-thumb {
   cursor: not-allowed;
-}
\ No newline at end of file
+}
diff --git a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css
index 0f39445703..c611324c85 100644
--- a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css
+++ b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css
@@ -20,14 +20,18 @@
   overflow-y: visible;
 
   --_fade-color:
-    var(--rh-audio-player-scrolling-text-overflow-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
+    var(
+        --rh-audio-player-scrolling-text-overflow-background-color,
+        var(--rh-color-surface-lightest, #ffffff)
+      );
 }
 
 #outer.dark {
   --_fade-color:
-    var(--rh-audio-player-scrolling-text-overflow-background-color,
-      var(--rh-color-surface-darkest, #151515));
+    var(
+        --rh-audio-player-scrolling-text-overflow-background-color,
+        var(--rh-color-surface-darkest, #151515)
+      );
 }
 
 #outer.rtl {
diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css
index 01b16be578..20d9def13c 100644
--- a/elements/rh-audio-player/rh-audio-player.css
+++ b/elements/rh-audio-player/rh-audio-player.css
@@ -33,14 +33,18 @@
   --_about-mediatitle-display: none;
   --_about-heading-display: flex;
   --_surface-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
+    var(
+        --rh-audio-player-background-color,
+        var(--rh-color-surface-lightest, #ffffff)
+      );
   --_border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
   --_box-shadow: var(--rh-box-shadow-md, 0 4px 6px 1px rgba(21, 21, 21, 0.25));
   --_text-color: var(--rh-color-text-primary-on-light, #151515);
   --_secondary-text-color:
-    var(--rh-audio-player-secondary-text-color,
-      var(--rh-color-text-secondary-on-light, #4d4d4d));
+    var(
+        --rh-audio-player-secondary-text-color,
+        var(--rh-color-text-secondary-on-light, #4d4d4d)
+      );
   --_secondary-opacity: var(--rh-audio-player-secondary-opacity, 1);
   --rh-tooltip-content-padding-block-start: var(--rh-space-md, 8px);
   --rh-tooltip-content-padding-block-end: var(--rh-space-md, 8px);
@@ -49,37 +53,45 @@
 }
 
 #container.mobile-safari {
-  --_time-slider-extension: calc(
-      var(--_button-size, 40px) + var(--_icon-gap,
-      var(--rh-space-xl, 24px)
-    )
-  );
+  --_time-slider-extension:
+    calc(
+        var(--_button-size, 40px) + var(
+          --_icon-gap,
+          var(--rh-space-xl, 24px)
+        )
+      );
 }
 
 #container.has-accent-color {
-  --_border-color: rgba(0,0,0,0.5);
+  --_border-color: rgba(0, 0, 0, 0.5);
   --_secondary-text-color:
-    var(--rh-audio-player-secondary-text-color,
-      var(--rh-color-text-primary-on-light, #151515));
+    var(
+        --rh-audio-player-secondary-text-color,
+        var(--rh-color-text-primary-on-light, #151515)
+      );
   --_range-track-color: rgb(255 255 255 / 0.5);
   --_secondary-opacity: var(--rh-audio-player-secondary-opacity, 0.75);
   --_static-border-color: transparent;
-  --_static-overlay-focus-color: rgba(80,80,80,0.5);
-  --_static-overlay-color: rgba(0,0,0,0.5);
+  --_static-overlay-focus-color: rgba(80, 80, 80, 0.5);
+  --_static-overlay-color: rgba(0, 0, 0, 0.5);
 }
 
 #container.dark {
   color: var(--rh-audio-player-text-color, var(--_text-color));
 
   --_surface-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-darkest, #151515));
+    var(
+        --rh-audio-player-background-color,
+        var(--rh-color-surface-darkest, #151515)
+      );
   --_border-color: var(--rh-color-border-subtle-on-dark, #707070);
   --_box-shadow: none;
   --_text-color: var(--rh-color-text-primary-on-dark, #ffffff);
   --_secondary-text-color:
-    var(--rh-audio-player-secondary-text-color,
-      var(--rh-color-text-secondary-on-dark, #c7c7c7));
+    var(
+        --rh-audio-player-secondary-text-color,
+        var(--rh-color-text-secondary-on-dark, #c7c7c7)
+      );
   --_static-border-color: var(--rh-color-border-subtle-on-dark, #707070);
   --_static-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
   --_static-highlight-color: var(--rh-color-surface-dark, #383838);
@@ -100,7 +112,7 @@
 }
 
 #container.dark.has-accent-color {
-  --_border-color: rgba(255,255,255,0.5);
+  --_border-color: rgba(255, 255, 255, 0.5);
   --_secondary-opacity: var(--rh-audio-player-secondary-opacity, 0.75);
 }
 
@@ -113,11 +125,10 @@
   text-align: right;
 }
 
-::slotted(rh-audio-player-about), 
-::slotted(rh-audio-player-subscribe) , 
-::slotted(rh-audio-player-transcript){
-  background-color:
-    var(--_static-surface-color);
+::slotted(rh-audio-player-about),
+::slotted(rh-audio-player-subscribe),
+::slotted(rh-audio-player-transcript) {
+  background-color: var(--_static-surface-color);
 }
 
 ::slotted([slot="series"]) {
@@ -209,7 +220,7 @@
 }
 
 rh-tooltip {
-  display: flex; 
+  display: flex;
 }
 
 rh-tooltip > * {
@@ -358,7 +369,7 @@ input[type="range"] {
   --_svg-size: var(--rh-icon-size-02, 24px);
 }
 
-[part="toolbar"]{
+[part="toolbar"] {
   position: relative;
 }
 
@@ -425,7 +436,7 @@ rh-menu > button {
   text-align: left;
   max-width: 200px;
   color: var(--_static-text-color);
-  background-color:  var(--_static-overlay-color);
+  background-color: var(--_static-overlay-color);
   font-size: var(--rh-font-size-body-text-md, 1rem);
   line-height: var(--rh-line-height-body-text, 1.5);
   font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
@@ -459,8 +470,8 @@ rh-menu > button:focus {
 }
 
 #playback-rate-tooltip {
-  margin-inline-start: 10px; 
-  margin-inline-end: 2px; 
+  margin-inline-start: 10px;
+  margin-inline-end: 2px;
 }
 
 #playback-rate-stepper,
@@ -545,11 +556,13 @@ rh-menu > button:focus {
   }
 
   :host([layout^="compact"]) #container.mobile-safari {
-    --_time-slider-extension: calc(
-        80px + var(--_button-size, 40px) + 1.5 * var(--_icon-gap, 
-        var(--rh-space-xl, 24px)
-      )
-    );
+    --_time-slider-extension:
+      calc(
+          80px + var(--_button-size, 40px) + 1.5 * var(
+            --_icon-gap,
+            var(--rh-space-xl, 24px)
+          )
+        );
   }
 
   :host([layout="compact-wide"]) {
@@ -592,11 +605,13 @@ rh-menu > button:focus {
   }
 
   :host([layout="full"]) #container.mobile-safari {
-    --_time-slider-extension: calc(
-        80px + var(--_button-size, 40px) + var(--_icon-gap, 
-        var(--rh-space-xl, 24px)
-      )
-    );
+    --_time-slider-extension:
+      calc(
+          80px + var(--_button-size, 40px) + var(
+            --_icon-gap,
+            var(--rh-space-xl, 24px)
+          )
+        );
   }
 
   :host([layout="full"][mediatitle]) #container {
@@ -648,7 +663,7 @@ rh-menu > button:focus {
     flex: 0 0 calc(var(--_time-slider-width) / 2);
     margin: -4px 0 var(--rh-length-lg, 16px);
   }
-  
+
   :host([layout="full"]) #duration {
     flex: 0 0 calc(var(--_time-slider-width) / 2);
     justify-content: flex-end;
@@ -658,7 +673,7 @@ rh-menu > button:focus {
   :host([dir="rtl"][layout="full"]) #duration {
     justify-content: flex-start;
   }
-  
+
   :host([layout="full"]) #container.mobile-safari #duration {
     margin-inline-end: -4px;
   }
diff --git a/elements/rh-avatar/rh-avatar.css b/elements/rh-avatar/rh-avatar.css
index d7aec6c153..3b8208e51d 100644
--- a/elements/rh-avatar/rh-avatar.css
+++ b/elements/rh-avatar/rh-avatar.css
@@ -11,12 +11,15 @@
   display: grid;
   color: var(--rh-color-text-secondary-on-light, #4d4d4d);
 
-  --_colors: var(--rh-avatar-colors,
-    var(--rh-color-blue-200, #73bcf7)
-    var(--rh-color-cyan-300, #009596)
-    var(--rh-color-green-500, #3e8635)
-    var(--rh-color-red-300, #f56d6d)
-    var(--rh-color-purple-500, #6753ac));
+  --_colors:
+    var(
+        --rh-avatar-colors,
+        var(--rh-color-blue-200, #73bcf7)
+        var(--rh-color-cyan-300, #009596)
+        var(--rh-color-green-500, #3e8635)
+        var(--rh-color-red-300, #f56d6d)
+        var(--rh-color-purple-500, #6753ac)
+      );
 
   column-gap: var(--rh-space-lg, 16px);
   width: min-content;
@@ -84,21 +87,26 @@ slot {
 #container.dark {
   color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
 
-  --_colors: var(--rh-avatar-colors,
-    var(--rh-color-blue-400, #0066cc)
-    var(--rh-color-cyan-500, #003737)
-    var(--rh-color-green-700, #3e8635)
-    var(--rh-color-red-500, #ee0000)
-    var(--rh-color-purple-700, #1f0066));
+  --_colors:
+    var(
+        --rh-avatar-colors,
+        var(--rh-color-blue-400, #0066cc)
+        var(--rh-color-cyan-500, #003737)
+        var(--rh-color-green-700, #3e8635)
+        var(--rh-color-red-500, #ee0000)
+        var(--rh-color-purple-700, #1f0066)
+      );
 }
 
-img, svg {
+img,
+svg {
   object-fit: cover;
   object-position: center;
 }
 
 canvas,
-img, svg {
+img,
+svg {
   overflow: hidden;
   width: var(--rh-avatar-size, var(--rh-size-icon-06, 64px));
   max-width: var(--rh-size-icon-06, 64px);
diff --git a/elements/rh-button/rh-button.css b/elements/rh-button/rh-button.css
index 6fb042363a..9e19e14883 100644
--- a/elements/rh-button/rh-button.css
+++ b/elements/rh-button/rh-button.css
@@ -547,4 +547,3 @@ button[disabled] {
 :host(:not([disabled])) .hasIcon [part="icon"] {
   cursor: pointer;
 }
-
diff --git a/elements/rh-card/demo/color-context.html b/elements/rh-card/demo/color-context.html
index 4b33c82b19..e30754c6e8 100644
--- a/elements/rh-card/demo/color-context.html
+++ b/elements/rh-card/demo/color-context.html
@@ -11,13 +11,12 @@ <h2 slot="header">Default card, slotted content and footer</h2>
     </rh-cta>
   </rh-card>
 
-  <rh-card>
+  <rh-card id="custom">
     <h2 slot="header">Slotted title, content, and footer</h2>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a
-      sollicitudin mauris tincidunt. Pellentesque vel dapibus risus. Nullam aliquam felis orci, eget cursus mi
-      lacinia quis. Vivamus at felis sem.
-    </p>
+    <label for="picker">Change this card's color-palette</label>
+    <rh-context-picker id="picker"
+                       target="custom"
+                       allow="darkest, darker, lighter, lightest"></rh-context-picker>
     <rh-cta priority="primary" slot="footer">
       <a href="#">Call to action</a>
     </rh-cta>
@@ -38,32 +37,74 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
       <a href="#">Call to action</a>
     </rh-cta>
   </rh-card>
+
+  <rh-card class="bar">
+    <h2 slot="header">Custom header</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="bar">
+    <h2 slot="header">Custom header</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
 </rh-context-demo>
 
 <style>
   rh-context-demo::part(demo) {
     display: grid;
-    gap: var(--rh-space-lg, 16px);
     grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
-    grid-auto-columns: 1fr;
+    gap: var(--rh-space-lg, 16px);
   }
 
   rh-card {
-    height: max-content;
+    &.full {
+      &::part(header) { margin: 0; }
+      & :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
+        padding-inline: var(--rh-space-xl, 24px);
+      }
+      & img {
+        display: block;
+        min-width: 100%;
+        height: auto;
+      }
+    }
+    &.bar {
+      &::part(header) {
+        margin: 0;
+        padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
+        text-transform: uppercase;
+        font-weight: var(--rh-font-weight-heading-regular, 300);
+        font-size: var(--rh-font-size-body-text-md, 1rem);
+        background-color: var(--bar-header-context-background-color);
+      }
+      &::part(body) {
+        /* margin: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px); */
+      }
+    }
   }
 
-  rh-card.full::part(header) {
-    padding: 0;
+  [color-palette^="light"] {
+    --bar-header-context-background-color: var(--rh-color-surface-light, #e0e0e0);
   }
-
-  rh-card.full :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
-    padding-inline: var(--rh-space-xl, 24px);
+  [color-palette^="dark"] {
+    --bar-header-context-background-color: var(--rh-color-surface-dark, #383838);
   }
 
-  rh-card.full img {
+  label[for="picker"] {
     display: block;
-    min-width: 100%;
-    height: auto;
   }
 </style>
 
diff --git a/elements/rh-card/demo/variants.html b/elements/rh-card/demo/variants.html
index 75f42e374a..97eedd30a3 100644
--- a/elements/rh-card/demo/variants.html
+++ b/elements/rh-card/demo/variants.html
@@ -4,7 +4,7 @@ <h2 slot="header">Default card, slotted content and footer</h2>
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -15,40 +15,40 @@ <h2 slot="header">Slotted title, content, and footer</h2>
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
 
-<rh-card class="alt">
-  <h2 slot="header">Alternative color scheme</h2>
+<rh-card color-palette="lighter">
+  <h2 slot="header">Lighter color palette</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
 
-<rh-card class="alt bar">
-  <h2 slot="header">Alternative color scheme and title bar</h2>
+<rh-card color-palette="lighter" class="bar">
+  <h2 slot="header">Lighter color palette and custom header</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
 
 <rh-card class="bar">
-  <h2 slot="header">Title bar</h2>
+  <h2 slot="header">Custom header</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -59,7 +59,7 @@ <h2 slot="header">Center aligned content, footer</h2>
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -70,7 +70,7 @@ <h2 slot="header">End aligned content, footer</h2>
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -84,7 +84,7 @@ <h2 slot="header">End aligned content, footer</h2>
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -98,7 +98,7 @@ <h2 slot="header">End aligned content, footer</h2>
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -110,7 +110,7 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -133,29 +133,34 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
     height: max-content;
   }
 
-  rh-card.alt::part(container) {
-    background-color: var(--_alt-bg, var(--rh-color-surface-lighter, #f2f2f2));
+  rh-card.bar {
+    &::part(header) {
+      margin: 0;
+      padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
+      background-color: var(--_header-bg, var(--rh-color-surface-light, #e0e0e0));
+      text-transform: uppercase;
+      font-weight: var(--rh-font-weight-heading-regular, 300);
+      font-size: var(--rh-font-size-body-text-md, 1rem);
+    }
+    &::part(body) {
+      /* margin: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px); */
+    }
   }
 
-  rh-card.bar::part(header) {
-    background-color: var(--_header-bg, var(--rh-color-surface-light, #e0e0e0));
-    text-transform: uppercase;
-    font-weight: var(--rh-font-weight-heading-regular, 300);
-    font-size: var(--rh-font-size-body-text-md, 1rem);
-  }
-
-  rh-card.full::part(header) {
-    padding: 0;
-  }
+  rh-card.full {
+    &::part(header) {
+      margin: 0;
+    }
 
-  rh-card.full :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
-    padding-inline: var(--rh-space-xl, 24px);
-  }
+    & :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
+      padding-inline: var(--rh-space-xl, 24px);
+    }
 
-  rh-card.full img {
-    display: block;
-    min-width: 100%;
-    height: auto;
+    & img {
+      display: block;
+      min-width: 100%;
+      height: auto;
+    }
   }
 
   rh-card.center::part(body),
diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index aba96debbe..b3cf4ecae6 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -44,10 +44,21 @@ article {
   border-color: var(--rh-color-border-subtle-on-dark, #707070);
 }
 
+#container.darker {
+  background-color: var(--rh-color-surface-darker, #1f1f1f);
+}
+
+#container.lighter {
+  background-color: var(--rh-color-surface-lighter, #f2f2f2);
+}
+
 #header,
 #body,
 #footer {
   margin-inline: var(--rh-space-xl, 24px);
+  background-color: var(--rh-color-surface-darkest, #151515);
+  color: var(--rh-color-text-primary-on-dark, #ffffff);
+  border-color: var(--rh-color-border-subtle-on-dark, #707070);
 }
 
 #header {
@@ -60,15 +71,13 @@ article {
 }
 
 #body {
-  margin-block-start: var(--rh-space-2xl, 32px);
-  margin-block-end: var(--rh-space-xl, 24px);
+  margin-block: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
 }
 
 #footer {
   display: flex;
   gap: 0.5em;
-  margin-block-start: auto;
-  margin-block-end: var(--rh-space-xl, 24px);
+  margin-block: auto var(--rh-space-xl, 24px);
 }
 
 #header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
@@ -84,7 +93,7 @@ article {
   margin-block-end: 0;
 }
 
-@media screen and (min-width: 768px) {
+@media (min-width: 768px) {
   #header,
   #body,
   #footer {
diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts
index bd90b02e8d..4e97ff85b4 100644
--- a/elements/rh-card/rh-card.ts
+++ b/elements/rh-card/rh-card.ts
@@ -34,8 +34,6 @@ export class RhCard extends LitElement {
 
   static styles = [styles];
 
-  protected slots = new SlotController(this, 'header', null, 'footer');
-
   /**
    * Sets color theme based on parent context
    */
@@ -50,16 +48,17 @@ export class RhCard extends LitElement {
    * Card always resets its context to `base`, unless explicitly provided with a `color-palette`.
    */
   @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: 'darkest' | 'lightest' | 'lighter';
 
+  #slots = new SlotController(this, 'header', null, 'footer');
 
   override render() {
-    const { on = '' } = this;
+    const { on = '', colorPalette = '' } = this;
     return html`
-     <article part="container" id="container" class="${classMap({ [on]: !!on })}">
+     <article part="container" id="container" class="${classMap({ [on]: !!on, [colorPalette]: !!colorPalette })}">
         <header id="header"
                 part="header"
-                class="${classMap({ empty: !this.slots.hasSlotted('header') })}">
+                class="${classMap({ empty: !this.#slots.hasSlotted('header') })}">
           <slot name="header"></slot>
         </header>
         <div id="body"
@@ -69,7 +68,7 @@ export class RhCard extends LitElement {
         </div>
         <footer id="footer"
                 part="footer"
-                class="${classMap({ empty: !this.slots.hasSlotted('footer') })}">
+                class="${classMap({ empty: !this.#slots.hasSlotted('footer') })}">
           <slot name="footer"></slot>
         </footer>
       </article>
diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
index bdc9b9d68c..30258c2c15 100644
--- a/elements/rh-code-block/rh-code-block.css
+++ b/elements/rh-code-block/rh-code-block.css
@@ -7,8 +7,11 @@
   display: block;
   background-color: var(--rh-color-surface-lighter, #f2f2f2);
   border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
-  border-block-start-width: var(--rh-code-block-border-block-start-width,
-    var(--rh-border-width-sm, 1px));
+  border-block-start-width:
+    var(
+        --rh-code-block-border-block-start-width,
+        var(--rh-border-width-sm, 1px)
+      );
   padding: var(--rh-space-xl, 24px);
   font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
   color: var(--rh-color-text-primary-on-light, #151515);
diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css
index df8e5bca94..87e9bd150b 100644
--- a/elements/rh-cta/rh-cta.css
+++ b/elements/rh-cta/rh-cta.css
@@ -120,8 +120,11 @@ svg {
 
 :host(:is(:focus, :focus-within)) #container {
   border-color: var(--rh-cta-focus-border-color);
-  background-color: var(--rh-cta-focus-container-background-color,
-    var(--rh-cta-focus-background-color));
+  background-color:
+    var(
+        --rh-cta-focus-container-background-color,
+        var(--rh-cta-focus-background-color)
+      );
 
   --rh-cta-color: var(--rh-cta-focus-color);
   --rh-cta-text-decoration: var(--rh-cta-focus-text-decoration);
@@ -161,8 +164,11 @@ svg {
 }
 
 :host(:active) #container {
-  --rh-cta-background-color: var(--rh-cta-active-container-background-color,
-    var(--rh-cta-active-background-color));
+  --rh-cta-background-color:
+    var(
+        --rh-cta-active-container-background-color,
+        var(--rh-cta-active-background-color)
+      );
 }
 
 :host(:active) #container:after {
@@ -170,7 +176,6 @@ svg {
   border-color: var(--rh-cta-active-inner-border-color) !important;
 }
 
-
 /*****************************************************************************
  * VARIANTS                                                                  *
  *****************************************************************************/
diff --git a/elements/rh-footer/rh-footer-lightdom.css b/elements/rh-footer/rh-footer-lightdom.css
index 8c33245fcc..9b2d420e4f 100644
--- a/elements/rh-footer/rh-footer-lightdom.css
+++ b/elements/rh-footer/rh-footer-lightdom.css
@@ -1,24 +1,32 @@
-/* Via pfe-base.css */
 :is(rh-footer, :is(rh-footer-universal, rh-global-footer)) a {
   color: var(--rh-color-link-inline-on-dark, var(--rh-color-interactive-blue-lighter, #73bcf7));
   text-decoration: none;
 }
 
 :is(rh-footer, :is(rh-footer-universal, rh-global-footer)) a:hover {
-  color: var(--rh-color-link-inline-hover-on-dark,
-    var(--rh-color-interactive-blue-lightest, #bee1f4));
+  color:
+    var(
+        --rh-color-link-inline-hover-on-dark,
+        var(--rh-color-interactive-blue-lightest, #bee1f4)
+      );
   text-decoration: underline;
 }
 
 :is(rh-footer, :is(rh-footer-universal, rh-global-footer)) a:is(:focus, :focus-within) {
-  color: var(--rh-color-link-inline-focus-on-dark,
-    var(--rh-color-interactive-blue-lightest, #bee1f4));
+  color:
+    var(
+        --rh-color-link-inline-focus-on-dark,
+        var(--rh-color-interactive-blue-lightest, #bee1f4)
+      );
   text-decoration: underline;
 }
 
 :is(rh-footer, :is(rh-footer-universal, rh-global-footer)) a:visited {
-  color: var(--rh-color-link-inline-visited-on-dark,
-    var(--rh-color-interactive-blue-lightest, #bee1f4));
+  color:
+    var(
+        --rh-color-link-inline-visited-on-dark,
+        var(--rh-color-interactive-blue-lightest, #bee1f4)
+      );
   text-decoration: none;
 }
 
@@ -72,7 +80,7 @@ rh-footer [slot^="links"] a {
 }
 
 /* (min-width: --rh-breakpoint-sm) */
-@media screen and (min-width: 768px) { 
+@media screen and (min-width: 768px) {
   :is(rh-footer, rh-footer-universal, rh-global-footer) {
     --rh-footer-section-side-gap: var(--rh-space-2xl, 32px);
   }
diff --git a/elements/rh-footer/rh-footer.css b/elements/rh-footer/rh-footer.css
index 3305497767..c330b8f00e 100644
--- a/elements/rh-footer/rh-footer.css
+++ b/elements/rh-footer/rh-footer.css
@@ -326,8 +326,11 @@ footer,
   font-weight: var(--rh-font-weight-heading-medium, 500) !important;
   margin-block: 0 !important;
   margin-block-start: var(--_link-header-margin, 0) !important;
-  font-size: var(--rh-footer-link-header-font-size,
-    var(--rh-font-size-body-text-sm, 0.875rem)) !important;
+  font-size:
+    var(
+        --rh-footer-link-header-font-size,
+        var(--rh-font-size-body-text-sm, 0.875rem)
+      ) !important;
   color: var(--rh-color-text-primary-on-dark, #ffffff) !important;
 }
 
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.css b/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.css
index b84dd3e0cf..600b5d4d77 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.css
@@ -26,7 +26,7 @@
 
 #container.highlight ::slotted([slot="link"]),
 ::slotted([slot="link"][aria-current="page"]) {
-  border-block-start-color: var(--_current-active-child-border-color,#ee0000) !important;
+  border-block-start-color: var(--_current-active-child-border-color, #ee0000) !important;
 }
 
 ::slotted([slot="link"]):after {
@@ -61,5 +61,5 @@
 
   ::slotted([slot="link"][aria-expanded="true"]):after {
     --_chevron-color: var(--rh-color-text-primary-on-light, #151515) !important;
-  } 
+  }
 }
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
index 13ddab9ff5..7931f94ac9 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
@@ -57,8 +57,11 @@
   align-items: center;
   height: 100%;
   color: var(--_logo-link-color);
-  max-width: var(--rh-navigation-secondary-logo-max-width,
-    var(--rh-secondary-nav-logo-max-width, 10em));
+  max-width:
+    var(
+        --rh-navigation-secondary-logo-max-width,
+        var(--rh-secondary-nav-logo-max-width, 10em)
+      );
   text-decoration: none;
   font-size: var(--rh-font-size-body-text-md, 1rem);
   letter-spacing: 0.01125em;
@@ -145,8 +148,10 @@
   border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
 }
 
-:is(rh-secondary-nav, rh-navigation-secondary)[color-palette="dark"] 
-[slot="nav"] li > a[aria-current="page"] {
+:is(
+rh-secondary-nav,
+rh-navigation-secondary
+)[color-palette="dark"] [slot="nav"] li > a[aria-current="page"] {
   border-block-start-color: var(--rh-color-brand-red-on-dark, #ff442b);
 }
 
@@ -163,16 +168,16 @@
 }
 
 :is(rh-secondary-nav, rh-navigation-secondary) > [slot="nav"] > li {
-  border-block-start: 
+  border-block-start:
     var(--rh-border-width-sm, 1px)
     solid
     var(--rh-color-border-subtle-on-light, #c7c7c7);
 }
 
 :is(rh-secondary-nav, rh-navigation-secondary) > [slot="nav"] > li:last-of-type {
-  border-block-end: 
+  border-block-end:
     var(--rh-border-width-sm, 1px)
-    solid 
+    solid
     var(--rh-color-border-subtle-on-light, #c7c7c7);
 }
 
@@ -214,8 +219,11 @@
     --_nav-chevron-color: var(--rh-color-text-primary-on-dark, #ffffff);
   }
 
-  :is(rh-secondary-nav, rh-navigation-secondary)[color-palette="dark"]
-  :is(rh-secondary-nav-dropdown, rh-navigation-secondary-dropdown) > a[aria-expanded="true"] {
+  :is(
+    rh-secondary-nav,
+    rh-navigation-secondary)[color-palette="dark"] :is(
+      rh-secondary-nav-dropdown,
+      rh-navigation-secondary-dropdown) > a[aria-expanded="true"] {
     --_nav-link-color: var(--rh-color-text-primary-on-light, #151515);
     --_nav-chevron-color: var(--rh-color-text-primary-on-light, #151515);
 
@@ -290,4 +298,4 @@
       margin-inline-end: var(--rh-space-4xl, 64px);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css b/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
index 7f71ae223b..ad30617fcd 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
@@ -18,11 +18,17 @@
 
 :host(:not([type="fixed-width"])) #sections {
   display: grid;
-  grid-template-columns: var(--rh-navigation-secondary-menu-section-grid,
-    var(--rh-secondary-nav-menu-section-grid, repeat(auto-fit, minmax(15.5rem, 1fr))));
+  grid-template-columns:
+    var(
+        --rh-navigation-secondary-menu-section-grid,
+        var(--rh-secondary-nav-menu-section-grid, repeat(auto-fit, minmax(15.5rem, 1fr)))
+      );
   grid-template-rows: auto;
-  gap: var(--rh-navigation-secondary-menu-section-grid-gap,
-    var(--rh-secondary-nav-menu-section-grid-gap, var(--rh-space-2xl, 32px)));
+  gap:
+    var(
+        --rh-navigation-secondary-menu-section-grid-gap,
+        var(--rh-secondary-nav-menu-section-grid-gap, var(--rh-space-2xl, 32px))
+      );
 }
 
 ::slotted(:is(ul, ol)) {
@@ -58,8 +64,11 @@
 
   #sections {
     padding: 0;
-    max-width: var(--rh-navigation-secondary-menu-content-max-width,
-      var(--rh-secondary-nav-menu-content-max-width, 1136px));
+    max-width:
+      var(
+          --rh-navigation-secondary-menu-content-max-width,
+          var(--rh-secondary-nav-menu-content-max-width, 1136px)
+        );
     margin: auto;
   }
 
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-overlay.css b/elements/rh-navigation-secondary/rh-navigation-secondary-overlay.css
index 134a569bca..210513f4e7 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-overlay.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-overlay.css
@@ -7,8 +7,11 @@
   top: 0;
   width: 100vw;
   height: 100vh;
-  z-index: var(--rh-navigation-secondary-overlay-z-index,
-    var(--rh-secondary-nav-overlay-z-index, -1));
+  z-index:
+    var(
+        --rh-navigation-secondary-overlay-z-index,
+        var(--rh-secondary-nav-overlay-z-index, -1)
+      );
 }
 
 :host([open]) {
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.css b/elements/rh-navigation-secondary/rh-navigation-secondary.css
index d4782e0ccb..5289913b65 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary.css
@@ -137,7 +137,7 @@ button:focus {
 button:active,
 button[aria-expanded="true"],
 :host([color-palette="dark"]) button[aria-expanded="true"] {
-  --_chevron-color:var(--rh-color-text-primary-on-light, #151515);
+  --_chevron-color: var(--rh-color-text-primary-on-light, #151515);
 
   color: var(--rh-color-text-primary-on-light, #151515);
   background-color: var(--rh-color-surface-lightest, #ffffff);
@@ -186,7 +186,7 @@ button[aria-expanded="true"],
 
   rh-context-provider {
     flex-direction: row;
-    justify-content: space-between; 
+    justify-content: space-between;
   }
 
   #container.expanded ::slotted([slot="nav"]) {
diff --git a/elements/rh-subnav/rh-subnav-lightdom.css b/elements/rh-subnav/rh-subnav-lightdom.css
index 1bc4e18eee..acfb7a0f2b 100644
--- a/elements/rh-subnav/rh-subnav-lightdom.css
+++ b/elements/rh-subnav/rh-subnav-lightdom.css
@@ -22,4 +22,4 @@ rh-subnav:not(:defined) a:after {
 
 rh-subnav:not(:defined) a[active]:after {
   border-block-end-color: var(--rh-color-accent-brand-on-light, #ee0000) !important;
-}
\ No newline at end of file
+}
diff --git a/elements/rh-subnav/rh-subnav.css b/elements/rh-subnav/rh-subnav.css
index d01103e9c6..07e13e3658 100644
--- a/elements/rh-subnav/rh-subnav.css
+++ b/elements/rh-subnav/rh-subnav.css
@@ -48,8 +48,11 @@
   white-space: nowrap !important;
   padding: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px) !important;
   text-decoration: none !important;
-  color: var(--_subnav-link-text-color,
-    var(--rh-color-text-secondary-on-light, #4d4d4d)) !important;
+  color:
+    var(
+        --_subnav-link-text-color,
+        var(--rh-color-text-secondary-on-light, #4d4d4d)
+      ) !important;
   position: relative !important;
 }
 
@@ -64,34 +67,48 @@
 ::slotted(a:hover),
 ::slotted(a:active),
 ::slotted(a[active]) {
-  color: var(--_subnav-link-hover-text-color,
-    var(--rh-color-text-secondary-on-light, #4d4d4d)) !important;
+  color:
+    var(
+        --_subnav-link-hover-text-color,
+        var(--rh-color-text-secondary-on-light, #4d4d4d)
+      ) !important;
 }
 
 ::slotted(a:hover):after {
-  border-block-end-color: var(--_subnav-link-hover-border-end-color,
-    var(--rh-color-border-subtle-on-light, #c7c7c7)) !important;
+  border-block-end-color:
+    var(
+        --_subnav-link-hover-border-end-color,
+        var(--rh-color-border-subtle-on-light, #c7c7c7)
+      ) !important;
 }
 
 ::slotted(a:active):after,
 ::slotted(a[active]):after {
-  border-block-end-color: var(--_subnav-link-active-border-end-color,
-    var(--rh-color-accent-brand-on-light, #ee0000)) !important;
+  border-block-end-color:
+    var(
+        --_subnav-link-active-border-end-color,
+        var(--rh-color-accent-brand-on-light, #ee0000)
+      ) !important;
 }
 
 ::slotted(a:focus-visible) {
   outline:
     var(--rh-border-width-md, 2px)
     solid
-    var(--_subnav-link-focus-outline-color,
-      var(--rh-color-interactive-blue-darker, #0066cc)) !important;
+    var(
+        --_subnav-link-focus-outline-color,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      ) !important;
   outline-offset: -8px !important;
   border-radius: 10px !important;
 }
 
 ::slotted(a:visited) {
-  color: var(--_subnav-link-visited-text-color,
-    var(--rh-color-text-primary-on-light, #151515)) !important;
+  color:
+    var(
+        --_subnav-link-visited-text-color,
+        var(--rh-color-text-primary-on-light, #151515)
+      ) !important;
 }
 
 button {
@@ -100,8 +117,11 @@ button {
   margin: 0;
   background-color: transparent;
   border: none;
-  color: var(--_subnav-next-prev-button-text-color,
-    var(--rh-color-text-secondary-on-light, #4d4d4d));
+  color:
+    var(
+        --_subnav-next-prev-button-text-color,
+        var(--rh-color-text-secondary-on-light, #4d4d4d)
+      );
 }
 
 button:disabled {
diff --git a/elements/rh-table/rh-sort-button.css b/elements/rh-table/rh-sort-button.css
index 6ad6ed1f57..7133bf120c 100644
--- a/elements/rh-table/rh-sort-button.css
+++ b/elements/rh-table/rh-sort-button.css
@@ -22,4 +22,4 @@
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-}
\ No newline at end of file
+}
diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css
index bd48f4f352..18dd0c7182 100644
--- a/elements/rh-table/rh-table-lightdom.css
+++ b/elements/rh-table/rh-table-lightdom.css
@@ -6,8 +6,14 @@
   border: 0;
   border-collapse: collapse;
 
-  --rh-table-row-border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
-  --rh-table-row-background-color: rgb(var(--rh-color-gray-10-rgb, 224 224 224) / var(--rh-opacity-40, 40%));
+  --rh-table-row-border:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --rh-table-row-background-color:
+    rgb(
+        var(--rh-color-gray-10-rgb, 224 224 224) / var(--rh-opacity-40, 40%)
+      );
   --rh-table-column-background-color: rgb(var(--rh-color-blue-50-rgb, 231 241 250));
 }
 
@@ -31,18 +37,18 @@
   border: none;
 }
 
-:is(rh-table) :is(tr, col){
-  transition: background .3s ease-out;
+:is(rh-table) :is(tr, col) {
+  transition: background 0.3s ease-out;
 }
 
 :is(rh-table) a {
   color: var(--rh-color-interactive-blue-darker, #0066cc);
-  text-decoration: none
+  text-decoration: none;
 }
 
-:is(rh-table) a:hover  {
+:is(rh-table) a:hover {
   color: var(--rh-color-interactive-blue-darkest, #004080);
-  text-decoration: underline
+  text-decoration: underline;
 }
 
 :is(rh-table) caption {
@@ -147,4 +153,4 @@
   :is(rh-table) thead ~ tbody tr:last-child td:last-child {
     padding-bottom: var(--rh-space-lg, 16px);
   }
-}
\ No newline at end of file
+}
diff --git a/elements/rh-table/rh-table.css b/elements/rh-table/rh-table.css
index 0edd431043..53b940decc 100644
--- a/elements/rh-table/rh-table.css
+++ b/elements/rh-table/rh-table.css
@@ -12,7 +12,7 @@
 
   --_scrollbar-size: calc(10 / 16 * 1rem);
   --_scrollbar-thumb-color: var(--rh-color-gray-40, #707070);
-  --_scrollbar-track-color: var(--rh-color-border-subtle-on-light, #c7c7c7)
+  --_scrollbar-track-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
 }
 
 :host::-webkit-scrollbar {
@@ -43,4 +43,4 @@
   font-style: italic;
   font-weight: var(--rh-font-weight-body-text-regular, 400);
   line-height: var(--rh-line-height-body-text, 1.5);
-}
\ No newline at end of file
+}
diff --git a/elements/rh-tabs/rh-tab-panel.css b/elements/rh-tabs/rh-tab-panel.css
index 1477c87032..41c46d867a 100644
--- a/elements/rh-tabs/rh-tab-panel.css
+++ b/elements/rh-tabs/rh-tab-panel.css
@@ -19,4 +19,4 @@
   :host([box][vertical]) #rhds-container {
     padding: var(--rh-space-3xl, 48px);
   }
-}
\ No newline at end of file
+}
diff --git a/elements/rh-tabs/rh-tab.css b/elements/rh-tabs/rh-tab.css
index aa6428884a..71a67aeff9 100644
--- a/elements/rh-tabs/rh-tab.css
+++ b/elements/rh-tabs/rh-tab.css
@@ -2,30 +2,48 @@
   display: flex;
   width: 100%;
 
-  --_button-text-color: var(--rh-tabs-link-color,
-    var(--rh-color-text-secondary-on-light, #4d4d4d));
+  --_button-text-color:
+    var(
+        --rh-tabs-link-color,
+        var(--rh-color-text-secondary-on-light, #4d4d4d)
+      );
   --_button-focus-outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
 }
 
 #rhds-container.dark {
-  --_button-text-color: var(--rh-tabs-link-color,
-    var(--rh-color-text-secondary-on-dark, #c7c7c7));
+  --_button-text-color:
+    var(
+        --rh-tabs-link-color,
+        var(--rh-color-text-secondary-on-dark, #c7c7c7)
+      );
   --_button-focus-outline-color: var(--rh-color-border-interactive-on-dark, #73bcf7);
 }
 
 /* Context switch on attributes */
 :host([active]) #rhds-container {
-  --_button-text-color: var(--rh-tabs-link-color,
-    var(--rh-color-text-primary-on-light, #151515));
-  --_active-tab-border-color: var(--rh-tabs-active-border-color,
-    var(--rh-color-accent-brand-on-light, #ee0000));
+  --_button-text-color:
+    var(
+        --rh-tabs-link-color,
+        var(--rh-color-text-primary-on-light, #151515)
+      );
+  --_active-tab-border-color:
+    var(
+        --rh-tabs-active-border-color,
+        var(--rh-color-accent-brand-on-light, #ee0000)
+      );
 }
 
 :host([active]) #rhds-container.dark {
-  --_button-text-color: var(--rh-tabs-link-color,
-    var(--rh-color-text-primary-on-dark, #ffffff));
-  --_active-tab-border-color: var(--rh-tabs-active-border-color,
-    var(--rh-color-accent-brand-on-dark, #ff442b));
+  --_button-text-color:
+    var(
+        --rh-tabs-link-color,
+        var(--rh-color-text-primary-on-dark, #ffffff)
+      );
+  --_active-tab-border-color:
+    var(
+        --rh-tabs-active-border-color,
+        var(--rh-color-accent-brand-on-dark, #ff442b)
+      );
 }
 
 /* Box context */
@@ -39,13 +57,19 @@
 
 /* Theme base context */
 :host([active][theme="base"]) #rhds-container {
-  --_active-tab-border-color: var(--rh-tabs-active-border-color,
-    var(--rh-color-border-interactive-on-light, #0066cc));
+  --_active-tab-border-color:
+    var(
+        --rh-tabs-active-border-color,
+        var(--rh-color-border-interactive-on-light, #0066cc)
+      );
 }
 
 :host([active][theme="base"]) #rhds-container.dark {
-  --_active-tab-border-color: var(--rh-tabs-active-border-color,
-    var(--rh-color-border-interactive-on-dark, #73bcf7));
+  --_active-tab-border-color:
+    var(
+        --rh-tabs-active-border-color,
+        var(--rh-color-border-interactive-on-dark, #73bcf7)
+      );
 }
 
 /* Button Resets */
@@ -92,7 +116,6 @@ button:after {
   border-block-end: var(--rh-border-width-lg, 3px) solid var(--_active-tab-border-color);
 }
 
-
 /* [box][active]) */
 :host([active][box]) button:before {
   border-inline-color: var(--_border-color);
@@ -138,15 +161,14 @@ button:after {
   border-inline-end-width: var(--rh-border-width-sm, 1px);
 }
 
-
 @media screen and (min-width: 768px) {
   /* [vertical]:not([box]) */
   :host([vertical]:not([box])) button {
     padding-block:
       var(--rh-tabs-link-padding-block-start, var(--rh-space-md, 8px))
       var(--rh-tabs-link-padding-block-start, var(--rh-space-md, 8px));
-  } 
-   
+  }
+
   /* [vertical][active] */
   :host([vertical][active]) button:after {
     border-block-end: transparent;
@@ -165,23 +187,23 @@ button:after {
       var(--rh-border-width-sm, 1px)
       solid
       var(--_border-color);
-    border-block-start: 
-      var(--rh-border-width-sm, 1px) 
-      solid 
+    border-block-start:
+      var(--rh-border-width-sm, 1px)
+      solid
       var(--_border-color);
   }
 
   /* [box]:not([active], [vertical]) */
   :host([box]:not([active], [vertical])) button:after {
     border-block-end-color: var(--_border-color);
-  }  
+  }
 
   /* [active][box][vertical] */
   :host([active][box][vertical]) button:after {
-    border-block-start: 
+    border-block-start:
       var(--rh-border-width-sm, 1px)
       solid
-      var(--_border-color);    
+      var(--_border-color);
   }
 
   :host([box][vertical]:not([active])) button:after {
@@ -196,7 +218,7 @@ button:after {
   /* .last[vertical][box]  */
   :host(.last[vertical][box]) {
     margin-block-end: var(--rh-space-2xl, 32px);
-  }  
+  }
 
   /* .first[vertical]:not([box]) */
   :host(.first[vertical]:not([box])) {
@@ -242,8 +264,8 @@ button:after {
 
   /* .first[vertical][box]:not([active]) */
   :host(.first[vertical][box]:not([active])) button:before {
-    border-block-start-color: transparent
-  }  
+    border-block-start-color: transparent;
+  }
 
   /* .first[box][active]:not([vertical]) */
   :host(.first[box][active]:not([vertical])) button:before {
@@ -267,5 +289,4 @@ button:after {
   :host(.last[box][vertical]:not([active])) button:after {
     border-block-end: none;
   }
-
-}
\ No newline at end of file
+}
diff --git a/elements/rh-tabs/rh-tabs.css b/elements/rh-tabs/rh-tabs.css
index f7188fceed..56ac58cda9 100644
--- a/elements/rh-tabs/rh-tabs.css
+++ b/elements/rh-tabs/rh-tabs.css
@@ -39,7 +39,6 @@
   margin-inline: var(--rh-tabs-inset, var(--_inset-inline-margin, auto));
 }
 
-
 /* BOX INSET TABS */
 :host([box="inset"]) {
   --_inset-inline-margin: var(--rh-space-2xl, 32px);
@@ -143,4 +142,4 @@
     flex-grow: 1;
     max-width: 15.625rem;
   }
-}
\ No newline at end of file
+}
diff --git a/elements/rh-tag/rh-tag.css b/elements/rh-tag/rh-tag.css
index 4fa70c40ac..e8f8145bc2 100644
--- a/elements/rh-tag/rh-tag.css
+++ b/elements/rh-tag/rh-tag.css
@@ -43,7 +43,7 @@
 }
 
 #container.dark,
-#container.outline.dark  {
+#container.outline.dark {
   --_content-color: var(--rh-color-text-primary-on-dark, #ffffff);
   --_background-color: transparent;
   --_before-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
@@ -130,4 +130,3 @@
   display: inline-flex;
   align-items: center;
 }
-
diff --git a/elements/rh-tile/rh-tile-group.css b/elements/rh-tile/rh-tile-group.css
index 4a7ce0af3b..c9bba8258e 100644
--- a/elements/rh-tile/rh-tile-group.css
+++ b/elements/rh-tile/rh-tile-group.css
@@ -1,3 +1,3 @@
 :host([disabled]) {
   pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/elements/rh-tile/rh-tile-lightdom.css b/elements/rh-tile/rh-tile-lightdom.css
index 539e11719f..1e38ed0d8d 100644
--- a/elements/rh-tile/rh-tile-lightdom.css
+++ b/elements/rh-tile/rh-tile-lightdom.css
@@ -3,7 +3,7 @@ rh-tile a {
   text-decoration: var(--rh-tile-link-text-decoration, none) !important;
 }
 
-rh-tile:focus-within a, 
+rh-tile:focus-within a,
 rh-tile a:is(:focus, :hover, :active) {
   --rh-tile-link-text-decoration: underline;
 }
@@ -14,9 +14,11 @@ rh-tile a:not([slot="image"], [slot="headline"]) {
 }
 
 rh-tile[aria-disabled="true"] a {
-  color: var(--rh-tile-text-color-secondary, 
-    var(--rh-color-text-secondary-on-light, #4d4d4d)
-  ) !important;
+  color:
+    var(
+        --rh-tile-text-color-secondary,
+        var(--rh-color-text-secondary-on-light, #4d4d4d)
+      ) !important;
 }
 
 rh-tile *:is([slot="image"], [slot="headline"]) a,
diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css
index cf7caca21d..8c9b36d461 100644
--- a/elements/rh-tile/rh-tile.css
+++ b/elements/rh-tile/rh-tile.css
@@ -228,4 +228,4 @@ svg {
 
 *:is(#image, #tile, #headline, #body, #footer) {
   z-index: 2;
-}
\ No newline at end of file
+}
diff --git a/elements/rh-tooltip/rh-tooltip.css b/elements/rh-tooltip/rh-tooltip.css
index 53a2e4d7e3..cec8eb0741 100644
--- a/elements/rh-tooltip/rh-tooltip.css
+++ b/elements/rh-tooltip/rh-tooltip.css
@@ -8,8 +8,11 @@
   max-width: 100%;
 
   /* WARNING: properties containing `__`are deprecated and will be removed */
-  --_floating-arrow-size: var(--rh-tooltip-arrow-size,
-    var(--rh-tooltip__arrow--Width, 11px));
+  --_floating-arrow-size:
+    var(
+        --rh-tooltip-arrow-size,
+        var(--rh-tooltip__arrow--Width, 11px)
+      );
 }
 
 #tooltip,
@@ -36,24 +39,41 @@
 
   /* WARNING: properties containing `__`are deprecated and will be removed */
   padding:
-    var(--rh-tooltip-content-padding-block-start,
-      var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px)))
-    var(--rh-tooltip-content-padding-inline-end,
-      var(--rh-tooltip__content--PaddingRight, var(--rh-space-lg, 16px)))
-    var(--rh-tooltip-content-padding-block-end,
-      var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px)))
-    var(--rh-tooltip-content-padding-inline-start,
-      var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px)));
+    var(
+        --rh-tooltip-content-padding-block-start,
+        var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px))
+      )
+    var(
+        --rh-tooltip-content-padding-inline-end,
+        var(--rh-tooltip__content--PaddingRight, var(--rh-space-lg, 16px))
+      )
+    var(
+        --rh-tooltip-content-padding-block-end,
+        var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px))
+      )
+    var(
+        --rh-tooltip-content-padding-inline-start,
+        var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px))
+      );
 
   /* WARNING: properties containing `__`are deprecated and will be removed */
-  font-size: var(--rh-tooltip-content-font-size,
-    var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem)));
+  font-size:
+    var(
+        --rh-tooltip-content-font-size,
+        var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem))
+      );
 
   /* WARNING: properties containing `__`are deprecated and will be removed */
-  color: var(--rh-tooltip-content-color,
-    var(--rh-tooltip__content--Color, var(--rh-color-text-primary-on-dark, #ffffff)));
-  background-color: var(--rh-tooltip-content-background-color,
-    var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
+  color:
+    var(
+        --rh-tooltip-content-color,
+        var(--rh-tooltip__content--Color, var(--rh-color-text-primary-on-dark, #ffffff))
+      );
+  background-color:
+    var(
+        --rh-tooltip-content-background-color,
+        var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))
+      );
 }
 
 #tooltip:after {
@@ -65,8 +85,11 @@
   will-change: left top right bottom;
 
   /* WARNING: properties containing `__`are deprecated and will be removed */
-  background-color: var(--rh-tooltip-content-background-color,
-    var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
+  background-color:
+    var(
+        --rh-tooltip-content-background-color,
+        var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))
+      );
 }
 
 .open #tooltip {
@@ -74,28 +97,28 @@
 }
 
 /* PLAIN */
-.left #tooltip:after          { right: calc(-0.5 * var(--_floating-arrow-size)); }
-.top #tooltip:after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
-.right #tooltip:after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
-.bottom #tooltip:after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.left #tooltip:after { right: calc(-0.5 * var(--_floating-arrow-size)); }
+.top #tooltip:after { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.right #tooltip:after { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.bottom #tooltip:after { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
 
 /* CENTER */
-.left.center #tooltip:after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.top.center #tooltip:after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.right.center #tooltip:after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.left.center #tooltip:after { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.top.center #tooltip:after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.right.center #tooltip:after { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
 .bottom.center #tooltip:after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
 
 /* START */
-.left.start #tooltip:after    { top: var(--_floating-arrow-size); }
-.top.start #tooltip:after     { left: var(--_floating-arrow-size); }
-.right.start #tooltip:after   { top: var(--_floating-arrow-size); }
-.bottom.start #tooltip:after  { left: var(--_floating-arrow-size); }
+.left.start #tooltip:after { top: var(--_floating-arrow-size); }
+.top.start #tooltip:after { left: var(--_floating-arrow-size); }
+.right.start #tooltip:after { top: var(--_floating-arrow-size); }
+.bottom.start #tooltip:after { left: var(--_floating-arrow-size); }
 
 /* END */
-.left.end #tooltip:after      { bottom: var(--_floating-arrow-size); }
-.top.end #tooltip:after       { right: var(--_floating-arrow-size); }
-.right.end #tooltip:after     { bottom: var(--_floating-arrow-size); }
-.bottom.end #tooltip:after    { right: var(--_floating-arrow-size); }
+.left.end #tooltip:after { bottom: var(--_floating-arrow-size); }
+.top.end #tooltip:after { right: var(--_floating-arrow-size); }
+.right.end #tooltip:after { bottom: var(--_floating-arrow-size); }
+.bottom.end #tooltip:after { right: var(--_floating-arrow-size); }
 
 :host([position="left"]),
 :host([position="right"]) {
@@ -106,4 +129,3 @@
   --rh-tooltip-content-background-color: var(--rh-color-surface-lightest, #ffffff);
   --rh-tooltip-content-color: var(--rh-color-text-primary-on-light, #151515);
 }
-
diff --git a/lib/elements/rh-context-demo/rh-context-demo.css b/lib/elements/rh-context-demo/rh-context-demo.css
index c27a37b73e..0f32bc2634 100644
--- a/lib/elements/rh-context-demo/rh-context-demo.css
+++ b/lib/elements/rh-context-demo/rh-context-demo.css
@@ -17,4 +17,3 @@
   padding: var(--rh-context-demo-padding, var(--rh-space-xl, 24px));
   height: calc(100% - 2 * var(--rh-context-demo-padding, var(--rh-space-xl, 24px)));
 }
-
diff --git a/lib/elements/rh-context-demo/rh-context-demo.ts b/lib/elements/rh-context-demo/rh-context-demo.ts
index 0ba71a0b14..76e5cc5cf1 100644
--- a/lib/elements/rh-context-demo/rh-context-demo.ts
+++ b/lib/elements/rh-context-demo/rh-context-demo.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { LitElement, type PropertyValues, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -20,6 +20,8 @@ export class RhContextDemo extends LitElement {
 
   @property() label = 'Color Palette';
 
+  @property({ attribute: 'color-palette', reflect: true }) colorPalette = this.value;
+
   #internals = this.attachInternals();
 
   render() {
@@ -41,6 +43,15 @@ export class RhContextDemo extends LitElement {
     `;
   }
 
+  willUpdate(changed: PropertyValues<this>) {
+    if (changed.has('colorPalette')) {
+      this.value = this.colorPalette;
+    }
+    if (changed.has('value')) {
+      this.colorPalette = this.value;
+    }
+  }
+
   formStateRestoreCallback(state: string) {
     this.#setValue(state as ColorPalette);
   }
diff --git a/lib/elements/rh-context-picker/rh-context-picker.css b/lib/elements/rh-context-picker/rh-context-picker.css
index 1d993983af..fcd85f2089 100644
--- a/lib/elements/rh-context-picker/rh-context-picker.css
+++ b/lib/elements/rh-context-picker/rh-context-picker.css
@@ -39,7 +39,7 @@ input::-moz-range-thumb {
   cursor: pointer;
   height: 100%;
   translate: var(--offset);
-  width: calc(16.6667%);
+  width: calc(6 / var(--count, 6) * 16.6667%);
 }
 
 input:focus,
diff --git a/lib/elements/rh-context-picker/rh-context-picker.ts b/lib/elements/rh-context-picker/rh-context-picker.ts
index 1a766a8ec4..0e16427caf 100644
--- a/lib/elements/rh-context-picker/rh-context-picker.ts
+++ b/lib/elements/rh-context-picker/rh-context-picker.ts
@@ -66,6 +66,19 @@ export class RhContextPicker extends LitElement {
 
   @colorContextConsumer() private on?: ColorTheme;
 
+  @property({
+    converter: {
+      fromAttribute(list: string) {
+        return list?.split(',')
+          ?.map(x => x.trim())
+          ?.filter(x => RhContextPicker.paletteNames.includes(x as ColorPalette)) ?? [];
+      },
+      toAttribute(list: ColorPalette[]) {
+        return list.join(',');
+      },
+    },
+  }) allow = RhContextPicker.paletteNames;
+
   #offset = RhContextPicker.offsets[this.value];
 
   #internals = this.attachInternals();
@@ -86,11 +99,16 @@ export class RhContextPicker extends LitElement {
                  name="range"
                  type="range"
                  list="palettes"
-                 max="5"
+                 min="0"
+                 max="${this.allow.length - 1}"
+                .value="${this.allow.indexOf(this.value).toString()}"
                  aria-label="${derivedLabel}"
-                 style="${styleMap({ '--offset': `${this.#offset}px` })}"
+                 style="${styleMap({
+                   '--count': `${this.allow.length}`,
+                   '--offset': `${this.#offset}px`,
+                  })}"
                  @input="${this.#onInput}">
-          <datalist id="palettes">${Array.from(RhContextPicker.palettes, ([palette]) => html`
+          <datalist id="palettes">${this.allow.map(palette => html`
             <option id="option-${palette}"
                     value="${palette}"
                     title="${palette}"
@@ -102,14 +120,8 @@ export class RhContextPicker extends LitElement {
     `;
   }
 
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('value') && this.range) {
-      this.range.value = RhContextPicker.paletteNames.indexOf(this.value).toString();
-    }
-  }
-
   formStateRestoreCallback(state: string) {
-    this.#setValue(state);
+    this.#setValue(state as this['value']);
   }
 
   firstUpdated() {
@@ -132,15 +144,17 @@ export class RhContextPicker extends LitElement {
   #onInput(event: Event) {
     if (event.target instanceof HTMLInputElement) {
       event.stopPropagation();
-      const value = RhContextPicker.paletteNames[+event.target.value];
-      this.#setValue(value);
+      const value = this.allow.at(+event.target.value);
+      if (value) {
+        this.#setValue(value);
+      }
     }
   }
 
-  #setValue(value: string) {
+  #setValue(value: this['value']) {
     this.#internals.setFormValue(value);
-    this.value = value as this['value'];
-    if (this.dispatchEvent(new ContextChangeEvent(this.value))) {
+    if (value !== this.value && this.dispatchEvent(new ContextChangeEvent(value))) {
+      this.value = value;
       this.sync();
     }
   }
diff --git a/package-lock.json b/package-lock.json
index adb0f89f70..0e0af9971f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@rhds/elements",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@rhds/elements",
-      "version": "1.1.1",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "@patternfly/elements": "^2.4.0",
@@ -58,6 +58,7 @@
         "stylelint": "^15.10.0",
         "stylelint-config-standard": "^31.0.0",
         "stylelint-config-standard-scss": "^7.0.1",
+        "stylelint-stylistic": "^0.4.3",
         "ttypescript": "^1.5.15",
         "typescript": "^4.9.5",
         "wireit": "^0.9.5"
@@ -25145,6 +25146,22 @@
         "stylelint": "^14.5.1 || ^15.0.0"
       }
     },
+    "node_modules/stylelint-stylistic": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/stylelint-stylistic/-/stylelint-stylistic-0.4.3.tgz",
+      "integrity": "sha512-WphmneK3MRrm5ixvRPWy7+c9+EQUh0FPvNMXW/N9VD85vyqtpxUejpD+mxubVVht0fRgidcqBxtW3s3tU2Ujhw==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^5.0.0",
+        "postcss": "^8.4.21",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-value-parser": "^4.2.0",
+        "style-search": "^0.1.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^15.0.0"
+      }
+    },
     "node_modules/stylelint/node_modules/balanced-match": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
@@ -47523,6 +47540,19 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "stylelint-stylistic": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/stylelint-stylistic/-/stylelint-stylistic-0.4.3.tgz",
+      "integrity": "sha512-WphmneK3MRrm5ixvRPWy7+c9+EQUh0FPvNMXW/N9VD85vyqtpxUejpD+mxubVVht0fRgidcqBxtW3s3tU2Ujhw==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^5.0.0",
+        "postcss": "^8.4.21",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-value-parser": "^4.2.0",
+        "style-search": "^0.1.0"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index d9f640da51..85da47830c 100644
--- a/package.json
+++ b/package.json
@@ -267,6 +267,7 @@
     "stylelint": "^15.10.0",
     "stylelint-config-standard": "^31.0.0",
     "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-stylistic": "^0.4.3",
     "ttypescript": "^1.5.15",
     "typescript": "^4.9.5",
     "wireit": "^0.9.5"