From 5336e48f7ad4d1b0e92423cb94df8657077ba4dd Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 09:00:12 +0300
Subject: [PATCH 01/29] docs: picker targets

---
 .../rh-context-demo/rh-context-demo.css       |  3 ++-
 .../rh-context-demo/rh-context-demo.ts        | 21 ++++++++++++-------
 .../rh-context-picker/rh-context-picker.ts    | 11 ++++++----
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/lib/elements/rh-context-demo/rh-context-demo.css b/lib/elements/rh-context-demo/rh-context-demo.css
index d62c2b0e0f..41513da610 100644
--- a/lib/elements/rh-context-demo/rh-context-demo.css
+++ b/lib/elements/rh-context-demo/rh-context-demo.css
@@ -5,7 +5,8 @@
   position: relative;
 }
 
-rh-surface { color: var(--rh-color-text-primary); }
+rh-surface,
+.on { color: var(--rh-color-text-primary); }
 
 #picker-container {
   display: flex;
diff --git a/lib/elements/rh-context-demo/rh-context-demo.ts b/lib/elements/rh-context-demo/rh-context-demo.ts
index 8a0171f916..a859d945a3 100644
--- a/lib/elements/rh-context-demo/rh-context-demo.ts
+++ b/lib/elements/rh-context-demo/rh-context-demo.ts
@@ -1,7 +1,7 @@
 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';
+import { classMap } from 'lit-html/directives/class-map.js';
 
 import { colorContextProvider, type ColorPalette } from '../../context/color/provider.js';
 import { ContextChangeEvent } from '../rh-context-picker/rh-context-picker.js';
@@ -10,11 +10,11 @@ import '@rhds/elements/rh-surface/rh-surface.js';
 
 import style from './rh-context-demo.css';
 
-import surfaceStyles from '@rhds/tokens/css/color-context-consumer.css.js';
+import consumerStyles from '@rhds/tokens/css/color-context-consumer.css.js';
 
 @customElement('rh-context-demo')
 export class RhContextDemo extends LitElement {
-  static readonly styles = [style, surfaceStyles];
+  static readonly styles = [style, consumerStyles];
 
   static formAssociated = true;
 
@@ -23,26 +23,26 @@ export class RhContextDemo extends LitElement {
   @property() label = 'Color Palette';
 
   @colorContextProvider()
-  @property({ attribute: 'color-palette', reflect: true }) colorPalette = this.value;
+  @property({ attribute: 'color-palette', reflect: true })
+  colorPalette = this.value;
 
   #internals = this.attachInternals();
 
   protected override render() {
     const { value = 'darkest' } = this;
-    const [on = 'dark'] = value.match(/dark|light/) ?? [];
+    const on = this.value.replace(/est|er/, '');
     return html`
       <rh-surface id="provider"
                   color-palette="${value}"
-                  class="${classMap({ on: true, [on]: true })}"
                   @change="${this.#onChange}">
-          <div id="picker-container">
+          <div id="picker-container" class="${classMap({ on: true, [on]: true })}">
             <rh-context-picker id="picker"
                                .value="${this.value}"
                                target="provider"></rh-context-picker>
             <label for="picker">${this.label}</label>
             <slot name="controls"></slot>
           </div>
-        <slot part="demo"></slot>
+        <slot part="demo" class="${classMap({ on: true, [on]: true })}"></slot>
       </rh-surface>
     `;
   }
@@ -61,8 +61,13 @@ export class RhContextDemo extends LitElement {
   }
 
   #onChange(event: Event) {
+    const picker = this.shadowRoot?.getElementById('picker');
     if (event instanceof ContextChangeEvent) {
+      if (event.target !== picker && event.provider && (event.provider !== this)) {
+        return;
+      }
       this.#setValue(event.colorPalette);
+      event.preventDefault();
     }
   }
 
diff --git a/lib/elements/rh-context-picker/rh-context-picker.ts b/lib/elements/rh-context-picker/rh-context-picker.ts
index cc8645a5dc..5af1c00e35 100644
--- a/lib/elements/rh-context-picker/rh-context-picker.ts
+++ b/lib/elements/rh-context-picker/rh-context-picker.ts
@@ -5,6 +5,7 @@ import type { ColorTheme } from '@rhds/elements/lib/context/color/consumer.js';
 import { html, LitElement, type ComplexAttributeConverter } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import { colorContextConsumer } from '@rhds/elements/lib/context/color/consumer.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
@@ -18,14 +19,16 @@ import {
   ColorSurfaceLightest as lightest,
 } from '@rhds/tokens/color.js';
 
-import { classMap } from 'lit/directives/class-map.js';
-
 import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 
 import style from './rh-context-picker.css';
 
 export class ContextChangeEvent extends Event {
-  constructor(public colorPalette: ColorPalette) {
+  constructor(
+    public colorPalette: ColorPalette,
+    /** the context provider targeted by this element */
+    public provider: HTMLElement | null,
+  ) {
     super('change', { bubbles: true, cancelable: true });
   }
 }
@@ -129,7 +132,7 @@ export class RhContextPicker extends LitElement {
 
   #setValue(value: this['value']) {
     this.#internals.setFormValue(value);
-    if (value !== this.value && this.dispatchEvent(new ContextChangeEvent(value))) {
+    if (value !== this.value && this.dispatchEvent(new ContextChangeEvent(value, this.#target))) {
       this.value = value;
       this.sync();
     }

From 195cdff11770271f4787775b0078410ff680cdfa Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 08:56:47 +0300
Subject: [PATCH 02/29] fix(surface): set but don't inherit surface colors

---
 elements/rh-surface/rh-surface.css | 12 ++++++++++++
 elements/rh-surface/rh-surface.ts  | 15 +++++++++------
 package-lock.json                  |  8 ++++----
 package.json                       |  2 +-
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/elements/rh-surface/rh-surface.css b/elements/rh-surface/rh-surface.css
index 58c7216afa..42ed489c5c 100644
--- a/elements/rh-surface/rh-surface.css
+++ b/elements/rh-surface/rh-surface.css
@@ -3,3 +3,15 @@
   background-color: var(--rh-color-surface);
   color: var(--rh-color-text-primary);
 }
+
+.on.dark,
+.on.light {
+  --rh-color-surface: unset;
+}
+
+#slot.palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
+#slot.palette-lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); }
+#slot.palette-light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); }
+#slot.palette-dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); }
+#slot.palette-darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); }
+#slot.palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
diff --git a/elements/rh-surface/rh-surface.ts b/elements/rh-surface/rh-surface.ts
index 2e71d25f80..01fd313355 100644
--- a/elements/rh-surface/rh-surface.ts
+++ b/elements/rh-surface/rh-surface.ts
@@ -1,5 +1,4 @@
 import type { ColorPalette } from '@rhds/elements/lib/context/color/provider.js';
-import type { ColorTheme } from '@rhds/elements/lib/context/color/consumer.js';
 
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
@@ -39,12 +38,16 @@ export class RhSurface extends LitElement {
   @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
-  get #on() {
-    return this.colorPalette?.replace(/e(st|r)/, '') ?? 'light';
-  }
-
   render() {
-    return html`<slot class="${classMap({ on: true, [this.#on]: true })}" @slotchange=${this.#onSlotchange}></slot>`;
+    const { colorPalette = 'lightest' } = this;
+    const on = colorPalette?.replace(/e(st|r)/, '') ?? 'light';
+    return html`<slot id="slot"
+                      class="${classMap({
+                        on: true,
+                        [on]: true,
+                        [`palette-${colorPalette}`]: true,
+                      })}"
+                      @slotchange=${this.#onSlotchange}></slot>`;
   }
 
   #onSlotchange() {
diff --git a/package-lock.json b/package-lock.json
index b866083e11..2b4560035e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@lit/context": "^1.1.2",
         "@patternfly/pfe-core": "^4.0.1",
         "@rhds/icons": "^1.1.1",
-        "@rhds/tokens": "^2.1.0-next.11",
+        "@rhds/tokens": "^2.1.0-next.13",
         "lit": "^3.2.0",
         "tslib": "^2.6.3"
       },
@@ -4886,9 +4886,9 @@
       "integrity": "sha512-Cqpr9bmMbcSk/NMkp12qaOnSag7jEHU1zFKmsnJN/21BIYUAL6+mdyfsRe4dxzOkSSmjqCypiFJYcJ8KFNAMyA=="
     },
     "node_modules/@rhds/tokens": {
-      "version": "2.1.0-next.11",
-      "resolved": "https://registry.npmjs.org/@rhds/tokens/-/tokens-2.1.0-next.11.tgz",
-      "integrity": "sha512-CSQAqhB8iKWD/uBWKaj/wf+uGYQfPXEYAB8NcXg1+cg77oOvMNz9uK7pWVucfDoWAAB4i2IgBAqURvPvK5TPNg==",
+      "version": "2.1.0-next.13",
+      "resolved": "https://registry.npmjs.org/@rhds/tokens/-/tokens-2.1.0-next.13.tgz",
+      "integrity": "sha512-FRdKY2B7C3IiXjbtIbGnY0+dcPRiYvmWmmR73FKB1g3eOX1Ad6E08WKTGJUTou//hPC37uikhHEW0gIHfm6jjg==",
       "dependencies": {
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "highlight.js": "^11.10.0",
diff --git a/package.json b/package.json
index b4509e4df9..688c3f1eab 100644
--- a/package.json
+++ b/package.json
@@ -286,7 +286,7 @@
     "@lit/context": "^1.1.2",
     "@patternfly/pfe-core": "^4.0.1",
     "@rhds/icons": "^1.1.1",
-    "@rhds/tokens": "^2.1.0-next.11",
+    "@rhds/tokens": "^2.1.0-next.13",
     "lit": "^3.2.0",
     "tslib": "^2.6.3"
   },

From 83b60a4b0a1a7215f97c33009bd68238e946d088 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 09:00:20 +0300
Subject: [PATCH 03/29] docs(card): bar pattern

---
 docs/patterns/card/patterns/title-bar.html |  2 --
 elements/rh-card/demo/color-context.html   | 20 +++++++-------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/docs/patterns/card/patterns/title-bar.html b/docs/patterns/card/patterns/title-bar.html
index 44d9fa117a..652b273949 100644
--- a/docs/patterns/card/patterns/title-bar.html
+++ b/docs/patterns/card/patterns/title-bar.html
@@ -16,8 +16,6 @@ <h4 slot="header">Card title</h4>
       padding: var(--rh-space-lg) var(--rh-space-2xl);
       flex-direction: row;
       gap: var(--rh-space-lg);
-    }
-    & h4 {
       font-weight: var(--rh-font-weight-heading-regular);
       font-size: var(--rh-font-size-body-text-md);
       font-family: var(--rh-font-family-body-text);
diff --git a/elements/rh-card/demo/color-context.html b/elements/rh-card/demo/color-context.html
index 97efe9bb89..15b6cb0a11 100644
--- a/elements/rh-card/demo/color-context.html
+++ b/elements/rh-card/demo/color-context.html
@@ -87,27 +87,21 @@ <h2 slot="header">Custom header</h2>
       }
     }
     &.bar {
+      --rh-card-header-background-on-light: var(--rh-color-surface-light, #e0e0e0);
+      --rh-card-header-background-on-dark: var(--rh-color-surface-dark, #383838);
       &::part(header) {
         margin: 0;
-        padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
-        text-transform: uppercase;
+        padding: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px);
+        flex-direction: row;
+        gap: var(--rh-space-lg, 16px);
         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); */
+        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);
+        text-transform: uppercase; /* deprecated? */
       }
     }
   }
 
-  [color-palette^="light"] {
-    --bar-header-context-background-color: var(--rh-color-surface-light, #e0e0e0);
-  }
-  [color-palette^="dark"] {
-    --bar-header-context-background-color: var(--rh-color-surface-dark, #383838);
-  }
-
   label[for="picker"] {
     display: block;
   }

From fff59de92e918682e1178ca797a86453c613a816 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 09:00:37 +0300
Subject: [PATCH 04/29] fix(accordion): style guidelines

---
 elements/rh-accordion/rh-accordion-header.css | 8 ++++++++
 elements/rh-accordion/rh-accordion-header.ts  | 2 --
 elements/rh-accordion/rh-accordion-panel.css  | 8 ++++++++
 elements/rh-accordion/rh-accordion.css        | 2 --
 elements/rh-accordion/rh-accordion.ts         | 5 +----
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
index 0eda1df3f6..907839767f 100644
--- a/elements/rh-accordion/rh-accordion-header.css
+++ b/elements/rh-accordion/rh-accordion-header.css
@@ -155,6 +155,14 @@ span {
   inset-inline-start: 0;
 }
 
+.expanded.on.light {
+  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+}
+
+.expanded.on.dark {
+  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+}
+
 @container (min-width: 576px) {
   #header-container:not(.bottom) {
     flex-direction: row;
diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
index 001d27db68..5c7d75f999 100644
--- a/elements/rh-accordion/rh-accordion-header.ts
+++ b/elements/rh-accordion/rh-accordion-header.ts
@@ -47,8 +47,6 @@ const isAccordion = (x: EventTarget): x is RhAccordion =>
  */
 @customElement('rh-accordion-header')
 export class RhAccordionHeader extends LitElement {
-  static readonly version = '{{version}}';
-
   static readonly styles = [styles];
 
   @property({ type: Boolean, reflect: true }) expanded = false;
diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css
index 66bce675f6..61afe418f9 100644
--- a/elements/rh-accordion/rh-accordion-panel.css
+++ b/elements/rh-accordion/rh-accordion-panel.css
@@ -55,6 +55,14 @@
   background-color: var(--rh-color-surface);
 }
 
+.expanded.on.light {
+  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+}
+
+.expanded.on.dark {
+  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+}
+
 .body:after {
   content: '';
   position: absolute;
diff --git a/elements/rh-accordion/rh-accordion.css b/elements/rh-accordion/rh-accordion.css
index 501d10d88d..b8f1300f3c 100644
--- a/elements/rh-accordion/rh-accordion.css
+++ b/elements/rh-accordion/rh-accordion.css
@@ -1,6 +1,4 @@
 #container {
-  height: 100%;
-  width: 100%;
   color: var(--rh-color-text-primary);
   background-color: var(--rh-color-surface);
 }
diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts
index dbb1a55f42..9d1b9d6f22 100644
--- a/elements/rh-accordion/rh-accordion.ts
+++ b/elements/rh-accordion/rh-accordion.ts
@@ -81,10 +81,7 @@ export class RhAccordion extends LitElement {
    * </pf-accordion>
    * ```
    */
-  @property({
-    attribute: 'expanded-index',
-    converter: NumberListConverter,
-  })
+  @property({ attribute: 'expanded-index', converter: NumberListConverter })
   get expandedIndex() {
     return this.#expandedIndex;
   }

From 016c59af82815b6ea6c98440ad56fc4802d9c2f8 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 09:33:55 +0300
Subject: [PATCH 05/29] fix(alert): theme tokens

---
 elements/rh-alert/rh-alert.css | 194 ++++++++++++++++-----------------
 elements/rh-alert/rh-alert.ts  |  14 ++-
 2 files changed, 105 insertions(+), 103 deletions(-)

diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css
index 67e8a8bff6..6ffea56242 100644
--- a/elements/rh-alert/rh-alert.css
+++ b/elements/rh-alert/rh-alert.css
@@ -1,19 +1,67 @@
 :host {
-  --_background-color: var(--rh-color-teal-10, #daf2f2);
-  --_border-color: var(--rh-color-teal-50, #37a3a3);
-  --_header-color: var(--rh-color-teal-70, #004d4d);
-  --_icon-color: var(--rh-color-teal-50, #37a3a3);
-  --_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);
-
   display: block;
   max-width: var(--_max-width, initial);
 }
 
-:host([hidden]) {
-  display: none;
+header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.hasBody header {
+  margin-block-end: var(--rh-space-xs, 4px);
+}
+
+header ::slotted(*) {
+  font-family: var(--_font-family) !important;
+  font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
+  font-weight: var(--rh-font-weight-heading-bold, 700) !important;
+  margin: 0 !important;
+}
+
+header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
+  padding-block: 2px var(--rh-space-xs, 4px) !important;  /* 2px is a non standard value */
+}
+
+footer.hasActions {
+  margin-block-start: var(--rh-space-lg, 16px);
+}
+
+footer ::slotted([slot='actions']:not(rh-button[variant='link' i])) {
+  margin-inline-end: var(--rh-space-xl, 24px) !important;
+  padding: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+  color: var(--rh-color-interactive-primary-default) !important;
+  font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
+  font-family: var(--_font-family) !important;
+}
+
+/* TODO: separate focus and hover styles */
+footer ::slotted([slot='actions']:focus) {
+  text-decoration: underline !important;
+  color: var(--rh-color-interactive-primary-hover) !important;
+}
+
+footer ::slotted([slot='actions']:hover) {
+  cursor: pointer !important;
+  text-decoration: underline !important;
+  color: var(--rh-color-interactive-primary-hover) !important;
+}
+
+footer ::slotted(rh-button[variant='link' i]) {
+  display: inline-block;
+  translate: calc(-1 * var(--rh-space-lg, 16px));
 }
 
 #container {
+  --_background-color: var(--rh-color-teal-10, #daf2f2);
+  --_border-color: var(--rh-color-teal-50, #37a3a3);
+  --_header-color: var(--rh-color-teal-70, #004d4d);
+  --_icon-color: var(--rh-color-teal-50, #37a3a3);
+  --_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);
+
   border-width: var(--rh-border-width-md, 2px);
   border-style: solid;
   border-block-start-color: var(--_border-color);
@@ -29,35 +77,53 @@
   font-family: var(--_font-family);
 }
 
-#left-column {
-  display: inline-block;
-  vertical-align: top;
+#container.info {
+  --_border-color: var(--rh-color-status-note);
+  --_icon-color: var(--rh-color-icon-status-info);
+  --_header-color: var(--rh-color-status-note);
+  --_background-color: var(--rh-color-surface-status-info);
 }
 
-#middle-column {
-  display: inline-block;
-  vertical-align: top;
+#container.success {
+  --_border-color: var(--rh-color-status-success);
+  --_icon-color: var(--rh-color-icon-status-success);
+  --_header-color: var(--rh-color-status-success);
+  --_background-color: var(--rh-color-surface-status-success);
 }
 
-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+#container.warning {
+  --_border-color: var(--rh-color-status-warning);
+  --_icon-color: var(--rh-color-icon-status-warning);
+  --_header-color: var(--rh-color-status-warning);
+  --_background-color: var(--rh-color-surface-status-warning);
 }
 
-.hasBody header {
-  margin-block-end: var(--rh-space-xs, 4px);
+#container.danger {
+  --_border-color: var(--rh-color-status-danger);
+  --_icon-color: var(--rh-color-icon-status-danger);
+  --_header-color: var(--rh-color-status-danger);
+  --_background-color: var(--rh-color-surface-status-danger);
 }
 
-header ::slotted(*) {
-  font-family: var(--_font-family) !important;
-  font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
-  font-weight: var(--rh-font-weight-heading-bold, 700) !important;
-  margin: 0 !important;
+#container.toast {
+  --_background-color: var(--rh-color-surface-lightest, #ffffff);
+  --_max-width: 550px;
+  --_box-shadow: var(--rh-box-shadow-lg, 0 6px 8px 2px rgba(21, 21, 21, 0.3));
 }
 
-header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
-  padding-block: 2px var(--rh-space-xs, 4px) !important;  /* 2px is a non standard value */
+#container.alternate {
+  --_border-inline-color: var(--_border-color);
+  --_border-block-end-color: var(--_border-color);
+}
+
+#left-column {
+  display: inline-block;
+  vertical-align: top;
+}
+
+#middle-column {
+  display: inline-block;
+  vertical-align: top;
 }
 
 #header-actions {
@@ -79,7 +145,7 @@ header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
 }
 
 #close-button {
-  color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+  color: var(--rh-color-text-secondary);
   background-color: transparent;
   border: none;
   height: var(--rh-length-xl, 24px);
@@ -88,7 +154,7 @@ header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
 }
 
 #close-button:hover {
-  color: var(--rh-color-text-primary-on-light, #151515);
+  color: var(--rh-color-text-primary);
 }
 
 #description {
@@ -99,73 +165,3 @@ header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
   margin-block: 0 !important;
   padding: 0 !important;
 }
-
-footer.hasActions {
-  margin-block-start: var(--rh-space-lg, 16px);
-}
-
-footer ::slotted([slot='actions']:not(rh-button[variant='link' i])) {
-  margin-inline-end: var(--rh-space-xl, 24px) !important;
-  padding: 0 !important;
-  border: none !important;
-  background-color: transparent !important;
-  color: var(--rh-color-interactive-primary-default-on-light, #0066cc) !important;
-  font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
-  font-family: var(--_font-family) !important;
-}
-
-/* TODO: separate focus and hover styles */
-footer ::slotted([slot='actions']:focus) {
-  text-decoration: underline !important;
-  color: var(--rh-color-interactive-primary-hover-on-light, #003366) !important;
-}
-
-footer ::slotted([slot='actions']:hover) {
-  cursor: pointer !important;
-  text-decoration: underline !important;
-  color: var(--rh-color-interactive-primary-hover-on-light, #003366) !important;
-}
-
-footer ::slotted(rh-button[variant='link' i]) {
-  display: inline-block;
-  translate: calc(-1 * var(--rh-space-lg, 16px));
-}
-
-:host([state='info' i]) {
-  --_border-color: var(--rh-color-blue-40, #4394e5);
-  --_icon-color: var(--rh-color-blue-40, #4394e5);
-  --_header-color: var(--rh-color-blue-70, #003366);
-  --_background-color: var(--rh-color-blue-10, #e0f0ff);
-}
-
-:host([state='success' i]) {
-  --_border-color: var(--rh-color-green-60, #3d7317);
-  --_icon-color: var(--rh-color-green-60, #3d7317);
-  --_header-color: var(--rh-color-green-70, #204d00);
-  --_background-color: var(--rh-color-green-10, #e9f7df);
-}
-
-:host([state='warning' i]) {
-  --_border-color: var(--rh-color-yellow-40, #dca614);
-  --_icon-color: var(--rh-color-yellow-40, #dca614);
-  --_header-color: var(--rh-color-yellow-70, #73480b);
-  --_background-color: var(--rh-color-yellow-10, #fff4cc);
-}
-
-:host([state='danger' i]) {
-  --_border-color: #c9190b; /* WARNING: not a recognized token value */
-  --_icon-color: #c9190b; /* WARNING: not a recognized token value */
-  --_header-color: #7d1007; /* WARNING: not a recognized token value */
-  --_background-color: var(--rh-color-red-10, #fce3e3);
-}
-
-:host([variant='toast' i]) {
-  --_background-color: var(--rh-color-surface-lightest, #ffffff);
-  --_max-width: 550px;
-  --_box-shadow: var(--rh-box-shadow-lg, 0 6px 8px 2px rgba(21, 21, 21, 0.3));
-}
-
-:host([variant='alternate' i]) {
-  --_border-inline-color: var(--_border-color);
-  --_border-block-end-color: var(--_border-color);
-}
diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
index fb5b869f45..d3874b381b 100644
--- a/elements/rh-alert/rh-alert.ts
+++ b/elements/rh-alert/rh-alert.ts
@@ -11,6 +11,7 @@ import '@rhds/elements/rh-surface/rh-surface.js';
 
 import styles from './rh-alert.css';
 import toastStyles from './rh-alert-toast-styles.css';
+import consumerStyles from '@rhds/tokens/css/color-context-consumer.css.js';
 
 interface ToastOptions {
   id?: string;
@@ -65,9 +66,7 @@ export class AlertCloseEvent extends Event {
  */
 @customElement('rh-alert')
 export class RhAlert extends LitElement {
-  static readonly version = '{{version}}';
-
-  static readonly styles = [styles];
+  static readonly styles = [styles, consumerStyles];
 
   private static toaster: HTMLElement;
 
@@ -189,9 +188,16 @@ export class RhAlert extends LitElement {
   render() {
     const hasActions = this.#slots.hasSlotted('actions');
     const hasBody = this.#slots.hasSlotted(SlotController.default as unknown as string);
+    const { state, variant = '' } = this;
     return html`
       <rh-surface id="container"
-           class="${classMap({ hasBody })}"
+           class="${classMap({
+             hasBody,
+             on: true,
+             light: true,
+             [state]: true,
+             [variant]: !!variant,
+           })}"
            role="alert"
            aria-hidden="false"
            color-palette="lightest">

From eb95ea4077f8369431de3a17c18d2f3611c61153 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 10:05:34 +0300
Subject: [PATCH 06/29] fix(badge): context, styles

doesn't implement status tokens, yet
---
 elements/rh-badge/rh-badge.css | 52 ++++++++++++++++------------------
 elements/rh-badge/rh-badge.ts  | 23 +++++++++++----
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/elements/rh-badge/rh-badge.css b/elements/rh-badge/rh-badge.css
index d53a239471..c30fde3fca 100644
--- a/elements/rh-badge/rh-badge.css
+++ b/elements/rh-badge/rh-badge.css
@@ -1,46 +1,44 @@
-:host {
-  --_color: var(--rh-color-text-primary-on-light, #151515);
-  --_background-color: var(--rh-color-surface-lighter, #f2f2f2);
-
-  aspect-ratio: var(--_aspect-ratio);
+span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
   white-space: nowrap;
   text-align: center;
-  background-color: var(--_background-color);
+  aspect-ratio: var(--_aspect-ratio);
+  background-color: var(--rh-color-surface-lighter);
   border-radius: var(--rh-border-radius-pill, 64px);
-  color: var(--_color);
+  color: var(--rh-color-text-primary);
+  min-width: var(--_badge-size);
   font-size: var(--rh-font-size-body-text-xs, 0.75rem);
   font-weight: 700;
   line-height: var(--rh-line-height-body-text, 1.5);
-  min-width: var(--_badge-size, var(--rh-length-2xl, 32px));
-  padding-left: var(--rh-space-md, 8px);
-  padding-right: var(--rh-space-md, 8px);
+  padding-inline: var(--rh-space-md, 8px);
 }
 
-:host([state='info']) {
-  --_color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_background-color: var(--rh-color-accent-base-on-light, #0066cc);
-}
+.info { background-color: var(--rh-color-status-note); }
+.success { background-color: var(--rh-color-status-success); }
+.moderate { background-color: var(--rh-color-status-caution); }
+.important { background-color: var(--rh-color-status-warning); }
+.critical { background-color: var(--rh-color-status-danger); }
 
-:host([state='success']) {
-  --_color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_background-color: var(--rh-color-green-60, #3d7317);
-}
+.info.on.light { color: var(--rh-color-text-primary-on-dark, #ffffff); }
 
-:host([state='moderate']) {
-  --_color: var(--rh-color-text-primary-on-light, #151515);
-  --_background-color: var(--rh-color-yellow-40, #dca614);
+:is(.info,.success,.moderate,.important,.critical).on.dark {
+  color: var(--rh-color-text-primary-on-light, #151515);
 }
 
-:host([state='important']) {
-  --_color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_background-color: var(--rh-color-red-60, #a60000);
+/* TODO: remove when adopting themable tokens */
+
+/*
+.on.moderate:is(.light, .dark) {
+  color: var(--rh-color-text-primary-on-light, #151515);
 }
 
-:host([state='critical']) {
-  --_color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_background-color: var(--rh-color-red-60, #a60000);
+.on.light.info,
+.on.light.success,
+.on.light.important,
+.on.light.critical {
+  color: var(--rh-color-text-primary-on-dark, #ffffff);
 }
+*/
diff --git a/elements/rh-badge/rh-badge.ts b/elements/rh-badge/rh-badge.ts
index 5fb9d4b408..84787ec26b 100644
--- a/elements/rh-badge/rh-badge.ts
+++ b/elements/rh-badge/rh-badge.ts
@@ -1,6 +1,9 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+
+import { colorContextConsumer } from '@rhds/elements/lib/context/color/consumer.js';
 
 import styles from './rh-badge.css';
 
@@ -18,14 +21,19 @@ import styles from './rh-badge.css';
  */
 @customElement('rh-badge')
 export class RhBadge extends LitElement {
-  static readonly version = '{{version}}';
-
   static readonly styles = [styles];
 
+  @colorContextConsumer() private on?: string;
+
   /**
    * Denotes the state-of-affairs this badge represents
    */
-  @property({ reflect: true }) state?: 'info' | 'success' | 'moderate' | 'important' | 'critical';
+  @property({ reflect: true }) state?:
+    | 'info'
+    | 'success'
+    | 'moderate'
+    | 'important'
+    | 'critical';
 
   /**
    * Sets a numeric value for a badge.
@@ -42,13 +50,18 @@ export class RhBadge extends LitElement {
   @property({ reflect: true, type: Number }) threshold?: number;
 
   override render() {
-    const { threshold, number, textContent } = this;
+    const { threshold, number, textContent, on = '', state = '' } = this;
     const displayText =
         (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
       : (number != null) ? number.toString()
       : textContent ?? '';
+
     return html`
-      <span>${displayText}</span>
+      <span class="${classMap({
+        on: true,
+        [on]: !!on,
+        [state]: !!state,
+      })}">${displayText}</span>
     `;
   }
 }

From 028b62404a7d63ffef86740c5e52cdeb872d929d Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 10:35:57 +0300
Subject: [PATCH 07/29] fix(button): disabled on dark

does not add semantic tokens
---
 elements/rh-button/rh-button.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/elements/rh-button/rh-button.css b/elements/rh-button/rh-button.css
index 7f0267be2c..ad221ab605 100644
--- a/elements/rh-button/rh-button.css
+++ b/elements/rh-button/rh-button.css
@@ -3,10 +3,6 @@
   height: max-content;
 }
 
-:host([hidden]) {
-  display: none !important;
-}
-
 [hidden] {
   display: none !important;
 }
@@ -526,6 +522,11 @@ button[disabled] {
 
   --_color: var(--rh-color-text-secondary-on-light, #4d4d4d);
   --_background-color: var(--rh-color-surface-light, #e0e0e0);
+
+  &.dark {
+    --_color: var(--rh-color-gray-40, #a3a3a3);
+    --_background-color: var(--rh-color-surface-dark, #383838);
+  }
 }
 
 :host(:disabled) button:after {

From 71bdbcfee9d6e29f3d2e2c4a4f3cd84068c50f12 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 10:39:35 +0300
Subject: [PATCH 08/29] fix(blockquote): border style

---
 elements/rh-blockquote/rh-blockquote.css | 10 ++--------
 elements/rh-blockquote/rh-blockquote.ts  |  4 ++--
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css
index e79d11f8ea..7a93352e12 100644
--- a/elements/rh-blockquote/rh-blockquote.css
+++ b/elements/rh-blockquote/rh-blockquote.css
@@ -56,13 +56,7 @@ rh-icon {
   }
 }
 
-:host([highlight]) {
-  --_border-width: 8px;
-  --_border-color: #43adaf;
-  --_border-style: solid;
-}
-
-:host([highlight]) figure {
-  border-inline-start: var(--_border-width) var(--_border-style) var(--_border-color);
+.highlight {
+  border-inline-start: var(--rh-length-md, 8px) solid var(--rh-color-accent-brand);
   padding-inline-start: var(--rh-length-xl, 24px);
 }
diff --git a/elements/rh-blockquote/rh-blockquote.ts b/elements/rh-blockquote/rh-blockquote.ts
index 136ba3887c..2b756a0863 100644
--- a/elements/rh-blockquote/rh-blockquote.ts
+++ b/elements/rh-blockquote/rh-blockquote.ts
@@ -54,9 +54,9 @@ export class RhBlockquote extends LitElement {
   @property({ reflect: true }) size: 'default' | 'large' = 'default';
 
   render() {
-    const { on = '' } = this;
+    const { highlight, on = '' } = this;
     return html`
-      <figure id="container" class="${classMap({ [on]: !!on })}">
+      <figure id="container" class="${classMap({ highlight, [on]: !!on })}">
         <rh-icon set="standard" icon="quotemark-open"></rh-icon>
         <blockquote id="quote">
           <slot></slot>

From 2039074cf2379e3699587f1ae4907d5bac60ca2b Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 10:44:57 +0300
Subject: [PATCH 09/29] fix(health-index): border colors

---
 .../rh-health-index/demo/color-context.html     | 17 +++++++----------
 elements/rh-health-index/rh-health-index.css    |  6 +-----
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/elements/rh-health-index/demo/color-context.html b/elements/rh-health-index/demo/color-context.html
index 7ec85e1571..313892a21d 100644
--- a/elements/rh-health-index/demo/color-context.html
+++ b/elements/rh-health-index/demo/color-context.html
@@ -18,7 +18,6 @@ <h2>Default</h2>
       <div><rh-health-index grade="E">E</rh-health-index></div>
       <div><rh-health-index grade="F">F</rh-health-index></div>
     </li>
-    
     <li>
       <h2>LG</h2>
       <div><rh-health-index grade="A" size="lg">A</rh-health-index></div>
@@ -28,7 +27,6 @@ <h2>LG</h2>
       <div><rh-health-index grade="E" size="lg">E</rh-health-index></div>
       <div><rh-health-index grade="F" size="lg">F</rh-health-index></div>
     </li>
-    
     <li>
       <h2>XL</h2>
       <div><rh-health-index grade="A" size="xl">A</rh-health-index></div>
@@ -48,7 +46,7 @@ <h2>XL</h2>
 </script>
 
 <style>
-.demo {
+  .demo {
     margin: 2rem;
     padding: 0;
     list-style: none;
@@ -58,16 +56,15 @@ <h2>XL</h2>
     gap: 2rem;
     & h2 {
       font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+      color: var(--rh-color-text-primary);
     }
-    
     & li {
-        margin: 0;
-        padding: 0;
+      margin: 0;
+      padding: 0;
     }
-    
     & rh-surface,
     & div {
-        margin-block-end: 1rem;
+      margin-block-end: 1rem;
     }
-}
-</style>
\ No newline at end of file
+  }
+</style>
diff --git a/elements/rh-health-index/rh-health-index.css b/elements/rh-health-index/rh-health-index.css
index 1d8bfddda2..8528649f2f 100644
--- a/elements/rh-health-index/rh-health-index.css
+++ b/elements/rh-health-index/rh-health-index.css
@@ -23,7 +23,7 @@
   --_color-text-inactive: var(--rh-color-gray-70, #383838);
   --_color-text: var(--_color-text-inactive);
   --_color-fill: var(--rh-color-surface-lightest, #ffffff);
-  --_color-border: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --_color-border: var(--rh-color-border-subtle);
 }
 
 #grade {
@@ -198,10 +198,6 @@
  * Dark Color Theme
  *****************************************************************************/
 
-#container.dark {
-  --_color-border: var(--rh-color-border-subtle-on-dark, #707070);
-}
-
 #container.dark .box {
   --_color-text-active: var(--rh-color-white, #ffffff);
   --_color-fill: var(--rh-color-surface-darkest, #151515);

From bd6f03a58d5ad859b2546bb4327066f22ebfc317 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 10:58:09 +0300
Subject: [PATCH 10/29] fix(tabs): context in panel

---
 elements/rh-tabs/rh-tab-panel.ts |  4 +---
 elements/rh-tabs/rh-tab.ts       |  2 --
 elements/rh-tabs/rh-tabs.ts      | 19 ++++---------------
 3 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/elements/rh-tabs/rh-tab-panel.ts b/elements/rh-tabs/rh-tab-panel.ts
index 2bdec511ab..7abdd8bb51 100644
--- a/elements/rh-tabs/rh-tab-panel.ts
+++ b/elements/rh-tabs/rh-tab-panel.ts
@@ -16,8 +16,6 @@ import styles from './rh-tab-panel.css';
  */
 @customElement('rh-tab-panel')
 export class RhTabPanel extends LitElement {
-  static readonly version = '{{version}}';
-
   static readonly styles = [styles];
 
   /**
@@ -48,7 +46,7 @@ export class RhTabPanel extends LitElement {
   render() {
     const { on = '' } = this;
     return html`
-      <div id="rhds-container" class="${classMap({ [on]: !!on })}">
+      <div id="rhds-container" class="${classMap({ on: true, [on]: !!on })}">
         <slot></slot>
       </div>
     `;
diff --git a/elements/rh-tabs/rh-tab.ts b/elements/rh-tabs/rh-tab.ts
index ea0b7fafef..208e05ca40 100644
--- a/elements/rh-tabs/rh-tab.ts
+++ b/elements/rh-tabs/rh-tab.ts
@@ -44,8 +44,6 @@ export class TabExpandEvent extends Event {
  */
 @customElement('rh-tab')
 export class RhTab extends LitElement {
-  static readonly version = '{{version}}';
-
   static readonly styles = [styles];
 
   /** True when the tab is selected */
diff --git a/elements/rh-tabs/rh-tabs.ts b/elements/rh-tabs/rh-tabs.ts
index 6e82005077..5f5b895aa3 100644
--- a/elements/rh-tabs/rh-tabs.ts
+++ b/elements/rh-tabs/rh-tabs.ts
@@ -83,30 +83,19 @@ export class RhTabs extends LitElement {
 
   @property({ attribute: false }) activeTab?: RhTab;
 
-  /**
-   * Sets color theme based on parent context
-   */
   @colorContextConsumer() private on?: ColorTheme;
 
-  /**
-   * Sets color context for child components, overrides parent context
-   */
+  /** Sets color context for child components, overrides parent context */
   @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
-  /**
-   * Aligns tabs to the center
-   */
+  /** Aligns tabs to the center */
   @property({ reflect: true, type: Boolean }) centered? = false;
 
-  /**
-   * Sets tabs to a boxed style with or without an inset
-   */
+  /** Sets tabs to a boxed style with or without an inset */
   @property({ reflect: true }) box?: 'box' | 'inset';
 
-  /**
-   * Sets the alignment of the tabs vertical
-   */
+  /** Sets the alignment of the tabs vertical */
   @property({ reflect: true, type: Boolean }) vertical = false;
 
   @query('[part="tabs"]') private tabList!: HTMLElement;

From 0152ee3772b8f73c2454b10656fb9428dad10871 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 11:15:57 +0300
Subject: [PATCH 11/29] docs(tabs): links in demo

---
 elements/rh-tabs/demo/color-context.html    | 14 ++++++++++++++
 elements/rh-tabs/demo/long-tab-content.html | 16 +++++++++++++++-
 elements/rh-tabs/demo/nested.html           | 13 +++++++++++++
 elements/rh-tabs/demo/rh-tabs.html          | 16 ++++++++++++++++
 elements/rh-tabs/demo/right-to-left.html    | 16 ++++++++++++++++
 elements/rh-tabs/demo/vertical.html         | 16 ++++++++++++++++
 6 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/elements/rh-tabs/demo/color-context.html b/elements/rh-tabs/demo/color-context.html
index 6fb18c5e19..2b1a0df340 100644
--- a/elements/rh-tabs/demo/color-context.html
+++ b/elements/rh-tabs/demo/color-context.html
@@ -71,3 +71,17 @@
   });
 </script>
 
+<style>
+  a {
+    color: var(--rh-color-interactive-primary-default);
+    &:hover { color: var(--rh-color-interactive-primary-hover); }
+    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
+    &:active { color: var(--rh-color-interactive-primary-active); }
+    &:visited {
+      color: var(--rh-color-interactive-primary-visited);
+      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
+      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
+      &:active { color: var(--rh-color-interactive-primary-visited-active); }
+    }
+  }
+</style>
diff --git a/elements/rh-tabs/demo/long-tab-content.html b/elements/rh-tabs/demo/long-tab-content.html
index 7e64c3319d..a8ecb5a0a2 100644
--- a/elements/rh-tabs/demo/long-tab-content.html
+++ b/elements/rh-tabs/demo/long-tab-content.html
@@ -24,7 +24,21 @@
   <rh-tab-panel>Cloud</rh-tab-panel>
 </rh-tabs>
 
-
 <script type="module">
   import '@rhds/elements/rh-tabs/rh-tabs.js';
 </script>
+
+<style>
+  a {
+    color: var(--rh-color-interactive-primary-default);
+    &:hover { color: var(--rh-color-interactive-primary-hover); }
+    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
+    &:active { color: var(--rh-color-interactive-primary-active); }
+    &:visited {
+      color: var(--rh-color-interactive-primary-visited);
+      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
+      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
+      &:active { color: var(--rh-color-interactive-primary-visited-active); }
+    }
+  }
+</style>
diff --git a/elements/rh-tabs/demo/nested.html b/elements/rh-tabs/demo/nested.html
index 39a8fc124c..cdd7f678be 100644
--- a/elements/rh-tabs/demo/nested.html
+++ b/elements/rh-tabs/demo/nested.html
@@ -28,6 +28,19 @@
   rh-tab-panel {
     padding: 0;
   }
+
+  a {
+    color: var(--rh-color-interactive-primary-default);
+    &:hover { color: var(--rh-color-interactive-primary-hover); }
+    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
+    &:active { color: var(--rh-color-interactive-primary-active); }
+    &:visited {
+      color: var(--rh-color-interactive-primary-visited);
+      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
+      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
+      &:active { color: var(--rh-color-interactive-primary-visited-active); }
+    }
+  }
 </style>
 
 <script type="module">
diff --git a/elements/rh-tabs/demo/rh-tabs.html b/elements/rh-tabs/demo/rh-tabs.html
index 9e7d709809..b91eb68d6a 100644
--- a/elements/rh-tabs/demo/rh-tabs.html
+++ b/elements/rh-tabs/demo/rh-tabs.html
@@ -14,3 +14,19 @@
 <script type="module">
   import '@rhds/elements/rh-tabs/rh-tabs.js';
 </script>
+
+<style>
+  a {
+    color: var(--rh-color-interactive-primary-default);
+    &:hover { color: var(--rh-color-interactive-primary-hover); }
+    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
+    &:active { color: var(--rh-color-interactive-primary-active); }
+    &:visited {
+      color: var(--rh-color-interactive-primary-visited);
+      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
+      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
+      &:active { color: var(--rh-color-interactive-primary-visited-active); }
+    }
+  }
+</style>
+
diff --git a/elements/rh-tabs/demo/right-to-left.html b/elements/rh-tabs/demo/right-to-left.html
index 56a96e4411..fbfdb0a50c 100644
--- a/elements/rh-tabs/demo/right-to-left.html
+++ b/elements/rh-tabs/demo/right-to-left.html
@@ -90,3 +90,19 @@
 <script type="module">
   import '@rhds/elements/rh-tabs/rh-tabs.js';
 </script>
+
+<style>
+  a {
+    color: var(--rh-color-interactive-primary-default);
+    &:hover { color: var(--rh-color-interactive-primary-hover); }
+    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
+    &:active { color: var(--rh-color-interactive-primary-active); }
+    &:visited {
+      color: var(--rh-color-interactive-primary-visited);
+      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
+      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
+      &:active { color: var(--rh-color-interactive-primary-visited-active); }
+    }
+  }
+</style>
+
diff --git a/elements/rh-tabs/demo/vertical.html b/elements/rh-tabs/demo/vertical.html
index c2cf351497..ac77cbe3cf 100644
--- a/elements/rh-tabs/demo/vertical.html
+++ b/elements/rh-tabs/demo/vertical.html
@@ -14,3 +14,19 @@
 <script type="module">
   import '@rhds/elements/rh-tabs/rh-tabs.js';
 </script>
+
+<style>
+  a {
+    color: var(--rh-color-interactive-primary-default);
+    &:hover { color: var(--rh-color-interactive-primary-hover); }
+    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
+    &:active { color: var(--rh-color-interactive-primary-active); }
+    &:visited {
+      color: var(--rh-color-interactive-primary-visited);
+      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
+      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
+      &:active { color: var(--rh-color-interactive-primary-visited-active); }
+    }
+  }
+</style>
+

From 1848ec6a95b6585d6e9d9f87356696bc516906b8 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 11:25:09 +0300
Subject: [PATCH 12/29] fix(icon): container size

---
 elements/rh-icon/rh-icon.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/elements/rh-icon/rh-icon.css b/elements/rh-icon/rh-icon.css
index 0ec4afabee..44d42ef549 100644
--- a/elements/rh-icon/rh-icon.css
+++ b/elements/rh-icon/rh-icon.css
@@ -1,12 +1,18 @@
 :host {
-  display: inline-block;
   line-height: 0;
+  aspect-ratio: 1/1;
+  display: inline-flex;
+  place-content: center;
+}
+
+#container {
+  display: contents;
 }
 
 svg {
   width: var(--rh-icon-size, var(--rh-size-icon-01, 16px));
   fill: currentcolor;
-  aspect-ratio: 1;
+  aspect-ratio: 1/1;
 }
 
 .standard svg {

From 968e938f0c7c4385a25faaa522b262411b244bec Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 11:53:16 +0300
Subject: [PATCH 13/29] fix(badge): tests and backgrounds

---
 elements/rh-badge/rh-badge.css          | 28 +++---------
 elements/rh-badge/test/rh-badge.spec.ts | 59 +++++++++++++++++--------
 2 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/elements/rh-badge/rh-badge.css b/elements/rh-badge/rh-badge.css
index c30fde3fca..ca5a4c6d0e 100644
--- a/elements/rh-badge/rh-badge.css
+++ b/elements/rh-badge/rh-badge.css
@@ -6,7 +6,7 @@ span {
   white-space: nowrap;
   text-align: center;
   aspect-ratio: var(--_aspect-ratio);
-  background-color: var(--rh-color-surface-lighter);
+  background-color: var(--rh-color-surface-lighter, #f2f2f2);
   border-radius: var(--rh-border-radius-pill, 64px);
   color: var(--rh-color-text-primary);
   min-width: var(--_badge-size);
@@ -16,29 +16,15 @@ span {
   padding-inline: var(--rh-space-md, 8px);
 }
 
-.info { background-color: var(--rh-color-status-note); }
-.success { background-color: var(--rh-color-status-success); }
-.moderate { background-color: var(--rh-color-status-caution); }
-.important { background-color: var(--rh-color-status-warning); }
-.critical { background-color: var(--rh-color-status-danger); }
+.on.dark { background-color: var(--rh-color-surface-darker, #1f1f1f); }
+.on.info { background-color: var(--rh-color-status-note); }
+.on.success { background-color: var(--rh-color-status-success); }
+.on.moderate { background-color: var(--rh-color-status-caution); }
+.on.important { background-color: var(--rh-color-status-warning); }
+.on.critical { background-color: var(--rh-color-status-danger); }
 
 .info.on.light { color: var(--rh-color-text-primary-on-dark, #ffffff); }
 
 :is(.info,.success,.moderate,.important,.critical).on.dark {
   color: var(--rh-color-text-primary-on-light, #151515);
 }
-
-/* TODO: remove when adopting themable tokens */
-
-/*
-.on.moderate:is(.light, .dark) {
-  color: var(--rh-color-text-primary-on-light, #151515);
-}
-
-.on.light.info,
-.on.light.success,
-.on.light.important,
-.on.light.critical {
-  color: var(--rh-color-text-primary-on-dark, #ffffff);
-}
-*/
diff --git a/elements/rh-badge/test/rh-badge.spec.ts b/elements/rh-badge/test/rh-badge.spec.ts
index bd08e72477..6d7704e7c5 100644
--- a/elements/rh-badge/test/rh-badge.spec.ts
+++ b/elements/rh-badge/test/rh-badge.spec.ts
@@ -1,8 +1,8 @@
 import { tokens } from '@rhds/tokens';
 import { expect, html } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { hexToRgb, getColor } from '@patternfly/pfe-tools/test/hex-to-rgb.js';
 import { RhBadge } from '@rhds/elements/rh-badge/rh-badge.js';
+import { RhSurface } from '@rhds/elements/rh-surface/rh-surface.js';
 
 describe('<rh-badge>', function() {
   it('should upgrade', async function() {
@@ -13,11 +13,18 @@ describe('<rh-badge>', function() {
         .and
         .to.be.an.instanceOf(RhBadge);
   });
+  it(`should have a background color '--rh-color-surface-lighter' when state is unset`, async function() {
+    const element = await createFixture <RhBadge>(html`<rh-badge></rh-badge>`);
+    // NB: querying shadow root in tests is bad, mmkay?
+    const styles = getComputedStyle(element.shadowRoot!.querySelector('.on')!);
+    expect(styles.backgroundColor).to.be.colored(tokens.get('--rh-color-surface-lighter')!);
+  });
 });
 
 it('should have a pill shape and padding on left and right only', async function() {
   const element = await createFixture<RhBadge>(html`<rh-badge></rh-badge>`);
-  const elStyles = getComputedStyle(element);
+  // NB: querying shadow root in tests is bad, mmkay?
+  const elStyles = getComputedStyle(element.shadowRoot!.querySelector('.on')!);
 
   expect(elStyles.getPropertyValue('border-radius')).to.equal('64px');
   expect(elStyles.getPropertyValue('padding-top')).to.equal('0px');
@@ -26,22 +33,38 @@ it('should have a pill shape and padding on left and right only', async function
   expect(elStyles.getPropertyValue('padding-left')).to.equal('8px');
 });
 
-for (const [state, color] of Object.entries({
-  default: tokens.get('--rh-color-surface-lighter'),
-  info: tokens.get('--rh-color-interactive-blue-darker'),
-  success: tokens.get('--rh-color-green-60'),
-  moderate: tokens.get('--rh-color-yellow-40'),
-  important: tokens.get('--rh-color-red-60'),
-  critical: tokens.get('--rh-color-red-60'),
+for (const [state, token] of Object.entries({
+  info: '--rh-color-status-note-on-light',
+  success: '--rh-color-status-success-on-light',
+  moderate: '--rh-color-status-caution-on-light',
+  important: '--rh-color-status-warning-on-light',
+  critical: '--rh-color-status-danger-on-light',
 })) {
-  it(`should have a background color of '${color}' when state is ${state}`, async function() {
-    const el = await createFixture<RhBadge>(html`<rh-badge></rh-badge>`);
-
-    if (state !== 'default') {
-      el.setAttribute('state', state);
-    }
-
-    const [r, g, b] = getColor(el, 'background-color');
-    expect([r, g, b]).to.deep.equal(hexToRgb(color));
+  describe(`state="${state}"`, function() {
+    let element: RhBadge;
+    let styles: CSSStyleDeclaration;
+    beforeEach(async function() {
+      element = await createFixture<RhBadge>(html`
+        <rh-badge state="${state}"></rh-badge>
+      `);
+    });
+    beforeEach(async function() {
+      // NB: querying shadow root in tests is bad, mmkay?
+      styles = getComputedStyle(element.shadowRoot!.querySelector('.on')!);
+    });
+    it(`should have a background color '${token}'`, async function() {
+      expect(styles.backgroundColor).to.be.colored(tokens.get(token)!);
+    });
+    describe('on a dark background', function() {
+      const darkToken = token.replace('on-light', 'on-dark');
+      beforeEach(async function() {
+        await createFixture<RhSurface>(html`
+          <rh-surface color-palette="darkest">${element}</rh-surface>
+        `);
+      });
+      it(`should have a background color '${darkToken}'`, async function() {
+        expect(styles.backgroundColor).to.be.colored(tokens.get(darkToken)!);
+      });
+    });
   });
 }

From bb369486e5178aa6b064b7e5f93991b5ff958f48 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 16:29:50 +0300
Subject: [PATCH 14/29] docs(card): links

---
 elements/rh-card/docs/20-guidelines.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md
index 0c5e506c7b..31502a5c1f 100644
--- a/elements/rh-card/docs/20-guidelines.md
+++ b/elements/rh-card/docs/20-guidelines.md
@@ -167,7 +167,7 @@ Cards have the potential to contain lots of content, like a combination of
 text, links, images, multimedia, etc. Ensure content serves the use case, but 
 keep things simple at the same time. Don’t use too much content in one card, 
 distribute extra content to other cards or somewhere else on the page. A 
-[Sticky card]({{ '/patterns/sticky-card/' | url }}) is a kind of card that can 
+[Sticky card](/patterns/sticky-card/) is a kind of card that can 
 contain similar content, but it sticks to the side of a page and it’s always 
 present until a user dismisses it.
 
@@ -213,7 +213,7 @@ content. For example, grouping a basic card with a pricing card will look bad
 because they’re not very similar.
 
 <uxdot-example width-adjustment="784px">
-  <img src="{{ '../card-usage-grouping.svg' | url }}" alt="Grouping of a card">
+  <img src="../card-usage-grouping.svg" alt="Grouping of a card">
 </uxdot-example>
 
 These cards can be grouped together because they have similar styles and 
@@ -228,12 +228,12 @@ maximum width of six columns.
 ### Other components
 
 Cards can include complex components if necessary. For example, the 
-[Filter]({{ '/patterns/filter/' | url }}) pattern requires an Accordion or a 
-[Disclosure]({{ '/patterns/disclosure/' | url }}) to sort a content set. Don't 
+[Filter](/patterns/filter/) pattern requires an Accordion or a 
+[Disclosure](/patterns/disclosure/) to sort a content set. Don't 
 place any other complex components in card layouts.
 
 <uxdot-example width-adjustment="664px">
-  <img src="{{ '../card-usage-other.svg' | url }}" alt="Alternative card usage">
+  <img src="../card-usage-other.svg" alt="Alternative card usage">
 </uxdot-example>
 
 ## Best practices
@@ -242,21 +242,21 @@ The minimum width of a card in any layout is four columns and the maximum
 number of cards that can be used in a row is three.
 
 <uxdot-example width-adjustment="872px" danger>
-  <img src="{{ '../card-bestpractice-1.svg' | url }}" alt="Too many cards">
+  <img src="../card-bestpractice-1.svg" alt="Too many cards">
 </uxdot-example>
 
 Don’t use a primary call to action in any card unless the primary action of a 
 page is positioned inside of that card.
 
 <uxdot-example width-adjustment="360px" danger>
-  <img src="{{ '../card-bestpractice-2.svg' | url }}" alt="Card width error">
+  <img src="../card-bestpractice-2.svg" alt="Card width error">
 </uxdot-example>
 
 Don’t use multiple calls to action in one card. Instead, distribute them to 
 other cards.
 
 <uxdot-example width-adjustment="360px">
-  <img src="{{ '../card-bestpractice-3.svg' | url }}" alt="Multiple calls to action">
+  <img src="../card-bestpractice-3.svg" alt="Multiple calls to action">
 </uxdot-example>
 
 ## Behavior
@@ -269,7 +269,7 @@ determined by the tallest card. Don’t place inconsistent amounts of content in
 cards, as this will impact how scannable the group will appear to users.
 
 <uxdot-example width-adjustment="784px">
-  <img src="{{ '../card-behavior-height.svg' | url }}" alt="Card height behavior">
+  <img src="../card-behavior-height.svg" alt="Card height behavior">
 </uxdot-example>
 
 ### Interactivity
@@ -279,7 +279,7 @@ elements inside should all be interactive. Otherwise, each interactive element
 should continue to be interactive, but not the card container.
 
 <uxdot-example width-adjustment="784px">
-  <img src="{{ '../card-behavior-interaction.svg' | url }}" alt="Card interaction">
+  <img src="../card-behavior-interaction.svg" alt="Card interaction">
 </uxdot-example>
 
 ## Interaction states

From 947e69e7ca311e71720143662ba67fce77003673 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 16:32:08 +0300
Subject: [PATCH 15/29] docs(theming): backgrounds

---
 docs/theming/color-palettes.css |  15 ++-
 docs/theming/color-palettes.md  | 191 +++++++++++++++++++-------------
 docs/theming/developers.md      |   2 +
 3 files changed, 129 insertions(+), 79 deletions(-)

diff --git a/docs/theming/color-palettes.css b/docs/theming/color-palettes.css
index bf335273a8..d45c3d7ff6 100644
--- a/docs/theming/color-palettes.css
+++ b/docs/theming/color-palettes.css
@@ -1,3 +1,7 @@
+.container > rh-alert {
+  width: 100%;
+}
+
 #elements-grid {
   &::part(example) {
     display: block;
@@ -21,12 +25,21 @@
   }
 }
 
+.surface-grid,
 .tile-grid {
   display: grid;
   padding: 0;
   list-style-type: none;
-  grid-template-columns: 1fr 1fr 1fr;
   gap: var(--rh-space-sm);
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.surface-grid {
+  grid-template-columns: 1fr 1fr;
+}
+
+.icon-card {
+  --rh-icon-size: var(--rh-size-icon-07);
 }
 
 .pullquote-card {
diff --git a/docs/theming/color-palettes.md b/docs/theming/color-palettes.md
index 6aecbda506..39e91b8027 100644
--- a/docs/theming/color-palettes.md
+++ b/docs/theming/color-palettes.md
@@ -37,13 +37,12 @@ less effort and greater cross-property consistency.
 
 ## What are color palettes
 
-There are various color palettes within our design system. The palettes you will 
-use the most for the majority of your projects are the lightest and darkest 
-themes.
+<abbr title="red hat design system">RHDS</abbr> defines six color palettes They range from lightest to darkest, and those
+are the two palettes you will use the most for the majority of your projects.
 
 <uxdot-example>
-  <img src="/assets/theming/light-theme.png"
-       alt="examples of several elements against a white surface">
+  <img alt="examples of several elements against a white surface"
+       src="/assets/theming/light-theme.png">
 </uxdot-example>
 
 {% uxdotPattern id="elements-grid", stacked=true %}
@@ -56,10 +55,11 @@ themes.
 *HTML* and *CSS* system with some supporting JavaScript[^1].
 The color palette system has two main parts: **providers** and **consumers**. 
 Providers actively define a color palette, while consumers passively accept 
-their theme from the nearest provider ancestor.
+their background color from the nearest provider ancestor.
 
 <rh-card class="pullquote-card right">
-  <rh-blockquote>HTML design systems help teams ship better digital experiences, faster.</rh-blockquote>
+  <rh-blockquote>HTML design systems help teams ship better digital experiences, 
+    faster.</rh-blockquote>
 </rh-card>
 
 Color palettes allow for the creation of different experiences using the same 
@@ -68,8 +68,8 @@ space, text, and more. Layouts, content, and imagery usually stay the same.
 
 ## Choosing a color palette
 
-How you choose a color palette is based on content, user experience, and accessibility 
-needs.
+How you choose a color palette is based on content, user experience, and 
+accessibility needs.
 
 ### Lightest color palette
 
@@ -83,65 +83,32 @@ light elements and patterns have dark counterparts.
 
 <rh-alert state="warning">
   <h4 slot="header">Brand red and accessibility</h4>
-  <p>Do not apply the Red Hat red color to text in dark environments
-  unless it meets <a href="https://www.w3.org/WAI/WCAG21/Understanding/">WCAG 2.1 AA</a>
-  requirements.</p>
-</rh-alert>
-
-### Inline color palettes  <rh-tag color="purple">Beta</rh-tag>
 
-Inlining a color palette is when a section switches palette and looks different 
-than the rest of the page or interface. Some use cases include highlighting an 
-important section on a page or adding a sidebar to an interface. Use inline 
-theming only for major shifts in color. For minor shifts, use a different 
-surface color from the same theme.
+  Do not apply the Red Hat red color to text in dark environments unless it 
+  meets [WCAG 2.1 AA][wcag21aa] requirements.
 
-<rh-alert>
-  <h4 slot="header">Update from the team</h4>
-  <p>The design system team is working on creating inline theming best
-     practices in the near future. <a href="https://github.com/RedHat-UX/red-hat-design-system/discussions">Contact
-     us</a> if you would like to contribute.</p>
 </rh-alert>
 
-<uxdot-example color-palette="lighter">
-  <img alt="wireframe of a dark theme section sandwiched by two light theme sections",
-       src="/assets/theming/inline-theming-1.png">
-</uxdot-example>
-
-<uxdot-example color-palette="lighter">
-  <img alt="wireframe of cards in a dark theme section extending into a light theme section",
-       src="/assets/theming/inline-theming-2.png">
-</uxdot-example>
-
-<uxdot-example color-palette="lighter">
-  <img alt="wireframe of dark theme navigation framing the top and left sides of a light theme content area",
-       src="/assets/theming/inline-theming-3.png">
-</uxdot-example>
-
 ## Illustrations and imagery
 
-Illustrations and imagery should align to the theme. The light theme should 
-feature imagery with light colors and vice versa. Imagery with high contrast is 
-only acceptable if it has a transparent background. If you cannot find 
-theme-specific imagery, contact the Brand team.
-
-<rh-alert>
-  <h4 slot="header">More information</h4>
-  <p>High contrast is using bright elements, patterns, or images in dark
-environments and vice versa. This is useful to focus attention or create
-visual tension.</p>
-</rh-alert>
+Illustrations and imagery should align to the color palette. The light color 
+palette should feature imagery with light colors and vice versa. Imagery with 
+high contrast is only acceptable if it has a transparent background. If you 
+cannot find color-palette-specific imagery, contact the Brand team. Developers
+have a number of [art-direction][artdirection] techniques at their disposal for
+creating themable, responsive graphics.
 
 <uxdot-example>
-  <img alt="correct uses of an illustration with a transparent background and one illustration incorrectly using a white background in a dark theme area",
+  <img alt="correct uses of an illustration with a transparent background and one illustration incorrectly using a white background on a surface with a dark color palette area"
        src="/assets/theming/illustrations-and-imagery.png">
 </uxdot-example>
 
-## Color theme consumers and theme tokens
+## Color consumers and theme tokens
 
 ### Color palette providers
+
 **Providers** define the **color palette** for themselves and their child 
-elements. There are six main color palettes:
+elements. There are six color palettes in RHDS:
 
 <ol class="tile-grid">
   <li><rh-tile color-palette="lightest">Lightest</rh-tile></li>
@@ -153,27 +120,50 @@ elements. There are six main color palettes:
 </ol>
 
 Context providers typically use the `lightest` color palette as the default. 
-Authors may define the color palette of a container using the `color-palette` HTML
-attribute. So for example, to create a card with the darkest color palette, use 
-this HTML:
+Authors may define the color palette of a container using the `color-palette` 
+HTML attribute. So for example, to create a card with the darkest color palette, 
+use this HTML:
 
 {% uxdotPattern class="card-snippet-grid", fullHeight=true %}
 {% include './patterns/card-default-vs-set-palette.html' %}
 {% enduxdotPattern %}
 
-### Color theme consumers
-**Consumers**, which adopt a **color theme**. Color themes correspond to the  
-active color palette, and represent the quality of the background colour:
-
-1. light
-1. dark
-
-Child elements which are providers will automatically adapt, applying their own 
-**color theme** as needed. Page authors *do not need to and should not customize*
-colors of consumer elements.
-
-Color palette containers can be nested, such that child elements will always 
-adopt the color theme corresponding to the nearest container's palette.
+A color palette provider is a **surface** on which a particular color palette is
+active, as well as a **container** for themable consumer elements.
+
+### Color consumers
+
+Consumers are elements which automatically adapt to their background surface.
+Color **Consumers** adopt a **background** color based on the palette of the 
+surface they are on. In other words, the background of a consumer corresponds to 
+the color palette of it's containing surface. There are two backgrounds in RHDS:
+
+<ul class="surface-grid">
+  <li>
+    <rh-card class="icon-card" color-palette="lightest">
+      <rh-icon slot="header" icon="sun"></rh-icon>
+      <span slot="header">Light</span>
+    </rh-card>
+  </li>
+
+  <li>
+    <rh-card class="icon-card" color-palette="darkest">
+      <rh-icon slot="header" icon="umbrella"></rh-icon>
+      <span slot="header">Dark</span>
+    </rh-card></li>
+</ul>
+
+These backgrounds don't represent a specific colour, but rather they indicate 
+whether the background is light or dark. This is so things like icons, text,
+and border colours can be chosen which will contrast enough with the background
+to remain legible. In other words, the background is the *color context* in
+which a consumer finds itself.
+
+<rh-alert>Page authors *do not need to and should not customize* colors of 
+  consumer elements, but instead should set custom values for [theme 
+  tokens][theming]. Color palette containers can be nested, such that child 
+  elements will always adopt the color theme corresponding to the nearest 
+  container's palette.</rh-alert>
 
 Extending our card example from above, if our page author then adds an 
 `<rh-cta>` to the card, it will *automatically* adopt the dark color theme. The 
@@ -184,23 +174,68 @@ page author need not and should not customize the CTA.
 {% enduxdotPattern %}
 
 <rh-card class="pullquote-card right">
-  <rh-blockquote>
-    Color palettes lets authors write more HTML, simpler CSS, and less JavaScript
-  </rh-blockquote>
+  <rh-blockquote>Color palettes lets authors write more HTML, simpler CSS, and 
+    less JavaScript</rh-blockquote>
 </rh-card>
 
-To summarize: color providers can have one of up to six palettes, three dark and 
-three light, and they provide a `dark` or `light` theme to their children.
+To summarize: color providers can adopt one six palettes, three dark and 
+three light, and they provide a `dark` or `light` background to their children.
 
 ## Combination elements
+
 Some elements are both providers and consumers. Card, for example is both a 
-provider and a consumer. It can accept the color theme of its parent context and it 
-can also set its own color palette.
+provider and a consumer. It can accept the color theme of its parent context and 
+it can also set its own color palette.
 
 {% uxdotPattern class="card-snippet-grid", fullHeight=true %}
 {% include './patterns/card-consumer-provider.html' %}
 {% enduxdotPattern %}
 
+## Inline color palettes  <rh-tag color="purple">Beta</rh-tag>
+
+Inlining a color palette is when a section switches palette and looks different 
+than the rest of the page or interface. Some use cases include highlighting an 
+important section on a page or adding a sidebar to an interface. Use inline 
+palettes only for major shifts in color. For minor shifts, use a related color 
+palette, e.g. from `lightest` to `light`.
+
+<rh-alert>
+  <h4 slot="header">Update from the team</h4>
+
+  The design system team is working on creating inline color palette best 
+  practices in the near future. [Contact us][contact] if you would like to 
+  contribute.
+
+</rh-alert>
+
+<uxdot-example color-palette="lighter">
+  <img alt="wireframe of a dark palette section sandwiched by two light palette sections"
+       src="/assets/theming/inline-theming-1.png">
+</uxdot-example>
+
+<uxdot-example color-palette="lighter">
+  <img alt="wireframe of cards in a dark palette section extending into a light palette section"
+       src="/assets/theming/inline-theming-2.png">
+</uxdot-example>
+
+<uxdot-example color-palette="lighter">
+  <img alt="wireframe of dark palette navigation framing the top and left sides of a light palette content area"
+       src="/assets/theming/inline-theming-3.png">
+</uxdot-example>
+
+<rh-alert>
+  <h4 slot="header">More information</h4>
+  <p>High contrast is using bright elements, patterns, or images in dark
+environments and vice versa. This is useful to focus attention or create
+visual tension.</p>
+</rh-alert>
+
 {% include 'partials/component/feedback.html' %}
 
-[^1]: As the web platform [improves](https://results.web-platform-tests.org/results/css/css-values/attr-container-style-query.html?label=experimental&label=master&aligned), the <abbr>RHDS</abbr> authors expect that eventually no JavaScript will be required for this feature.
+[^1]: As the web platform [improves][wpt], the <abbr>RHDS</abbr> authors expect that eventually no JavaScript will be required for this feature.
+
+[wpt]: https://results.web-platform-tests.org/results/css/css-values/attr-container-style-query.html?label=experimental&label=master&aligned
+[contact]: https://github.com/RedHat-UX/red-hat-design-system/discussions
+[artdirection]: /theming/developers/#art-direction
+[theming]: /theming/customizing/
+[wcag21aa]: https://www.w3.org/WAI/WCAG21/Understanding/
diff --git a/docs/theming/developers.md b/docs/theming/developers.md
index f4ecf3f00b..b1faeb6af6 100644
--- a/docs/theming/developers.md
+++ b/docs/theming/developers.md
@@ -2,3 +2,5 @@
 title: Developers
 order: 4
 ---
+
+- 

From eff824466332a1b4c9f0cfb172c1af0379db87a5 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 18:13:10 +0300
Subject: [PATCH 16/29] docs(theming): stub for developer

---
 docs/theming/developers.md | 57 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/docs/theming/developers.md b/docs/theming/developers.md
index b1faeb6af6..79f1df94cd 100644
--- a/docs/theming/developers.md
+++ b/docs/theming/developers.md
@@ -3,4 +3,59 @@ title: Developers
 order: 4
 ---
 
-- 
+## Context Protocol
+
+## Style Queries
+
+Your page markup declares a custom surface:
+
+```html
+<div class="custom-surface dark">
+  <rh-cta href="#">GO!</rh-cta>
+</div>
+```
+
+And your document css sets the desired color context:
+
+```css
+.custom-surface {
+  container: surface;
+  & .dark { --rh-background-context: dark; }
+  & .light { --rh-background-context: light; }
+}
+```
+
+Internally / in shared CSS:
+
+```css
+@container style (--rh-context-background: dark) {
+  --rh-color-text-primary: var(--rh-color-text-primary-on-dark)
+}
+```
+
+## Art Direction
+
+Art direction is the process of 
+
+### Inline SVG
+
+```html
+<svg slot="header" width="80" height="80">
+  <rect fill="var(--rh-color-border-interactive)"
+        fill-opacity="0.1"
+        stroke-dasharray="4"
+        stroke-width="1"
+        stroke="var(--rh-color-border-interactive)"
+        width="80"
+        height="80"/>
+</svg>
+```
+
+### `<rh-picture>` <rh-tag icon="notification-fill">Planned</rh-tag>
+
+```html
+<rh-picture>
+  <source srcset="../google-cloud-dark.svg" color-theme="dark"></source>
+  <img src="../google-cloud.svg" alt="Logo for Red Hat partner Google Cloud">
+<rh-picture>
+```

From 444abc8e85a998e8e837cc8e38c0882cd737c863 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 18:18:26 +0300
Subject: [PATCH 17/29] docs: deps

---
 docs/theming/developers.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/docs/theming/developers.md b/docs/theming/developers.md
index 79f1df94cd..a386c8feb9 100644
--- a/docs/theming/developers.md
+++ b/docs/theming/developers.md
@@ -3,6 +3,31 @@ title: Developers
 order: 4
 ---
 
+<link rel="stylesheet"
+      data-helmet
+      href="/assets/packages/@rhds/elements/elements/rh-pagination/rh-pagination-lightdom.css">
+<link rel="stylesheet"
+      data-helmet
+      href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
+<link rel="stylesheet"
+      data-helmet
+      href="../color-palettes.css">
+
+<script type="module" data-helmet>
+  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+  import '@rhds/elements/rh-accordion/rh-accordion.js';
+  import '@rhds/elements/rh-audio-player/rh-audio-player.js';
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-pagination/rh-pagination.js';
+  import '@rhds/elements/rh-tabs/rh-tabs.js';
+  import '@rhds/elements/rh-tag/rh-tag.js';
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
 ## Context Protocol
 
 ## Style Queries

From 55e3a22bf2f4b03e305ce08ff17186062ffcdf6e Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Sep 2024 18:23:05 +0300
Subject: [PATCH 18/29] docs: more prose

---
 docs/theming/developers.md | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/theming/developers.md b/docs/theming/developers.md
index a386c8feb9..23fe175374 100644
--- a/docs/theming/developers.md
+++ b/docs/theming/developers.md
@@ -45,8 +45,8 @@ And your document css sets the desired color context:
 ```css
 .custom-surface {
   container: surface;
-  & .dark { --rh-background-context: dark; }
-  & .light { --rh-background-context: light; }
+  &.dark { --rh-background-context: dark; }
+  &.light { --rh-background-context: light; }
 }
 ```
 
@@ -60,10 +60,13 @@ Internally / in shared CSS:
 
 ## Art Direction
 
-Art direction is the process of 
+Art direction is the process of selecting art assets based on the context in 
+which they are used.
 
 ### Inline SVG
 
+Page authors using _inline SVG_ can use theme tokens to style graphics.
+
 ```html
 <svg slot="header" width="80" height="80">
   <rect fill="var(--rh-color-border-interactive)"
@@ -76,6 +79,9 @@ Art direction is the process of
 </svg>
 ```
 
+This approach _does not work_ with svg loaded through the `<img>` tag, or with 
+raster graphics, however another approach is in development which could help:
+
 ### `<rh-picture>` <rh-tag icon="notification-fill">Planned</rh-tag>
 
 ```html
@@ -84,3 +90,5 @@ Art direction is the process of
   <img src="../google-cloud.svg" alt="Logo for Red Hat partner Google Cloud">
 <rh-picture>
 ```
+
+Join the [discussion](https://github.com/orgs/RedHat-UX/discussions/1780)

From 2033705fad460712a221efafbd640f3a4fee5db8 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 12 Sep 2024 13:09:45 +0300
Subject: [PATCH 19/29] feat(tag): context, compact, href, desaturated

Closes #1843
---
 .changeset/heavy-roses-poke.md                |   4 +
 .changeset/rotten-bottles-suffer.md           |   8 +
 .changeset/seven-bats-grin.md                 |   8 +
 .changeset/wild-apples-enjoy.md               |   9 +
 elements/rh-tag/demo/color-context.html       | 540 ++++++++++++++++--
 .../rh-tag/demo/desaturated-with-icon.html    |  11 +
 elements/rh-tag/demo/desaturated.html         |  11 +
 .../rh-tag/demo/filled-color-with-icon.html   |  16 +-
 elements/rh-tag/demo/filled-color.html        |   6 +-
 elements/rh-tag/demo/outline-with-icon.html   |  24 +-
 elements/rh-tag/demo/outline.html             |   2 +-
 elements/rh-tag/rh-tag.css                    | 326 ++++++++---
 elements/rh-tag/rh-tag.ts                     |  38 +-
 13 files changed, 833 insertions(+), 170 deletions(-)
 create mode 100644 .changeset/heavy-roses-poke.md
 create mode 100644 .changeset/rotten-bottles-suffer.md
 create mode 100644 .changeset/seven-bats-grin.md
 create mode 100644 .changeset/wild-apples-enjoy.md
 create mode 100644 elements/rh-tag/demo/desaturated-with-icon.html
 create mode 100644 elements/rh-tag/demo/desaturated.html

diff --git a/.changeset/heavy-roses-poke.md b/.changeset/heavy-roses-poke.md
new file mode 100644
index 0000000000..3a8a3690b8
--- /dev/null
+++ b/.changeset/heavy-roses-poke.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>` added `red-orange`, `yellow`, and `teal` colors. **NOTE** that `cyan` is now deprecated, but will continue to work using the `teal` colors.
diff --git a/.changeset/rotten-bottles-suffer.md b/.changeset/rotten-bottles-suffer.md
new file mode 100644
index 0000000000..294007c677
--- /dev/null
+++ b/.changeset/rotten-bottles-suffer.md
@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>`: added desaturated variant:
+
+```html
+<rh-tag variant="desaturated">New</rh-tag>
+```
diff --git a/.changeset/seven-bats-grin.md b/.changeset/seven-bats-grin.md
new file mode 100644
index 0000000000..d3a7c2ac21
--- /dev/null
+++ b/.changeset/seven-bats-grin.md
@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>`: added `size` attribute.
+
+```html
+<rh-tag size="compact">New</rh-tag>
+```
diff --git a/.changeset/wild-apples-enjoy.md b/.changeset/wild-apples-enjoy.md
new file mode 100644
index 0000000000..571b66f43f
--- /dev/null
+++ b/.changeset/wild-apples-enjoy.md
@@ -0,0 +1,9 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>`: added `href` attribute
+
+```html
+<rh-tag icon="information-fill"
+        href="/info">Info</rh-tag>
+```
diff --git a/elements/rh-tag/demo/color-context.html b/elements/rh-tag/demo/color-context.html
index c420426cf8..00106498ef 100644
--- a/elements/rh-tag/demo/color-context.html
+++ b/elements/rh-tag/demo/color-context.html
@@ -1,65 +1,495 @@
 <rh-context-demo>
-  <h2>Filled Color</h2>
-  <rh-tag color="red">Red</rh-tag>
-  <rh-tag color="orange">Orange</rh-tag>
-  <rh-tag color="green">Green</rh-tag>
-  <rh-tag color="cyan">Cyan</rh-tag>
-  <rh-tag color="blue">Blue</rh-tag>
-  <rh-tag color="purple">Purple</rh-tag>
-  <rh-tag>Gray</rh-tag>
-
-
-  <h2>Outline</h2>
-  <rh-tag variant="outline" color="red">Red</rh-tag>
-  <rh-tag variant="outline" color="orange">Orange</rh-tag>
-  <rh-tag variant="outline" color="green">Green</rh-tag>
-  <rh-tag variant="outline" color="cyan">Cyan</rh-tag>
-  <rh-tag variant="outline" color="blue">Blue</rh-tag>
-  <rh-tag variant="outline" color="purple">Purple</rh-tag>
-  <rh-tag variant="outline">Gray</rh-tag>
-
-
-  <h2>Filled Color With Icon</h2>
-  <rh-tag color="red" icon="information">Red</rh-tag>
-  <rh-tag color="orange" icon="information">Orange</rh-tag>
-  <rh-tag color="green">
-    Green
-    <svg slot="icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
-      <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
-    </svg>
-  </rh-tag>
-  <rh-tag color="cyan" icon="information">Cyan</rh-tag>
-  <rh-tag color="blue" icon="information">Blue</rh-tag>
-  <rh-tag color="purple" icon="information">
-    Purple
-    <svg slot="icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
-      <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
-    </svg>
-  </rh-tag>
-  <rh-tag icon="information">Gray</rh-tag>
+  <dl>
+    <dt>Filled</dt>
+    <dd>
+      <rh-tag color="red">Red</rh-tag>
+      <rh-tag color="red-orange">Red Orange</rh-tag>
+      <rh-tag color="orange">Orange</rh-tag>
+      <rh-tag color="yellow">Yellow</rh-tag>
+      <rh-tag color="green">Green</rh-tag>
+      <rh-tag color="teal">Teal</rh-tag>
+      <rh-tag color="blue">Blue</rh-tag>
+      <rh-tag color="purple">Purple</rh-tag>
+      <rh-tag color="gray">Gray</rh-tag>
+    </dd>
 
+    <dt>Filled with icon</dt>
+    <dd>
+      <rh-tag color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
 
-  <h2>Filled Color With Icon</h2>
-  <rh-tag variant="outline" color="red" icon="information">Red</rh-tag>
-  <rh-tag variant="outline" color="orange" icon="information">Orange</rh-tag>
-  <rh-tag variant="outline" color="green">
-    Green
-    <svg slot="icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
-      <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
-    </svg>
-  </rh-tag>
-  <rh-tag variant="outline" color="cyan" icon="information">Cyan</rh-tag>
-  <rh-tag variant="outline" color="blue" icon="information">Blue</rh-tag>
-  <rh-tag variant="outline" color="purple" icon="information">
-    Purple
-    <svg slot="icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
+    <dt>Filled with slotted icon</dt>
+    <dd>
+      <rh-tag color="red"> Red                        <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag color="red-orange"> Red Orange          <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag icon="information">Gray                 <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Filled with link</dt>
+    <dd>
+      <rh-tag href="#" color="red">Red</rh-tag>
+      <rh-tag href="#" color="red-orange">Red Orange</rh-tag>
+      <rh-tag href="#" color="orange">Orange</rh-tag>
+      <rh-tag href="#" color="yellow">Yellow</rh-tag>
+      <rh-tag href="#" color="green">Green</rh-tag>
+      <rh-tag href="#" color="teal">Teal</rh-tag>
+      <rh-tag href="#" color="blue">Blue</rh-tag>
+      <rh-tag href="#" color="purple">Purple</rh-tag>
+      <rh-tag href="#" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Filled with icon and link</dt>
+    <dd>
+      <rh-tag href="#" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag href="#" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag href="#" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag href="#" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag href="#" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag href="#" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag href="#" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag href="#" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag href="#" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Filled with slotted icon and link</dt>
+    <dd>
+      <rh-tag href="#" color="red"> Red                        <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" color="red-orange"> Red Orange          <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" icon="information">Gray                 <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Outline</dt>
+    <dd>
+      <rh-tag variant="outline" color="red">Red</rh-tag>
+      <rh-tag variant="outline" color="red-orange">Red Orange</rh-tag>
+      <rh-tag variant="outline" color="orange">Orange</rh-tag>
+      <rh-tag variant="outline" color="yellow">Yellow</rh-tag>
+      <rh-tag variant="outline" color="green">Green</rh-tag>
+      <rh-tag variant="outline" color="teal">Teal</rh-tag>
+      <rh-tag variant="outline" color="blue">Blue</rh-tag>
+      <rh-tag variant="outline" color="purple">Purple</rh-tag>
+      <rh-tag variant="outline" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Outlined with icon</dt>
+    <dd>
+      <rh-tag variant="outline" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag variant="outline" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag variant="outline" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag variant="outline" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag variant="outline" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag variant="outline" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag variant="outline" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag variant="outline" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Outlined with slotted icon</dt>
+    <dd>
+      <rh-tag variant="outline" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="outline" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Outline with link</dt>
+    <dd>
+      <rh-tag href="#" variant="outline" color="red">Red</rh-tag>
+      <rh-tag href="#" variant="outline" color="red-orange">Red Orange</rh-tag>
+      <rh-tag href="#" variant="outline" color="orange">Orange</rh-tag>
+      <rh-tag href="#" variant="outline" color="yellow">Yellow</rh-tag>
+      <rh-tag href="#" variant="outline" color="green">Green</rh-tag>
+      <rh-tag href="#" variant="outline" color="teal">Teal</rh-tag>
+      <rh-tag href="#" variant="outline" color="blue">Blue</rh-tag>
+      <rh-tag href="#" variant="outline" color="purple">Purple</rh-tag>
+      <rh-tag href="#" variant="outline" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Outlined with icon and link</dt>
+    <dd>
+      <rh-tag href="#" variant="outline" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag href="#" variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag href="#" variant="outline" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag href="#" variant="outline" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag href="#" variant="outline" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag href="#" variant="outline" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag href="#" variant="outline" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag href="#" variant="outline" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag href="#" variant="outline" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Outlined with slotted icon and link</dt>
+    <dd>
+      <rh-tag href="#" variant="outline" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="outline" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Desaturated</dt>
+    <dd>
+      <rh-tag variant="desaturated" color="red">Red</rh-tag>
+      <rh-tag variant="desaturated" color="red-orange">Red Orange</rh-tag>
+      <rh-tag variant="desaturated" color="orange">Orange</rh-tag>
+      <rh-tag variant="desaturated" color="yellow">Yellow</rh-tag>
+      <rh-tag variant="desaturated" color="green">Green</rh-tag>
+      <rh-tag variant="desaturated" color="teal">Teal</rh-tag>
+      <rh-tag variant="desaturated" color="blue">Blue</rh-tag>
+      <rh-tag variant="desaturated" color="purple">Purple</rh-tag>
+      <rh-tag variant="desaturated" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Desaturated with icon</dt>
+    <dd>
+      <rh-tag variant="desaturated" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag variant="desaturated" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag variant="desaturated" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag variant="desaturated" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag variant="desaturated" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag variant="desaturated" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag variant="desaturated" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag variant="desaturated" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Desaturated with slotted icon</dt>
+    <dd>
+      <rh-tag variant="desaturated" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag variant="desaturated" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Desaturated with link</dt>
+    <dd>
+      <rh-tag href="#" variant="desaturated" color="red">Red</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="red-orange">Red Orange</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="orange">Orange</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="yellow">Yellow</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="green">Green</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="teal">Teal</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="blue">Blue</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="purple">Purple</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Desaturated with icon and link</dt>
+    <dd>
+      <rh-tag href="#" variant="desaturated" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag href="#" variant="desaturated" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Desaturated with slotted icon and link</dt>
+    <dd>
+      <rh-tag href="#" variant="desaturated" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag href="#" variant="desaturated" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+
+    <dt>Compact filled</dt>
+    <dd>
+      <rh-tag size="compact" color="red">Red</rh-tag>
+      <rh-tag size="compact" color="red-orange">Red Orange</rh-tag>
+      <rh-tag size="compact" color="orange">Orange</rh-tag>
+      <rh-tag size="compact" color="yellow">Yellow</rh-tag>
+      <rh-tag size="compact" color="green">Green</rh-tag>
+      <rh-tag size="compact" color="teal">Teal</rh-tag>
+      <rh-tag size="compact" color="blue">Blue</rh-tag>
+      <rh-tag size="compact" color="purple">Purple</rh-tag>
+      <rh-tag size="compact" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact filled with icon</dt>
+    <dd>
+      <rh-tag size="compact" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag size="compact" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag size="compact" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag size="compact" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag size="compact" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag size="compact" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag size="compact" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag size="compact" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag size="compact" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact filled with slotted icon</dt>
+    <dd>
+      <rh-tag size="compact" color="red"> Red                        <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" color="red-orange"> Red Orange          <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" icon="information">Gray                 <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Compact filled with link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" color="red">Red</rh-tag>
+      <rh-tag size="compact" href="#" color="red-orange">Red Orange</rh-tag>
+      <rh-tag size="compact" href="#" color="orange">Orange</rh-tag>
+      <rh-tag size="compact" href="#" color="yellow">Yellow</rh-tag>
+      <rh-tag size="compact" href="#" color="green">Green</rh-tag>
+      <rh-tag size="compact" href="#" color="teal">Teal</rh-tag>
+      <rh-tag size="compact" href="#" color="blue">Blue</rh-tag>
+      <rh-tag size="compact" href="#" color="purple">Purple</rh-tag>
+      <rh-tag size="compact" href="#" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact filled with icon and link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag size="compact" href="#" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag size="compact" href="#" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag size="compact" href="#" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag size="compact" href="#" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag size="compact" href="#" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag size="compact" href="#" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag size="compact" href="#" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag size="compact" href="#" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact filled with slotted icon and link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" color="red"> Red                        <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" color="red-orange"> Red Orange          <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" icon="information">Gray                 <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Compact outline</dt>
+    <dd>
+      <rh-tag size="compact" variant="outline" color="red">Red</rh-tag>
+      <rh-tag size="compact" variant="outline" color="red-orange">Red Orange</rh-tag>
+      <rh-tag size="compact" variant="outline" color="orange">Orange</rh-tag>
+      <rh-tag size="compact" variant="outline" color="yellow">Yellow</rh-tag>
+      <rh-tag size="compact" variant="outline" color="green">Green</rh-tag>
+      <rh-tag size="compact" variant="outline" color="teal">Teal</rh-tag>
+      <rh-tag size="compact" variant="outline" color="blue">Blue</rh-tag>
+      <rh-tag size="compact" variant="outline" color="purple">Purple</rh-tag>
+      <rh-tag size="compact" variant="outline" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact outlined with icon</dt>
+    <dd>
+      <rh-tag size="compact" variant="outline" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag size="compact" variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag size="compact" variant="outline" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag size="compact" variant="outline" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag size="compact" variant="outline" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag size="compact" variant="outline" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag size="compact" variant="outline" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag size="compact" variant="outline" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag size="compact" variant="outline" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact outlined with slotted icon</dt>
+    <dd>
+      <rh-tag size="compact" variant="outline" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="outline" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Compact outline with link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" variant="outline" color="red">Red</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="red-orange">Red Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="orange">Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="yellow">Yellow</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="green">Green</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="teal">Teal</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="blue">Blue</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="purple">Purple</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact outlined with icon and link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" variant="outline" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact outlined with slotted icon and link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" variant="outline" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="outline" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Compact desaturated</dt>
+    <dd>
+      <rh-tag size="compact" variant="desaturated" color="red">Red</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="red-orange">Red Orange</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="orange">Orange</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="yellow">Yellow</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="green">Green</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="teal">Teal</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="blue">Blue</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="purple">Purple</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact desaturated with icon</dt>
+    <dd>
+      <rh-tag size="compact" variant="desaturated" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact desaturated with slotted icon</dt>
+    <dd>
+      <rh-tag size="compact" variant="desaturated" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" variant="desaturated" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+
+    <dt>Compact desaturated with link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" variant="desaturated" color="red">Red</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="red-orange">Red Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="orange">Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="yellow">Yellow</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="green">Green</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="teal">Teal</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="blue">Blue</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="purple">Purple</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="gray">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact desaturated with icon and link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" variant="desaturated" color="red"        icon="information-fill">Red</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="orange"     icon="information-fill">Orange</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="yellow"     icon="information-fill">Yellow</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="green"      icon="information-fill">Green</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="teal"       icon="information-fill">Teal</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="blue"       icon="information-fill">Blue</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="purple"     icon="information-fill">Purple</rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="gray"       icon="information-fill">Gray</rh-tag>
+    </dd>
+
+    <dt>Compact desaturated with slotted icon and link</dt>
+    <dd>
+      <rh-tag size="compact" href="#" variant="desaturated" color="red">Red                         <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="red-orange">Red Orange           <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="orange">Orange                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="yellow">Yellow                   <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="green">Green                     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="teal" icon="information">Teal    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="blue" icon="information">Blue    <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+      <rh-tag size="compact" href="#" variant="desaturated" color="gray icon="information">Gray     <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
+    </dd>
+  </dl>
+</rh-context-demo>
+
+<svg inert aria-hidden="true">
+  <defs>
+    <svg id="svg-icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
       <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
     </svg>
-  </rh-tag>
-  <rh-tag variant="outline" icon="information">Gray</rh-tag>
-</rh-context-demo>
+  </defs>
+</svg>
 
 <script type="module">
   import '@rhds/elements/rh-tag/rh-tag.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
 </script>
+
+<style>
+  dl {
+    margin: 0;
+    display: grid;
+    gap: var(--rh-space-sm, 6px);
+    grid-template-columns: max-content 1fr;
+  }
+</style>
+}
diff --git a/elements/rh-tag/demo/desaturated-with-icon.html b/elements/rh-tag/demo/desaturated-with-icon.html
new file mode 100644
index 0000000000..e56385ce52
--- /dev/null
+++ b/elements/rh-tag/demo/desaturated-with-icon.html
@@ -0,0 +1,11 @@
+<rh-tag variant="desaturated" icon="information-fill" color="red"    >Red</rh-tag>
+<rh-tag variant="desaturated" icon="information-fill" color="orange" >Orange</rh-tag>
+<rh-tag variant="desaturated" icon="information-fill" color="green"  >Green</rh-tag>
+<rh-tag variant="desaturated" icon="information-fill" color="cyan"   >Cyan</rh-tag>
+<rh-tag variant="desaturated" icon="information-fill" color="blue"   >Blue</rh-tag>
+<rh-tag variant="desaturated" icon="information-fill" color="purple" >Purple</rh-tag>
+<rh-tag variant="desaturated" icon="information-fill" color="gray"   >Gray</rh-tag>
+
+<script type="module">
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
diff --git a/elements/rh-tag/demo/desaturated.html b/elements/rh-tag/demo/desaturated.html
new file mode 100644
index 0000000000..0317a7ad85
--- /dev/null
+++ b/elements/rh-tag/demo/desaturated.html
@@ -0,0 +1,11 @@
+<rh-tag variant="desaturated" color="red">Red</rh-tag>
+<rh-tag variant="desaturated" color="orange">Orange</rh-tag>
+<rh-tag variant="desaturated" color="green">Green</rh-tag>
+<rh-tag variant="desaturated" color="cyan">Cyan</rh-tag>
+<rh-tag variant="desaturated" color="blue">Blue</rh-tag>
+<rh-tag variant="desaturated" color="purple">Purple</rh-tag>
+<rh-tag variant="desaturated" color="gray">Gray</rh-tag>
+
+<script type="module">
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
diff --git a/elements/rh-tag/demo/filled-color-with-icon.html b/elements/rh-tag/demo/filled-color-with-icon.html
index 50acce570e..52f02d0ea5 100644
--- a/elements/rh-tag/demo/filled-color-with-icon.html
+++ b/elements/rh-tag/demo/filled-color-with-icon.html
@@ -1,10 +1,12 @@
-<rh-tag color="red" icon="information">Red</rh-tag>
-<rh-tag color="orange" icon="information">Orange</rh-tag>
-<rh-tag color="green">Green <svg slot="icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
-<rh-tag color="cyan" icon="information">Cyan</rh-tag>
-<rh-tag color="blue" icon="information">Blue</rh-tag>
-<rh-tag color="purple" icon="information">Purple <svg slot="icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
-<rh-tag icon="information">Gray</rh-tag>
+<rh-tag icon="information-fill" color="red">Red</rh-tag>
+<rh-tag icon="information-fill" color="red-orange">Red Orange</rh-tag>
+<rh-tag icon="information-fill" color="orange">Orange</rh-tag>
+<rh-tag icon="information-fill" color="yellow">Yellow</rh-tag>
+<rh-tag icon="information-fill" color="green">Green</rh-tag>
+<rh-tag icon="information-fill" color="teal">Teal</rh-tag>
+<rh-tag icon="information-fill" color="blue">Blue</rh-tag>
+<rh-tag icon="information-fill" color="purple">Purple</rh-tag>
+<rh-tag icon="information-fill" color="grey">Gray</rh-tag>
 
 <script type="module">
   import '@rhds/elements/rh-tag/rh-tag.js';
diff --git a/elements/rh-tag/demo/filled-color.html b/elements/rh-tag/demo/filled-color.html
index 5f3611becf..04a14c1255 100644
--- a/elements/rh-tag/demo/filled-color.html
+++ b/elements/rh-tag/demo/filled-color.html
@@ -1,10 +1,12 @@
 <rh-tag color="red">Red</rh-tag>
+<rh-tag color="red-orange">Red Orange</rh-tag>
 <rh-tag color="orange">Orange</rh-tag>
+<rh-tag color="yellow">Yellow</rh-tag>
 <rh-tag color="green">Green</rh-tag>
-<rh-tag color="cyan">Cyan</rh-tag>
+<rh-tag color="teal">Teal</rh-tag>
 <rh-tag color="blue">Blue</rh-tag>
 <rh-tag color="purple">Purple</rh-tag>
-<rh-tag>Gray</rh-tag>
+<rh-tag color="gray">Gray</rh-tag>
 
 <script type="module">
   import '@rhds/elements/rh-tag/rh-tag.js';
diff --git a/elements/rh-tag/demo/outline-with-icon.html b/elements/rh-tag/demo/outline-with-icon.html
index 0babb7644b..a1a60eb160 100644
--- a/elements/rh-tag/demo/outline-with-icon.html
+++ b/elements/rh-tag/demo/outline-with-icon.html
@@ -1,20 +1,10 @@
-<rh-tag color="red" variant="outline" icon="information">Red</rh-tag>
-<rh-tag color="orange" variant="outline" icon="information">Orange</rh-tag>
-<rh-tag color="green" variant="outline">
-  Green
-  <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
-    <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
-  </svg>
-</rh-tag>
-<rh-tag color="cyan" variant="outline" icon="information">Cyan</rh-tag>
-<rh-tag color="blue" variant="outline" icon="information">Blue</rh-tag>
-<rh-tag color="purple" variant="outline" icon="information">
-  Purple
-  <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
-    <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
-    </svg>
-</rh-tag>
-<rh-tag variant="outline" icon="information">Gray</rh-tag>
+<rh-tag variant="outline" icon="information-fill" color="red"    >Red</rh-tag>
+<rh-tag variant="outline" icon="information-fill" color="orange" >Orange</rh-tag>
+<rh-tag variant="outline" icon="information-fill" color="green"  >Green</rh-tag>
+<rh-tag variant="outline" icon="information-fill" color="cyan"   >Cyan</rh-tag>
+<rh-tag variant="outline" icon="information-fill" color="blue"   >Blue</rh-tag>
+<rh-tag variant="outline" icon="information-fill" color="purple" >Purple</rh-tag>
+<rh-tag variant="outline" icon="information-fill" color="gray"   >Gray</rh-tag>
 
 <script type="module">
   import '@rhds/elements/rh-tag/rh-tag.js';
diff --git a/elements/rh-tag/demo/outline.html b/elements/rh-tag/demo/outline.html
index 1a8f706314..1dbc10193f 100644
--- a/elements/rh-tag/demo/outline.html
+++ b/elements/rh-tag/demo/outline.html
@@ -4,7 +4,7 @@
 <rh-tag variant="outline" color="cyan">Cyan</rh-tag>
 <rh-tag variant="outline" color="blue">Blue</rh-tag>
 <rh-tag variant="outline" color="purple">Purple</rh-tag>
-<rh-tag variant="outline">Gray</rh-tag>
+<rh-tag variant="outline" color="gray">Gray</rh-tag>
 
 <script type="module">
   import '@rhds/elements/rh-tag/rh-tag.js';
diff --git a/elements/rh-tag/rh-tag.css b/elements/rh-tag/rh-tag.css
index 0ae40c9763..d49927fb51 100644
--- a/elements/rh-tag/rh-tag.css
+++ b/elements/rh-tag/rh-tag.css
@@ -1,5 +1,6 @@
-:host {
-  display: contents;
+a {
+  color: inherit;
+  text-decoration: underline;
 }
 
 #container {
@@ -11,110 +12,274 @@
     var(--rh-tag-padding-inline-end, var(--rh-space-md, 8px))
     var(--rh-tag-padding-block-end, var(--rh-space-xs, 4px))
     var(--rh-tag-padding-inline-start, var(--rh-space-md, 8px));
+  gap: var(--rh-space-xs);
   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);
+  font-weight: var(--rh-font-weight-body-text-regular, 400);
   font-size: var(--rh-font-size-body-text-sm, 0.875rem);
-  background-color: var(--_background-color, var(--rh-color-surface-lighter, #f2f2f2));
+  line-height: var(--rh-line-height-body-text, 1.5);
+  background-color: var(--_fill-color, var(--rh-color-surface-lighter, #f2f2f2));
   border: 0;
   border-radius: var(--rh-border-radius-pill, 64px);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
-  color: var(--_content-color, var(--rh-color-text-primary-on-light, #151515));
+  color: var(--_text-color, var(--rh-color-text-primary));
   border-width: 0;
 
+  --rh-icon-size: var(--rh-size-icon-01, 16px);
   --_icon-color: currentcolor;
-}
 
-#container:before {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  content: '';
-  border-radius: var(--rh-border-radius-pill, 64px);
-  border:
-    var(--rh-border-width-sm, 1px)
-    solid
-    var(--_before-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7));
-}
+  &:before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+    border-radius: var(--rh-border-radius-pill, 64px);
+    border:
+      var(--rh-border-width-sm, 1px)
+      solid
+      var(--_border-color, var(--rh-color-border-subtle));
 
-#container.outline {
-  --_background-color: var(--rh-color-surface-lightest, #ffffff);
-  --_before-border-color: #d2d2d2;
-}
+    &:hover {
+      border-width: var(--rh-border-width-md, 2px);
+    }
+  }
 
-#container.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);
-  --_icon-color: var(--rh-color-text-primary-on-dark, #ffffff);
-}
+  &.compact {
+    font-size: var(--rh-font-size-body-text-xs, 0.75rem);
+    padding:
+      var(--rh-tag-padding-block-start, 0)
+      var(--rh-tag-padding-inline-end, var(--rh-space-md, 8px))
+      var(--rh-tag-padding-block-end, 0)
+      var(--rh-tag-padding-inline-start, var(--rh-space-md, 8px));
+  }
 
-.blue {
-  --_content-color: var(--rh-color-blue-70, #003366);
-  --_background-color: var(--rh-color-blue-10, #e0f0ff);
-  --_before-border-color: var(--rh-color-blue-20, #b9dafc);
-  --_icon-color: var(--rh-color-accent-base-on-light, #0066cc);
-}
+  &.red {
+    --_fill-color: var(--rh-color-red-10, #fce3e3);
+    --_border-color: var(--rh-color-red-60, #a60000);
+    --_icon-color: var(--rh-color-red-60, #a60000);
+    --_text-color: var(--rh-color-red-70, #5f0000);
 
-.blue.outline {
-  --_content-color: var(--rh-color-blue-50, #0066cc);
-}
+    &.outline {
+      --_text-color: var(--rh-color-red-60, #a60000);
+    }
 
-.cyan {
-  --_content-color: var(--rh-color-teal-70, #004d4d);
-  --_background-color: var(--rh-color-teal-10, #daf2f2);
-  --_before-border-color: var(--rh-color-teal-30, #9ad8d8);
-  --_icon-color: var(--rh-color-teal-50, #37a3a3);
-}
+    &.on.dark {
+      --_fill-color: var(--rh-color-red-70, #5f0000);
+      --_border-color: var(--rh-color-red-50, #ee0000);
+      --_icon-color: var(--rh-color-red-30, #f9a8a8);
+      --_text-color: var(--rh-color-red-10, #fce3e3);
 
-.cyan.outline {
-  --_content-color: var(--rh-color-teal-60, #147878);
-}
+      &.outline {
+        --_icon-color: var(--rh-color-red-20, #fbc5c5);
+        --_text-color: var(--rh-color-red-30, #f9a8a8);
+      }
+    }
+  }
 
-.green {
-  --_content-color: var(--rh-color-green-70, #204d00);
-  --_background-color: var(--rh-color-green-10, #e9f7df);
-  --_before-border-color: var(--rh-color-green-30, #afdc8f);
-  --_icon-color: var(--rh-color-green-60, #3d7317);
-}
+  &.red-orange {
+    --_fill-color: var(--rh-color-red-orange-10, #ffe3d9);
+    --_border-color: var(--rh-color-red-orange-60, #b1380b);
+    --_icon-color: var(--rh-color-red-orange-60, #b1380b);
+    --_text-color: var(--rh-color-red-orange-70, #731f00);
 
-.green.outline {
-  --_content-color: var(--rh-color-green-60, #3d7317);
-}
+    &.outline {
+      --_text-color: var(--rh-color-red-orange-60, #b1380b);
+    }
 
-.orange {
-  --_content-color: var(--rh-color-orange-70, #732e00);
-  --_background-color: var(--rh-color-orange-10, #ffe8cc);
-  --_before-border-color: var(--rh-color-orange-30, #f8ae54);
-  --_icon-color: var(--rh-color-orange-40, #f5921b);
-}
+    &.on.dark {
+      --_fill-color: var(--rh-color-red-orange-70, #731f00);
+      --_border-color: var(--rh-color-red-orange-50, #f0561d);
+      --_icon-color: var(--rh-color-red-orange-30, #f89b78);
+      --_text-color: var(--rh-color-red-orange-10, #ffe3d9);
 
-.orange.outline {
-  --_content-color: var(--rh-color-orange-60, #9e4a06);
-}
+      &.outline {
+        --_icon-color: var(--rh-color-red-orange-20, #fbbea8);
+        --_text-color: var(--rh-color-red-orange-30, #f89b78);
+      }
+    }
+  }
 
-.purple {
-  --_content-color: var(--rh-color-purple-70, #21134d);
-  --_background-color: var(--rh-color-purple-10, #ece6ff);
-  --_before-border-color: var(--rh-color-purple-20, #d0c5f4);
-  --_icon-color: var(--rh-color-purple-60, #3d2785);
-}
+  &.orange {
+    --_fill-color: var(--rh-color-orange-10, #ffe8cc);
+    --_border-color: var(--rh-color-orange-60, #9e4a06);
+    --_icon-color: var(--rh-color-orange-60, #9e4a06);
+    --_text-color: var(--rh-color-orange-70, #732e00);
 
-.purple.outline {
-  --_content-color: var(--rh-color-purple-60, #3d2785);
-}
+    &.outline {
+      --_text-color: var(--rh-color-orange-60, #9e4a06);
+    }
 
-.red {
-  --_content-color: var(--rh-color-red-70, #5f0000);
-  --_background-color: var(--rh-color-red-10, #fce3e3);
-  --_before-border-color: var(--rh-color-red-60, #a60000);
-  --_icon-color: var(--rh-color-red-60, #a60000);
-}
+    &.on.dark {
+      --_fill-color: var(--rh-color-orange-70, #732e00);
+      --_border-color: var(--rh-color-orange-50, #ca6c0f);
+      --_icon-color: var(--rh-color-orange-30, #f8ae54);
+      --_text-color: var(--rh-color-orange-10, #ffe8cc);
+
+      &.outline {
+        --_icon-color: var(--rh-color-orange-20, #fccb8f);
+        --_text-color: var(--rh-color-orange-30, #f8ae54);
+      }
+    }
+  }
+
+  &.yellow {
+    --_fill-color: var(--rh-color-yellow-10, #fff4cc);
+    --_border-color: var(--rh-color-yellow-60, #96640f);
+    --_icon-color: var(--rh-color-yellow-60, #96640f);
+    --_text-color: var(--rh-color-yellow-70, #73480b);
+
+    &.outline {
+      --_text-color: var(--rh-color-yellow-60, #96640f);
+    }
+
+    &.on.dark {
+      --_fill-color: var(--rh-color-yellow-70, #73480b);
+      --_border-color: var(--rh-color-yellow-50, #b98412);
+      --_icon-color: var(--rh-color-yellow-30, #ffcc17);
+      --_text-color: var(--rh-color-yellow-10, #fff4cc);
+
+      &.outline {
+        --_icon-color: var(--rh-color-yellow-20, #ffe072);
+        --_text-color: var(--rh-color-yellow-30, #ffcc17);
+      }
+    }
+  }
+
+  &.green {
+    --_fill-color: var(--rh-color-green-10, #e9f7df);
+    --_border-color: var(--rh-color-green-60, #3d7317);
+    --_icon-color: var(--rh-color-green-60, #3d7317);
+    --_text-color: var(--rh-color-green-70, #204d00);
 
-.red.outline {
-  --_content-color: var(--rh-color-red-60, #a60000);
+    &.outline {
+      --_text-color: var(--rh-color-green-60, #3d7317);
+    }
+
+    &.on.dark {
+      --_fill-color: var(--rh-color-green-70, #204d00);
+      --_border-color: var(--rh-color-green-50, #63993d);
+      --_icon-color: var(--rh-color-green-30, #afdc8f);
+      --_text-color: var(--rh-color-green-10, #e9f7df);
+
+      &.outline {
+        --_icon-color: var(--rh-color-green-20, #d1f1bb);
+        --_text-color: var(--rh-color-green-30, #afdc8f);
+      }
+    }
+  }
+
+  &.teal {
+    --_fill-color: var(--rh-color-teal-10, #daf2f2);
+    --_border-color: var(--rh-color-teal-60, #147878);
+    --_icon-color: var(--rh-color-teal-60, #147878);
+    --_text-color: var(--rh-color-teal-70, #004d4d);
+
+    &.outline {
+      --_text-color: var(--rh-color-teal-60, #147878);
+    }
+
+    &.on.dark {
+      --_fill-color: var(--rh-color-teal-70, #004d4d);
+      --_border-color: var(--rh-color-teal-50, #37a3a3);
+      --_icon-color: var(--rh-color-teal-30, #9ad8d8);
+      --_text-color: var(--rh-color-teal-10, #daf2f2);
+
+      &.outline {
+        --_icon-color: var(--rh-color-teal-20, #b9e5e5);
+        --_text-color: var(--rh-color-teal-30, #9ad8d8);
+      }
+    }
+  }
+
+  &.blue {
+    --_fill-color: var(--rh-color-blue-10, #e0f0ff);
+    --_border-color: var(--rh-color-blue-60, #004d99);
+    --_icon-color: var(--rh-color-blue-60, #004d99);
+    --_text-color: var(--rh-color-blue-70, #003366);
+
+    &.outline {
+      --_text-color: var(--rh-color-blue-60, #004d99);
+    }
+
+    &.on.dark {
+      --_fill-color: var(--rh-color-blue-70, #003366);
+      --_border-color: var(--rh-color-blue-50, #0066cc);
+      --_icon-color: var(--rh-color-blue-30, #92c5f9);
+      --_text-color: var(--rh-color-blue-10, #e0f0ff);
+
+      &.outline {
+        --_icon-color: var(--rh-color-blue-20, #b9dafc);
+        --_text-color: var(--rh-color-blue-30, #92c5f9);
+      }
+    }
+  }
+
+  &.purple {
+    --_fill-color: var(--rh-color-purple-10, #ece6ff);
+    --_border-color: var(--rh-color-purple-60, #3d2785);
+    --_icon-color: var(--rh-color-purple-60, #3d2785);
+    --_text-color: var(--rh-color-purple-70, #21134d);
+
+    &.outline {
+      --_text-color: var(--rh-color-purple-60, #3d2785);
+    }
+
+    &.on.dark {
+      --_fill-color: var(--rh-color-purple-70, #21134d);
+      --_border-color: var(--rh-color-purple-50, #5e40be);
+      --_icon-color: var(--rh-color-purple-30, #b6a6e9);
+      --_text-color: var(--rh-color-purple-10, #ece6ff);
+
+      &.outline {
+        --_icon-color: var(--rh-color-purple-20, #d0c5f4);
+        --_text-color: var(--rh-color-purple-30, #b6a6e9);
+      }
+    }
+  }
+
+  &.gray {
+    --_fill-color: var(--rh-color-gray-10, #f2f2f2);
+    --_border-color: var(--rh-color-gray-60, #4d4d4d);
+    --_icon-color: var(--rh-color-gray-60, #4d4d4d);
+    --_text-color: var(--rh-color-gray-70, #383838);
+
+    &.outline {
+      --_text-color: var(--rh-color-gray-60, #4d4d4d);
+    }
+
+    &.on.dark {
+      --_fill-color: var(--rh-color-gray-70, #383838);
+      --_border-color: var(--rh-color-gray-50, #707070);
+      --_icon-color: var(--rh-color-gray-30, #c7c7c7);
+      --_text-color: var(--rh-color-gray-10, #f2f2f2);
+
+      &.outline {
+        --_icon-color: var(--rh-color-gray-20, #e0e0e0);
+        --_text-color: var(--rh-color-gray-30, #c7c7c7);
+      }
+    }
+  }
+
+  &.outline {
+    --_fill-color: var(--rh-color-white, #ffffff);
+    --_border-color: var(--rh-color-gray-30, #c7c7c7);
+
+    &.on.dark {
+      --_fill-color: var(--rh-color-gray-95, #151515);
+      --_border-color: var(--rh-color-gray-50, #707070);
+    }
+  }
+
+  &.desaturated,
+  &.on.light.desaturated,
+  &.on.dark.desaturated {
+    --_fill-color: transparent;
+    --_border-color: var(--rh-color-text-primary);
+    --_icon-color: var(--rh-color-text-primary);
+    --_text-color: var(--rh-color-text-primary);
+  }
 }
 
 [part='icon'] {
@@ -136,3 +301,4 @@
   height: 1em;
   aspect-ratio: 1;
 }
+}
diff --git a/elements/rh-tag/rh-tag.ts b/elements/rh-tag/rh-tag.ts
index fdd45dc4e7..353c709b94 100644
--- a/elements/rh-tag/rh-tag.ts
+++ b/elements/rh-tag/rh-tag.ts
@@ -49,10 +49,26 @@ export class RhTag extends LitElement {
   @property({ attribute: 'icon-set' }) iconSet: IconSetName = 'ui';
 
   /** The variant of the label. */
-  @property() variant?: 'filled' | 'outline' = 'filled';
+  @property() variant?: 'filled' | 'outline' | 'desaturated' = 'filled';
+
+  /** The variant of the label. */
+  @property() size?: 'compact';
+
+  /** optional href for linked tag. */
+  @property() href?: string;
 
   /** The color of the label. */
-  @property() color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+  @property() color?:
+    | 'red'
+    | 'red-orange'
+    | 'orange'
+    | 'yellow'
+    | 'green'
+    | 'cyan' // deprecated
+    | 'teal'
+    | 'blue'
+    | 'purple'
+    | 'gray';
 
   @colorContextConsumer() private on?: ColorTheme;
 
@@ -60,19 +76,25 @@ export class RhTag extends LitElement {
   #slots = new SlotController(this, 'icon', null);
 
   override render() {
-    const { variant, color, icon, on = '' } = this;
+    const { icon, size, variant = 'filled', color = 'gray', on = 'light' } = this;
     const hasIcon = !!icon || this.#slots.hasSlotted('icon');
     return html`
       <span id="container"
             class="${classMap({
               hasIcon,
-              [on]: !!on,
-              [variant ?? '']: !!variant,
-              [color ?? '']: !!color })}">
+              compact: size === 'compact',
+              teal: color === 'cyan' || color === 'teal',
+              on: true,
+              [on]: true,
+              [variant]: true,
+              [color]: true })}">
         <slot name="icon" part="icon">
           <rh-icon ?hidden="${!icon}" icon="${ifDefined(icon)}" set="${this.iconSet}"></rh-icon>
-        </slot>
-        <slot id="text"></slot>
+        </slot>${!this.href ? html`
+        <slot id="text"></slot>` : html`
+        <a href="${this.href}">
+          <slot id="text"></slot>
+        </a>`}
       </span>
     `;
   }

From dbfcc9add9d188434cee52792917272d11dca722 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 12 Sep 2024 13:12:50 +0300
Subject: [PATCH 20/29] docs: tag

---
 .changeset/shy-taxis-knock.md | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 .changeset/shy-taxis-knock.md

diff --git a/.changeset/shy-taxis-knock.md b/.changeset/shy-taxis-knock.md
new file mode 100644
index 0000000000..9e97495827
--- /dev/null
+++ b/.changeset/shy-taxis-knock.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-tag>`: now supports color [theming](https://ux.redhat.com/theming/)

From de0ea8bc03287ec1faaf7391be968a3b0c4542fa Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 12 Sep 2024 13:21:17 +0300
Subject: [PATCH 21/29] fix(tag): spacing

---
 elements/rh-tag/rh-tag.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/rh-tag/rh-tag.css b/elements/rh-tag/rh-tag.css
index d49927fb51..c4179e85bb 100644
--- a/elements/rh-tag/rh-tag.css
+++ b/elements/rh-tag/rh-tag.css
@@ -12,7 +12,7 @@ a {
     var(--rh-tag-padding-inline-end, var(--rh-space-md, 8px))
     var(--rh-tag-padding-block-end, var(--rh-space-xs, 4px))
     var(--rh-tag-padding-inline-start, var(--rh-space-md, 8px));
-  gap: var(--rh-space-xs);
+  gap: var(--rh-space-xs, 4px);
   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);
   font-weight: var(--rh-font-weight-body-text-regular, 400);
   font-size: var(--rh-font-size-body-text-sm, 0.875rem);

From 52bdb40b6057cb919f4557f0e04f5a81527919b8 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 12 Sep 2024 13:22:29 +0300
Subject: [PATCH 22/29] fix(tag): spacing

---
 elements/rh-tag/rh-tag.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/elements/rh-tag/rh-tag.css b/elements/rh-tag/rh-tag.css
index c4179e85bb..5db122794c 100644
--- a/elements/rh-tag/rh-tag.css
+++ b/elements/rh-tag/rh-tag.css
@@ -287,7 +287,6 @@ a {
   pointer-events: none;
   font-size: 0.875rem;
   color: var(--_icon-color);
-  margin-inline-end: var(--rh-tag-margin-inline-end, var(--rh-space-xs, 4px));
 
   --rh-icon-size: 1em;
 }
@@ -301,4 +300,3 @@ a {
   height: 1em;
   aspect-ratio: 1;
 }
-}

From 911ab84a0931c4fd401f9e432f2f7e58ecacb920 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 12 Sep 2024 14:08:30 +0300
Subject: [PATCH 23/29] docs(tag): live samples

---
 docs/theming/color-palettes.md           |   6 +-
 elements/rh-tag/docs/10-style.md         | 108 +++++++++++++++++------
 elements/rh-tag/docs/tag-theme-dark.png  | Bin 2819 -> 0 bytes
 elements/rh-tag/docs/tag-theme-light.png | Bin 40743 -> 0 bytes
 elements/rh-tag/docs/tag-variants.png    | Bin 22445 -> 0 bytes
 5 files changed, 86 insertions(+), 28 deletions(-)
 delete mode 100644 elements/rh-tag/docs/tag-theme-dark.png
 delete mode 100644 elements/rh-tag/docs/tag-theme-light.png
 delete mode 100644 elements/rh-tag/docs/tag-variants.png

diff --git a/docs/theming/color-palettes.md b/docs/theming/color-palettes.md
index 39e91b8027..4af1f149a0 100644
--- a/docs/theming/color-palettes.md
+++ b/docs/theming/color-palettes.md
@@ -103,9 +103,9 @@ creating themable, responsive graphics.
        src="/assets/theming/illustrations-and-imagery.png">
 </uxdot-example>
 
-## Color consumers and theme tokens
+## Backgrounds and theme tokens
 
-### Color palette providers
+### Color palettes
 
 **Providers** define the **color palette** for themselves and their child 
 elements. There are six color palettes in RHDS:
@@ -131,7 +131,7 @@ use this HTML:
 A color palette provider is a **surface** on which a particular color palette is
 active, as well as a **container** for themable consumer elements.
 
-### Color consumers
+### Backgrounds
 
 Consumers are elements which automatically adapt to their background surface.
 Color **Consumers** adopt a **background** color based on the palette of the 
diff --git a/elements/rh-tag/docs/10-style.md b/elements/rh-tag/docs/10-style.md
index 8ff1a17894..91c86e4c47 100644
--- a/elements/rh-tag/docs/10-style.md
+++ b/elements/rh-tag/docs/10-style.md
@@ -1,15 +1,26 @@
+<style>
+  .tag-grid {
+    display: flex;
+    flex-direction: row;
+    gap: var(--rh-space-lg);
+    &.wide {
+      gap: var(--rh-space-3xl);
+    }
+  }
+</style>
+
 ## Style
 
 A tag is colored text on a pill background which may include an optional icon. A 
 tag background can be colored, white, or transparent and it always includes a 
 border.
 
-
 ### Anatomy
 
 <figure>
   <uxdot-example width-adjustment="554px">
-    <img src="{{ '../tag-anatomy.png' | url }}" alt="Anatomy of a tag with annotations; number 1 is pointing to the container, number 2 is pointing to the text label, and number 3 is pointing to an optional icon">
+    <img src="../tag-anatomy.png"
+         alt="Anatomy of a tag with annotations; number 1 is pointing to the container, number 2 is pointing to the text label, and number 3 is pointing to an optional icon">
   </uxdot-example>
   <figcaption>
     <ol>
@@ -20,35 +31,80 @@ border.
   </figcaption>
 </figure>
 
-
 ### Variants
 
-There are two available variants and the only difference is the background 
-colors. Both variants include an optional slot for displaying a small icon to 
-the left of the text label.
-
-<uxdot-example width-adjustment="585px">
-  <img src="{{ '../tag-variants.png' | url }}" alt="Tags with text describing each variant">
+There are three available variants, which affect the background and colors. Both 
+variants include an optional slot for displaying a small icon to the left of the 
+text label.
+
+<uxdot-example width-adjustment="585px"
+               aria-label="Tags with text describing each variant">
+  <div class="tag-grid wide">
+    <rh-tag color="teal">Filled</rh-tag>
+    <rh-tag variant="outline">Outline</rh-tag>
+    <rh-tag variant="desaturated">Desaturated</rh-tag>
+    <rh-tag icon="information-fill" color="teal">Filled</rh-tag>
+    <rh-tag icon="information-fill" variant="outline">Outline</rh-tag>
+    <rh-tag icon="information-fill" variant="desaturated">Desaturated</rh-tag>
+  </div>
 </uxdot-example>
 
+## Theming
 
-## Theme
-
-Both variants are available in the light theme. There is an unfilled white tag 
-available in the dark theme if necessary.
+Both variants are available on the light and dark [backgrounds](/theming/color-palettes/#backgrounds).
 
-
-### Light theme
+### Light Backgrounds
 
 <uxdot-example width-adjustment="404px">
-  <img src="{{ '../tag-theme-light.png' | url }}" alt="Light theme tag examples">
+  <div class="tag-grid">
+    <rh-tag color="red">Red</rh-tag>
+    <rh-tag color="red-orange">Red Orange</rh-tag>
+    <rh-tag color="orange">Orange</rh-tag>
+    <rh-tag color="yellow">Yellow</rh-tag>
+    <rh-tag color="green">Green</rh-tag>
+    <rh-tag color="teal">Teal</rh-tag>
+    <rh-tag color="blue">Blue</rh-tag>
+    <rh-tag color="purple">Purple</rh-tag>
+    <rh-tag color="gray">Gray</rh-tag>
+  </div>
+  <div class="tag-grid">
+    <rh-tag variant="outline" color="red">Red</rh-tag>
+    <rh-tag variant="outline" color="red-orange">Red Orange</rh-tag>
+    <rh-tag variant="outline" color="orange">Orange</rh-tag>
+    <rh-tag variant="outline" color="yellow">Yellow</rh-tag>
+    <rh-tag variant="outline" color="green">Green</rh-tag>
+    <rh-tag variant="outline" color="teal">Teal</rh-tag>
+    <rh-tag variant="outline" color="blue">Blue</rh-tag>
+    <rh-tag variant="outline" color="purple">Purple</rh-tag>
+    <rh-tag variant="outline" color="gray">Gray</rh-tag>
+  </div>
 </uxdot-example>
 
-
-### Dark theme
-
-<uxdot-example color-palette="darkest" width-adjustment="53px">
-  <img src="{{ '../tag-theme-dark.png' | url }}" alt="Dark theme tag examples">
+### Dark Backgrounds
+
+<uxdot-example width-adjustment="404px" color-palette="darkest">
+  <div class="tag-grid">
+    <rh-tag color="red">Red</rh-tag>
+    <rh-tag color="red-orange">Red Orange</rh-tag>
+    <rh-tag color="orange">Orange</rh-tag>
+    <rh-tag color="yellow">Yellow</rh-tag>
+    <rh-tag color="green">Green</rh-tag>
+    <rh-tag color="teal">Teal</rh-tag>
+    <rh-tag color="blue">Blue</rh-tag>
+    <rh-tag color="purple">Purple</rh-tag>
+    <rh-tag color="gray">Gray</rh-tag>
+  </div>
+  <div class="tag-grid">
+    <rh-tag variant="outline" color="red">Red</rh-tag>
+    <rh-tag variant="outline" color="red-orange">Red Orange</rh-tag>
+    <rh-tag variant="outline" color="orange">Orange</rh-tag>
+    <rh-tag variant="outline" color="yellow">Yellow</rh-tag>
+    <rh-tag variant="outline" color="green">Green</rh-tag>
+    <rh-tag variant="outline" color="teal">Teal</rh-tag>
+    <rh-tag variant="outline" color="blue">Blue</rh-tag>
+    <rh-tag variant="outline" color="purple">Purple</rh-tag>
+    <rh-tag variant="outline" color="gray">Gray</rh-tag>
+  </div>
 </uxdot-example>
 
 
@@ -57,18 +113,20 @@ available in the dark theme if necessary.
 Both variants have the same height and border radius.
 
 <uxdot-example width-adjustment="473px">
-  <img src="{{ '../tag-configuration.png' | url }}" alt="How a tag is constructed showing border radius, icon, and height details">
+  <img src="../tag-configuration.png"
+       alt="How a tag is constructed showing border radius, icon, and height details">
 </uxdot-example>
 
-
 ## Space
 
 <uxdot-example width-adjustment="404px">
-  <img src="{{ '../tag-space-theme-light.png' | url }}" alt="Light theme tag spacing within the element and when grouped">
+  <img src="../tag-space-theme-light.png"
+       alt="Light background tag spacing within the element and when grouped">
 </uxdot-example>
 
 <uxdot-example color-palette="darkest" width-adjustment="72px">
-  <img src="{{ '../tag-space-theme-dark.png' | url }}" alt="Dark theme tag spacing within the element">
+  <img src="../tag-space-theme-dark.png"
+       alt="Dark background tag spacing within the element">
 </uxdot-example>
 
 <rh-table>
diff --git a/elements/rh-tag/docs/tag-theme-dark.png b/elements/rh-tag/docs/tag-theme-dark.png
deleted file mode 100644
index 6137e44d3be6ce667494fb2bc68cdf3929c4e916..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2819
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
VO%w65&tCul002ovPDHLkV1gz`Tz&um

diff --git a/elements/rh-tag/docs/tag-theme-light.png b/elements/rh-tag/docs/tag-theme-light.png
deleted file mode 100644
index 606bfafd7a29a759371df9a8df9ae833f19040d7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 40743
zcmX`SWmw%#v^{*FP$(3);*{d<THM`T4({%*#ogWA9f}ty?rz2P;O?CB=XdXW-+V~&
zBy0BUOlD@!URjAyl$St4z(W8407z1jqRIfkC#sM0aQM$3`>%lMppOHLv#^vZ{Kw`4
zZxRjwkN~7ag;YKC&-CC7Fx8g3o3ez_l}VZfNebL0MNt(=gg^*TB@xOn)Y$NnDx#So
zG$b5?usbS!&_X4MUr5BfF5_o(s6fSMQ|=dJ7;_w}XLgBlH=B>Q7^BIYk3F9DQ=O05
zv<a{}ObMI}%SitJOh|i^Wjc54i4ix4l4S@7rQ)7MBdEv@j$FZ_hNZd_Yts?yT(df5
zX`NDdqjIS#ZzSV(WKyu_aMql9OYcbsMfG|&PYG0_OXG3Pc$PULWf@{lZ!lYH$2CbM
zc8L>v67qg=<W2*fDs;mrhmA#KWfR1Sn4~gSy<~N_kH@NH@4aUexb`t*t^;|hknyMX
z`j@<S%2B7WSK5%{YgTYIzG|CY!X5CchRa@h#*k3{7HlLp#A}mtSr`2%qnCH>ht{Xz
zrriZZ7Ml~02r|7CMRFZ@-4FE?%K$QqZ`8MHmigaUE)KPgDXoZlDln^y7$ixwdTAe>
zGGdK7*1KQo+kd&GThauJ%M-yp;X>4@hM-=&Fn#47aC)kq&EM8Lu<5lmCxG8j4qMJe
zZJFYs9SQ)tqw8H&2d}FVvyZ5EeC71Bu|B<>u=d~DcHTL7<_6%D4ex?s=@a78lmie$
zETk~@XP%pc`TSb9*5<^Q4BsR}Zuq7o$^_cgZo(K3QEDj4Yb0KU&mmYi49$Hf-$+jH
zp)@TJ)_>Y1La-p$a1CUz_jOuLim&#sEx$P$^>G5OM=l*^uZa0IO(*IS#qk$f8$}8p
zrolN*_zy_@{nvh2Xpr=~r2{Y->~AK61gdf^>k7rVU_S4M=0I4FSo+2-%dfiM>bDgX
z$5ZJiZ_-8qu(Rj_vRAjW5vt8)u5PItyzYr-v>K(#(|lFYqBT*p-0bCfuS%AEtVZ&=
zq<SX5oCd=n7o|_u%g5l*m_`N~n)6#$FXEVT1pL;S=JFVfce3uE0(vfghtyjg>&T_Z
zbtQE=B5&vtmvY(2$FVYx8cSnOiY^nYqcl2-y&Y2ahZB-rAYHOj5eh>n`qElIV%#p+
zniOO5YT7uA-Xw45FJi69YtGDo+B5|Xl;+->|Gqc&K?rOKYDVdwm(o^>HKqF@zr_Xx
z3Wr}jyuLvIfoyt}kY{6!rIDg_PZt_hFwk=+C{Mpm;m999M*P9SA)dh2wjw(?_~u{h
zldwZW(>Q0A&W(7&moLfTbp&?qd%IK|%n5dbgQHSjzB~|1w#?bO<!Y_+Hyj`OF_Zz+
zTS$_tW^jzAxlW8p6}i(cB&>8WY0X+z|AHPAE4v)IJYFp0hB8QY0uPZ;ity5^Bl}s*
z29{hLD|)Bp#i4-^tdI`~unE|@h!%ZsFRr3nT^rrs&wlfH;%s!6WERfVUiV@oBBo3r
zlGhj#!c;N}5}idue~`_M{sdcXVd*ljPGCv<6Y1ln`TRB}_!$vv(37C2t4pRc(L^qj
zD(k1vqTSfm#)yf6O-!u7L#VIbe0*#n{kIDb7x#;QNrpyJ5nU0Q8uKWyJ-0zQU=;Ii
zG>+E{SdrM{ax|6MsK=8aGoBjKUvEYE<MFJ(`;>Do7zzLGn$yl8QV~x=wN#5&Q7Iro
zw!$y|Ec>40z{;Z8)H-3Q#i`&%#PGbDVHXc{kyBROiF5BHta|d)CqK<*4M&5(G%KZ2
z??BNztj*h<Rnu9T9L(Fk@*7h<ZQr{0M-nN>@Sm?&vImg3PDb%94wg-HX>7ilu$+l0
z!L@^WWkvDr(!jU~j%rr5Ul^n>i7n}z<4cTqhD28lpndsWT)h9Nk&1>kFW=;rp9n3x
z-MjyY;~@&16QBFNVm+ELD~V>&AV{BZ%@Zk~c>jl%8oU!;@^f-65aAQXoT0D!yRn29
zB~JGc>?<F#{2+e#zMI9+pd@C5Xkj{h4AIt~ioJklw*Q6yv_Emj`xCyox~jEzav~iY
zE9N}F$ib0HN=iyaLxTVoW-%UfX9s7d>f|R@W!T`8QgD5bzbtcPpw__SkiEeZU})Q$
zq>1Zg@kZXz?9yD45ToVj!))C46jiNmXqv^RAaNq6_9LmOu{nKiHql_`HX_&V(<J%s
z!bz?#5MCq5UP;PGwd$Fw7Mo|g%y}Jaed8^wy*e-}Qn{Z@V2LrwhWIbMUAoQ4-f)?d
zypq%ye064#0tPyQ-+X++X~As?WbGYQRjSMM+{)^@>lqSp$I7C=vdN6S1GC8JkAYRG
zYA^QdDaQ-0nn6D{WGqS=$!#K=PcQi73t!`0|3Frhg;bWz>k`#Ld7pUWXY>6iziTU3
zR_oKK2nC?ae4V*kN9XG*lfqZinrV(PN!bH{bP1TH^v%)e9o^m2#!_hYwdmY0H%ne0
zFU!Q$P{p(Zni-4UO)&+97Jf-xK1KPk$;)?0{|L2)k{=mru{dw05EEsQEWqFLshS`D
z>tK^T-}8nhrxYQW>M<<a6G}jEjE!MUTwUyJY3tIOE7#(tmI)|MW_r%t6-Cq*d`w5L
zC4yGu&i|p8h`og@kwdWeP7Z-pXZ8ys{@e*N+6(5+k@;ciN`y?bh7g+)4^GJbOq%J5
zJ@Y+n&+QE9Y-B4)JVbun5~wZV?GI4~tM5Qe3kvKqf58kwB=_dj+#P3^931;DIy**9
zH*awsnlKV%oS0b>8N|d-;=v_P3ijql0_9d}RaZcV@-qq<=5)v?TpozW-8*J!V>7gx
z&3Sxx04l@4MSw_<Tz^^;_LkQ9Pxjk;RVlhFz2EddUDSPdP8$VSXC54VYQlhsRu`=d
zHY2ae7+mL{>T%VDaF3Yzg#)xz2hEH+8E-<RZIO?6BMCq39336M!J!WYio+Qc(yNqy
z4NfM=tDzzaNM=MpK{3yV_BYfYbWaEl4(_e1vyTOjq2&Woo(%Lg5eGci)hfxBf$hRH
z7V=X1yb0X2Wx&h2Qs0n1$qgvw^d}VqdarjbVpJ(i0m%mjr-)Ff#O-9vbl%2pW@mLG
zVqnz=H1N+{w@Df|ERSDMo&EK!%*+0xrZMHRQw=4S#)r{3yu)hU@SimwNJ|qrcmL@J
z*b_+JRNiBs#G^LFA6|<Vr>L8QlKwI3QELdZx#{Ibr}P>Q_B>NS`^CG}B8?&h78v)C
zkW`NxY+xH)FNI~UGpfx^?s-o9VK+)%TK+YWTDGz8<xHzl@V!YubLd6Zqj#HFCy}q}
zq-1xBdi2&2Ff|r4v){}ZfLYzN(4En%TEAxi@gu%sNp@Wt8WMka7&_8smdcnM-I~y9
zcRGm7e8BqLBll=FnQ3}jX9E@4&l%YN#VtrL=VZAoRLD9?cj0fm5_hH(X+G~@HqYRW
zpJK~?K+tXp(-sUP5H<Ut(ve04S>YZ{DJgq1GziRBNbMM=k-$%pJ&#7JNm!NdK|R4a
zdwfMCvwu?VTHH~B7g;Vv6o(R9n(gTkWaQeA9fuz1TlAmBV$_|K=U^eJDg-Ri1u{5@
zGn?u1`TAdjkS*Yu-)BrrM)C}MVGn<DjnCwpQ>}v(Rz@Ro1ae=Zq{%+hKJiBgqH^Vb
z)JE-tVd~dH`#nhmsXIJ#|N5;`KevclgTabwhuMsCqA9!z_CHf0_UONQ+F7V7)N8aG
zVluz^*fZDZ_xNOdtIlt5QWJFR!VCt4{GhDAkSB}dPCMO*vZ8+>%?r(T-8g*f`~kW+
z0it!yhzm95yZT8eb2*X9tmQZ)H_1J}m;l?7TyZ7uD0C42=B-Lfxyu_~Bo~r#SNtFF
zB}a28XG12r<YbCHWcX$lI<1g_#2rjDKJy2Xx%5mZwKMYN#?WmyA%~WiTPdm0^!6Hr
z2&qBd=#*GCGI|m!Y))L@>HR@Hnt<`7keID!%dR?GVc{(2#A{?XM5ZK4YLaWhjqr=6
z3;2xxVJo8e`@y>tHF=Um3MOvlKmKs8O*+JX9hC(mVPi)&nBf66x4ems0^Cl8(VsZ4
zo@vx7O_pvk@00BR{T7P*^Qv;FR@2&2ASs;+AP;eNf}!-rF?T3LM#n1N?&aPX=j`R8
zMmQp?{k01RC691PTNQ*!Bp{C*=X)EK)Sr#vYtzNz2g61E`?@Fy^PzWWcJu!$zz>Em
zbN%9A)B#b8?+597d3$fY?G_h1$j3TprvWHK-^+q9$v0%&ZYCM!r4f!`E^#~&9gJRH
zO)FUcr@(gc(;*IJ2sdRMv4HxL7L<JSqZwX2x_Y7L7e!?jXXQp1Dyp85p@*GjhAjgN
z_Xu%`w>$;;M`#>aF+$(l0kYXsN&`pe*~s~hOyr3;ok;Kf1lV0<I*qyRbS_}yc(o6%
z0Oa3_%dao9*-MN0E(KKbSrSW(Pvf~h4ysa*M!WZjDLjW!5dWX<^49`ot}Qj14cjq_
z;okM{hjQ#2r^f+nEw_XI>jQ<j*-sAI8tgdh!ZzJqmoEpB>>G%uP41&U*VACsjJ^nz
zGFP=4dQwWy%Y*DoR4)eZji`v*$+u!3TsXzkT{#kB`O`|JBJrslOo?Lc?cKpB=?)x>
zqk@Z+QD6oDVS5DnZI6mqLBWg0!@FT8d!NlLJ;`aMm!4d=cZwJn@w-qq-EEcxl5#(y
zpdT)*@K0`zQ${XIPm?2`PC72?hF6Vv0^$grvHyT&dvG7HD@Rs@UmjMPYZ?ynH<Pnk
zTjAW)ltcstFuu@7(u}`g9CKeF!%gNm2D1bo=32x$0u@hK>;X)aro40LyNc;wqd@&o
zt|$8y5EAn0>H(6!Dy}%4M$_D*qu#P&?U)&YQnFGz_p4PVxi97rWbRdgKQU_7r!Yrk
zlyC?0ml;XuUh+|RW21ZdT3N|XUp-y?129Z;VZY~EEmc!<QMNa;()#HAb_h&NOicE~
zA|c=K&O**F#x(qT7<m=51dHX_Qmea`sJU_K(FQ1i_LZ*G$fXkh?>>d<FZU}D?Lvps
zDHSbW?qc_DEI3g&P=D$95Q|vs``~Gbf#jF*`+s-{Eey1{DAgCPFSB1tp!t%!eQqP;
z3NZ~APJ`P?eNGXuerczLyiNal&S|r!#X9bjxSpitj}(qPdc@h%++-NksG)7MGw%1%
zG$~XLBr5jo0(uTeC`n#>A$+)~W(D6;`|pLiF77DuPJ@wRS-Q{Q>Z80g0yWW|;E!Nb
z#)S@97di<=!E6nyl7P6~tkk$f<b0BrDC?XjHKJD{tQ6>IinWPtOWm34wSS&(uc*ad
zfw4x<*xiPOyKp*n*klMy+M7MFo?<2Wdnw&xPt>cPX1URM{<Zc-^nSh4vAG`r?BX`o
ztt>>I&2TYHY^)>T)mb{_$1>`HZdv-K3aQb|k@1g(<)yRGu(Rxi=-@N><8?+r;@1XS
z<ln}UXB3tGyA5#=8onA1pz`RAKS`kkbEA^df*l#_D3t<c=ZKmo?tka+z4Ly(rY^3?
zOQzfd0K}f<X%Tl4cGUxBS@gY}uo#X#P=d(b^kCHLRQ*e!lbdIgO2bg3#A@J+O1_R&
z=)>h&6^bkU4mS=jshwPw!sm0eVwOc0`$li6NBbLFx!dT0LA~%J{X4g}1R1h>6{gsj
z5I<6^fUwm1tN)x<=xwXk6+NPi@^DMdS)2IF$e>isVidcKp7ZgMC#;!jT{>4Tr=BjG
zzR^qJ#q^exgsBu!hBqv^G$cjJpoz<PMyPZ%h*FS9e+iF$9G{yTu)2fENOEfF2>%rc
zT2!uWI(Fq+JiWoKiH??yVB7y+AA$(|+dra7IzpuRhY9W&mF}rL0Th4Gx1^`4xq%9R
z82J!R*s;`pw*ya)DdJI=Qq}Uy!P<~zAr&^|MAcspG``Um9fZj*6-voJN&fdj!{$yr
zp4jN8{x0cgoY|zV+g>~|!@f^47>8;`UF@O?L63w*B9sg>f6~^KGUjSM%@q-W+;W(M
zyT3eBzA+Y34sp|i9ZBDBAC)?Yyy8M*PHp~4Ve?4G6z;<s>XQ#e9Y=&@hm4miB{%=_
zgv~FX#h@7C<n@^;<|W!_&X9k*jq7t}UvZ*3J(nYDu~MEqoUDLhdq%802R5aqA`=V6
z@HUsZtJgAB;J^B2jeOy>W5O9UQo>~SB3<Q9G9EXixTmd3y4YwJ`>q2neD4%Fo~k*;
z#K4j&`8TedQpsMvc$;&q)%###4(vC2#K0L_g>LXp8zGs{VT&vjS4jVMxd(Qc%3-<*
ze?@x)<v}>+dxya#S?&cuqW5s!9Nmg8Z%-?22=0yli)W>FLuG;nMpy%E?4|%!Fq8c(
zRU{stp^;D6SPH$_@l_ZK=u)rqIPd)xG*+YIB0w4>-T7Ow#OYxBwG33URFjeyrLyjG
zp82)EORR{>>h4#>HM`!qEX&bh4jd?NgRVcrwW+D)d!6(_xi%IGW|W2K+g50%LfVeY
z5%|a2?Yd9pN2XE?#$1rXAw^f@A8P!s8KAAG)auMLtu(Ge_nMu@rGm|7t=RWL=kkkI
zp79E|R{Ogrnu-+7BfbL+n+0jPx#9;j9kZ?TdD{D#?d>Ba^V+z-Jfp;w7LLDQ>{&0@
z=44%%c-we*aM^BlWw;sEnts^~OLy05O`jh|Rm#WF_Xw<1r(ZigYj-{}K|NF{qCyZ<
zO6mN$>629H&oV$3T$jb31<rkJS32rQWmI5P$Q7ORe)#(}v1G16X_@(+L<W#7lSDCJ
zQzAoOd0ax{zUuXosE2g?ODn(T-4xfC+Z$m}KwQlFQ%vC4zSfrFM(A_ln0a6s&0Ct}
z@82=#b+=)^4luh_4{C47e~yf=vS6%cZVOl}H7Zc?Fs$XzJ`)n%%^7&L*^{iUrau^}
zJ@I9BQvOEAl6EKBYAi2ItNf=nxtf93-g#6j@;O#N1lIYjKLk(``feW<;`I`a#<rWH
zfndVlHWGYzLppr9RW`1qgspa`oYE=1YFQpsWC@FF&InF9WYjTUm{+aPjOF*KV(h*X
zj-rcWoB$lS*`V{u&giJl%BWp9(H526q@W707Wh7cwwgU2J{L{7I5SEGs&pvDE$d*f
zJyzyJjpg8@^C5&~2Et<f_fT^sGD%@!rU9>)y%2d;vx)p;n?o&q^RTbD!p1|<-+3j6
zaR%KG@eNRjeoB6LH3K!*DSVygUX;(iKi60yHC+RpoGIvazJ-?n!i%_$16>>_@^m=<
z2qBch?mc1m#cRR0YnKdcAZ&vXjQH0S77KT`t)ophiMa1Eh(hk;owT&rML2WS*=BjT
zFSypm%3Zm5@;tS_-b}t|dxx3wcvT!_t}q9}kg!;8MREcCqn@*}wb%}SEQi$377xOO
zS$JAQ>HTH*@-b-<J1w;7Y>>hgaFu2!!NJFAA|iQH;*!&P`yN8@_bg!PrGn$mrQ5t*
z=>D^G^ZwkujLXZ76ptea29|h5T&jbta!)VKEG}DOkrt8uDLa}t15?VJIJenC4-=5A
z$S}5o5LL>{_B?6%ST7l!$(sfSKLQU}7}>1FYkYi1ad<;py1I_vQfOVa?<`*~_odc4
z?1=^7TD%W&Umo5cE9kH<3O6rAJk4;hRb)y%zjxCnN3nQuuO}8QHOKH`<u_Zc1&E_4
zFO|8_KQLoD*KQU9!3d?SX|+3Uq5_k7;l-B|u89b&f)R_OF67d)nJt=`ICGs>ehHk(
zog;mtKLh6WS2NkJa&TClkFNJ%I=r59(M`D@woDHmFJ--$x8{rJ?!nk>f)P<lnB8>R
zIIw7#ra1=|p+!ZWXbcpg3YlyXt+q0?oGYbr_*SuBi$am`(UbeaPk&`|ISN1DqOc@u
z#<uBqd$IY0-$=Eb$v+4bVG$9P(?Utf%bTGp?8?4copBi)S)w!=LCXgx6tCN?Iwbut
zPhxy*KOvz!KXDFCQA+!DX)NnSmgk<*Y>O`e{f`?e-4vjPs8FdMnvomB(mOFeO1nK#
z`-zHz;ui8U^`eP(Omc&3f|YJ0J)~~Q+LC{ucZHt(qc>g?&&lGyqAzx{vM-=cv2U1O
zC+r3=G1(T{n3L7=I0H$>ZuDex<b~p2)Lf6*=BuwUe5{K&Jvs~U=H}*2^O(mouOqJS
z#-0EjUs3xjbX7v-%aG}Lak~yjWri)!f|y;-AJi&O_2Sg0UxJ&1_%e%7kT+jZtV+rY
z@)N3Fyj@tvA>&io*GpDx1sqR7UTA>+Y-|+n4fSBSd947{wnTE!?c-*VMlL78>;`lI
z%iUfaNXUfj9yAk}YS2fId~Ux&`Q<c2zOIg^+)l6QgQKLK(vhDD3Bp%!{U;0e(So2^
zu-1#!OXuf}KgA2~r9M*DZ5IVj7j`apm-Z~@b2w%J{V0A9Xb67{T~p7RJ$eZyZcr+R
zyeTcOa*7iw%tYqrI)5uz!Ia2Mm$Es7@@;@g5Z|U8vu+4)C6Waw?Hr?AUSwMMQ5%a*
z&@fn!tKfTej7d>hWjTZW5*L8$dWf7EneBtd|M0EvrsHF_LD%c}<+`+(!aqc?*4|{8
zJ9WJ`OwGg;Uu&>w7>|yL`77q2ux!rZa02&9#&ft*`j2hk)1O>mtvh37%Q0dSk{z9(
zl08$WH9+rA|I+(_)PiU6PQ=1KvZ-@n31IBmU1DxyvG;~y&4O-=s@lRUYLkfw){5=c
zc5IpQwIfvEb4>fd?lbZH7&+p|z<gBCvn5{&wZ`}1`G;RN1=l}bsG}Bk)w0ToNa+g?
zYG8M#ZHkL|%N#J?j}vpuv)KJwH~wLU2Xbw7i)vL~=+0NiPD4D2eB0cZJz#U2onEH5
zGxvY`alxKtZS@ofO5W4xR90&}GBQvCBRd2iiAA)P`rniqinPFC%?>2`o6jkI=ho1x
zGR|vv<T4f)5U_+AjcWcR(9aUHcmE}axA`g!n5@bO$6CaBc*iF&&G&0#+M1b}0G1GG
z)UfF-?2f^d(5+=rQH*l_$I1{iX6yXGh(+a=UpV^vSfsh~3e?zSI$5No>Rgw2k;6x=
z-1REzhZ<?hES{>P!~y;Mc;Fk-weIt;NQBD~n>lyNe#rJw|HknEV>MNHkv`#Vh_^QL
zONm+^M4n#YlX&Lzzj$e?0BiZIDENEMEgzBGZNEDG?o1kkp2-SFgcTg1kC1&(Y#+>f
z;YzyyExhstyjiqaK%uHAyGA!{8{lA?+Zn|8W;u6HjtAbD^J!@+0Yp|FhJ11Os8Q9K
zh&09D$m~1`u}onmUjJM&EIF%vtG4jamL)6!>E8KpfA;S2lD5KXvZMJd?tG<PC_{Jl
zW&*l06NkgFjN3iKa_LFwnewpGJx6#=ee2QNNJCR%tE(5LLeJ0h;cf7}{{z|MP{s$W
zNYVmp{11|l&pmbxnK(9?kMNz}o1;adBhW%iha@I*nXTM2<3QlUp;|8uI{<>f;{3*D
zDZcx~{50YwCFC$>p3lM%j;b;<ZQ?R5tw{^~zcn9F1ocm8_E^wPW_6`%yW0o?YrLvv
zx+9kWipti7+q^ZF_@mX1`8Ns^YL`3_3oAr?UfaBK5?lTdzUSu%S9QXFmR5zbN%4k6
zLBM9_F#mp>DSE-x-^ViAtb4{*3q6G0ue~W5`dv@ynrq!wSbF?E>9yY>wJziee~*01
zE#ofsm3|x%Ji=r8ao;U(jXgj1_m?Z@@ThiMs#t-?#$Ar5dneSdcah6>3eE&)#hb)6
z7eXVx10roF4)UT2mn3#_p4^YcS+RZcs=m<Q%!+um$RK*%kz`ZI<|#1V`|xc%Hwoa0
zC?%j_a)DID?yU#g^5z4(dErU7?`9|JplnWxiTrm*{17(pDD}FXBJ6;@l?0bsB{VG-
z@6fKtONf^A8Lk5;XRAW~;Eo_XfsJf^&vQ8*?;EP~Cv!f+jovVHjNJ<Hjn9}f-Xx2b
z@!UY3y<q*H-jQ51E-z2tQKt(X<c+P?`r~pf7gIT^pF<w{#dDy&RAi{qO&52Kj4cM%
zfX53BA}%`<Uub}{7|T~B4|@8gG>c9|{zKpN4+;R=7Y-LcKPK^}^Oqsiv-~#ZG=CP8
zA;C3o9~4)c)r`X!4(lfBoG%xAT{3y^S6|w>I_Ff2qxE_mGq53GtQ-VBu@YTr+Jww#
z+xc9iX2^mckLNYlLg-n!;iUM&A+^8NCX=<Y{o1YZcZ3FP7zhSV>?~+zUbVqS%u2Bc
z&DHNgtWv!~JN068Wq5t3&Eoyy-sSkt-(_!8u2QL;qWemg_hg|liuq#l`ddm^P)#A>
zw71(wgb2^40&}MM&mqA~YzM=E4q9z3S5@biosegH`K+-AhX!XydVDLSI6$a<aL6+^
zz2HKp?b-<;gy1#wc)yM>y1g}!cL_sI`#IMMkf}^c5QJtn00&r%9fN0Txo0oLwGrhK
zE~M9)NUS=v6fDt1__z}0?;QN1xtGaqiTR?sDf=BNC9EGT0y9Vlu|<heeltgg{EA7y
z4?xe0mt<c@F8)iVS4&ET9|S2PDGqJ%EM>kw4NYN;ayviN%e+2NQ0<YW&SW;r?{nYT
zj<{|192VknIz;D-j3&+NSOnqbb=)}(A2sU!aPp~`Be?n%MtW&+dTx{Ik9-y{;sD|}
zyi)jW-407-t$tBTeF+xrp|_fej4@Wuv%Ahlase;Moj}xetp3rRKHK1U&<P1#7MZUt
zl<Eg-m#}U$|H-4iQKIV>sG?j=sV^aS=A7+`Zz>l0JXjV5XHZj9P5_y2>vQqgB0qVh
z;0oWKtVdWa;M*1>KrWgix#qOePFZual+|BsQom-!&L>#+&uHCSqeKZ&f_YKfT8_$W
zE|+I~@cX>?hmAk=<qr)CETsDrV6fUT0F%*_Abnf_wACwczS*7C;Q}fY6{TBz+RGh%
zup0YD(>z}&78MSKmh{4{oW#>hn&STYaNcY@jNHNExODP=S^&3myp6vEI;FC>H^Pw)
zmz&)n%ZVIIeBw^Gb8T`bHpkt+Hk}h)nUckCH_jY`?(TM(V<LwBSl<MnZ|=b^Hn-TQ
zCtHQNDgx5W5NoEx#DW132fXk<0yO!kkY;k$oHGK#aulcg#wwr_fl1-P4+$mJr}zES
zM&)l)2kM_priTc5XNc#`)5%#UmK!+&(D5<k^t6}M`45l$A9>k*IUX-}|5X@MTiiQI
zqPXX4ZM`K=F>Yutmc8z{A0HvTT5R53yI5?=H?}lMO!kSsI1Tau5CgJaci6gsI336a
z{ga=GQ)S2e@0fHGI1h)2U!wfJlEMw&DbJs(LnNI`dnC?*J|Syv2>B?VwiK18q(#u5
zr)u!IREA7SN_LDX=Bt9YMx7>Dhe7@_z4@0tPqGoDC0_vtx^{Zr4;p?ir)^kwQ%|4;
zbHzhF>R4ep+}G0not?w8-BJK+PpIz~352)pB-w5H@u~f*xTVjEq{gIud=|B+n`sK~
z#ALs+GHx`raxuJEll2J}p@<6(EGM&F7hGk{y-=?M&d#M3p}80-{rS?oHU~!F*g#cZ
zn)j}d54H#lZ$&M{ZiwyPdAh|fyZHmpY@4PQ1u)z)ho*>Q;<OK068noH!VMv4DfQ0z
zk6Y<5@?v$e@3QN|2PztK`15e6!I<){oz9R}BOJTwPsJ0&w;`)P@vT2mp-B>#hh`s(
zo}JVH>jSj;O!YI5>J|74fcel5csG^3Q)WVlfZ-6RzrUA(WuuaM+t|?YY^Z<;Px>)l
zcov%Aq%6rQujr7J_4ok53qb&lG5$|my!X#@AROai<!|9<d62uL{t`p28HZZvICX^V
zabib;Pv2B@K0+O0{sTK=C6GR^Qo`RS#}COY>sw?#-Cs{u$ISqubBn{LKCR5l{dOiR
zP6JZ4`)WaNzv-^o1Q<m&^HKY|gE80Q;cQ#$qCs5)nc0T8lvBR-Vt!xld)rFIC6~UC
zLVzNF))W5w*Z3K42kRFH{XA8jUfg=rfL($~Esk^^H~YjA6!oA17JPzKqW8QKOJH%`
z<00_K7onF>$e%D<n7Fqs61?t+oE6TIoL*jJ>JO)!lsanJj}iJNi0>yLse;`j9rmDK
z+^cb}(1T+fikTCD9_z+tX=jh%!G1fWBo7D~?$c1@c=dxinJeg^xV1f#S=rY4uHP=#
zq~3DeME<EFJ1ncBj#>*}a0kU5Y+>I2IxPT^ofg#ns~q#?kWNCENV?r0^3Lgcwvuom
z;#e;lf&MoehhoFo*n!PyUy?i}G7CdF7&rT0kFO4QtWK}ryT!{Ls6r2MKpb*Qtt<MO
zJv%d1jo0NE_5NfrihzIs9*xqeuT;@aTRfnU3jN7$OI#l5<miwG6gw#gb09dw1Bf>q
zn|e(q>{F$VNxh^0<{-X~Lxm>p<p;0d<G%HsbN_HKFnX#&t5+^Z{Ceco*Y|?JYD3^1
zS-}1HPoDo=B4@$ZP^miD=mj%D|H|m2$X`Qu2cO_T_T|L?c--|to!qX9PjBf-Wyg{_
zAwR8J6VocU53XGN=aSiKO8+zjdxOrGlWtWZYp$WvDWkrzMl+QMZ0>8CA-cVO(@AmS
zJ*5bW`kuB_IoyuvUMSz>>DQW7+&aEVmba)<^t^ZUdxIk3W$)MSRU&kUQ6Lg|eoV?x
zjC}fpvc?qC(gLB%0BJD=dpd0|yw_QR8`~vxjMPtV-b8cDx23ey7F7I#GV1nI%Geo!
z^J_pq#emuTwjt%J)|_N7MhymF{tq~}d1XM_w`lTQy(VZX4Mt#bAm1Bi0aWa6*TbRY
zf!0%Y4gS)MMw0+(Y;ANFPh7`6k-^PtKjnuqMfso5!cK!=pSW6Il@K+tQ!}%imdWMy
z2AhdEi=*>&<NLn$+@09>BEvbqH_qCFq7k&-Hy;J6VD>=?Db<ti^!zPj8x2_9W{ZVH
zimy+C5xQi;vfF<~Ar?dKDxkF-YiTkQc>^;o=h%rZmRkI4SN+pB9;6EnRVXo~-@`*2
z{`1*bD~l2?Aw^t#>wH>Q?Y&mSInrDSRZaNatG-mp6+BdExxb2Gw7Z{iUf%qjlk<k}
z^Wb|X@y(tEIH*(Q`F~oWku!eyZaWycZ&V0FF2T|PMd#2NG+3j`fRh?M^z=A_cJk9I
z8JdA1U<MQ}#$vqJK@(H2GkiPz<?KRDesm!AFTvJzjyn~g0>yW&t&E1+DVHEaD~7bQ
z=xDM?v#W@<KH!GgG7CY`st{Wimac>KPt<iFD&n+CHUCfop*nF@IKjm`t$KV^1baKF
zCmecbY^vgoGFDe*`$}RrF7MDsHi=&xj3YZ$U5bm7mtXGj&Uj4x;`%P{^#FRgdxjer
zng4OCosb3~cNpSq_IgLYsa4J8$A^3tRQ81}&hGTd;n%+Uan9qA*hQ0C77sjB{Ng=N
zrnYz8=gmFGBCTH;l;%#)x5}Gdx;<#j#)+1Es?iThIpSC1UwZ!WKB%w25lsiHs84uN
zCrYm`L00Pe`a$CaZHak{s{O72434hmj;T8o?O^bz7>mk19XV6h&35EH%+?8<DaR5*
zR%!2E!tc;pvH@dZ_BHvg;Ww(a+Nl&!0qnlD6syq1x<8#&(BKWW_d$B0K@W2B=PGuT
z8&6yj{Zl&PqcUn&m4S3b-Wcs}5Yj?k1HqfNPyQ3Ed4tOI^n%wRC#2(OteO^~G0#*!
z1Lcpqd9QaMksKb^LV(R(xk2!e2E~^D9a@hw>igkGQm_lIs_T)4d@tnly0h?tyLDE#
z?f>=VZ{w)X)-?Ys-Ev$hG&RG@2pZ;rtv7OG^C25nKAY7e^!<~CQ>hHOA#*zpo_H9i
z4asM!uOvKicv2gbzVR0;(?F1vx!Z-Xs;P9U(_k8a#mx0wJXZ6k`Pp+?_WUmp?q6BE
zX9BT+`scOmRRpfl6(Zv_2T=Wvi_fWm*(c1NhhAzJm#$Q^!S7Itm;zkSG3={I>zqag
zF}TnM%E*9&W~t?!g=)0A#>8Ku--qo>_X^4ZC9<ms%|5p9?d@r!_k8k%e3An%Ze*0^
zIBU`Mc59{LioYSinkN+~Y~1zZ?|h&?7Y0_3yW?!8Q@bv`hc4BIzC1Jmho_Ktv6j=a
z>59YPx)8m>hJly4n5wiU7^)(Y$<c&@wqb>$p5V<X7f6x>%8bstzUm7EkyOgAWU`7A
z4TD9aU1D^KbrMeiKsEMcslLRP;lTemog;JyF1+4XD*gCIASc<{!{>4cNapy;xPbih
z%~tVU3L*C8dK$-e_E<~%Wd}ve>XmgCJPz#rGu0~K%l^IF|M?$0X2e&IOY)A_ZRB?*
zQ&_%v5<Uqdrb41u`LmLS@cOSOnV#;CBkeyHAVob-7H*~Yh@7<BBDPk<&ms@EvxpUX
zw-aOTGT^6B?Apw@jW;LEMl!9S<?L3-Cegv&5v?oRID}SlJF*TV!02}=N3ACdrc&J4
ziZAc|x_zlW#r@A%vlk<w&aZQOb0`AEn*coAb;^<6-21&a$t-KBD)T9}m)yMIzXDh$
z;HhbTnJN~#AR56P%zAd`!*~q0o4HmAP0Gx!2fPiD?`*M+UqxxsE9l`nBmccD*V?8+
zT7ePjZyL*!&2f$`kf9|ZC1uYc<U%M$^PJtW<#F18#>)}h6MiE+HJVHLb@eF<jkLQ2
z7b4F0tt>gn8Mm<UrbosQ(z#`&_whv0zJ-oXU831D9JPL=zZK_F#y=eX*>3?iTnvG3
zHvCd~{>`Cw`o8%-&HfM^YlEMjFfvfdjYPF~ueB)UF1SZ@c`~q6|H5Dekj5Jw_Cp1b
z=YI7G#2ZU_znuO_cA1Sm1B~@;;8-Z8J*)OLVZJwbE0<c|a(Q%4b2cNk8W`L?yfS9m
zygCmjF4o5HntpIsf=WX|?=PkHht8P`niITO4H<vMaGR{*>MfHCEm95)2}&%IDHhdW
zseG=Sr}-qt(-=7`LXndmGyYDaC6T9_FAi-V@YxtS;(aUgF}3;Xqiw`+L^aakdRi_N
z{F&nUY=IgZrC+1G1S*obdndUDXE=IF^;1aTmruzwOiy7tocL^K3K$g1BaH_Ou5Vmk
zmNqxB#BIHYQ$+&i(*-Z(=S06>aDw$3Fr{+s4dei(duwWUqi~l2Ka`UE^m~`TX_)X(
zoXvT9oe%EE{iBELX96Y5@`=MzvG%?Y^DVa)Ni82G@sOCO&UY`t5SKY&B|7W1m&jee
zSWLBP=|i@*C)uuR{16iS5As033wJn|q93pB^Yybyp!<T*lFSU5TXSq`eYnSq;y;{T
ziZxy_pw}%3GZ%P)YI58C3hnKIE9v|Xr8b7(v+XI3&z-MmOZUl4X1l-HtFGJ&yLhEs
zcAv48T7{hT(R<2^_x)a;N;QXXyV~=g=@lcQVUodWSPBzD+gCTr_D(Y-FvsPpr14=~
zp;@_6@7D@VE8~lac-&7F`in1jr`7DA-#Pa>Et{=w74F>X+(9+D3YakS;+{b`=G_hs
zWTnpm`^l01{!b_s!X*<oz3foQrs4d~=SiW9Rr437;}c#C_xqjz^!fTfd~wO4E#Y3p
zwz8<U0eY?YlIt&oN-+=R1*SH<eml^7aMUJ;MFb&Unro%d$zpp$vw-4i(?$LOp4GHo
zu=IeSs@%9Y^8@(AaS1_Dljpa5%S21F=G*p3jkn9K8&}~k`Gr?8flQ`qjZ~$`E@&#K
zfzlcO;i=h1txKh04y~iItuOxNs86;eMP7F6jW)EK=0~j7uvBl%m--COCo;l5q#NxK
z%~{Fa#D^XeVt8p`<}a$8AESWLk4PSz({$+6pr;nVf<<k__(N?%5&v=MvDtF+`w43?
z`&@UfXlc_Ys&`&rd5L(AR@6UXo^)C*-jX8L%LeFktnAH4Cr9D%>7@?la)1Mz2@PVS
zfl$*(ZY0{yA>t>3QKp5H0G)2X_m>4=6(A%K@e_Qlu)Q>I44wvEU^ZH~1Mqhx-=~DF
z`iOhgP&Na3t*oD(jnJ9j!ZX&Cp%7HN`T^A4nM6E-5AYFLYYXtwxOFtDO`eA#hf^g{
zF3;QFX;eyB<ix<4-71G{$w)xD!WLrxLQyrY4x{p%cX!Uo(`%Mzw+m5wdjH0FhO_lJ
zdD6$HjXa1%OnjJmxfVixvD7tBD7^I4#JNp0ez%{|w;*i&*vYU&RZ@3u?-NtVdP~kG
z{uqo4{k!v%wAGlJolm8>VY+q0`N*P6StY=9vGjc(l)}zDo$lTJu-k;`1|pybViclo
zEt-85+<}+elAkt-{By-1(n+z23E_%uCHP7%QAYWP#yIaQRC0<8_T26>tA*xv*xgG#
zrO8J05%K0DV+;XiK4$ORnM|=o#>!l=2O;gMX{y$q`Fc!@;fnp$jibG=8{Yg0m5oH-
zpu2gTU}XqB;oBCo55YJ6uUvD5PQr8iV6_EdZr5iRSBuRr_pFLX<R!Sb*Zy~JN++BZ
zI4w4B+31GM3%k2}$E!k<e<-Piyi<uK`Jzh_v`D$@FTZ&;4LbxMLEN2)yP0bQT5KPn
z>G2+m&61dX_oH5re33gZ-9eAsLed*JDp{GkA#n-DA8gY{I3XD|2FG`;{a{>~{VQCB
zAMZ7D6pRw@XD-s#W~auFJZako;6J%P8%<1b`E2MP$2OOq^>|T|D+yN~ne+FD=1L>_
z6q5_YK~$j9^|aJMrk0c@uNC)`V(O>p7?^LTL3%?#{`ZCAVO5nbhZ|;5#fh7(*7{?n
zvvaRShn62YtPdVB<fA}1$>*o4Jj)FM?+Qa(d+parRVOFeyr483K*$jY5By20XmJKK
zxn+v@lWVMhHq}2qRjXJ1!us{UuCTP!S^PnEe<&_ao$oum8XH&z2BYAzlf`KAu-$f&
zORZXHsEE(?Uip&_#G^hw8f=A?C2Ft_5I1~K=oIa}OMbP&c0jD3-|u}{U=+DtHmj9M
z=6cziPj9kq0*3`fwUEEB-Qbh*l`aHHCGEOaXXKfDgo`rh%Zhz9MCzheipp%KzCpu*
zQ0gOA&zyG0P&^53^uFuKmEYJ1IQIK@wDJSedgk*Eis=wTE8|UsvJhtfeRyTpd5+H{
zUqxSpEq+<I729Sr483QDAeCw8dkz+_m+g!ZjB_TwecC_qo2ljo#kcW-r%3|RCvH+?
zB)Y_2A(|p3^#&;;6pWg2dilJHlvH8Txp{AoWXepn4UBxk^0(DL!t!5CHH+4i0fTFj
zH=K3A0{!zuclTb1uTCnpJa<ewIii5tLc7(1Ej$1%`@+E(N}6u&*iWzho0ZY}@e8{u
z>|mklR1x}O&7}yG@8`L@>mRb8sdgmAzFN$aU<fJ&BHn8FZFn)Q53|82md4<V>p;N4
zW2trF(tV(L<T-uCx_R24nbK;Nfobu=coU=bT5p>lj!bNMP&09}V6$D?S89<z!m0|0
zyX@kKQi|W>%83B|5<l5b3`6W8)uk0tl)-Vk(j`cu3aYI7a3~>Ab8e#A3q16DI6ZKK
zrM<}zGo$W;A+$`|w%YtD39Pl>$9a@V-gu<F1@H*O|2$224}6@VB3lyn8FjlWi}@Yb
zqu`}|MV0Ahy<&+KvXpMEc=n?{CES#>YCwhlR`wn8*YKZyONP~iM=|1zQ|rq9V|x8J
zmPEq1quHuNR8ba|suwx{DR3=@8&Fc8w2#a7fX|oopWXybQs@16!(^+9o)Iv1VBL1S
znp@P+Zh*Kc^U&G(Nc6Kfyj(N>U`t80+i5)#T55BKRR>=%BGyZmzA{?LgY?y&PEu|2
zqvzG?cE~VtWK^Q=(yEX0tG$79;3K2M$Nvs6yZzL}m&#3PS!=N_bMgPgp<z|FV}SoE
ztMZ+s(dj^%eB*>3Uao?k9*&$cpnps+yT|qJSV?Sf9PO62ET^Ua-`M*eytFzX1X0}W
za#K$UL1ava21g>M<Er<zJ0sm*nwANxj#whDz~BF6)c|3sa9O`>Pp6fp*Zp>+-6Dow
zQu^JDZ&b%`y%Ud|<k5B~#Cae72d<SER{qs(qwJL$YX24<XN<n@57sc!GAPz+drBVI
z+`-cU@gIrtJ*3UdfP;(kEVgD1Z-icVorvxFMvWNl`(to7uM4hHQdInzX(F#i4JUb!
z5qy3<*>!v_qhbsX5~iQ5+a#(WuE3kxT9Yv%yLT<UV5Ee6X@6}TU-#qe89^MYOF#=0
z=7ssNJ5Z6PpOw2C67|XX-9|5eVG!oAZVQMYwauYGA^(FPoc8|AH>t-hBgI^$G5MQd
z3$3o}Q%cSLWO$o7a!I_%_q%EZTADO51g)VkL)eB<k<$IjI3EY4k5FvGzk+2vH8SDO
z{XTj357OKU#z4DWu0K`Bc}s@~N*}qw@w&J+43xrd9i0*T$9sP+JQg4^dI-J2p^Z!#
zV#pO(Xr&3T_xQw;38!S4zSyPtE(J)wD_UEDkMvsNxcaG&&x)8(Gw1SDM>#8MO6P)$
zEWkHLCS(&Ex!k~-R<W0lQZ7r4WA&KrNaLs{^z;~9>}Zz-pyICb(4q+{94OUOiBnQ6
zo%@tOQHG8@s!JmRI9QmaT^P2<PGLBewdMIXta3cFXX({ydr{T)(d`U7n?s^`C4{&Z
zt!MI03^V_+sh=1zB{qacHUL7@eup9xR#HVUJA$<wp1BC4)w;gbUu|^-CSVEf_%;5#
zS#2_(PdF|U!g7Q?eB|8p2-Y-PSx80BFAu@1^8Fc1gDjWo!B&D>v^%JTLeX#=`%+Aw
zHL_0W+iZJYmNy#;i&(K74O*~UnbCFMONz~*I=e#4yn4)w%&spmqYg;K3BfzJdP=G>
zUup~-`nDgJ*HiRNte{Hzbwb3EQD-xKKH0eS?Vh&~e*lV(;Lqhs1ia9q%MsouMR63r
z5ahEj1%4vpbKCAi=F+UjB+PbytL~WIYQ><&_I_)U4~}D3V(FmhNvR=^pX?w(B@ZI<
z7o<cT&5uM7t1wa}AGnT33CHM9sa5zyWcQ^MnCrBIB{JIy?xnMJkEfsUoz<}P<z{z}
z2UF`>&7}m*#pp$5BltelSDXTV!Eago3cy$h#quHWYW%3#WwMPTnAW)P=RfL?)mj(T
z!V0SP<Km>^*2`y0O^p2U%SiZLsI!>{gw%F=v?zm|G@!a9h&Ppi9C-F^D(vnuc`yp?
z+E!u<s;k(RdBnLE?g~9*lA?C-2Hov$uGF8|-Biwj2`My4LkRjm>zbRhq0;N7wP>c*
zC{Boq48Jz=mwXdFvkQ3Di}womVHEX6kdnDC&Aa9C6LI~%Vlm5KJGnXKt7N4e($q|A
z;+GE}h!qSurI>`z>;uU?MW(C870nn3MfJSQCij@d%~q5F<ahnHCu=S|YC?R;_hF@_
zZtJLm5&qfb#U3dxZi>oX6E&`h8!ICpEvS3Hu@TK9EvtXzMgA4gDwx8=skXy?5IJ9_
ziN{4oCR$-%$YBhS{)&mtE#0pM!eP*rB;;`!Ve4h73rXqt3WeDM0mD=HJZ`w(Ju#D7
zY?s#my5X3i>zYKhmeMFk1CXOq*WHfaUx>9}XXrBxeGBLp*L^!w<oSIuE&GNB&LKtn
zX+pJVJs&C#c__}0Zoo*wD;Sj~q&sK-pn#@&c@r;c!70x+Mc+AW)YUqVk@keVW+vLG
zfq7@AZY&Q8tc1hdJwFt~eif0}^17CR@)+4qw3X1}${BGiyZqzCyEtJ1dtW>?y9GZe
z<Py&ez%+^BUQg6#p&)JoOc6B93*)@lX{rj1JjQn<B~<_5X<PVwo2}+pemuVP%+|Z2
z=Pig`^2P)=6?j5ix?{i!>t&Xlcbdcc&8D-R8ugQ7k9S0)>IS#gz-IE$-qHQ2Z+M@0
z81{BTv}ga1(F-qGqDyXm!32Px|4dl?lU!ZC`A4vP4}V?ol0+=A8x`2P7~znkt?DV?
z_f-G#YUgwzwK;T`aA{2);6!}_z2WZ@2YV|n0Q^sp00$Rh>UXFyRJcfnH2tH^IN*H?
zeBP!+a*L@<y*`6LS2)zFlE#25i<ot{sL>41(mw#DY9{0lRC`>5ZuGkS3X7xWX;f=8
zy?EASb?Br>m$2&!uas@AdDgJVg%^T1c|%MyN_$#gRTE0XlOYac#(RLBU%k~67wS_V
zK$Ge$0ku~*m$8N_sP*t__F{0sVztryy+%LzUf$BpRdMakH*P9yGhZN0wx~453ZJ*j
z$@ky?Xd4zN>!$U|CvT<$a~fHCJCYMei=_KLB{P3Yom+C1INm@378V#cf%Qie0tz=z
zLu&ci{0A{+G6|)6bZ&87p3msD+n@PvJcn37#ac*-IvVVl&#3k|hpVME<V{0R%4yJj
zLK)Laa15FjR(qbQrXIL9Ci@8{ol`;Cn^={>8VRxE%6}?#8@ytf0U@SAS`5FD4j+mA
zMlw$`2;o95?@_blzDhoEbLB*pByn#<|6nE%V=mhegvmQ?A_-#Eh93We&*)H&Em=D_
zxc@>@%4Q6OfMb{)%R{OA)6ojvDu2OO**CjtSRrJ#zfQlXKn7c7KESU1MEYCyyJZ<e
zG3>L2^oU!f0ZEwGtp;%Za=tW+p0%q@oPG|9+2~kf@W?^4mM3dx`*#dRw<}9X;!<q3
zHZC?i(;-pyU-tS=VgxD*#UrA+!usv9)x;qY#@wO`<FL6B=dyAR%<9y)4sscX1Ps9)
z;RM1=b&<OvEhs8WQ?&U9-a5dTJ#E@dzk-0`euV$mUDCu1a^B|<JQS>YU*1-;MBKv{
ziaK{&u{L|%63g4vx!ashd}F($xQNvdBq%*-OY+K-8Ou_wJ<6vgar<t4gvCT`;_^c*
zzYdpk(r)PbzI%RstHl(G??{oRo=7cWN+_0dX?rRCkui$r?`3iRlg+GFXTy+m&!RsX
zE8#i!J#41O&AO|pr&%yvkEC+}we$aGZ=Ln7H&*zy5%LK-9*IF$0x{yXCzrFMbPz^f
z=OKKMasfxW2Jjb5F?Wo02vct`BB|3aV}{Dk&Yc{N1+HB*_>fv)1I81*2f42j0i7`~
zBKM|QIgRdTL|zHm-(1EYKO<Q%x}meS(vMjC!R|kwJ$?UBd4NN665~G?%%4^vSL!U&
zL14EcZ&NW`3MBnX*6d0nbn6M7KPmoB^jYQ<DBL>|u4n?XzWABF6sCm&#x@7aDu#9D
zQ>aFI*nt6zsh&1W&wfu~h)r}0zu)5M@4(r_<@!hte^Py|8ih6Fjo<zidCVFA|Dvtw
z1cOyxDUkvXjS91YAUG=Ew64O|cAUcPNwd>D2Kjt5M+WmDPKmgbTL@lEO#WA*jX>x!
zlXpIBKhDGs_MFly(H@C}VY6wz9R@QvMZae|xZ+w3m732f#~&ImS@q*FO9EZ4g1)e3
zQ4X)llT*eFcH}?pS3~bi$ZU}aY1}bU6fDy}pl)qA;r$#Ulbtzk>4KptCY=|G9ruQ$
zYZ9XSNrwQK{QgXb?(!Hq(Nu2g^dD=}qpm16gTonzOgxFehs!Mmpy7|mD3Q$hDUuLQ
zG41xsLYzVxPj&=t5r!EijuKo%#izB(HT8L-4a?&;kP5fFFrKYpo<_mVfoONBLeWxP
z8Rf-Br&Eew7E8+8);CdCowl)s#T4V=*(ogAQLJZ|;GVajlQQbv!3xuA%vQTYI`YYh
zY~dJ7_!~1?j|!9m8qbugb2)8|d91}JFFNj@=4)J-1ku5}>aMWGY*sh2Jo!$SQ}hU%
zZ<M~T&%+hNlW$h!o*L7c1UVn0<Q3VgonDX2H+!fs-cT@9IP~YS-}|-Bt}0Efo4ph=
z!d8}wz~-NKTnopRmybbFETa<jIsMIJSLe?DiehkI3(LyH2(n_>okH_?DW5K+=Uoy9
z^IN;Z{r|K8^{9PmP5jCTa{L>GE!1_9PO)PGeH?+S2>Mo(s^oP%C3x{sF_zK}CoSNA
z?XjgIPU%=pzY||X9h5T{>?=h%7lwM*U$(F_-}lV_E^cLH_qfcVeB>a9FYH5pZ(H6T
zaUHQ2qPmN@MNCDn-DRr&8u&73{_m%x#Si)MM%dDNov~;6J9#}7qQD^(k36rQ8Qz>Y
zu6|bY1KE@H|Hs~2Ma2<xeZRN{A0W8HAi-UO4DRkuuq3#<1$TE35<IvD9h~6q?(X(Y
zo_DQtE}r+|T%L<>^<{T;^^{EQ+WWtM)tRe`#Qu$=F*XGXsDyO22WicTJO+;jF%@w)
zoXD`U`7I=Ia`mbLXyLT9@vJ0G;7f9&J5^BdJEnDd1n7)dc#gzjVi7pH@ZMi>j4Ozd
z@B)pw_KRF-i@`BVL<*%FGwu^dBO(@-I;;(AqjJ+?Abd4M+B(Hu<vzjQ%~;Eeryilj
zAi4&FVpw)=7m)zbWPRc@o$pEd=f62x4OKMEQ_9<N+352Cb=Y2CDV2F9(<PjH+lfQb
za5LxV-ja&*oUdv5j}^qO!F1mtQ@DcPwr}>Hujv_RndSU@jz2f$s~wO({ZUDqphGK^
z#my<gc07AlI&Q>)rC{c^w#|GFo5FcRPOsc3eiGHVDpwW9z`~tQYL6-lGL2fFAnua&
zd9jQqZObTxB1S-LRBEDVb{|K0a^<GHDg9sv(XaY!nZ^{BxM-o!m!I}+vd(<gk(?Jh
zSJ^jIu%1h}@s2owLSgi{J?D+phOTHa`j+vwdwjT)<U#yWYsy3Nat|~1(CXLvOlU?W
zEV-Mzq55w$->WCLmx~pJhwtujRx$RJYmc^Vn1;X9P8{jTb7~R2$3Xv~D^<DO=!V_8
zsUuSnh=>Gz`3jk%2>kjTIU0SwAv2x>8O&Kf`|nMm%z^!p=Oco6dzq}YZ?qEfX}vuz
z26bvQBSV_j4|HJ6{7V(+VVD=z;q5V=vM0KM(3|NsCLX9=7%}<ZMn{s^=1i6+YoOiQ
z#FWNwudZyb&@CpKFXd2l>LGJ=LI^!BnofMKQOyTbzx<;Oo)LFYrsYf=YX>Z(JNWBN
z3LS^)78EL`nz2AZNd&GpX^!4zJ1eI_KYsH;?M@X9Iio(#r2WLB>=>z`{iaANbNzgP
zhJ)#wB)RBW0Aqz#EY_hD{i}eZWap%;aM&d+YkZ^7yLj07@&-9%u&U8tIOw8V7;T5U
zmn93bgrl-`hS=Qk1DQOusue!HE+x7(=mI=1nMgiE_fbD^Qf}q<^8t^X^t&9>g+F))
zG3N+{1LM$+if2@E9%X^%RTJ4i6wN<{r1ticLgLQe*|Q^E`F6s&`4V}&glg3)IQ`72
z_QJ~v-5Q0opR6WhMHd|n>YNOF`oAT)XYW4mgg}hHy1|D<SD$H^uODMf(NUaKM!#v<
z8Fhzl!0|ht*&h|R3$~M^>LpkCOHY`)8%i|0c%0El=nBgs8c(gQFU0x@haRWP>vN{`
zkcBWdD0?3Xf=JIuWsC0<@nZ|M&EQ<OMn03?@u<U25Px~UJh#~39o10pY@eK$<RVOj
zg&KKev^<<CPLwr2C~H-kcAQb36id+iHgGqI4Yez)4qWx{jyxt|3ht``y~NsFp<*@=
zYoN8+M~@E1DmEaBol+^oIbf*k%?!9mHH$ra6nzXfRZ-QW8l4uAPZw*b3txMAm^Zp%
zMxk@uKDx4;uTXg#FaM<55JBtn+8|cohtL4UZ@L{7D+Euv?OB8~Q=uB-N-C^x47JNU
zmpGzr%ld|oUaAJBd=t+|twT?RK`e%82L6P^HIv|sf#*3bl1kWvqdez7wpXQ@c@NI^
z#IA)u%97}cWFNZzfI=Z_wwM<s<n+y<RR6P4;4+P%J~bI|M=T7wCzY7maeJC<o9-OO
z&bxS=|Grji5>`XZ=Mzp$a&mZx&`|2irPS)M--$hGLSXI%mDryP_hqpu>#LIhcQ`36
z@X!D?e$4{w{bZd2lH~=9SS<MOv*e%wo%ijrb5mC=jSQ=$%grbS^s_)_{+zpW{t|Uh
zJ7h6FDIF$gW!;8qC4KGqlII^v9x5Tj#fK-C$Igc*3h>koXAAzqudd`Rt;K%1PUX~o
zuSY(FJO^II86821*{a2zo~seg`%mKhJ}2d>rBmZ;2o1(R%=N1K<5<pC;to`J!8Fz;
zzqu1Y1JF<r>=W$wy|9_0dyT9TsbKNLxL?D+qK{+Md)?S@4hft~kC{r`Y6G=&p%U-j
z{;kzH9#s0f*;K6hBf&DyG!%=zXDfV55o7e7_rgFHh>hT0nD25t=ZtC-xgtsF;s)R@
z9kurUgkU0AU9dq_(t%AeHiCivVUHiEkI|o$Lge2wp9}Bri1m4QQR{i?5BxR9>eW-(
zbUn%-J0Mb7?5k`(VG)b{k|x+~JwIh*RGPIaAMd4?eF?t5hKQIMMkZ0CqnyiHtONQ_
z6{&!tTxcvSY96uGRMHm37y|4QWd|bxblPG8x8hBrIm-W3imec8X%vES7A^V<V7*=+
zEwbU0DJ18E&<PsT+y4+21r7A}L7+DpOP2*>oXd4&N9tK0EmZQLkqIHI#O!}!=E%Bh
z!QLX9c8mNnnG^TP89w4m#Yas@_OmBKdr}ivp_oPZnRNtWK2$qgp3py;?oso*oUq#b
z>ihX33u9cS_=*r)q`3N=2D*q^Z3>2fP98qbKBk<ogDJNyk1L~n2|ECzF3QcM5j2EK
zVj^}=Wbp9S`5Y!C(*|{4%j!0WIrFM2VM@hEPCV2gEA%g(jr!Wfh1pdPb2_1(2^%xx
zsg6@dPHJOdvNNmx@gDJ?!BLCczn7@sY1}09KkOg(5$X@WI}&ElKn+hmhXO^(ln8aU
zkIxs^DF1^*A*1Z=Mqda%G?rBORj>Hv-7nOjGne~&5k%p^?wc~(%e*yG$}L!@L{>LJ
zS<HUgkalB;8Xx}=lL3*c*hF}$z0UTR$2?~8Uau<NXW=<iGB`7ekkLb<y%|xq)Sx;7
zCqH7!MqQb!Q>|YqpnvQXl()pd7Ic((akk=Jb(tLemx$60!^#Lmq3LFHwA1PIEV(ae
z*pL|2N)s%2A|Ub#Hk;oMM1cQ+GlQ#7@!{YNkQ*m)iXhL4r2OC=v%{p{nW9;}E;<h-
zJu|Rz6q3?;)2-)I<_MZb88e8I&XaJKoig>gW3tBj2V8lkuw+^o(ENFHD=&9lNB!Bv
ztMYN3^yw<G>tL-Cso(o-H>+&-`t~4bvBUb4FVFMq`X?CWX5~Vbsi7|lFVQh1%~4__
zmqnn<KHXa(`aB~iPnS}olwK}6|ALsHf11)<i0G6Eipj>wv9V<Cl<4muJ@k$a&2d2o
zUk6pHqHWD2kirZhm;deGOq^<eFbU#=>AqEFnsm>xSTv5&t<kqz8i0F(WXdp1b&hHc
zRsAz{35h#&YK#LY*($hWwrakzmG}{q2PNFSUGGnnuwaeNnT{>CIF(?pvXx|u_!*Wx
z2Od9ey-BHU50(Na#%=Wpk{3Ia^H+5V=LK6_&ID<HOI-b7&Ng5cw_y@^IXDxNP%Zzs
zBe8R*qjAfeWm$W}+<*Z|`X&ZR5iNT*khhipU~JlJobVPbabE3k2`W(O@2L0E@viq`
z^p0=0(Z|>&ls^7myi(>3nrLrTXq?}zXRh+v+`2R8QK1=fLeV-8P_l6`ccD-uLWPwI
z1?OrtWGqUiMfrTz=om>jG&t(O0(C#+4<r){l_jX*nzfnFILMoJd0=cK20t9-aE0Nv
zTooE1mh3R2P-((8+mBf6x{`SN9X^3*GE^&7T^#+z3`CpMZ<$d6R-+G0jN{pAdzVWa
zo-<?QtF~uOPO|f}0&WMwNKsiw{bfciDvw(;6-(OYW?0bcLHvwpQ5C-(F$8S9*UQ7!
zYIf{Jc{DmA_x+quIlp+PoSIAyKkNMr{xMu2DPdwYDZRTjDCOc$N<=gr;UydvRuE~z
zQ-=LVZONHMEyqaXd<&*@56^1U{r#2VO64Sx+m)rdgdJBtvLNkBo-eysFz(|F<z-+*
z3XPs-2q7QW@l&!rgH|_}hT?+iz4r}yhS<dVPn4W6#f?}#1&#AMbI;TzGJk+Yj>Uzs
zO@piW1Rg1=qC8;V=9J5JuIOs_+BI9_Tnk?1P_>v{%Ha2Px1c>nmt;|9@}CDgCtbo@
zW}1%3>SPq<8DK<oWaP_Deo#WRZ8r<tp5Rx*>`VZb3}U9>CpwU%X%1yrg-RIBd9kF*
z=akfJUG!vWTiseBxx2Db1KXZ3-+BRar%udGjzz`$G)OjaeEc!(5cZ>hTZZ-IWuc@>
zeS+qlgP(5CI%v!%<jKRiF6Lii>9(Crb^I#?yi`~EJ`0RMTWBW{6rx%FS}^+fZLq)8
zjUBx%WvrHHa3!H<0lRj(<?+dd54l25;^Nh)T4%c84U&}UZfhZ-Qpdn;_;D=7&S#*B
zgTgbgDT*V*!tZ@}9Pc)k5Y%l;qg7p!IAtETx6HA(A01Umotx{!zGt|QS|C@_AkUQ|
z4ZHiKnE(O@5Q0P_lA^>S(@^A75qS1IDlR|9IM?W33Y8MD)9vv|G$?!{78Ua(c!B4F
z_11!g2<>ITed2(S_uA+Nkczy|K|3#t!i~9<UeUmAzfb|U{D%Our5zA}hUG~wt!n62
z)zigF7DJiWvA@+oy)wl^mbk^|Zf1#YBaP23C!G!w?!Aqs(9T)@SEOlzF-FNQfNm1U
z1ALv6ebx6)KEn7m5ebYad)v_kenLQ3Z)TJeg*#pC>?liR_<OBdNLSYmJJsW{)pcs3
z67i0r1}OfVov^p3R6utX)3`S7u>~RVnC}V<EfoMgHiLRll&5Bd7bokZ|D}|Zg9s2k
zus}noM!HWKS(F1)J)^0cOLRZf^`cwsG7g5&{SzUX<*+~-0O<IHiANWonvaXMD&sdB
z2@nO`mn8_2TB3F0Vj2<}vdW}W0q8AuH&qwWTQAmpQ@IGqw+s{2b{+`En(4Gvvblz#
zF3E>0;(l9gKisw&S?^NIeiE*Czx|RZbM|vVnan433;m~6uwI;3LM=;~3Ses3MUE?p
z_}i!&A=|D_KVSMM%uIkB9T{zjs9u6s!lfeQ8JPq<FL!BXK6~-2C9N!4K9WGnYrnU2
z1}cM1q_;-#H&+wec+7`|9Lf*IGG{W90;MW|uTvvy%&rL?1Dv4ho-amD&qT2oL%V~0
zJGYC0D~VCBp4g!HT?Q`mp|x&L)sE2ylYwhgs?XuEiNF(YM~U79$TN*HL?Gxg{W=~s
zzR9W1k&$Buk`zdq4)9j_XQA<Th-_EB(?C$wSI03ub67})CB=GAjd6s-WX<iF8@tSK
z=%=b`TaK^p<8s2V!H@QG22c9n$DeVnxMhZt9Z>%xYNt)K%Qlcx(Ex^PK)vs72H6Ac
zNeY3$FuoM$pZy|s>VVFxN(Y;HQoz_u|8>1J+b*;Cs}^oY8tZyZJ;q==<t*d6cXod?
zq@u9*#v;emd`s2;+{Igo4wSxab+~6fI*ck=R&H;_I5hsQ4;y0p3()wp$TdKI*hPt{
zY{lZ@RYB#(w8xtZUjX|f%`;YSnF0RiD9fW(n&h?*s~Q^r?#(WFmImQ9Vtv#1LnZnw
zBXbIK&gns{E!#2@*Psq!p&k8wVyB{Xo55w9q8b`9bh460b&Wqm@c5`;O<!gpyNaXH
z!g%UZx00cPe61MgcC-2xOMm~#ai3V!Vdx_uUE(({+ge<$dQba68518TiSo|Z3@r@j
z#}@+KHX8zx#jece@5sMAYx^AeVr6IQ6a)xg?%W-n{0iD~wO*yYR-0i(5`+<Cx$r8y
z64bghdIY7E36oTLEemkt;CUT;umH4YVw${0S^3y|e1TJVy0?$3RboEBOwQLLdT<h#
zMf|_KDWA0B4h+QO#N=JP*jbylQ+SmId&K0aJF%U@=CLj<B?&w21XBS$M5B0S$dXy@
zv?vLR0R7ySQ)Ga;Lr8+?N-{s3pv7(MM^8m@<k<Wri|$rBKB0Qqw0%fuwL!*_zl-(N
z7Y5~^Zt5e?URI4d+q@`SgTud93Rai*J=D)bb{gcfBWTq`a^4=v$J3cMKDB>mp7F!4
z$76{>Zd#RlA$KS+p~B<?BEzwWi9xWdrlxW=<&mihj|k>Q^X(|vkCT?RZHULAA|JX!
zts?YNl6S8QyDlxcRi;S%_0p?&`GoJ{U+{NE9*})Mp8SmUiOQlJ`XwLks6NK$WK#0t
z{<h^CJEDS5|8i-NCfZrxz_ht-G%RBD(#6C%qd-J9QSNW3q5N=14;<fdi|pOPA;A&1
z$U`?%jB)h67dU-I4}$Z=o$#;DVdVGn$`#f41;M=pid*n>0D8++467Om%Ma9f)jO`1
zwRp@DfRyoW#<jvDiV#gpvG*lL`A8d$jIv0GpT6wSj!LmrVA9K7N!fjyi-veS#^r2;
zgE3ViBn@?cf|u8^?-MgKIz(Kti?G`#8>WrFJ5c0amA<uMoI^>=m@E`XN!>YFwV^BA
z+1Z)?V!_&iOWu#jPa{CB<4Rve9x~m+OhrQhpCtj6^`KL}7hVg?`wwEJGj--)s1GO2
zHfN*hNIccLH4zHjfD5O<N~pO1tv-fhmdpC^ghzG&qTiPC2bfiUN#EwpK9+SZg;Bh?
z1mx31=N8-Kd|dAR$F7<T_#3@#fPzx=aaqe&AZEH%kz6Rc8=1R=@+<YwgesR(l+WD8
z@uct*wFjcGFQif#J1+Dzd(i=NdrB#*uhi{EDP<m}6@GV!Bf?1IjOVFP^aHwMbzleG
z`D~)H4Qd#t%Kxct`t|w#+26JV;*o?>jcSn71UvBK<C~k?2jW4mg_F$-4jnCgU38Pr
zK$O-2Lw<S(VU>Z}S6=!Lii*zX`9&^634pTr-R~(W0PeXV`3x{hON<D6vU7EbC#qsZ
z?EquxHk9HPdbQ?MYfX%#X=-I=F-=Ic4=3%IoM$`uqe#}7#(ZV|M$t!GL7Z4Kd&j*=
zWSYvzR~Fly|Gcu%mcHoGWmpO@)uEf8rYUN#8g*LDMGW3Bhfu0)bhW6RCE9d!RTmca
z&8Gx~d*;}rH=SARESF6uWK8U_@shLV;O()I(WQCh<WPu?a{*KBSH2FdsanwmBQk7r
zw2v;tL5Ym`iPNorDJkez#-<W_2888MtPKeev(EZw7b5xT`n8u!!EC%O-j8(|b0M;`
zGYZLoajwssI7!kd5sHrgz(B{Z%~=txt@yuO*mz}NYB^{s8Ogh-=m@g=;{kaI<mhyA
zG|J><qCD6~hAloqSNrau%HzQ!b1}i5u?LF(JeiwBMeiwt-*;#zpH;o9n;P7zwHAel
zK=VNnASPJiGPLCX5|d@_%}$e0F#k_TmBzacW1|aSd6vvG$Mar3%C(4WAE-+wtDCA>
zh&*^cD6@B;N=2_7%J$CT(8>N;)<NUmR2ds#JX|bnzn+<>=Q+76J~8S|g_0hd{`fcA
zfmn{lt$NaI$Ee@PXcx>c7Xx_S&H1Exov4uiR7{8%RzyuhvniAesd*f`y<cXPQJ|WA
zKDb*3h2kwDI$FU$e=yvWr0@ncJuwjD7Bg!`djvN)6oV?3XPwD$5)hNI5=cxt&o5&Q
zHYQg*9!}LC$TD0sSBwy{-Qkg>kgEGNmGo7}2gFH3*SkA^j>RR@?i<`Z7e4hl%*`?C
zeuQOQMlrU`Ue$Dq&G&*dF@=FwqW}e+lrkeBaWm>g2sUBap()HZoBBC7#yacd^(xXS
zL5&AjQC2LFJ(kKK+@`fP(EF6KfS&%xb}3}>mi8Z+IebeSA0KDw;-%wzjOC-R0~EG*
z#gWtAV>hZV8LE9PpeN??z^taLaw+IEN;ug`HOflNdg;wdk_Z=To)SE|SFu({1Zqf1
zs5#c@efOJCNeta2+|s2R8et*{O3N_vbx?FXI>)kCB^B|l82wEwN)N&2wY0V2FI%C&
zCOk_g@9NSWxw(X6)4bGeWtrDksz8B+WRl7E-uEJ|lYd|&HkX>ISj|JExkT&Cnhbq(
zetLh!)CH022Q1ZS!jd}|7lvGuGiCK>RO$nNf8I*&NU}fmSEUfPxE*z(H&M&gOeWX-
z5o=DB>Q(`CP?4IHZ~7CxaO_NX_cMz+h&xj-fC++B(ikTzhhuZYDKm6L!^aPg<j320
zMbFzYH81)Qmmv5)a`lfYrCt2qSS*d{B+`J%#PH3I%0UHOu+l?z46T@8o}Hzy&o5FG
ztk6)xAX@PtCFfXHSJww30dcIu+@D(=YzoOpS{Kha#LcVr{JhgmCWk<AbqUBpTLm%w
zWo-GR8*pz^#pAy|={0hC8jj(9HtBU7#-|O1f2c)!Z|W#1(QkFKER)|?+*zu#_o0?L
zS(Mu(;{Hbu-FY~k*U)3l=dH<8Yjq^-qu+UiKlrtUIJ5?8q}LO#qgRXM{Jv$zLHDe)
zb^jzaPf!0MNVD1o9Jws}gV%%I`X^BFaQN^sDT!t3(?-OsH`7$-j;d>M@f6L<(Bd3T
z$#nm@NkD0zwCBZxu#mhvIo-kb>}fj*;S>U%v#gdPx~$Bj?5zl-P=uml0^&^PFd#9|
zY*U)A86M_kEbSv7vjsFf`(i*+)qg4)@{`X&Bvia5gA_<;B#cw9-$9yD1?V#Ul{RmW
zDZsgPG(}-Gd6(wKUaJmNI2<18g#4bFbLttn_-q4<GU_{M;_Qg;Cg7|S)8TV7GwKLQ
zWeyZ}4w>*UC7LD@V9!VGzw`!tLP{te!Y;(*r*f{Yt||JMEv`NKdH}r-do$7!1%(9#
zJAD#;0JRtRIJ`79SuIJgG{MAT^=!*t9!-{EmE@^x0U30S@;C^pby#G39VP2`PZqX>
zWYU|&*`l~ZY2c%A@4$?ejO;sKc4UBzv<V@n?5syeopSM0Kp_M7Sp#)+AtMA6MJE!2
z7U2^faYNgZ!bcMp1>8TPtcn-r4oo=9Rl@ny%@Q|GV_Wnmkg_N9#+X;8jK4aO)i<Xd
z3_Jp+*14sgs1VQ4K$x^NnWiH;CW_&Tii(WkaKLaWhV@?e6O^H$HZfW8i~vJML_7f2
zn)-VQ=E3yDc38Q(vwd7vocL)DC5?6Hd0@{lq_7Ok)#v8b*vP`PK8aQWe7YdB1lLyq
z1WIpXQLIgc+gw!_;qB+h$wA|O#a|Rsv=w=5UureSQJiG`K}mS1)CqahjCpYBf`@A?
z@^S(2pkSU^5&1lD5Yt9I%PryHQ@k8Z#lj*EUy{79eRKJOlV+M4%sk^KW?ivY_5!Q9
z&KVKNA~GJ5(fgmWF2qHUPaXR${hk1=PA!0x%FEBskcz-k_}Bhl!A^xMFCrp2<TOiY
z`HkwEYX)DEG!iUffy|5#$}^D+vPKfnqqBdygdU~2XA>X2*4XyujK3o>eEmaRm=4IJ
z9D#mNzLG=Kyqbq-;=V)Cr16XAUE!%O_{&I26+<OMy$B2_<$J}VepxZ8?TZ$Nk`F{7
zVjZ$#MPTsEW`^1s@8ONjJbE{i-bI<TY7h-UOEdR21|7<=z)KIm7)h)dwHvYTX?cU;
zak-5XCPh$`Cll+0OW+xQqOWW@lLlcMT2ky2|ED$)Hs$UtwV8b#3&Vb0Y;y)ymD4ZW
zpJk4r{Bi9dz(}4Zz@MJ3y`8;41m+itd{#2G!M9k|&obI7-jmx9H|yNc6O_(e^Jf1Z
z20Dy;_k?u;6X>%0`Y4^3pRyR>laLNq=2w)=DT<!`1#jp-*pw#2l$tct(F?@bDQZ$V
z_*c^X<j~(;RWK4e=6jrYvh7l_oY=w{g8aBL|B2D-G0H%Hy#AiXlkggwTWL(nGy4u^
zO-bDMlR@d`5EA>AmM7|Rj3@J-Ap0EMK@IxIg%O3j-*mgt2Wi#?QtOj{G?R!Tzt2DK
z6{i>=luY{F*B+^6JqJW)S!W4ZTxwIcFez?+6qv^j=@?jl+;c!p0zWz{0A*S*^T{CE
zH*`aXwAddz@^Pd9s()ryJd2Kr{C~OfP9l*xkWl}(OFI%C?sF}kQkd`mb~g+u;v;Mi
z%zs~VX3$uowWLO2IsaV@;Dw6huX+;d&+1?EU)QbnXDGn&WynGJf8G0B+vE=g?Ds`N
zg8lE8YRCTj&i`BCe>G^0|NoDg^tq#z@Bh&P{NMg$LQ%duTRr|HqspU`vU(Bb`;zv;
z@itaMPDbFv8zC$xdnk_d9_6Pu58*7-1fFOat}g4o#%WDt&d=j+gZbCC+wXqoAEUnG
ze}6}P*J*kW_N!PHdE`2ea8Pa@5cPc+`RZS1Ig!Kt@elOF0mh&8wMVYBPYz_<tW`LH
zBBBs8XvHMl7H@_N<u@71@Rz+cttc|5Puk5B_;2`czwuB3{g05p;yLzKltwaBVnD^K
zlb4&^(}=l$pn<1|v$^lmL73*RWVux4Pm9aTiII_!SNh!C+&c#cY0H-N2bZ<AwMj`g
z?{`%&f)T$WNs$tuWRNiR1KZ%-=+9JFQ2ZR4QegTcaOYv*Ba$eK-5u!9NVCY16F!H1
z4om#wcOE3;%F{Na%l&(3<$N19A^m=B<=WMCe8uZ58eoQifIulINc{HpmJ2a83aZ~3
ziHK!XaA}z|&E|rGW_dNt@`vBz!TY?mcd>z8F5A@`bapQQ@15w_;<L74;hHKRW90S^
zw7{3o@<gueubW-*v<ewY60)jOxmK#CWoX}y1m!iuN-uJiu&}V`yJEm_7Ue79vZ_7Z
z>clw5-WKoFDf_!@)q!1t_N=bBD82)p<LvwN584A0j=7*kL`NxUAD_Lx5%NGW6Z4p~
zsEu9wdTOZ{VtU8@@oxre)3r;fEJi)c%L4r6Vpz$bq&qIv82r>Ehq%J7Tb;x@zne?d
zDIv-3_10RAi$oq@6yd7@u<9?hyMSWBZ#f?F{c<dUj@tv#QTh4#biCP&7Q;y@d`^4y
z6plUA{eoH)i7LR|NEwv&_Vxl{pC|KPYa@t>cB^k-Koj6oP{rA@5m&0nZQ^M0p0?3W
zZC?&)prF$Kw}CWEPGIFcmISZU0=3%VcCU6vcC7*p>ecaO_n-7Dv}*z3mGo?}%g(Vq
zEiMocUffitU|3i~rG5)L>JiRZ0u_4r-d7wt&AZre^!lr5+?PtC&+sB1+a()RcHT@4
z{1#-|!_#}|;E(NF)IcK_^fqgc7<pOQ6sGi@0@_yniHdWG0Lr)|p`%3P8@60(LY4#T
zgjDZUA@CV|C7e1Ph4SVo)_c(ad>}aEkju&6Fq5$xabvb18^kC2#>fF+$%flKCVHOc
z4Da~;n*#-p$;u#yb=oFZ&?B(PZvD!N449z0JQWXsN92G`m+l2V)5R0BBwFLXSil6w
zk0@VoOgZ53D|Ca!Vp1MChlS(#J`;{i<Fi!4g*2d>n3(Wb$*1nfD^ll{^G^59&81M&
zr%V<Bd9~+573Xb|UlTd)Iqw(%FVVMIg5zoziHPXKuNrH-)OSZo6V|3w#tSb`8^y_a
z%E_ffOpv{C6}!doM{Zkep{21gg(9z7`<!yG7Tqm&Tw<n8NLpY13E9YlPStPV!w4?H
z>s;|hNp3FoF%Ukt@2b6hPvb72{UXec>v9t}GVibWB_$<YuMB2voy7<((U=S*z_`+)
z*YrK$shCwpN1hs#q^Af}vzG==(2h3`zsV4HjaX>H`?ZjptndR~qOLQG$5k(ClS+1l
zV(Ty<^JMR6t5+^M&l}e)cY~CUI!x(mw)I0u0u_)t3%^5kP^t>KSW3m76+m#zYq%&f
z7oa9qsoE`)FKC<YfcwI<ZE0qya=|v|By%hX>2UlUhs|OcWyQb6v%7ndGR4q^E%{pm
z9510K)Ec+tmS>k9f|NiMbmUEKf~c|+G6Mg&FgfK5C5in^6B~FD4qi6sP~{7m&-=QQ
ze<72Xvc{^c^&)~6SZ;R;$yuGif;ny#L#<2^SDmjmO64D)=WshTfk#Az^zZclxBd;$
z;uMXCTO6YByqW|fcD}!j=wk1jOoNT7X&O^810Q#SgSumsDCr<?3x~4au>d|09rC7U
zrRZM>c=KT5=OCCUuT~7&<jT^n#rhEp!RI~*#Xm@SM?C~*rW$RY9+Pw08m$zds@?^F
zR=-`DFI`~6fjn&|dfX#&K61rFm^c^9T}JyY^s2>yB)6(ETJ5~-bLH@v9|)o{z{GSN
zi*@k#t*)TGlus%@=DtNa07BrdPegu$R7L}W8f}rUd_usMZhx+yu;88qr6exAikyZK
zN>)HBHM+Kd(kU2j>#xxcL5?x;q%}WZaWJ=Hr!f>au6{?lzm5}~i?4Tgk7JGBjoXiD
zVR50%OXkRXMBhkU365o4_&smJx*D~`h&S176Wj)0p`nO<Y4zJ5N<u~}^RQb+*^SS9
z%g&OodN}R4MSr$)GBP<$8K8wn;Vl8he{HnVUV*k&Jv^Jux|ZT`?|MhNw=Px&+Uoua
z)T(+|Y2Aumo^N+~g3JJb{dfxLqLV<LaqXyds&IqGqk&VcU3(y_$AXFZsClH37FW|l
z!=MY9l@r|k^0LyzUpmFCKauz>8|UX3baZs)6FDT1z@kJVtwMsgh?qiq->OXc$Nm_5
z2M0DA9HC53WYX!Mhc4eUi20N+=8fVzq%g=qSz{-+gcE;*Mn#nc1qCmjZf$>S-moL0
zXLQ;xH^G!>#fqA{hbi)~saRk2N}4n34k>FffQb&FZ5KrlSKj)k3Q;k!u_~@*)yU!b
zH4c9WyC6_DM7#Lq6C#&%m*}9r5lv)+YZNjsVo-t)d=DDBPhv>e+Ev6`v-RG5zt>!k
z*$3)hX4cQ6PTw8-LTPr~yrfSX-!-*N<_9Kf#%gnj#xn|gHLdjqoZjCq1stAE=Y4BZ
zEmaZmGZmygY#4Yzm;D+@Iq#Eq*!1aU${WH=Kq^QTX^lFs3_?KbX?EED(;Zx7mEkUf
zm1OB$%S<Di<PSM6L1q3E7681|5brjcrfuepf+}9xCa`w47LB1*6}FDATLa}G8N+EK
ztft70D2n{yLtls2{pb>Y2qlnqoBWYxVVy_{-y0+L7h-=bil%MQip3Eoa@mK_3XjXX
z!%ywL?gUEX=ReLlc#5RcQ8Zc=BzDKQ<EI8ZdmewD1oa7Oojrp^7BH^S$NTv1IeHW{
zP&K7m+HsXRr5tv~vM_QwN!<^8Fzyd0`0l5}o&X>_ok(NVW9z|G8b8z4IflIyfj41i
zzvC`n$e8S6epzf*r=KZ2aO;0z21>G|k-B?rZza<4p1*xWER&kC<o{`XIHkSbgi%NM
zNMefn$H$;Z|1uFt_SN(*Z9&kIDHS19s(Y1=*e~n4|5Pjg#s->~wSqMxDeASuZVV1o
z^&kybY=6mQwa_Zf<Si^I(G3<rYO3xUm=5*by07F<t#S8EY7veMS5V$*#h`wFid!+h
zIhf@2eyDj+d40Nt@Z8ao7`4ztP;h$+rDE-`_Y^Mo|K^K_MMX)_x8hgpw_t-J`qo7D
zdOp<-O!hIt3jx~xn&#93J5_16*Yo7yXo!jxlk<4K^G7?A<^2A#NnhI!u%0fsiYB5w
z9ZC3t9@ul-Atn*oFJ%5G!*p&k%$0_UXed4dwtwNOVS+If4z3i(<0NdrgD-EKX>C`E
zCv$k4kZFFJAl|s9Yi=Y7=YPddbEF?`@$~#$^-M>}0ORv^fUYEhVP4Y!PW!p7T&)e8
zt##`!Jv_6DvvGTdi(<(bxb9`=uYgiKDCxcYx#}U*FG}KZDA8eJ1eKsn=RD%vv%o2t
zfuCjn&nKQ6{RR}@?(PGX4*s{3d7e%=CG4(LDqn2TLtQ=`ZlCIBP&b`v((1eWk55`J
z@v9WL?R!blw<&8G$PxNoxio>QWnW0WMG73Va)aLQL<SmNnhrutP@-}T$XX1DE6<z~
z7a(2q>_3l7N*ZI=`G|0Kv$Zxki3QP>Nd3~RbT%EOE;j1&-2lQSCP7-Cc1Sp+{C*aY
zq{$g5CWV@vovkozH=UX1?egvtQQt1&ga98_vGaUL7wLO33R2GbOC&K)L|ywLZL`um
zm=wv1kKX>n>3Cp!c>VWA+$RzKPlBO0>5hGE^_HpkW)swuYyioV_5+wYwIWb$@U6f8
z{X}_Um&tSp+Td9l?1*OtZKcedJ4rXa@$p23=zjTXJiX7Jd#n~Z)K0{E@TmZ+)4K4^
zNEU%5UDUjs(N*A8@jfZ9beSQEajL{L2IqYR@#S=C-bKR$q7=nQX(r`Uv4W-PDI6%~
z;iH)H$3mLv@vXH=9;>@=Z1qQ~Q%B!39m#=?D~KO<q6j!@+%HXch7u8<4}3F&D5oz8
zO8m#N1@MCqF(l_IF8x@*JUPUE)e-nOfJwf!nInTA*nrqFwac%=0A9BPf7Rtiof)M)
z$k9LznI)=l77_ILCd|ZZ!Y$!r;*2V+)Y#vClK9IN|MX-zUMT2ncCtca-)9W@-en*)
ztR9i`*>0b}A&>ZeqHrFA)!4^Q!Y8I6bPPn<AXgiF=}&ywb+#GK(Df2HsFYiiJ7t%d
z{3($YKNn6inacMECg2D8xzcxctP8AA;MlKP$&Azn901>z8Bmn3bsx+1YkTw*Zk^dh
zGoj{vSv;(0{I;-tVg15DG*RRS;<;RVn^aRH!Mq6k68G$)+*vk|Ur!LBta8poPBa~W
zZ)l|eepq?PNFlPo8T#Di7}Na_I}nJ*1YvI5=K(ksDde>3t=hFE<NQ}GpIse%fgpZ%
zW$Dp?DU3R|bM#!lH@21te3s9{sfB(yl!2-|YoLAy{}%g&S0|2q0ebykuo+6MQ4b+L
z7vLYl{g_X0p9rJ0qg54V<XFj!R>(|5p-TnqkyTY@t4H*{C|lGN78%Ke(~5kjHpRLA
z0X|;yXwH2@gsvu~xQGtrU1PJP*r}fR(0_c7xo@>}O$4@o{==}tpn<xpixCq0%+;K`
z9Io}f1XIS^b{u}VK>iwfP_xLiz3Pj>*tFd9#Zxy;u-YuUFkP;#_|C6|kM}VZ;NOgh
z$_1NlgGM@D7V)tr-OXO+*}UufLukCb`?w&uh}mO?^4#>^on}ADZv;`cq*~H;f1%Wt
zMmfP25o|Ak-nBai-sNw*{*wv=n=QF?+*!}Cv4-m<oRoA-r=1LQ`gCVxz0v#g_Up&Y
z8bq=|TYRzwo|_rKT$VTWnZL35MbQuV_lBzh&zVw#dvR#}jwzpmuoZ%TNM>4BU7jM6
z5x04L<jFMxXWp;bJ23k%fsQvbx6sD6@cFjZ?Z@?rslFMM3@6vR{QX>5eT`Fm<@*lS
zg;OK!#Td&dQ1x9slmwrx^_M4>08RJ9AYORT1cB(|-1GM}Y{JwMK-nHpK@-tyir=Cz
z@I!-&niTpSwyY2D^B~FV@hr$^O5?1>7gp+Qg`zS^AZx0m<TX*LB7C2te<v)L0**%T
zisK}7^$)mo0s*A#y5=5QnM62O8Vvh1Gg>ekLh6h4-~g7}v6qkT&%Qcvz78qrUU0f5
zVfKPklc2*+)}JcW%>Qs;$i-2bmn=go<^6#MxF6$Xyd7a%P%w`%ZAQwbZS_8NEksxk
zjDi6*NL8H2#q7QyV*nVlaT|zmm9KY=7^|tMd111<SVGmyzS-M@VOL6|6;K>K&rOo!
zI41BFuuIZ~d^aLJ6;Si-!<jZ1%+K!EdbS;)PDrN6{o+S~T6}bMdw&g+HH-p#Jc&r3
z)7wPE0x9FF<8ZV~)QVk&brWTlKc`GspDs6n52s5eTU~4`3_F(UQPugL$1-`uzUH!-
zNseanU_ee~!7DRs`o1dmB_izo*HwjrhLyw4AQrKRFL6#zj{EHqE^i`($m*}QX(vbA
z=z2q8S0Z>E-Yt%FRsU^v2<hDKoz$l^T57gj1FcnfcH&zB7Jz5C;hM^FmqOHs0!61x
z7jt)M^>l@R0)s4qtfWBI7Gf#KOKx$fswz60phWi1cJ-bAfnGVEMI}3wQ~0QrlJB%g
zEaRUPvggb0S|MZc!-J`16-wj>f{6u~Ni1mU`ySTLC%cEBnag5W2d{V8o$4v<%98R_
zW5ZQ0I&JUw)r`;wyG8Q$W)EWSvT4c)XC{)p96(>-(AYYa?M8NL+l8B~XH7kwitj;N
zQy9{t>KnUWysVYTKAh_EPp#hUp`lBf*Kjyz@%SZ@T02QZ6<nafz}JV1J9v`k^zWM7
zrITKG46YBN&p+w1s=sDNUlY+r0H@~B$j2=hSL<^R{G9gx+RU5@knMJn;Mx+$h>@ht
z>R7oiOntEzbH_XtA*9k+a+dgu2d1=J!pFH++HLd;><Rj7qase>ZnW}^CVVTJk+15s
z+~`3>>VAEhN)ExY;?)<&v+7JDIUgp>y{I2Nh?GU_M*mcQPjL?Hw_*sdnF!BaEN(0e
zEsed=d`HbWWpM8M^VAzRAn8SeLrbmZ7F&Y2w7=y(HwhQw^AJcg##6CrRS%q}onzOS
zZ*G2;jauNulvm}Qjeh^qRWr+=im$dj#;#*Y#q+Wr8r<V?pnT;5P<-LUbBV;|_@XD3
zdrjhV`6i?B$8)}1Ce5$fsY23ee-jv=g#1a*_^D|<VmpRI=IL9@--epS<t6MP=RYI<
zP{BSgKws{QOi%5#-<A~)ZB^RgpKeTTaD5P2Yaf$k-Re?kxel3H%-J(>Uf**mg5U$#
z=5~IN8HG~7S@3H-XGm*w9pTl2!zXLun_4M>9O&-b`$C2vwZQ}<Z8j_{zSkh2e#yEx
z1%vg8aECe*z7#h7R>QdP3t>g5i~>KZ9)rgV#Y-Y@qoIn|%Wc=oVEW_(u#@<bEh+D%
z;|@=e*qsSUa^AOU(pR7J_5<n4o#?uXhH}2=_e#Bo2Vu9D-)qt3{w;anKPWcfmjz1^
znDr2oqlAHlx+nhVTf8#W;v$}>T-Kvh{y^fI*V+U2sw|&?GuUAqw#)wFX`{2U@)Z7P
zwAMQpP=jZ!(Mz9{vhbwvLfb7wP~r<Doz%8V%s^6eUr6=xiBA}RSigWQ0kyTXO+J5)
z=_T(q@!HRS7N}5Tu-;9XW`hq^ZtC=tX!jiZ8%m2qtE*YQ9=;7_;M1~xm5+J4JB@^D
z&8;gg!RN_h-vhOZ3&&LAuZrxCQhdA8^13_G;k0gXJ<T9zSUQ3DgsemZ5CsGTR(?+1
z{J>kAq6QW?s;9GC#KnAH8pxo)0_1kR<H5n*;B~MYeD+LcL8hhADh=$Wb5#BQR5vOm
zL8&mF6-KEH(UP)ZWdMhJ8K0gZI)Xq7h3$jERmE&LiXlZK!xn@OpAiUI0?TRIMf^xf
zr%R}UJ6{&$4}*I4LzNE|&}Y*NO$yb!M*zfzt9(Iz12cH@b9To>o;5szQj^hxLw*vf
z+WI2K%UXf=vqRXT^z)u+rBIrktI}8j(xTP8Y0}ai>UWCYf<B}>7N}2m0&am+((sw{
zt4_S^T}|XH7JBHC9o-`{8;M8}W_K_<(@GCt4p4TO4ML>@NO)VF?qX{x;iHYpoOPU4
zY;|_tQ_y}ackTv$)Hvmqx$)Qx3w@77bU$=e#Y_#0`<!wATQjhyXs0@07j9@9s8}3h
z7BB3i=rG=kqbD)67i%I~DstkM^c~L&a@fgZ{PJ7Nkpn?t(+8~78oM1fPatPiK`u90
zsqjncpoVN*<le4s;a5Yg;9x|liGG;Z_sT<tK@fbZ?8hl%z?Iq#B|Ad`CBZ!F``_vd
z-+d59N_45|!i~0?gZbXGNNWK2vC)*yxpGb|uE02B`=O&(+t-_ox3xzlOS9_R?0D*&
zRVpnB@xfA?)_Dj&s4Kv%H7bz&w51c4QHcrnomAbA7ervXc1IN0=3KFIu`ewtPKo;U
zt?LucB!b$>Oi*a4-0n`ge!F4a$HRInHNk_C-+$7``d+se+gkvuPgmT$tek*`FQXEW
zgIlECje;0@eIEIwzPuGYKm0-SQ$0LJdf{-#T(SkY#Ush8JSB{a+F|dz9zigL!Xh+d
z-LqicI;Wg9roDpo)l9C$0#8>-gP$uG+mUfdvLz9U+Utz2GYr9m`$C>LKQt`YOnc!)
zMB(Oq_XFG0O%q>(sev8yUdBRWMsY|V5{YSL<W<i+LrnV`@p<1iU{TCvg4)z%ySW=2
z^8cBeNTQdw$OH8%;J)6ccOV3D?fQX$6JNA!z5-JaXfv5-VUom<8$>oV7)D+6h}{VJ
z0^McxK<fGf?Z5)s^tj0(bQYmCmEZxKl2}1pu<L;a!YzG4q0J>$652@BR*#I5c|IiI
z`zI}KVWBAaKJqgIro9?w36svW*;Rq$q%HeRFGG`${m~4)Gr2V^k=EgsRcMQRa-MpH
zwn`G!o)uDJ3dW72WJcusYQhs#9WZyEGCo=<Y3Uh5Nc{a_I~J+f>jI*1oC$vZwp72_
zNc|9Amn#_^@#>gbZT4`nN%^f3;v&>;w$JZQ{TYETrQG++LcEtX<F_mvjnnlWu(YSO
zXj>xP<Vn@N%@#i`k2PRW>NX2?R9%UxWibyL2Dqah)}!VDlrORlz-QhdtnE<;<W$R=
z)4HUjVR9s<MfS;49mtgelTAhzyZkDy3z5>=3|hl}Cj7((kiI}pIx|IIf*M!_byfW(
z<`v}cKtufEij5WOt7k;i&h`MOIJU$c;bfp@ywGXSMG_&QJcaXk(78o>LY$43)BF4e
zil|W+&v1_USf5yk%|?p_F!T%cC<)i@^ZnK2<ZUKc@*@#MKU;pNeQV>871Q7%!6j<N
zKQ0nf5n?I@wbtPXt_mN!Sc_bfwGPiac_<4A`!IVXfPvc?-SOUjZuF;dvLTMPgUVBd
zdT3n5D<Y^fCVu*j&wC&0%bP&RlvUkikkLuK+^nsmmxH(<(-HgfOrv@X_ugs!&BX**
z%egGd!ysh}J@Pev(f$sjLg-qc9KSq7hhz^-_$IDR?pb*zHU_h9YBIl@R8^RB#^ZQx
ztbgAgD7uarkhjK^;d(#&?Ze^%{^9hOKR@4=;UDAVb<Jcc|EMjGV;|~gG+w^&SMW6i
z65@X89?wU-3DMbiaO}zT%DE{jl`^zxJ!m0sJV)!$j#0-Wc*Y@}9?9=|x)<kpN|>pa
z5pXjh<Qn-V!xDcN^Ren4&~>&P>yXs5JlsHh_ZPpQTn4WA%VrNR=NC?s$~E&iuU0^@
z%i~`+Xephixyr)(_6)>fWD&#6P9J4n9~+(2c1o0j5$uS(ELRM%Y!8fhFg@1_ZF12;
zif6w_XJ!4%X{{A6UzrEG{5RY-{kl&7Av7`{B$QM_*S4c*62G+{U3OvaR%Cp|jk?KP
zPFMgbI=vUcF6d%gYr8&rNT2rlll`*(Mm&UtC(K+~i3T#yC<O^@Q38qM(?t#eS?tRu
zTY*1n2ljj}mMfe#)Eo9lA_^_&whOZzmk_gPxy%PKcZQQud89irQ!iW7IS<&;8SG_D
zho}R4-mBG0Vx))IfAZi)-s|*D@TW%;@kqu_?1aESWg)nR7tCY~^p$WXXIdsWoGh?i
zpt_mK_l%stfpYuphf_xS!fQSASlLVh69QTnwOTzjEOEe6J9%0osZ=7!rv{~>MdqZ`
zXWo)64(Wqs7G+=RnK@FWbHJ(716^*;uppr4WRMS=Z0}SxLDJ9Im)!Ld_I#u7a6zsJ
z*zq;7!V;9gO4@VL0Grm4&Hg6Dl%^5jRL9fHEet_jUvP<rT6;#+tK2cG63bg;hng-j
zg<tHt-7k{guV7C~*&cf1Wd6gd4`AJlWkjuhO5lVYF?ieo4X*aERsH@gv4B&<OCDE+
zP)%O(+44Nv0Fa*+5~zb3$yw1{F}b3P6#IgWGWP{O3)RFRcWkmNf%J{9-)7{G!4|a9
zv>27xUmFLrRthPT=f6HlKMFep9>WpAtQPa`&8kKzpjAx?jNT=JxxavMO~9}B`w~r<
zK13El!O$nKuO%~uz6Tl{l9t7UyNhhjU314<((=FIjlxFOu%tGvEHh$66(6ekJydUm
z>E-gDGpBvoEFeasKxFxJR7tsUv}|&pN%Whx%1!?<yJwX2GC!*gbq3*uh3oaBQ?p`*
zyw@y2ESF)J44j3_xnYsUq@u8--C_j%jF&M|xLWGn!S|a6$jI$P3eU4Y+)(8+llnn<
zsI#AL$BVp86*oDK&|z!deKXfmFG&v>&NCU$n3iOSCii~=tqc^Om(9+MCt%*x`-;|B
zT%&()`{-{#26A}bMQ^+Kz=E|L8GX;~xCrM{!WI5_uy5h79{NcB6o~5t7OW|?DBJo=
zs_dux?AJU!$novnH2MPX*e-<lpYdhy6PTC-+3)ug-LL*&z=l60(U3%Pdy!%OaCpTC
zo2dp7=|ysKnnC($148TW``C(~!la{GWYTZ(D9r+n|6nk%beZV9o+3{P%rfjR(_E~x
z;21Dy7S9l34j7GI_8=Z||D?Z_7LMfBG5=Me&ZHON<)RnE-o+*Q?9_A=rT`fw#8xoO
zWOo~S+NRx_-Q1Wy&{S@efhrkuj#F_Jg__$+4qrc=c}-I8$)BzmR`8WjWAh+_8I@ew
zF5$XPxw(uJWKP{STS4%GK`KEI6Z5yrCA|eH0uWK)@m&Ru=EnfxR&zBt0~T@OS7`0=
zJ}qUj&EQ$yK@y|*;a-C#6clNdjD)Cq3Khsi+m_8d*7M#zJnu&LI3|kPooDXtL<{?E
z;yi!(DpTx%Ib9eogo^yQiv^nz<~p6!)z{WGcJM;^!y0bbjO!A}OE8r=&~f+Ns7&IT
zcjkZ#Cz=0v&5z}K_Me#A^{~CvPjuiD5%E`wrq^CHe6SsvI0k%~{Z1%H&0|JJ$!RO^
zR8N^=#vQ{34Qawf$M@PNN)(E8VT^a;)sHv(_td3TfgahZN6wZDVAgv51t@Fj_j<pb
z%Y*G^PWDvkGd;^V>4_<ed7*04ojp<Nx~d?8^?`%+8y%|H#qZV}6i-IiU0o9E_+|><
zAI^)LJSy>7@^1u);HsZU$`0(*#v<#3Jfvc<QEKo}@#B7y?*%xEAoJ)k=?BA5k2>da
z=oJ|s+E&mE@jIveO@U*2S2*SLK^nHf-o4lBBCS01vb(=9c~bo4ngy|f`VW7JdYrw3
z`rhtmp_=z<dk@JXD8zMdL%V{>ffYPMtT+6tda8fyL|b^n5v6o^mmHl;k(0*0xfA9P
zU#gr^SAT2!ExnpPm0h>*in(=N?jlWHwQFX=9C$S{HNX#l)}DJq17vc{<=CXY!gcOx
zUR;;(Q*_1x3~vn7oV5Xqnc(-T?QrQX(?l)-E9cK!`yOafNAOgT4G9{)SHcUq%h8Nj
zRt`h**}wv^wFz6>&sx&pkn^m9erxRn$P}r4`J-*N8llb`8FE)X02dsNWCV+PsZj}m
z5t<qh2ONr}%MPS57~<g!g?4#|qr#(ZaqzVXB0Ce)E67cssf;gWj%CJkyM13U|NH9y
zm@Waya#)Mu|E5{oMI#`!4^pNHJi2lHREZ9aL1xPwNXc_K`#e8UQ#GGzLt>C>FrBdl
zSpUJ-^=7HR#vc?W&PR!Pv?=9-EGsdHxU$gkkyHykVQr`OZ{mW$zNjlUIQ1uke(0Vv
zPevZxvxkXGlYT8ygoM6!*Ob?5A}@;?z9=7W8_}UWcVwxe%`)#DS;wX&37Qtov4Z)S
zcH;7z$*W|nhLNM${OzI`MhrY!XFUjzy#SgFhlG<7T=U#+9-jnX-o2cf4h$!j@JntW
z+l5oy3)!%}CX7Y=)e?)PoN)Dkqnd{<1Hx4dPGWXHf(w|IEJw3z|7?WHc#N~gD?NwK
zGC0up2ay}!Xj3Dj4=oD0Kc<{TxI!E91b1F%M&rGTUP`aFN>3At3)DLHCW`rVa@oD!
zq4g;@=^|G-{-Scum2wvFxPN0v!p8!bArJ4N;!j39NBzVEv}}TX|M{hBv&5#qmI<J*
zqV=WySY&PL;9o-)Rc?;-i4S)RCSRk8ysM`~exC<`Jn#u=`mR>Xtzv%;G>Ghm#R}6K
zK6&r$NGkV;QLz<(N%L`ZuC$g9hV@#JB4XVzY0-q_ar;y$IjrTk`r-?K`4nVkhxRv@
zIAs4u6UIvdYtAjOKiW!toG`AzcHZ>m;qoJ!sYE^F2MXZCA)m+LRIzcl01ge_uv1$+
zgj!rcuv)?w*aPFH5ZHr8MZ^VJJLDXTKqz0ORq*FpSous%I@waJG}=j(huF?V-u|Ws
z?n)Mrh{z&u04nQ~a`AJEsSyE>pY~1{=_$E#OONC}$r4E8hF$>6umN}T5La*6(+up)
z5eGi*Qf&A{NUiVt{os*tHmG=fn?8Y6{Pg|_Gl_gXb%DJCMdSIZ0L7?rP@|PQ>pB%{
zw(CXkeCu>NQ*3A4;5a%w?|>4hpWuG|H)1fMtKu)X&!QCxg{R!xHJxxq!z$`S`u4h?
zK42r0;>gYp&7pbadsh1$GviW3%!N2%ltifPk1ps<Sp#{=FK+tMLh7bRcgNz&Z=LnX
zBmXB=8LH<0TP#w{ie}fZg4B1EqQzCV*nawF6fQhIOA(l=L{j3{M{xzQk&S<hhD@I|
z^1(@!pzyU7B5~vsAJX^G+piIg8yT{lbsoF(>NR}3Y#B=C%85Ia*Ua{sN>JvZ$chcA
za$izpC5wGbDk=Z|@a;QjxoDB7D3+PNI2%wpL{6uSc;V-dOHZHT72V@m1EmlYb+;Qr
zQ25LPr1NOLj0*;&#>?62`QiydP_B7~pyJH?$ZDSoElTT`9@(i<CQ;JZP?O{RHK`Jm
zPZSy(+I1JWD%X-tZHTCRiN5M0D4tIOFl+38Li<v>V*CvXd8~>xa-&39!&8>zxDP5*
z8F%goKW*AH^w*-5j&HBC=$*;PW_qFDfMgMp=}S=l`|m#?p65zpP9(XgO<7M|`HQP~
zF=6p09XD$TwGkAai%HBqDmJAmq8~>uxBj5#`vFv#>KBq*7;9<-MQRYpxo-M&veY%H
zK2^Lp>cJv*N-{^qD_3AoRR&b;Db;WGB++~!dgGQyg%#?1p;xJH^9Rb8D}VN^C?~AT
z%tcTVq5+VpINaR33@4Wl6%mH-);ypt^4axuA0GU-Nklhn=<RdQmA5HEp#BD3AA+)T
zTq8Wcag@pck43c}Q(~o=y?Jz%I@Y&9$h$XYB`A^MAz0SN9yV0HYsj9U=*nT*E?yTw
zIk$cSu56u&I{g>IwQbB>3B4U?;DK`7KijWt#nNL7=xucdZ0!G!L0#dc6fG_b{P&<e
zS_SA_QA?M;<I1y37_)UKY80-GneEj>$NIQ-^{M4l;c30m<jT?nMUMC{K5`Tz=u6L$
za+vQ^g)6RtWvVgB$US1D5T#$8GMTEgxroTfPb9ePR;?-t=+%pvaPJf*FCVC|3io1Z
zTcLtl`WI_gw$XjQ>&o8~m7vHGKSK%1gV$jwKKZVIICNQgH7!bf1f?(aKv~s8dru)<
zWro8(eikWS4y1qar4%nyd!59!H|2<rxd{rF;H_Lsd%0JA$_$$;#p}(h512gsh)5UX
zF(uPQP*`ijDPDGVsWE?DE0cSjSld2WwQ3c9{`qG?0JtiaAzk6Gl0KUw931iBe{+8m
zLkLPRy~Jl>J$I$&bu_2KRw-5b(sA?1J$v>DqM?hRNbBd6u1%XZA&l<TtW9BZ!TON`
z1=RcQ81fyW)~J!3GlDcI3%Nl{K}x|g*7PALJT{jA_MyrGn)(s`ohT99u_K)5qRUZJ
z7(-2p&}gd;raG3n2nw^+x0HH7OmifK>=qfiUe)8xg#&9bwvDbSq98?TcS5uATlHF2
z_=f<j7fl*{Q1koQL@;9BEK38#M^Lyl@A7tzqBqLG?fyDRf+-plT@e&s<NE&<5vf;g
zXB?&|i0-$)x(Et4mfSzHBl1#1$9A&}-+y{JTIC=)?w?N-+2Sf!Og8Ejqh^h5^=sD1
z;_>g-b`vFlhc+CA_7$m&xQglX@E;K3k2Z^&h`uG9y2V7t5R=67TqSIN7xfa>`i!H`
z8hIRZMNs64|7X;kJ_8r%-qxO8AaSn{eeE`-@#;zo8?$vQ6<|0_J!l$W5jESDs(YQC
zK#^Liwxw!PdE#ayn%__2d2ME@2E`mHUUJ0GP=d1KdH~x0{uH?>g7QMo2+D6K-(tv?
z=V(yO9!E!N*I>of2c_hcySV2ahI2m_L-m5Dm9ma&Z^{uLa}ktP^Dg50#aC$6r6iht
zt3BFmNrEEH<ytit`j3fe%omqPe(H!L@P7FLKg_6$f;yT_>U;08wtc{9#@s7}35KSQ
zB(7^=aXP17aY`0f+2UR%s-{l_g$WUt3+C?iTn<>9#ic>v<Nc{=E?4W~>)>=Q7V2|#
zFOI})r|OEPnCj=2H7G7L*fSdvL~1JX4Vgq=g2GK0uaGd2m0y+V!qOA#l8n2@U#9<u
zQRu5AeW7LLekKOk2a3vErLL7JNPNU&r_<4C_&EuCo{-ST)H1_YXg+3}WcexN=3&56
zV;yQP9K`0KN?d;pqFyr80Ix)&-l#{N-{TUE`+MHQfnTX~D|KJbTBriLEV-nWT*OCE
zxKZS9L{QSEa}WeYtGbWYmrw-d=I$jpxpKJZd(wS{8xf`0wf&jE?U~$?^f3owRq^8P
z@f-WoTYxtnXf|#uiqtV|{~3zET=$Qs?=vDB-GvCgVaX<x21UJK(&~PYcpv&+lqcrK
zip6u5q~>{l(3??p!L7az|C4u(!^sE7seEiZ>Q$n<5}P((bAOXwt2<NrkT)i`nPG6p
zcYW7rE`lOg{JB>M>pQq1B1bru_2?lY6}pTg9s{WQ*Cr|fzrJrD^wbi)zW2%tB`HGg
zOsQO(C}Prx?!ioESnHx`+&RA4f`xJFL*zhE<cOak1cf`v*O>hP*Pe%<oohzy7@+=w
zQdb1!)T1EOo&S(}1*OE(8KtQrUu=;ti|;$HeyX)m<8mT6gNfjj$z_Kt<BJ<zp)0=o
ztsL<&7eU##?LPKxyC)v(`2k;>ZC-Ul^eBm|QKP;Ql*Vm~qHVX>4L5n-z<1%8JnXR0
ziHw?BTa-nXEG~j_>d+HxS#uM)@;M4&y|ER#tZ^Uknz;uGlMNQZb7%S4vuDFzBh^*)
z+L#ouXr9aWmZwU$2dE*rYUG2D)rX*P=Xe&dH)+xYTv1G$#Ya&19PSdomrBHQni{W#
zo?(S9hKZLcruw-R^&zARQj%)ln8EcWC_J`QZ7VA|sU)QnsDVHg4sJDVDn#;y7Esj}
z4Tcy-)eGFIKT2+5Yfi)fHSHmN`FT;;Dh=h+6{kuAnMlkNZS-&|Duq#rV@@+Og`lY9
z$(dZiOIn{faFE90lEd5;J}M%VDsB}<-9bx`t7J_zq7vl$3hrmO<LugT(Z{u#vIm*+
z7T3B3;v*=0(x$=X@%G6L)E~N%1o7&r8%z#v>{^6#>&J^mi00Iw@Z6tCyw3A8(c*6P
z&3@XVmZlaS{2qtr_QcbRd&Tu>>x1HP^$>Rd+*F9<YxiG3o#)lxP;eoF)2l{{Mw5A6
zWA8tGKRa^YKS%By6eWkbVis#WhEl^s?kvyI4axX-ryricvf~TE-QQW9KA);@<;xPg
z9HqVw|Ng;#R6e=`xT`%!Vfxh@EV{o-#-)hYomovOB92-sbzORT0YCmdTtr_6la8jP
zM#p%L@ceds5v2`v5RD*JP2V+|gP_PAe~vKprz%%LoNh&ZQ8?;RuXr)F=8a4e&bvRx
zIEsAVCsM<W7?*VKhVQjhab!PNn>L+D>=Wdplmt&dKO(X{s2hAt#UBX^KT18wK5V$?
z{C@7|32>$KV^!mh_oL{|-`X>05-r6`uK4LgP`Hcx#b?17OI5tiKMfYuyRJ<rfg;(|
zMeDi<3O9Q!N<#OS?>-7*^Jnk;^a3O1g~ZW&ffSW_g21p(S_ukQ@~S!K0WQ$o9EIUV
zk$F@aMY4E*%~@ZZeDr~uO}dB%j)t0C@i7-cdGYKWW{y41QckoX;?THFQMLDh2euP|
z`RBgSgqVY%u>ZLUW4rF9DUCV?50A$IShMgFeBT6%R5MOFQ?<AV3a@?c&nNKokw1!+
z&Wi5_S5zyf%=_Tn@n?8==Ph~-siZcqzWYJ0`#@Sh_Z8u)SX{Y^n<Y-CM&c}>X92oo
z{5vk`JBeCq_|binr5Jo(5iKv^^&u!sbhyMZR}tfJITE63?6ZmVjLgv$T`69CJnL9G
zQ^R%c=kkh*Q*lXS?&}g)RkHYS)5J?6D2ph~YdDK!xbCqrW(YxfPa2WyT*ZsNfU4fV
z4?B$z{|nNfJfSKDT=6Si(V}o5Z3&kp4x%?}ffN$^OkbK@1<aMo4X4m3g~`nt?|t_j
ze0T2_mtjk}aQ2kL{E<?zK5%apIz9`PW_v@;XG|d|EO2`L`ZcF_Ev5}+7Qup~2Qmc*
zRqVJc`oY=V;p0x%%|>svnS3~8%||5SrVz4AR;Kwt)b2NrnjGqWQ>qU^;YN(y&HfX;
zeb1D)1PWAXflPUd3xWLe8^;huQJt_rKeKC4r0d|SVf&`FCz5iDE;kkRODRczN{CMK
zzRzxp>rbC4hiLYwjiB&2*LN-?()N>xKyfrCd(kRHSkepP^M-uM<SJ*WTIeu`_Fo*O
zc;osUS;PL}lEE|gO~IX)G35$#JLN&1%=t*9{DK6_&#8Rumu8I(N;DRNb5#PPdj0x7
z{PQ{7&t&@ENno<Vy--T!E`w|i+3BIygF1oVBW*&U(8jFnwNCt8)3#mSjNeZz6IH(Q
zWXg*YIjI{p>8hUixZ|PseGwTdlc${Mp<<IFrj)L}YcvNzu?GB~l32bMm9RWRZ~7$T
zz9Yrx3-Z2~x2UWoS-HG<slUwt@jG3%hAP(dUAJERn!C%tTC`C7t<C1si>fhO|0aA=
zpgMg&v?y1W-q_p0?d1#XxqgF+C}hWp2M-dBpvV<JiJ;gMVaVZ_I+klAi5<KM_(-3D
zFP~dyihiu=nGdbX#?~6?A}D;`zi#i*X8B_(Q~=S1o{5G%_4Z&=@h0#iRRqg}9&4Xz
zB`AEphhGFbt$KpX9wA6im7l5=NRN`#w}tz&u#n!9${?qu2jOk~3TRzhT=!NnzD&QL
z%|%f78h32GjiY<Md^Yps&xk_BGLse{5)Y~SI(L09Q7*fPvY3OQlq#PckM43hJEe<I
zZ<b8dm*qK;B=47jf+Ur$kR82;Rz|uE>U%D}PV#;}Ay~cOBADo;No#`wMKU92UIzqF
zgG$dQ??j_Yj;!>hUNCX>YtgkI<hl=3*UKe?hYlU8)^CIxAr_)4wfs9K9V}R9YuB!w
zh_t8@7}c@#At-$Oa_S>EWy%y0f#J+4uFA#H8y3DFq*fg~_qlWD;v^`X-o=p|7S^+I
zZx`-BZ;EN+B?t<IX6n*kC%9Y~_d_wp3?V2yJ`)rsDmni5KNKV7zos!6aVMdCAa$$!
zL<~|GeOYnZR^G8=k%LGGc~|FBUr}{0FB&)a_HBHoN(Efi%Yo9r3R8XN4^*Y#9=#DX
zg`hA~3@4&Qsd27Uks<D~QF=Pm95`rB^(iWn9=I2PBP!f`MAi5KK2O=YC{G>JT`D$-
zca{1O6dr_0%9%Ak!0YbW=rL{WGoyHeo~YS-CN>SJVD>V@s*8_`2*ZVqlkxP@K0!?Q
z4(gbrps3DOyYF0_S~*f{qej&+n2elUF#@k2UZUPAU-uui{^RcU6+4bai3Z;hIWewj
z6whNd`-gnD^V&8Xa@z;@H!%;Yd<{$zxLbUq(oKb4B`(wV;a?hq)5eyOSpU+K^Wc9=
z#&b3++mcd`zN0txy3@{>j4VA$``+u0T0==DEM4i`CZ$OjXk;3iIS7jN;Qtvb=uO!=
zidJ0r@cc?gV~{RIZ_hect%5O4nj&p#-SzzW3>LlTpvXuty?7c>uO3!>*E7yN!zp7E
zckHCbg1*tmxn#+L2`yWoHGMIf(g(#<4T@axi?5SBf8pn*4(>&=*`iiqdyK4~RS4F#
zSzH8#k3at;7=t%^;?~Phu`ift)F_kzi#q0^&)jFYPQRy<pz!$|$(eERHP)Z^6@*1H
zCRfd=!q=>Jx#5yIcA9RyUsN)_znYVvupiF-=YhRj?t&W{ve`SPMagp6(7BJRh(7$Y
z-pwoorTc*LC{#QP{$6_%PapatoQM$jFyZv9>fgAaUQ_M*<@g8+ubHDf2X;_I?Su#X
z-b&xKpw9HE1o3IxjnW9S>V9z=*M5-e=Tvje{IJgzusCYL<$6_(1@tUx?@0P=)~m#2
z`Vtf#gS8^RQbrM%8<vctI3q`n6zN~O`k<)J&*v|oOedCzT&I%prWD%ZaW(OZj@8k_
zF+XIN<vPgxM=r)aPeO>*eWHBm^i%;XWgNNC+SbhECY&N2cEm_^X(9~0R+TCPW=rpq
z){u}ma7x#Qw=WPusZQyfve83(0jl<8c=<+s{l)!IShQ~EkOlTx^Xhw=S&!qiE>8Wj
zwU4QzA1#vaw*ckaX&2#2i{NwpNTVYnLV1eC8DY|Q;nuo;Sj7J3{cDka<w9v(T#?HX
z=KbCaejj|P2Sz@T+GU7EeU1WaY9fiK=gsUwRf>$O&2Gq?@f~Ze_;X5^Cy@nTO2NuR
z5p7QWGNj5Er)K4(mrfx>P;ODD`Z96!s#5i#4@Jc}C9EKQQS-csZPtokLiz0jrE+oO
z$D))Xmdc29EMAviP$amb7)N7N)4hyYb8^Iobs%A(ALDGgXpAqlHEQIDiLXzvh|);q
zgpC<n+d07>BJi3jf@R8*PA%QbnDMQ3A8_F%UOT5d6{QR!&ZtR9ljh^>DK0r|h|Q#`
zyNjqCJXZo+w{D#wr^Y%~8(yjer7oRuf|$@}3foZTl<8fBO<Ju?Pi9d(F-77{QS7^V
zB#u96&ZSCG6a@!!dR2X_J(FAE*`<FiB81nx3T6K!9In<da&pFh8HqcG{<Vp!b``=|
z63knpC1?Ds0WSp~^P;40CwcSEYWir(J}}*f@s042f(D#%<>TWcG%<DR)QRsDoxj(G
zmzw&F9*+58yN=wVC`Mm(0-UJA@=g&sVNz#yQ*bc5OQQ$mbgi|$3L+%nHF{95m&`8O
zE0ZMD3Y7hmP@c7pag!_l+zX}5&l5>Q<V}4~`caBrHR}LOW0lDjKWhO?!N<HvSt~(N
z_JMi#fws|@lyGTb*2{436VkC8J*h6dGzkhnaEmAksr*x<GccXX=+#-tiCj&AYd*7?
zQ+uL$`KnPA1qZ`6M?^><HJj{#;@@;f!5VFm(k3P^o`3h>(m{A|ViU3!u81y+=|g3t
z$lb72eK}g$KgM`1>70{X@#n^h6SnWbY$`>Wm(s%A=gg+kvT^HG<cNB5#ZQh{Xj_wl
zkNJ_ZMuMX31M}|#%@Mf|OXJ3kML(1|bLOB|uU<w^8W&!%D34T0iUsp!s8N=Z>h;C%
zUqevhZ*x}e(uJymgK_))_JLJ6zT``J<FuqZ$xM~RxN2F*J0HAxd=23r{DtnO)57zj
z!k48?**})@v^?iYj`+W%FE8$A;{EQO(5<j>50tLdTgBQeIpSwc7%BK93|iJkP?UX;
zF#A9n^_O3M5q(%5Pz6Oc*2r+VVJ=y0jKznS)|iYW)aD2ZlN7}uA}7rB$jmN`*X3UY
z2jh00pT`~C+P4BP-A>}Y_fskhOchS3Vw1gd9^|jw9MyVEft{me1m4mWDEr4aER)Jv
z$q|1~Uq9rh(vw`_DKm-Nr?zX0!CHD(Sp&w&5kG6dMY+EwEK1uqxWVnJH(FE2`U=(M
zQ#?u6RV$y<gxwFrhYyeLKF^vH7RYlS6k{zuytEP&D)p5yG&J-k<&@=fc6LU=g4#>S
z8M`QJJC94Zais%_oOs&V*_9(<&^t?9gMxz@yiE1OIeL;dgOk?I@@AMJ-XWCz6R(Ss
z^a05k|4^#f#pQ*$gS;s@%89u_k~4mZ>34nSR`Ai+Q%U<cWgl1uUlzr4&lGwVHfchA
z@Y1PjxqSI@ISRj=q7^tKSCYcvCvF_W<b>=!rMuNNSI-lDkyUWe*HiL4PT4>5!^Dy+
zQt-E=x6MD7f}i<)YR(ZAe9Y-h>m5tk2iAq1A$Y|pyZ<WI-oqq?)4fQrooqBI?8Liw
z?@DQ1f#ieM<}N9$@3u<LIOyvmxgDqMAGsl7+4U&+Th`y^o=w5e+#WUWcnUt|^{2It
zrtAajLe5aU;;jqDZ}1}{BX@JU7YpZE6qD4ed$HDp$;nqiyl1LZsoGdNa-zBIk|Pe*
z_0fx2t+Ict6*=>)TfyHveoU-U6#Np)^ZL!J;G>_PlKN4~KCmu?jlnBkg2FCfEksyY
z*h%_lS+45E?d<taQmgRAgv6Wb^m9$-uXfAU*0!#tG$-+Gx8#CDe14GY@0I-{S7a=+
zE(L$f_&K3wQSeJB&zfgk1t0VH(b`8*_JMUFXbN6>5fsTCQt4a%Kle%@l9Ga(Iwl2U
zQbOcJ>JV>{Qo_diEh*z*tWOgAJZ1kRHUfz|zk+|_`rp*q75q%~V8WiS;FGZawU*J9
zePAs}eOafeco{@cc*3uu?M3uY(bt~RzCJrSIi<)%4Y(W}9IVQFfq{Xd(M&)<z~}Jr
zaLE^^h<uGm?3Awf9GR4Gi0@kE`g>*n$Q2pOtV_Y)GJZ~|Srq&d%CqJfSHZ_Tezf*c
zlzm`b2$~Zwg9(b{s;|OrCMsp6pK(-$h)N39sz_vo^c#t;S>fC_($R=zvh#?HFfoaa
zmV90RE&6*zVhQ1m-GbJHgR$3`*ykzx2av<(II;GDg1>d+uiz(d{1klTjgO`7yUISW
zu6<w$yo@F&szinQgR~(LeO*<uVyR7S;ykx#?I&sNyRD6wXkIrH6)VQUL>Lq8bY=e}
zn(JjTv4X!WU@&?S3Vuer&LSr&_*lfvvY$lR2eOAqZGmRP%VdJ0x-5D~cKP~{oRNOc
zgoTa&9UWy!BtLU>L~5>hlGga{D=G0vr1d1|v@*saL9aUj2UqrwJU+(>2yvW4EBISC
v{tABb#!taV-uPJRzN_p5>)Hnij@SPI%HoNGZ`ISX00000NkvXXu0mjfV>S7K

diff --git a/elements/rh-tag/docs/tag-variants.png b/elements/rh-tag/docs/tag-variants.png
deleted file mode 100644
index 20a0a4add85a473ed52a086cd49c2339f67a009a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 22445
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


From 53722a22f7875eeed8ae6622a0e2291346346311 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 12 Sep 2024 17:47:29 +0300
Subject: [PATCH 24/29] test(tag): tests pass

---
 elements/rh-tag/test/rh-tag.spec.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/elements/rh-tag/test/rh-tag.spec.ts b/elements/rh-tag/test/rh-tag.spec.ts
index dfc9e2cdfa..4bdbd304af 100644
--- a/elements/rh-tag/test/rh-tag.spec.ts
+++ b/elements/rh-tag/test/rh-tag.spec.ts
@@ -46,18 +46,18 @@ describe('<rh-tag>', async function() {
     });
 
     it('should have correct background color', function() {
-      expect(normalizeColor(styles.getPropertyValue('background-color')))
-          .to.equal(normalizeColor(tokens.get('--rh-color-surface-lighter')));
+      expect(styles.getPropertyValue('background-color'))
+          .to.be.colored(tokens.get('--rh-color-surface-lighter'));
     });
 
     it('should have correct border color', function() {
-      expect(normalizeColor(beforeStyles.getPropertyValue('border-color')))
-          .to.equal(normalizeColor(tokens.get('--rh-color-border-subtle-on-light')));
+      expect(beforeStyles.getPropertyValue('border-color'))
+          .to.be.colored(tokens.get('--rh-color-gray-60'));
     });
 
     it('should have correct text color', function() {
-      expect(normalizeColor(styles.getPropertyValue('color')))
-          .to.equal(normalizeColor(tokens.get('--rh-color-text-primary-on-light')));
+      expect(styles.getPropertyValue('color'))
+          .to.be.colored(tokens.get('--rh-color-gray-70'));
     });
   });
 
@@ -72,18 +72,18 @@ describe('<rh-tag>', async function() {
     });
 
     it('should have correct background color', function() {
-      expect(normalizeColor(styles.getPropertyValue('background-color')))
-          .to.equal(normalizeColor(tokens.get('--rh-color-red-10')));
+      expect(styles.getPropertyValue('background-color'))
+          .to.be.colored(tokens.get('--rh-color-red-10'));
     });
 
     it('should have correct border color', function() {
-      expect(normalizeColor(beforeStyles.getPropertyValue('border-color')))
-          .to.equal(normalizeColor(tokens.get('--rh-color-red-60')));
+      expect(beforeStyles.getPropertyValue('border-color'))
+          .to.be.colored(tokens.get('--rh-color-red-60'));
     });
 
     it('should have correct text color', function() {
-      expect(normalizeColor(styles.getPropertyValue('color')))
-          .to.equal(normalizeColor(tokens.get('--rh-color-red-70')));
+      expect(styles.getPropertyValue('color'))
+          .to.be.colored(tokens.get('--rh-color-red-70'));
     });
   });
 

From 9e4c4e57ac53ea91531bd6bb591996a25645beb4 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 15 Sep 2024 10:23:09 +0300
Subject: [PATCH 25/29] fix(blockquote): on

---
 elements/rh-blockquote/rh-blockquote.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/elements/rh-blockquote/rh-blockquote.ts b/elements/rh-blockquote/rh-blockquote.ts
index 2b756a0863..cbeb9da38b 100644
--- a/elements/rh-blockquote/rh-blockquote.ts
+++ b/elements/rh-blockquote/rh-blockquote.ts
@@ -54,9 +54,9 @@ export class RhBlockquote extends LitElement {
   @property({ reflect: true }) size: 'default' | 'large' = 'default';
 
   render() {
-    const { highlight, on = '' } = this;
+    const { highlight, on = 'lightest' } = this;
     return html`
-      <figure id="container" class="${classMap({ highlight, [on]: !!on })}">
+      <figure id="container" class="${classMap({ highlight, on: true, [on]: true })}">
         <rh-icon set="standard" icon="quotemark-open"></rh-icon>
         <blockquote id="quote">
           <slot></slot>

From c9c3b2201964b16b79e6e0131a10a5bda6a4e76d Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 15 Sep 2024 10:36:56 +0300
Subject: [PATCH 26/29] docs(tag): slotted icon

---
 .../demo/filled-color-with-slotted-icon.html  | 23 +++++++++++++++++++
 .../demo/outline-with-slotted-icon.html       | 23 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 elements/rh-tag/demo/filled-color-with-slotted-icon.html
 create mode 100644 elements/rh-tag/demo/outline-with-slotted-icon.html

diff --git a/elements/rh-tag/demo/filled-color-with-slotted-icon.html b/elements/rh-tag/demo/filled-color-with-slotted-icon.html
new file mode 100644
index 0000000000..0a26d028e8
--- /dev/null
+++ b/elements/rh-tag/demo/filled-color-with-slotted-icon.html
@@ -0,0 +1,23 @@
+<rh-tag color="red">Red<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="red-orange">Red Orange<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="orange">Orange<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="yellow">Yellow<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="green">Green<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="teal">Teal<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="blue">Blue<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="purple">Purple<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag color="grey">Gray<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+
+<svg aria-hidden="true" hidden inert>
+  <defs>
+    <svg id="slotted-icon"
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 24 24">
+      <path d="M17,8a9,9,0,1,0,9,9A9,9,0,0,0,17,8Zm0,3.992a1.524,1.524,0,1,1-1.524,1.524A1.524,1.524,0,0,1,17,11.992Zm2.032,9.218a.436.436,0,0,1-.435.435H15.4a.436.436,0,0,1-.435-.435v-.871A.436.436,0,0,1,15.4,19.9h.435V17.581H15.4a.436.436,0,0,1-.435-.435v-.871a.436.436,0,0,1,.435-.435h2.323a.436.436,0,0,1,.435.435V19.9H18.6a.436.436,0,0,1,.435.435Z" transform="translate(-5 -5)"/>
+    </svg>
+  </defs>
+</svg>
+
+<script type="module">
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
diff --git a/elements/rh-tag/demo/outline-with-slotted-icon.html b/elements/rh-tag/demo/outline-with-slotted-icon.html
new file mode 100644
index 0000000000..b5a9b9705a
--- /dev/null
+++ b/elements/rh-tag/demo/outline-with-slotted-icon.html
@@ -0,0 +1,23 @@
+<rh-tag variant="outline" color="red">Red<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="red-orange">Red Orange<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="orange">Orange<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="yellow">Yellow<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="green">Green<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="teal">Teal<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="blue">Blue<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="purple">Purple<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+<rh-tag variant="outline" color="grey">Gray<svg slot="icon"><use href="#slotted-icon"/></svg></rh-tag>
+
+<svg aria-hidden="true" hidden inert>
+  <defs>
+    <svg id="slotted-icon"
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 24 24">
+      <path d="M17,8a9,9,0,1,0,9,9A9,9,0,0,0,17,8Zm0,3.992a1.524,1.524,0,1,1-1.524,1.524A1.524,1.524,0,0,1,17,11.992Zm2.032,9.218a.436.436,0,0,1-.435.435H15.4a.436.436,0,0,1-.435-.435v-.871A.436.436,0,0,1,15.4,19.9h.435V17.581H15.4a.436.436,0,0,1-.435-.435v-.871a.436.436,0,0,1,.435-.435h2.323a.436.436,0,0,1,.435.435V19.9H18.6a.436.436,0,0,1,.435.435Z" transform="translate(-5 -5)"/>
+    </svg>
+  </defs>
+</svg>
+
+<script type="module">
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>

From 4bd4931edd17743eff6f7dbbccbb234851361fa8 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 15 Sep 2024 10:41:59 +0300
Subject: [PATCH 27/29] fix(blockquote): on

---
 elements/rh-blockquote/rh-blockquote.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/rh-blockquote/rh-blockquote.ts b/elements/rh-blockquote/rh-blockquote.ts
index cbeb9da38b..566c3deb14 100644
--- a/elements/rh-blockquote/rh-blockquote.ts
+++ b/elements/rh-blockquote/rh-blockquote.ts
@@ -54,7 +54,7 @@ export class RhBlockquote extends LitElement {
   @property({ reflect: true }) size: 'default' | 'large' = 'default';
 
   render() {
-    const { highlight, on = 'lightest' } = this;
+    const { highlight, on = 'light' } = this;
     return html`
       <figure id="container" class="${classMap({ highlight, on: true, [on]: true })}">
         <rh-icon set="standard" icon="quotemark-open"></rh-icon>

From 8e4cea509dec77efef7d020544616a9cc645ff83 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 15 Sep 2024 11:23:49 +0300
Subject: [PATCH 28/29] fix(accordion): drop shadow

also refactors expand/collapse code
---
 elements/rh-accordion/context.ts       |   2 +
 elements/rh-accordion/rh-accordion.css |   5 +-
 elements/rh-accordion/rh-accordion.ts  | 146 ++++++++++++-------------
 3 files changed, 76 insertions(+), 77 deletions(-)

diff --git a/elements/rh-accordion/context.ts b/elements/rh-accordion/context.ts
index 64dd3ac94c..b6adb2d80e 100644
--- a/elements/rh-accordion/context.ts
+++ b/elements/rh-accordion/context.ts
@@ -3,6 +3,8 @@ import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js
 export interface RhAccordionContext {
   accents?: 'inline' | 'bottom';
   large: boolean;
+  /** if this accordion has at least one expanded panel */
+  expanded: boolean;
 }
 
 export const context = createContextWithRoot<RhAccordionContext>(Symbol('rh-accordion-context'));
diff --git a/elements/rh-accordion/rh-accordion.css b/elements/rh-accordion/rh-accordion.css
index b8f1300f3c..2eb688c1de 100644
--- a/elements/rh-accordion/rh-accordion.css
+++ b/elements/rh-accordion/rh-accordion.css
@@ -1,6 +1,10 @@
 #container {
   color: var(--rh-color-text-primary);
   background-color: var(--rh-color-surface);
+
+  &.expanded {
+    box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
+  }
 }
 
 ::slotted(rh-accordion-header:first-child) {
@@ -16,7 +20,6 @@
 ::slotted(rh-accordion-header:is([expanded])) {
   display: block;
   border-block-end: 0;
-  box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
 }
 
 ::slotted(rh-accordion-panel:is([expanded])) {
diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts
index 9d1b9d6f22..b2db7b07f9 100644
--- a/elements/rh-accordion/rh-accordion.ts
+++ b/elements/rh-accordion/rh-accordion.ts
@@ -47,8 +47,6 @@ export class AccordionCollapseEvent extends ComposedEvent {
  */
 @customElement('rh-accordion')
 export class RhAccordion extends LitElement {
-  static readonly version = '{{version}}';
-
   static readonly styles = [styles];
 
   static isAccordion(target: EventTarget | null): target is RhAccordion {
@@ -72,6 +70,25 @@ export class RhAccordion extends LitElement {
    */
   @property({ attribute: true, reflect: true }) accents?: 'inline' | 'bottom';
 
+  /**
+   * If this accordion uses large styles
+   */
+  @property({ reflect: true, type: Boolean }) large = false;
+
+  /**
+   * If this accordion has a border
+   */
+  @property({ reflect: true, type: Boolean }) bordered = true;
+
+  /**
+   * Color Palette for this accordion.
+   * @see https://ux.redhat.com/theming/color-palettes/
+   */
+  @colorContextProvider()
+  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+
+  @colorContextConsumer() private on?: ColorTheme;
+
   /**
    * Sets and reflects the currently expanded accordion 0-based indexes.
    * Use commas to separate multiple indexes.
@@ -81,34 +98,44 @@ export class RhAccordion extends LitElement {
    * </pf-accordion>
    * ```
    */
-  @property({ attribute: 'expanded-index', converter: NumberListConverter })
+  @property({
+    attribute: 'expanded-index',
+    converter: NumberListConverter,
+    hasChanged(value, old) {
+      return JSON.stringify(old) !== JSON.stringify(value);
+    },
+  })
   get expandedIndex() {
     return this.#expandedIndex;
   }
 
   set expandedIndex(value) {
-    const old = this.#expandedIndex;
     this.#expandedIndex = value;
-    if (JSON.stringify(old) !== JSON.stringify(value)) {
-      this.requestUpdate('expandedIndex', old);
-      this.collapseAll().then(async () => {
-        for (const i of this.expandedIndex) {
-          await this.expand(i, this);
-        }
-      });
-    }
+    this.#expanded = !!this.#expandedIndex.length;
+    this.headers.forEach((header, i) => {
+      const expanded = this.#expandedIndexSet.has(i);
+      header.expanded = expanded;
+      const panel = this.panels[i];
+      if (panel) {
+        panel.expanded = expanded;
+        panel.hidden = !expanded;
+      }
+    });
   }
 
-  @property({ reflect: true, type: Boolean }) large = false;
-
-  @property({ reflect: true, type: Boolean }) bordered = true;
+  /** All headers for this accordion */
+  get headers() {
+    return this.#allHeaders();
+  }
 
-  @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+  /** All panels for this accordion */
+  get panels() {
+    return this.#allPanels();
+  }
 
-  @colorContextConsumer() private on?: ColorTheme;
+  #expandedIndexSet = new Set<number>();
 
-  protected expandedSets = new Set<number>();
+  #expanded = false;
 
   #expandedIndex: number[] = [];
 
@@ -123,31 +150,22 @@ export class RhAccordion extends LitElement {
     this.addEventListener('change', this.#onChange as EventListener);
     this.#mo.observe(this, { childList: true });
     this.updateAccessibility();
-    const { headers } = this;
-    headers.forEach((header, index) => {
-      if (header.expanded) {
-        this.#expandHeader(header, index);
-        const panel = this.#panelForHeader(header);
-        if (panel) {
-          this.#expandPanel(panel);
-          panel.hidden = !panel.expanded;
-        }
-      }
-    });
   }
 
   override render(): TemplateResult {
-    const { on = '' } = this;
+    const { on = 'light' } = this;
+    const expanded = this.#expanded;
     return html`
-      <div id="container" class="${classMap({ on: true, [on]: !!on })}"><slot></slot></div>
+      <div id="container"
+           class="${classMap({ on: true, [on]: true, expanded })}"><slot></slot></div>
     `;
   }
 
   protected override async getUpdateComplete(): Promise<boolean> {
     const c = await super.getUpdateComplete();
     const results = await Promise.all([
-      ...this.#allHeaders().map(x => x.updateComplete),
-      ...this.#allPanels().map(x => x.updateComplete),
+      ...this.headers.map(x => x.updateComplete),
+      ...this.panels.map(x => x.updateComplete),
     ]);
     return c && results.every(Boolean);
   }
@@ -155,13 +173,15 @@ export class RhAccordion extends LitElement {
   @observes('accents')
   @observes('large')
   @observes('bordered')
+  @observes('expandedIndex')
   private contextChanged() {
     this.ctx = this.#makeContext();
   }
 
   #makeContext(): RhAccordionContext {
     const { accents = 'inline', large } = this;
-    return { accents, large };
+    const expanded = this.#expanded;
+    return { accents, large, expanded };
   }
 
   #panelForHeader(header: RhAccordionHeader) {
@@ -173,35 +193,15 @@ export class RhAccordion extends LitElement {
     }
   }
 
-  #expandHeader(header: RhAccordionHeader, index = this.#getIndex(header)) {
+  #expand(index: number) {
     // If this index is not already listed in the expandedSets array, add it
-    this.expandedSets.add(index);
-    this.#expandedIndex = [...this.expandedSets as Set<number>];
-    header.expanded = true;
-  }
-
-  #expandPanel(panel: RhAccordionPanel) {
-    panel.expanded = true;
-    panel.hidden = false;
-  }
-
-  async #collapseHeader(header: RhAccordionHeader, index = this.#getIndex(header)) {
-    if (!this.expandedSets) {
-      await this.updateComplete;
-    }
-    this.expandedSets.delete(index);
-    header.expanded = false;
-    await header.updateComplete;
+    this.expandedIndex = [...this.#expandedIndexSet.add(index)];
   }
 
-  async #collapsePanel(panel: RhAccordionPanel) {
-    await panel.updateComplete;
-    if (!panel.expanded) {
-      return;
+  #collapse(index: number) {
+    if (this.#expandedIndexSet.delete(index)) {
+      this.expandedIndex = [...this.#expandedIndexSet];
     }
-
-    panel.expanded = false;
-    panel.hidden = true;
   }
 
   #onChange(event: AccordionHeaderChangeEvent) {
@@ -213,6 +213,7 @@ export class RhAccordion extends LitElement {
         this.collapse(index);
       }
     }
+    this.requestUpdate('expandedIndex');
   }
 
   #allHeaders(accordion: RhAccordion = this): RhAccordionHeader[] {
@@ -240,14 +241,6 @@ export class RhAccordion extends LitElement {
     return -1;
   }
 
-  get headers() {
-    return this.#allHeaders();
-  }
-
-  get panels() {
-    return this.#allPanels();
-  }
-
   /**
    * Initialize the accordion by connecting headers and panels
    * with aria controls and labels; set up the default disclosure
@@ -302,8 +295,7 @@ export class RhAccordion extends LitElement {
     }
 
     // If the header and panel exist, open both
-    this.#expandHeader(header, index);
-    this.#expandPanel(panel);
+    this.#expand(index);
 
     header.focus();
 
@@ -316,8 +308,7 @@ export class RhAccordion extends LitElement {
    * Expands all accordion items.
    */
   public async expandAll() {
-    this.headers.forEach(header => this.#expandHeader(header));
-    this.panels.forEach(panel => this.#expandPanel(panel));
+    this.headers.forEach((_, i) => this.#expand(i));
     await this.updateComplete;
   }
 
@@ -333,8 +324,7 @@ export class RhAccordion extends LitElement {
       return;
     }
 
-    this.#collapseHeader(header);
-    this.#collapsePanel(panel);
+    this.#collapse(index);
 
     this.dispatchEvent(new AccordionCollapseEvent(header, panel));
     await this.updateComplete;
@@ -344,8 +334,7 @@ export class RhAccordion extends LitElement {
    * Collapses all accordion items.
    */
   public async collapseAll() {
-    this.headers.forEach(header => this.#collapseHeader(header));
-    this.panels.forEach(panel => this.#collapsePanel(panel));
+    this.headers.forEach((_, i) => this.#collapse(i));
     await this.updateComplete;
   }
 }
@@ -354,4 +343,9 @@ declare global {
   interface HTMLElementTagNameMap {
     'rh-accordion': RhAccordion;
   }
+
+  interface HTMLElementEventMap {
+    'expand': AccordionExpandEvent;
+    'collapse': AccordionCollapseEvent;
+  }
 }

From b01acdca50ce8afac9d35fe717957e2adff5f739 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 15 Sep 2024 11:34:55 +0300
Subject: [PATCH 29/29] fix(alert): use rh-icon

---
 elements/rh-alert/demo/toast.html | 12 ++++++--
 elements/rh-alert/rh-alert.ts     | 48 ++++++++++++-------------------
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/elements/rh-alert/demo/toast.html b/elements/rh-alert/demo/toast.html
index 2fecacae0e..338614767c 100644
--- a/elements/rh-alert/demo/toast.html
+++ b/elements/rh-alert/demo/toast.html
@@ -23,7 +23,7 @@ <h3 slot="header">Success</h3>
     <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
   </rh-alert>
 
-  <rh-alert state="warning" toast>
+  <rh-alert state="warning" variant="toast">
     <h3 slot="header">Warning</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
@@ -31,13 +31,21 @@ <h3 slot="header">Warning</h3>
     <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
   </rh-alert>
 
-  <rh-alert state="danger" toast>
+  <rh-alert state="danger" variant="toast">
     <h3 slot="header">Danger</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
     <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
     <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
   </rh-alert>
+
+  <rh-alert state="error" variant="toast">
+    <h3 slot="header">Error</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
+      egestas, a sollicitudin mauris tincidunt.</p>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
+    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+  </rh-alert>
 </section>
 
 <style>
diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
index d3874b381b..3ad665a932 100644
--- a/elements/rh-alert/rh-alert.ts
+++ b/elements/rh-alert/rh-alert.ts
@@ -1,6 +1,6 @@
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 
-import { type CSSResult, LitElement, html, render, svg } from 'lit';
+import { type CSSResult, LitElement, html, render } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -8,6 +8,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import '@rhds/elements/rh-surface/rh-surface.js';
+import '@rhds/elements/rh-button/rh-button.js';
+import '@rhds/elements/rh-icon/rh-icon.js';
 
 import styles from './rh-alert.css';
 import toastStyles from './rh-alert-toast-styles.css';
@@ -20,29 +22,15 @@ interface ToastOptions {
   state?: RhAlert['state'];
 }
 
-// TODO: replace with rh-icon
-const ICONS = {
-  default: { viewBox: '0 0 896 1024', path: `M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z` },
-  error: { viewBox: '0 0 512 512', path: `M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z` },
-  success: { viewBox: '0 0 512 512', path: `M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z` },
-  warning: { viewBox: '0 0 576 512', path: `M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z` },
-  danger: { viewBox: '0 0 512 512', path: `M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z` },
-  info: { viewBox: '0 0 512 512', path: `M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z` },
-  close: { viewBox: '0 0 352 512', path: `M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z` },
-
-  get(name: 'close' | 'default' | 'error' | 'success' | 'warning' | 'danger' | 'info') {
-    const { viewBox, path } = ICONS[name];
-    return svg`
-      <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em" width="1em"
-          style="vertical-align:-0.125em"
-          viewBox="${viewBox}">
-        <path d="${path}"/>
-      </svg>`;
-  },
-};
+const ICONS = new Map(Object.entries({
+  default: 'notification-fill',
+  error: 'error-fill',
+  success: 'check-circle-fill',
+  warning: 'warning-fill',
+  danger: 'error-fill',
+  info: 'information-fill',
+  close: 'close',
+}));
 
 export class AlertCloseEvent extends Event {
   constructor() {
@@ -143,7 +131,7 @@ export class RhAlert extends LitElement {
   }
 
   private get icon() {
-    return ICONS.get(this.state.toLowerCase() as this['state']) ?? '';
+    return ICONS.get(this.state.toLowerCase()) ?? '';
   }
 
   /**
@@ -202,7 +190,7 @@ export class RhAlert extends LitElement {
            aria-hidden="false"
            color-palette="lightest">
         <div id="left-column">
-          <div id="icon">${this.icon}</div>
+          <rh-icon id="icon" set="ui" icon="${this.icon}"></rh-icon>
         </div>
         <div id="middle-column">
           <header>
@@ -210,10 +198,10 @@ export class RhAlert extends LitElement {
               <slot name="header"></slot>
             </div>${!this.dismissable && this.variant !== 'toast' ? '' : html`
             <div id="header-actions">
-              <button id="close-button"
-                  aria-label="Close"
-                  confirm
-                  @click=${this.#closeHandler}>${ICONS.get('close')}</button>
+              <rh-button variant="close"
+                         accessible-label="Close"
+                         confirm
+                         @click=${this.#closeHandler}></rh-button>
             </div>`}
           </header>
           <div id="description">