diff --git a/.changeset/mighty-vans-dress.md b/.changeset/mighty-vans-dress.md
new file mode 100644
index 0000000000..9a9e3861fa
--- /dev/null
+++ b/.changeset/mighty-vans-dress.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": major
+---
+`<rh-cta>`: Removed previously-deprecated `color-palette` attribute
diff --git a/.changeset/mighty-vans-skate.md b/.changeset/mighty-vans-skate.md
new file mode 100644
index 0000000000..99ab6ebdec
--- /dev/null
+++ b/.changeset/mighty-vans-skate.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": major
+---
+`<rh-cta>`: Deprecated `rhCta.cta` public property. This will be removed in the
+next major version.
diff --git a/.changeset/shaky-yaks-win.md b/.changeset/shaky-yaks-win.md
new file mode 100644
index 0000000000..f1f2a03367
--- /dev/null
+++ b/.changeset/shaky-yaks-win.md
@@ -0,0 +1,17 @@
+---
+"@rhds/elements": minor
+---
+`<rh-cta>`: added `href` attribute. When set, do not slot an anchor or button,
+instead, slot in the link text.
+
+These two are equivalent:
+
+```html
+<rh-cta>
+  <a href="/elements">Elements</a>
+</rh-cta>
+```
+
+```html
+<rh-cta href="/elements">Elements</rh-cta>
+```
diff --git a/.changeset/wet-readers-shine.md b/.changeset/wet-readers-shine.md
new file mode 100644
index 0000000000..4edfe441e5
--- /dev/null
+++ b/.changeset/wet-readers-shine.md
@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-cta>`: added `icon-set` attribute to better control icon loading
+
+```html
+<rh-cta icon="success" icon-set="custom">...</rh-cta>
+```
diff --git a/elements/rh-cta/README.md b/elements/rh-cta/README.md
index 07df6d4b4c..f426df13bf 100644
--- a/elements/rh-cta/README.md
+++ b/elements/rh-cta/README.md
@@ -5,9 +5,7 @@ A Call to action is a styled link that directs a user to other pages or sometime
 
 As a link
 ```html
-<rh-cta>
-  <a href="/subscribe">Subscribe</a>
-</rh-cta>
+<rh-cta href="/subscribe">Subscribe</rh-cta>
 ```
 
 As a button
@@ -16,3 +14,10 @@ As a button
   <button>Watch live</button>
 </rh-cta>
 ```
+
+With a slotted anchor
+```html
+<rh-cta>
+  <a href="/subscribe">Subscribe</a>
+</rh-cta>
+```
diff --git a/elements/rh-cta/demo/analytics.html b/elements/rh-cta/demo/analytics.html
index 612641e33e..dbc8024c0a 100644
--- a/elements/rh-cta/demo/analytics.html
+++ b/elements/rh-cta/demo/analytics.html
@@ -3,54 +3,116 @@
   support for analytics internally, <code>&lt;rh-cta></code> users must implement their own
   analytics code, taking this demo as an example.</p>
 
-<pre class="language-javascript"><code class="language-javascript">
-function deepClosest(event, selector) {
-  for (const node of event.composedPath().reverse()) {
-    if (node.matches?.(selector)) {
-      return node;
-    }
-  }
-  return event.target.closest(selector);
-}
-
-document.addEventListener('click', function(event) {
-  const cta = deepClosest(event, 'rh-cta');
-  if (cta) {
-    const { href, text, title } = cta.cta;
-    const color = cta.colorPalette;
-    const type = cta.variant;
-    console.log('CTA ANALYTICS EVENT', { href, text, title, color, type });
-  }
-});
-</code></pre>
+<section data-analytics-category="simple">
+  <h2>Simple Case: Light DOM</h2>
+  <rh-cta data-analytics-linktype="cta"
+          data-analytics-text="Default">
+    <a href="#default">Default</a>
+  </rh-cta>
+  <rh-cta variant="primary"
+          data-analytics-linktype="cta"
+          data-analytics-text="Primary">
+    <a href="#primary">Primary</a>
+  </rh-cta>
+  <rh-cta variant="secondary"
+          data-analytics-linktype="cta"
+          data-analytics-text="Secondary">
+    <a href="#secondary">Secondary</a>
+  </rh-cta>
+  <rh-cta variant="brick"
+          data-analytics-linktype="cta"
+          data-analytics-text="Brick">
+    <a href="#brick">Brick</a>
+  </rh-cta>
 
-<section>
-  <h2>Simple Case: Light DOM Analytics</h2>
-  <rh-cta><a href="#default">Default</a></rh-cta>
-  <rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
-  <rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
-  <rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
+  <section data-analytics-category="href-attr">
+    <h3>Using <code>href</code> attribute</h3>
+    <rh-cta href="#default"
+            data-analytics-linktype="cta"
+            data-analytics-text="Default">Default</rh-cta>
+    <rh-cta href="#primary"
+            variant="primary"
+            data-analytics-linktype="cta"
+            data-analytics-text="Primary">Primary</rh-cta>
+    <rh-cta href="#secondary"
+            variant="secondary"
+            data-analytics-linktype="cta"
+            data-analytics-text="Secondary">Secondary</rh-cta>
+    <rh-cta href="#brick"
+            variant="brick"
+            data-analytics-linktype="cta"
+            data-analytics-text="Brick">Brick</rh-cta>
+  </section>
 </section>
 
-<section>
-  <h2>Advanced Case: Deep Shadow Analytics</h2>
+<section data-analytics-category="shadow">
+  <h2>Advanced Case: Deep Shadow</h2>
   <shadow-root>
-    <template shadowroot="open" shadowrootmode="open">
-      <rh-cta><a href="#default">Default</a></rh-cta>
-      <rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
-      <rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
-      <rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
+    <template shadowrootmode="open">
+      <rh-cta data-analytics-linktype="cta"
+              data-analytics-text="Default">
+        <a href="#default">Default</a>
+      </rh-cta>
+      <rh-cta variant="primary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Primary">
+        <a href="#primary">Primary</a>
+      </rh-cta>
+      <rh-cta variant="secondary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Secondary">
+        <a href="#secondary">Secondary</a>
+      </rh-cta>
+      <rh-cta variant="brick"
+              style="width:auto;"
+              data-analytics-linktype="cta"
+              data-analytics-text="Brick">
+        <a href="#brick">Brick</a>
+      </rh-cta>
+    </template>
+  </shadow-root>
+  <h3>Using <code>href</code> attribute</h3>
+  <shadow-root data-analytics-category="href-attr">
+    <template shadowrootmode="open">
+      <rh-cta href="#default"
+              data-analytics-linktype="cta"
+              data-analytics-text="Default">Default</rh-cta>
+      <rh-cta href="#primary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Primary"
+              variant="primary">Primary</rh-cta>
+      <rh-cta href="#secondary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Secondary"
+              variant="secondary">Secondary</rh-cta>
+      <rh-cta href="#brick"
+              style="width:auto;"
+              variant="brick"
+              data-analytics-linktype="cta"
+              data-analytics-text="Brick">Brick</rh-cta>
     </template>
   </shadow-root>
 </section>
 
-<section>
-  <h2>Complex Case: Slotted Link, Deep CTA Analytics</h2>
+<section data-analytics-category="slotted">
+  <h2>Complex Case: Slotted Link, Deep CTA</h2>
   <slotted-link>
-    <a slot="default" href="#default">Default</a>
-    <a slot="primary" href="#primary">Primary</a>
-    <a slot="secondary" href="#secondary">Secondary</a>
-    <a slot="brick" href="#brick">Brick</a>
+    <a slot="default"
+       data-analytics-linktype="cta"
+       data-analytics-text="Default"
+       href="#default">Default</a>
+    <a slot="primary"
+       data-analytics-linktype="cta"
+       data-analytics-text="Primary"
+       href="#primary">Primary</a>
+    <a slot="secondary"
+       data-analytics-linktype="cta"
+       data-analytics-text="Secondary"
+       href="#secondary">Secondary</a>
+    <a slot="brick"
+       data-analytics-linktype="cta"
+       data-analytics-text="Brick"
+       href="#brick">Brick</a>
   </slotted-link>
 </section>
 
@@ -58,6 +120,10 @@ <h2>Last CTA Analytics Event</h2>
 <json-viewer>{}</json-viewer>
 
 <style>
+rh-cta[variant="brick"] {
+  /* for demo reviewer ergonomics, even though this is against style guidelines */
+  width: auto;
+}
 json-viewer {
   --json-viewer-background: white;
   --json-viewer-boolean-color: #f76707;
@@ -70,43 +136,35 @@ <h2>Last CTA Analytics Event</h2>
 </style>
 
 <script type="module">
-import '@rhds/elements/rh-cta/rh-cta.js';
-import 'https://ga.jspm.io/npm:prismjs@1.29.0/prism.js';
-import 'https://ga.jspm.io/npm:prismjs@1.29.0/plugins/autoloader/prism-autoloader.js';
-import 'https://ga.jspm.io/npm:@power-elements/json-viewer@2.1.1/json-viewer.js';
-
-customElements.define('slotted-link', class SlottedLinkElement extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' }).innerHTML = /* html */`
-      <rh-cta><slot name="default"></slot></rh-cta>
-      <rh-cta variant="primary"><slot name="primary"></slot></rh-cta>
-      <rh-cta variant="secondary"><slot name="secondary"></slot></rh-cta>
-      <rh-cta variant="brick"><slot name="brick"></slot></rh-cta>
-    `;
-  }
-});
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import 'https://ga.jspm.io/npm:@power-elements/json-viewer@2.1.1/json-viewer.js';
 
-function deepClosest(event, selector) {
-  for (const node of event.composedPath().reverse()) {
-    if (node.matches?.(selector)) {
-      return node;
+  customElements.define('slotted-link', class SlottedLinkElement extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' }).innerHTML = /* html */`
+        <rh-cta><slot name="default"></slot></rh-cta>
+        <rh-cta variant="primary"><slot name="primary"></slot></rh-cta>
+        <rh-cta variant="secondary"><slot name="secondary"></slot></rh-cta>
+        <rh-cta variant="brick" style="width:auto;"><slot name="brick"></slot></rh-cta>
+      `;
     }
-  }
-  return event.target.closest(selector);
-}
+  });
 
-document.addEventListener('click', function(event) {
-  const cta = deepClosest(event, 'rh-cta');
-  if (cta) {
-    const { href, text, title } = cta.cta;
-    const color = cta.colorPalette;
-    const type = cta.variant ?? 'default';
-    const data = { href, text, title, color, type };
-    // for the purposes of the demo, let's enable console logging here
-    // eslint-disable-next-line no-console
-    console.log('CTA ANALYTICS EVENT', data);
-    document.querySelector('json-viewer').object = data;
-  }
-});
+  document.addEventListener('click', function(event) {
+    const data = event.composedPath().reduceRight((acc, node) => {
+      if (node instanceof HTMLElement) {
+        for (const [datakey, value] of Object.entries(node.dataset)) {
+          if (datakey.startsWith('analytics')) {
+            const key = datakey.replace(/^analytics(.)/, (_, m) => m.toLowerCase());
+            acc[key] = `${acc[key] ?? ''}|${value}`.replace(/^\|/,'');
+          }
+        }
+      }
+      return acc;
+    }, {});
+    if (data.linktype === 'cta') {
+      document.querySelector('json-viewer').object = data;
+    }
+  });
 </script>
diff --git a/elements/rh-cta/demo/href-attribute.html b/elements/rh-cta/demo/href-attribute.html
new file mode 100644
index 0000000000..f12b652bab
--- /dev/null
+++ b/elements/rh-cta/demo/href-attribute.html
@@ -0,0 +1,31 @@
+<section>
+  <rh-cta href="#default">Default</rh-cta>
+  <rh-cta href="#default-video" icon="play-circle">Default Video</rh-cta>
+  <rh-cta href="#primary" variant="primary">Primary</rh-cta>
+  <rh-cta href="#primary-video" variant="primary" icon="play-circle">Video</rh-cta>
+  <rh-cta href="#secondary" variant="secondary">Secondary</rh-cta>
+  <div id="brick">
+    <rh-cta href="#brick" variant="brick">Brick</rh-cta>
+    <rh-cta href="#brick-icon" variant="brick" icon="user">Brick Icon</rh-cta>
+  </div>
+</section>
+
+<style>
+  section {
+    display: flex;
+    gap: var(--rh-space-lg, 16px);
+    flex-flow: row wrap;
+    max-width: 750px;
+    margin: var(--rh-space-2xl, 32px) auto;
+  }
+
+  #brick {
+    display: flex;
+    width: 100%;
+    gap: var(--rh-space-lg, 16px);
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>
diff --git a/elements/rh-cta/demo/no-javascript-customization.html b/elements/rh-cta/demo/no-javascript-customization.html
index e5e51cb720..41b71cacc8 100644
--- a/elements/rh-cta/demo/no-javascript-customization.html
+++ b/elements/rh-cta/demo/no-javascript-customization.html
@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="../rh-cta-lightdom-shim.css">
 <p>rh-cta with custom custom CSS to handle situations where JavaScript does not load.</p>
 
 <section id="variants">
diff --git a/elements/rh-cta/demo/rh-cta.html b/elements/rh-cta/demo/rh-cta.html
index 1aac713fd4..9735d2d63f 100644
--- a/elements/rh-cta/demo/rh-cta.html
+++ b/elements/rh-cta/demo/rh-cta.html
@@ -1,6 +1,4 @@
-<rh-cta>
-  <a href="#">Call to Action</a>
-</rh-cta>
+<rh-cta href="#">Call to Action</rh-cta>
 
 <script type="module">
   import '@rhds/elements/rh-cta/rh-cta.js';
diff --git a/elements/rh-cta/demo/variants.html b/elements/rh-cta/demo/variants.html
index cece083f62..51559f66c8 100644
--- a/elements/rh-cta/demo/variants.html
+++ b/elements/rh-cta/demo/variants.html
@@ -1,36 +1,22 @@
-<section>
-  <rh-cta>
-    <a href="#default">Default</a>
-  </rh-cta>
+<section id="cta-variants">
+  <rh-cta href="#default">Default</rh-cta>
 
-  <rh-cta icon="play-circle">
-    <a href="#default-video">Default Video</a>
-  </rh-cta>
+  <rh-cta icon="play-circle" href="#default-video">Default Video</rh-cta>
 
-  <rh-cta variant="primary">
-    <a href="#primary">Primary</a>
-  </rh-cta>
+  <rh-cta variant="primary" href="#primary">Primary</rh-cta>
 
-  <rh-cta variant="primary" icon="play-circle">
-    <a href="#primary-video">Video</a>
-  </rh-cta>
+  <rh-cta variant="primary" icon="play-circle" href="#primary-video">Video</rh-cta>
 
-  <rh-cta variant="secondary">
-    <a href="#secondary">Secondary</a>
-  </rh-cta>
+  <rh-cta variant="secondary" href="#secondary">Secondary</rh-cta>
 
   <div id="brick">
-    <rh-cta variant="brick">
-      <a href="#brick">Brick</a>
-    </rh-cta>
-    <rh-cta variant="brick" icon="user">
-      <a href="#brick-icon">Brick Icon</a>
-    </rh-cta>
+    <rh-cta variant="brick" href="#brick">Brick</rh-cta>
+    <rh-cta variant="brick" icon="user" href="#brick-icon">Brick Icon</rh-cta>
   </div>
 </section>
 
 <style>
-  section {
+  #cta-variants {
     display: flex;
     gap: var(--rh-space-lg, 16px);
     flex-flow: row wrap;
diff --git a/elements/rh-cta/docs/00-overview.md b/elements/rh-cta/docs/00-overview.md
index 4d9f72d5ca..513ed4db31 100644
--- a/elements/rh-cta/docs/00-overview.md
+++ b/elements/rh-cta/docs/00-overview.md
@@ -10,9 +10,8 @@
 
 ## Sample element
 
-<rh-cta variant="primary">
-  <a href="#primary">Primary</a>
-</rh-cta>
+<rh-cta variant="primary"
+        href="#primary">Primary</rh-cta>
 
 ## Demo
 
@@ -20,8 +19,7 @@ View a live version of this element to see how it can be customized.
 
 {% playground tagName=tagName %}{% endplayground %}
 
-<rh-cta><a href="{{ './demo/' | url }}">Full screen demo</a></rh-cta>
-
+<rh-cta href="{{ './demo/' | url }}">Full screen demo</rh-cta>
 
 ## When to use
 
diff --git a/elements/rh-cta/docs/20-guidelines.md b/elements/rh-cta/docs/20-guidelines.md
index a317e15aa5..dd15f201ae 100644
--- a/elements/rh-cta/docs/20-guidelines.md
+++ b/elements/rh-cta/docs/20-guidelines.md
@@ -1,21 +1,35 @@
 ## Usage
 
-Use a call to action to entice users into making a selection like clicking on a link. For example, use a Primary call to action to bring attention to something important or a Brick call to action if you need to arrange links together in a grid.
+Use a call to action to entice users into making a selection like clicking on a 
+link. For example, use a Primary call to action to bring attention to something 
+important or a Brick call to action if you need to arrange links together in a 
+grid.
 
 ### When to use a call to action
 
-Using a call to action is a way to highlight a link that is used on its own instead of an inline link in a text block. It is commonly used as the last element in a group so users can read about something first and then proceed further if they are interested. Each page should have only one Primary call to action and any remaining calls to action should be represented as lower in hierarchy.
+Using a call to action is a way to highlight a link that is used on its own 
+instead of an inline link in a text block. It is commonly used as the last 
+element in a group so users can read about something first and then proceed 
+further if they are interested. Each page should have only one Primary call to 
+action and any remaining calls to action should be represented as lower in 
+hierarchy.
 
 ### Call to action vs. button
 
-Even though they look similar, a call to action is a link which takes users from one page to a **different page** whereas a button communicates and triggers actions on the **same page**. Use a button when the desired action is submitting a form, canceling a process, or creating a new object.
+Even though they look similar, a call to action is a link which takes users from 
+one page to a **different page** whereas a button communicates and triggers 
+actions on the **same page**. Use a button when the desired action is submitting 
+a form, canceling a process, or creating a new object.
 
 ## Variants
 
-Each call to action has a specific function and the design of each variant signals that function to users. Therefore, it is important that each variant is implemented consistently so they communicate the correct actions.
+Each call to action has a specific function and the design of each variant 
+signals that function to users. Therefore, it is important that each variant is 
+implemented consistently so they communicate the correct actions.
 
 <uxdot-example width-adjustment="788px">
-  <img src="{{ '../cta-variants.png' | url }}" alt="Image of the Primary, Secondary, Brick, and Default variants with descriptive text labels below">
+  <img src="{{ '../cta-variants.png' | url }}" alt="Image of the Primary, 
+    Secondary, Brick, and Default variants with descriptive text labels below">
 </uxdot-example>
 
 <rh-table>
@@ -29,23 +43,29 @@ Each call to action has a specific function and the design of each variant signa
     <tbody>
       <tr>
         <td data-label="Variant">Primary</td>
-        <td data-label="Use case">Use only once per page for the primary or most important link</td>
+        <td data-label="Use case">Use only once per page for the primary or most 
+          important link</td>
       </tr>
       <tr>
         <td data-label="Variant">Secondary</td>
-        <td data-label="Use case">Use several times on the same page for secondary or general links</td>
+        <td data-label="Use case">Use several times on the same page for 
+          secondary or general links</td>
       </tr>
       <tr>
         <td data-label="Variant">Brick</td>
-        <td data-label="Use case">Use several times on the same page to group links together in a grid</td>
+        <td data-label="Use case">Use several times on the same page to group 
+          links together in a grid</td>
       </tr>
       <tr>
         <td data-label="Variant">Default</td>
-        <td data-label="Use case">Use several times on the same page for tertiary or less important links</td>
+        <td data-label="Use case">Use several times on the same page for 
+          tertiary or less important links</td>
       </tr>
       <tr>
         <td data-label="Variant">Video</td>
-        <td data-label="Use case">Triggers a video in a <a href="{{ '/elements/dialog/' | url }}">dialog</a> (applies to Primary, Secondary, and Default variants only)</td>
+        <td data-label="Use case">Triggers a video in a <a href="{{ 
+          '/elements/dialog/' | url }}">dialog</a> (applies to Primary, 
+          Secondary, and Default variants only)</td>
       </tr>
     </tbody>
   </table>
@@ -53,28 +73,36 @@ Each call to action has a specific function and the design of each variant signa
 
 ### Disabled
 
-To indicate that a link is currently unavailable, calls to action can become disabled.
+To indicate that a link is currently unavailable, calls to action can become 
+disabled.
 
 <uxdot-example width-adjustment="529px">
-  <img src="{{ '../cta-disabled.png' | url }}" alt="Image of disabled Primary, Secondary, Brick, and Default variants">
+  <img src="{{ '../cta-disabled.png' | url }}" alt="Image of disabled Primary, 
+    Secondary, Brick, and Default variants">
 </uxdot-example>
 
 
 ### Brick icons
 
-When grouping Brick variants, icons can be paired with text labels to communicate various topics, but the icons must be the same color, height, style, etc.
+When grouping Brick variants, icons can be paired with text labels to 
+communicate various topics, but the icons must be the same color, height, style, 
+etc.
 
 <uxdot-example width-adjustment="872px">
-  <img src="{{ '../cta-brick-icons.png' | url }}" alt="Image of Brick variants with an icon on the left of text and on top of text">
+  <img src="{{ '../cta-brick-icons.png' | url }}" alt="Image of Brick variants 
+    with an icon on the left of text and on top of text">
 </uxdot-example>
 
 ## Writing content
 
 ### Call to action text labels
 
-Call to action text labels should be more action-oriented than button text labels. When writing text labels, be specific and clearly communicate the task or destination by doing the following:
+Call to action text labels should be more action-oriented than button text 
+labels. When writing text labels, be specific and clearly communicate the task 
+or destination by doing the following:
 
-- Make sure the text is unique and easily understood for when screen readers announce text to users
+- Make sure the text is unique and easily understood for when screen readers 
+announce text to users
 - Always start the text label with a verb
 - Use simple words and phrases
 - Do not use multiple verbs
@@ -83,7 +111,8 @@ Call to action text labels should be more action-oriented than button text label
 - Do not use any other icons except for the ones that are included
 
 <uxdot-example width-adjustment="411px">
-  <img src="{{ '../cta-text-labels.png' | url }}" alt="Image of Default variants showing how to incorrectly and correctly write text labels">
+  <img src="{{ '../cta-text-labels.png' | url }}" alt="Image of Default variants 
+    showing how to incorrectly and correctly write text labels">
 </uxdot-example>
 
 ### Clarity of language
@@ -92,44 +121,55 @@ Text labels can be inviting as well as to the point, vague messaging does not
 help our users make informed decisions.
 
 <uxdot-example width-adjustment="458px">
-  <img src="{{ '../cta-clarity-of-language.png' | url }}" alt="Image of how to incorrectly and correctly use clear and straightforward language">
+  <img src="{{ '../cta-clarity-of-language.png' | url }}" alt="Image of how to 
+    incorrectly and correctly use clear and straightforward language">
 </uxdot-example>
 
 ### Long text labels
 
-Users do not want to spend more time reading than necessary, so write text labels with as few words as possible.
+Users do not want to spend more time reading than necessary, so write text 
+labels with as few words as possible.
 
 <uxdot-example width-adjustment="675px">
-  <img src="{{ '../cta-long-text-labels-1.png' | url }}" alt="Image of comparing very long and shortened text labels">
+  <img src="{{ '../cta-long-text-labels-1.png' | url }}" alt="Image of comparing 
+    very long and shortened text labels">
 </uxdot-example>
 
-Long text labels will break to two lines on small breakpoints or when translated to certain languages. This can be avoided by writing less text.
+Long text labels will break to two lines on small breakpoints or when translated 
+to certain languages. This can be avoided by writing less text.
 
 <rh-alert state="warning">
   <h4 slot="header">Warning</h4>
-  <p>The arrow icon in the Default variant should always be connected to at least one word on the same line.</p>
+  <p>The arrow icon in the Default variant should always be connected to at 
+    least one word on the same line.</p>
 </rh-alert>
 
 <uxdot-example width-adjustment="360px">
-  <img src="{{ '../cta-long-text-labels-2.png' | url }}" alt="Image of Primary, Default, and Brick variants within a small breakpoint showing each text label breaking to two lines">
+  <img src="{{ '../cta-long-text-labels-2.png' | url }}" alt="Image of Primary, 
+    Default, and Brick variants within a small breakpoint showing each text 
+    label breaking to two lines">
 </uxdot-example>
 
 
 ### Call to action vs. button text labels
 
-Call to action text labels are written to entice users to select a link whereas button text labels are written to be short and communicate an action.
+Call to action text labels are written to entice users to select a link whereas 
+button text labels are written to be short and communicate an action.
 
 <uxdot-example width-adjustment="689px">
-  <img src="{{ '../cta-call-to-action-vs-button-text-labels.png' | url }}" alt="Image of comparing text labels in calls to action versus text labels in buttons">
+  <img src="{{ '../cta-call-to-action-vs-button-text-labels.png' | url }}" 
+    alt="Image of comparing text labels in calls to action versus text labels in 
+    buttons">
 </uxdot-example>
 
 
 ### Character count
-The recommended maximum character count for the variants of a call to action are listed below and include spaces.
+The recommended maximum character count for the variants of a call to action are 
+listed below and include spaces.
 
 <rh-table>
   <table>
-    <thead>
+  <thead>
       <tr>
         <th scope="col" data-label="Variants" style="width: 50%">Variants</th>
         <th scope="col" data-label="Character count">Character count</th>
@@ -160,31 +200,41 @@ The recommended maximum character count for the variants of a call to action are
 
 ### Heirarchy
 
-Calls to action are ordered by hierarchy with the Primary variant being the most important. Variants that are lower in hierarchy can be used more than one time per page.
+Calls to action are ordered by hierarchy with the Primary variant being the most 
+important. Variants that are lower in hierarchy can be used more than one time 
+per page.
 
 <uxdot-example width-adjustment="720px">
-  <img src="{{ '../cta-layout-hierarchy.png' | url }}" alt="Image of calls to action hierarchy and usage guidance">
+  <img src="{{ '../cta-layout-hierarchy.png' | url }}" alt="Image of calls to 
+    action hierarchy and usage guidance">
 </uxdot-example>
 
 
 ### Placement
 
-Calls to action can be placed in a variety of layouts including cards, grids, lists, and more. It is commonly used as the last element in a group so users can read about something first and then proceed further if they are interested.
+Calls to action can be placed in a variety of layouts including cards, grids, 
+lists, and more. It is commonly used as the last element in a group so users can 
+read about something first and then proceed further if they are interested.
 
 <uxdot-example width-adjustment="872px">
-  <img src="{{ '../cta-placement-examples-1.png' | url }}" alt="Image of calls to action used in context including under a text block and within a card">
+  <img src="{{ '../cta-placement-examples-1.png' | url }}" alt="Image of calls 
+    to action used in context including under a text block and within a card">
 </uxdot-example>
 
 <uxdot-example width-adjustment="872px">
-  <img src="{{ '../cta-placement-examples-2.png' | url }}" alt="Image of calls to action used in context including within a grid and in a list">
+  <img src="{{ '../cta-placement-examples-2.png' | url }}" alt="Image of calls 
+    to action used in context including within a grid and in a list">
 </uxdot-example>
 
 ### Grouping
 
-Call to action variants are ordered by hierarchy with Primary being the highest. Variants that are lower in hierarchy can be grouped with Primary as well as used more than once per page.
+Call to action variants are ordered by hierarchy with Primary being the highest. 
+Variants that are lower in hierarchy can be grouped with Primary as well as used 
+more than once per page.
 
 <uxdot-example width-adjustment="650px">
-  <img src="{{ '../cta-layout-grouping.png' | url }}" alt="Image of call to action groups and their hierarchy from left to right">
+  <img src="{{ '../cta-layout-grouping.png' | url }}" alt="Image of call to 
+    action groups and their hierarchy from left to right">
 </uxdot-example>
 
 ### Bricks
@@ -193,59 +243,78 @@ Brick variants are flexible and can stretch to fit different column widths.
 
 <rh-alert state="warning">
   <h4 slot="header">Warning</h4>
-  <p>Long text labels will break to two lines, therefore write no more than two or three words per Brick variant.</p>
+  <p>Long text labels will break to two lines, therefore write no more than two 
+    or three words per Brick variant.</p>
 </rh-alert>
 
 <uxdot-example width-adjustment="872px">
-  <img src="{{ '../cta-layout-bricks.png' | url }}" alt="Image of Brick variants stretched to fit a variety of grid formations">
+  <img src="{{ '../cta-layout-bricks.png' | url }}" alt="Image of Brick variants 
+    stretched to fit a variety of grid formations">
 </uxdot-example>
 
 ### Space in groups
   
-Horizontal and vertical spacing between Primary and Secondary variants is `24px`.
+Horizontal and vertical spacing between Primary and Secondary variants is 
+`24px`.
 
 <rh-alert state="info">
   <h4 slot="header">Helpful tip</h4>
-  <p>Spacing guidance between calls to action and text or other elements are on the Spacing page.</p>
+  <p>Spacing guidance between calls to action and text or other elements are on 
+    the Spacing page.</p>
 </rh-alert>
 
 <uxdot-example width-adjustment="473px">
-  <img src="{{ '../cta-layout-space-in-groups-1.png' | url }}" alt="Image of 24px spacers in between Primary and Secondary variants">
+  <img src="{{ '../cta-layout-space-in-groups-1.png' | url }}" alt="Image of 
+    24px spacers in between Primary and Secondary variants">
 </uxdot-example>
 
 Horizontal and vertical spacing between the Default variant is `24px`.
 
 <uxdot-example width-adjustment="705px">
-  <img src="{{ '../cta-layout-space-in-groups-2.png' | url }}" alt="Image of 24px spacers in between Default variants">
+  <img src="{{ '../cta-layout-space-in-groups-2.png' | url }}" alt="Image of 
+    24px spacers in between Default variants">
 </uxdot-example>
 
-Horizontal and vertical spacing between Brick variants should be the same as grid gutters.
+Horizontal and vertical spacing between Brick variants should be the same as 
+grid gutters.
 
 <uxdot-example width-adjustment="872px">
-  <img src="{{ '../cta-layout-space-in-groups-3.png' | url }}" alt="Image of a variety of space values in between Brick variants">
+  <img src="{{ '../cta-layout-space-in-groups-3.png' | url }}" alt="Image of a 
+    variety of space values in between Brick variants">
 </uxdot-example>
 
 ## Behavior
 
 ### Hiding or revealing content
 
-A Brick variant can hide and reveal a panel of content when selected like an [accordion](/elements/accordion/). However, only one Brick variant can be selected at a time like [tabs](/elements/tabs/).
+A Brick variant can hide and reveal a panel of content when selected like an 
+[accordion](/elements/accordion/). However, only one Brick variant can be 
+selected at a time like [tabs](/elements/tabs/).
 
 <uxdot-example width-adjustment="1000px">
-  <img src="{{ '../cta-bricks-hide-and-reveal.png' | url }}" alt="Image of Brick variants with a panel open showing a variety of styles and content formations">
+  <img src="{{ '../cta-bricks-hide-and-reveal.png' | url }}" alt="Image of Brick 
+    variants with a panel open showing a variety of styles and content 
+    formations">
 </uxdot-example>
 
 
 ## Responsive design
 
-On large breakpoints, calls to action are ordered by hierarchy from left to right in one row. On small breakpoints, if calls to action have long text labels, a second row appears.
+On large breakpoints, calls to action are ordered by hierarchy from left to 
+right in one row. On small breakpoints, if calls to action have long text 
+labels, a second row appears.
 
-<uxdot-example width-adjustment="1000px" variant="full" no-border alignment="left">
-  <img src="{{ '../cta-breakpoints-large.png' | url }}" alt="Image of calls to action in a layout on a large breakpoint showing them all in one row">
+<uxdot-example width-adjustment="1000px" variant="full" no-border 
+alignment="left">
+<img src="{{ '../cta-breakpoints-large.png' | url }}" alt="Image of calls to 
+  action in a layout on a large breakpoint showing them all in one row">
 </uxdot-example>
 
-<uxdot-example width-adjustment="576px" variant="full" no-border alignment="left">
-  <img src="{{ '../cta-breakpoints-small.png' | url }}" alt="Image of calls to action in a layout on a small breakpoint showing two variants in one row and one variant in a second row">
+<uxdot-example width-adjustment="576px" variant="full" no-border 
+alignment="left">
+<img src="{{ '../cta-breakpoints-small.png' | url }}" alt="Image of calls to 
+  action in a layout on a small breakpoint showing two variants in one row and 
+  one variant in a second row">
 </uxdot-example>
 
 
@@ -256,7 +325,8 @@ On large breakpoints, calls to action are ordered by hierarchy from left to righ
 Do not change the styles of any variant.
 
 <uxdot-example width-adjustment="407px" danger>
-  <img src="{{ '../cta-best-practice-1.png' | url }}" alt="Image of several variants with brand new styles which is incorrect usage">
+  <img src="{{ '../cta-best-practice-1.png' | url }}" alt="Image of several 
+    variants with brand new styles which is incorrect usage">
 </uxdot-example>
 
 ### Primary variants
@@ -264,7 +334,8 @@ Do not change the styles of any variant.
 Do not use more than one Primary variant on any page.
 
 <uxdot-example width-adjustment="407px" danger>
-  <img src="{{ '../cta-best-practice-2.png' | url }}" alt="Image of two Primary variants in one row which is incorrect usage">
+  <img src="{{ '../cta-best-practice-2.png' | url }}" alt="Image of two Primary 
+    variants in one row which is incorrect usage">
 </uxdot-example>
 
 ### Brick variants
@@ -272,7 +343,8 @@ Do not use more than one Primary variant on any page.
 Do not group different Brick variants together, use one variant per grid.
 
 <uxdot-example width-adjustment="407px" danger>
-  <img src="{{ '../cta-best-practice-3.png' | url }}" alt="Image of Brick variants in one row with and without icons which is incorrect usage">
+  <img src="{{ '../cta-best-practice-3.png' | url }}" alt="Image of Brick 
+    variants in one row with and without icons which is incorrect usage">
 </uxdot-example>
 
 
@@ -281,29 +353,34 @@ Do not group different Brick variants together, use one variant per grid.
 Do not group more than two different variants together.	
 
 <uxdot-example width-adjustment="483px" danger>
-  <img src="{{ '../cta-best-practice-4.png' | url }}" alt="Image of Primary, Secondary, and Default variants in one row which is incorrect usage">
+  <img src="{{ '../cta-best-practice-4.png' | url }}" alt="Image of Primary, 
+    Secondary, and Default variants in one row which is incorrect usage">
 </uxdot-example>
 
 
 ### Changing heirarchy
 
-Do not change the hierarchy, variants that are higher in hierarchy should start first on the left.
+Do not change the hierarchy, variants that are higher in hierarchy should start 
+first on the left.
 
 <rh-alert state="info">
   <h4 slot="header">Helpful tip</h4>
   <p>Hierarchy should be reversed when using right-to-left languages.</p>
-</rh-alert>
+  </rh-alert>
 
 <uxdot-example width-adjustment="533px" danger>
-  <img src="{{ '../cta-best-practice-5.png' | url }}" alt="Image of the Primary variant last in a row which is incorrect usage">
+  <img src="{{ '../cta-best-practice-5.png' | url }}" alt="Image of the Primary 
+    variant last in a row which is incorrect usage">
 </uxdot-example>
 
 ### Too many options
 
-Do not group more than three variants together otherwise the risk of [choice paralysis][paralysis]{target="_blank"} greatly increases.
+Do not group more than three variants together otherwise the risk of [choice 
+paralysis][paralysis]{target="_blank"} greatly increases.
 
 <uxdot-example width-adjustment="659px" danger>
-  <img src="{{ '../cta-best-practice-6.png' | url }}" alt="Image of two rows of calls to action with four variants in each row which is incorrect usage">
+  <img src="{{ '../cta-best-practice-6.png' | url }}" alt="Image of two rows of 
+    calls to action with four variants in each row which is incorrect usage">
 </uxdot-example>
 
 ### Stretching
@@ -311,7 +388,8 @@ Do not group more than three variants together otherwise the risk of [choice par
 Do not add extra spacing or stretch the width of any variant except for Bricks.
 
 <uxdot-example width-adjustment="672px" danger>
-  <img src="{{ '../cta-best-practice-7.png' | url }}" alt="Image of Primary and Secondary variants stretched which is incorrect usage">
+  <img src="{{ '../cta-best-practice-7.png' | url }}" alt="Image of Primary and 
+    Secondary variants stretched which is incorrect usage">
 </uxdot-example>
 
 [paralysis]: https://www.shopify.com/partners/blog/choice-paralysis
diff --git a/elements/rh-cta/docs/30-code.md b/elements/rh-cta/docs/30-code.md
index b4107406cb..625569b684 100644
--- a/elements/rh-cta/docs/30-code.md
+++ b/elements/rh-cta/docs/30-code.md
@@ -3,9 +3,7 @@
 ## Usage
 
 ```html
-<rh-cta>
-    <a href="#default">Default</a>
-</rh-cta>
+<rh-cta href="#default">Default</rh-cta>
 ```
 
 {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css
index e2cb2bc8f4..86b776a94c 100644
--- a/elements/rh-cta/rh-cta.css
+++ b/elements/rh-cta/rh-cta.css
@@ -6,7 +6,8 @@
   max-width: max-content;
 }
 
-::slotted(*) {
+a,
+::slotted(:is(a, button, input)) {
   vertical-align: middle !important;
   white-space: break-spaces !important;
   word-break: break-word !important;
@@ -20,6 +21,7 @@
   z-index: 2 !important;
 }
 
+a:after,
 ::slotted(a):after {
   display: block;
   content: "";
@@ -109,7 +111,9 @@ svg {
  *****************************************************************************/
 
 :host(:is(:focus, :focus-within)),
-:host(:is(:focus, :focus-within)) ::slotted(*),
+:host(:is(:focus, :focus-within)) ::slotted(:is(a, button, input)),
+a:focus,
+a:focus-within,
 ::slotted(:focus) {
   outline: none !important;
 }
@@ -193,20 +197,24 @@ svg {
   padding-block: var(--rh-space-lg, 16px);
 }
 
-:host([variant]) #container ::slotted(*) {
+:host([variant]) #container a,
+:host([variant]) #container ::slotted(:is(a, button, input)) {
   display: inline-flex !important;
   text-align: center !important;
 }
 
-:host([variant$="ary"]) #container ::slotted(*) {
+:host([variant$="ary"]) #container a,
+:host([variant$="ary"]) #container ::slotted(:is(a, button, input)) {
   font-size: var(--rh-cta-font-size-priority, var(--rh-font-size-body-text-md, 1rem));
 }
 
-:host([variant]) #container.icon ::slotted(*) {
+:host([variant]) #container.icon a,
+:host([variant]) #container.icon ::slotted(:is(a, button, input)) {
   display: inline !important;
 }
 
-:host([variant]) #container.svg ::slotted(*) {
+:host([variant]) #container.svg a,
+:host([variant]) #container.svg ::slotted(:is(a, button, input)) {
   padding-inline-end: calc(var(--_arrow-plus-padding) + var(--rh-space-xl, 24px)) !important;
 }
 
diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts
index e05fc80253..89030b94bd 100644
--- a/elements/rh-cta/rh-cta.ts
+++ b/elements/rh-cta/rh-cta.ts
@@ -2,52 +2,30 @@ import { LitElement, 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 { ifDefined } from 'lit/directives/if-defined.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import { DirController } from '../../lib/DirController.js';
 
-import { type ColorPalette } from '../../lib/context/color/provider.js';
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import style from './rh-cta.css';
 
-export interface CtaData {
-  href?: string;
-  text?: string;
-  title?: string;
-  color?: string;
-  type?: string;
-}
-
-const supportedTags = ['a', 'button']; // add input later
 function isSupportedContent(el: Element | null): el is HTMLAnchorElement | HTMLButtonElement {
-  return !!el && supportedTags.includes(el.localName);
-}
-
-const CONTENT = new WeakMap<Element, boolean>();
-function contentInitialized(el: Element | null): boolean {
-  return !!el && !!CONTENT.get(el);
-}
-
-function isButton(element: Element): element is HTMLButtonElement {
-  return element.tagName.toLowerCase() === 'button';
+  return el instanceof HTMLAnchorElement || el instanceof HTMLButtonElement;
 }
 
 /**
  * A call to action is a styled link that entices users to make a selection.
- *
  * @summary     Directs users to other pages or displays extra content
  * @slot
- *              We expect an anchor tag, `<a>` with an `href`, to be the first child inside `rh-cta` element. Less preferred but
- *              allowed for specific use-cases include: `<button>` (note however that the `button` tag is not supported for the
- *              default CTA styles).
- * @attr        color-palette
- *              [**Deprecated**] intended for use in elements that have slotted descendants, will be removed in a future release.
- *              - Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides
- *              parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies.
- *              See [CSS Custom Properties](#css-custom-properties) for default values.
- *              {@deprecated color-palette intended for usage in elements that have slotted descendants}
+ *              The default slot contains the link text when the `href`
+ *              attribute is set. In case there is no href attribute, an anchor
+ *              tag (`<a href="...">`) should be the first child inside `rh-cta`
+ *              element. Less preferred but allowed for specific use-cases
+ *              include: `<button>` (note however that the `button` tag is not
+ *              supported for the default CTA styles).
  * @csspart     container - container element for slotted CTA
  * @cssprop     {<color>} --rh-cta-color
  *              Sets the cta color
@@ -130,23 +108,37 @@ export class RhCta extends LitElement {
    */
   @property({ reflect: true }) variant?: 'primary' | 'secondary' | 'brick';
 
-  @property({ reflect: true }) icon?: string;
-
   /**
-   * Sets color theme based on parent context
+   * When set, overrides the default slot. Use *instead* of a slotted anchor tag
    */
-  @colorContextConsumer() private on?: ColorTheme;
+  @property({ reflect: true }) href?: string;
 
-  /** The slotted `<a>` or `<button>` element */
-  public cta: HTMLAnchorElement | HTMLButtonElement | null = null;
+  /** when `href` is set, the link's `download` attribute */
+  @property() download?: string;
 
-  /** true while the initializer method is running - to prevent double-execution */
-  #initializing = false;
+  /** when `href` is set, the link's `referrerpolicy` attribute */
+  @property() referrerpolicy?: string;
 
-  /** Is the element in an RTL context? */
-  #dir = new DirController(this);
+  /** when `href` is set, the link's `rel` attribute */
+  @property() rel?: string;
 
-  #logger = new Logger(this);
+  /** when `href` is set, the link's `target` attribute */
+  @property() target?: string;
+
+  /**
+   * Icon name
+   */
+  @property({ reflect: true }) icon?: string;
+
+  /**
+   * Icon set
+   */
+  @property({ attribute: 'icon-set' }) iconSet = 'far';
+
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer() private on?: ColorTheme;
 
   protected override async getUpdateComplete(): Promise<boolean> {
     if (this.icon) {
@@ -155,83 +147,75 @@ export class RhCta extends LitElement {
     return super.getUpdateComplete();
   }
 
-  get #isDefault(): boolean {
-    return !this.hasAttribute('variant');
-  }
-
-  // START DEPRECATION WARNING
-  // note: remove ColorPalette type, and property decorator import above
   /**
-   * @deprecated do not use the color-palette attribute: Use themable containers (e.g. rh-surface or rh-card) instead
+   * The slotted `<a>` or `<button>` element
+   * @deprecated use `data-analytics-` attributes instead
    */
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
-
-  #mo = new MutationObserver(() => this.#onMutation());
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.#mo.observe(this, { attributes: true, attributeFilter: ['color-palette'] });
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.#mo.disconnect();
+  public get cta(): HTMLAnchorElement | HTMLButtonElement | null {
+    return this.#cta;
   }
 
-  #onMutation() {
-    this.#logger.warn(
-      'The color-palette attribute is deprecated and will be removed in a future release.'
+  get #cta() {
+    return (
+      this.shadowRoot?.querySelector('a')
+      ?? this.shadowRoot?.querySelector('slot')?.assignedElements().find(isSupportedContent)
+      ?? null
     );
   }
-  // END DEPRECATION WARNING
 
-  render() {
+  /** Is the element in an RTL context? */
+  #dir = new DirController(this);
+
+  #logger = new Logger(this);
+
+  override render() {
+    const {
+      download, href, referrerpolicy, rel, target,
+      icon, iconSet,
+      on = '', variant,
+    } = this;
     const rtl = this.#dir.dir === 'rtl';
-    // START DEPRECATION WARNING
-    // note: remove on from classMap below
-    const dark = this.colorPalette?.includes('dark') ? 'dark' : '';
-    const on = this.on ?? dark;
-    // END DEPRECATION WARNING
-    const svg = !!this.#isDefault;
-    const icon = !!this.icon;
-    const iconOrSvg = !!this.#isDefault || !!this.icon;
+    const isDefault = !variant;
+    const svg = isDefault;
+    const iconOrSvg = isDefault || !!icon;
+    const follower = !iconOrSvg ? '' : variant !== 'brick' && icon ? html`<!--
+   --><pf-icon icon=${icon}
+               set=${iconSet ?? 'far'}
+               size="md"></pf-icon>` : variant ? '' : html`<!--
+   --><svg xmlns="http://www.w3.org/2000/svg"
+           viewBox="0 0 31.56 31.56"
+           width="1em"
+           focusable="false"
+           aria-hidden="true">
+        <path d="M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z" />
+      </svg>`;
     return html`
-      <span id="container" part="container" class="${classMap({ rtl, [on]: !!on, icon, svg })}">${this.variant === 'brick' && this.icon ? html`
-        <pf-icon icon=${this.icon} size="md" set="far"></pf-icon>` : ''}
-        <slot @slotchange=${this.firstUpdated}></slot>${!iconOrSvg ? '' : this.variant !== 'brick' && this.icon ? html`
-        <pf-icon icon=${this.icon} size="md" set="far"></pf-icon>` : this.variant ? '' : html`
-        <svg xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 31.56 31.56" focusable="false" width="1em" aria-hidden="true">
-          <path d="M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z" />
-        </svg>`}
+      <span id="container"
+            part="container"
+            class=${classMap({ rtl, icon: !!icon, svg, [on]: !!on })}
+            @slotchange=${this.firstUpdated}>${variant === 'brick' && icon ? html`
+        <pf-icon size="md"
+                 icon=${icon}
+                 set="${iconSet ?? 'far'}"></pf-icon>` : ''}${href ? html`
+        <a href=${href}
+           download="${ifDefined(download)}"
+           rel="${ifDefined(rel)}"
+           referrerpolicy="${ifDefined(referrerpolicy)}"
+           target="${ifDefined(target)}"><slot></slot>${follower}</a>`
+   : html`<slot></slot>${follower}`}
       </span>
     `;
   }
 
   override firstUpdated() {
-    let [cta] = this.shadowRoot?.querySelector('slot')?.assignedElements() ?? [];
-
-    while (cta instanceof HTMLSlotElement) {
-      [cta] = cta.assignedElements();
-    }
-
-    if (contentInitialized(cta) || this.#initializing) {
-      return;
-    }
-
-    this.#initializing = true;
-
-    // If the first child does not exist or that child is not a supported tag
-    if (!isSupportedContent(cta)) {
+    const { href, variant } = this;
+    const cta = this.#cta;
+    if (href && cta !== this.shadowRoot?.querySelector('a')) {
+      return this.#logger.warn(`When the href attribute is used, slotted content must not be a link`);
+    } else if (!href && !cta) {
       return this.#logger.warn(`The first child in the light DOM must be a supported call-to-action tag (<a>, <button>)`);
-    } else if (isButton(cta) && !this.variant) {
+    } else if (!href && cta instanceof HTMLButtonElement && !variant) {
       return this.#logger.warn(`Button tag is not supported semantically by the default link styles`);
-    } else {
-      // Capture the first child as the CTA element
-      this.cta = cta;
-
-      CONTENT.set(this.cta, true);
-      this.#initializing = false;
     }
   }
 }