From 1b5273de761fcbebcf8d4c2897356dae8b829528 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Sun, 21 Jun 2026 23:13:37 +0530
Subject: [PATCH 1/9] anchor: add visited configurable

---
 docs/elements/anchor/index.ts   | 23 +++++++++++++++++++++++
 scss/elements/anchor/index.scss |  8 ++++++++
 2 files changed, 31 insertions(+)

diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index d30f8ea..65b1e50 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -28,6 +28,11 @@ export const meta = {
       type: 'selector',
       default: 'a',
     },
+    {
+      key: 'visited',
+      type: 'boolean',
+      default: 'false',
+    },
   ],
 } as const satisfies Meta;
 
@@ -39,6 +44,14 @@ const html = /* html */`
 <a href="https://ibm.com">IBM.com ${launchIcon}</a>
 `;
 
+const visitedHtml = /* html */`
+<p>Click the link below to mark it as visited:</p>
+
+<br />
+
+<a href='https://ibm.com'>IBM.com (with visited state enabled)</a>
+`;
+
 export const demos: Demo[] = [
   {
     id: 'default',
@@ -47,4 +60,14 @@ export const demos: Demo[] = [
       raw: html,
     },
   },
+  {
+    id: 'visited-color',
+    name: 'Visited color',
+    html: {
+      raw: visitedHtml,
+    },
+    config: {
+      visited: 'true',
+    },
+  },
 ];
diff --git a/scss/elements/anchor/index.scss b/scss/elements/anchor/index.scss
index c2e7f94..3879bf2 100644
--- a/scss/elements/anchor/index.scss
+++ b/scss/elements/anchor/index.scss
@@ -17,11 +17,13 @@ $config: () !default;
 
 $-default-config: (
   selector: 'a',
+  visited: false,
 );
 
 /// @group anchor
 /// @param {Map} config [()]
 /// @param {Selector} config.selector ['a']
+/// @param {Bool} config.visited [false] - Enable visited link styles using theme.$link-visited
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
@@ -37,6 +39,12 @@ $-default-config: (
       color: theme.$link-primary-hover;
     }
 
+    @if map.get($props, 'visited') == true {
+      &:visited {
+        color: theme.$link-visited;
+      }
+    }
+
     &:focus {
       @include focus-outline.focus-outline('outline');
     }

From e4d02a1be1981e0732c111aea294dc930cd50cbf Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Sun, 21 Jun 2026 23:26:09 +0530
Subject: [PATCH 2/9] docs: simplify

---
 docs/elements/anchor/index.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index 65b1e50..84573ca 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -45,11 +45,7 @@ const html = /* html */`
 `;
 
 const visitedHtml = /* html */`
-<p>Click the link below to mark it as visited:</p>
-
-<br />
-
-<a href='https://ibm.com'>IBM.com (with visited state enabled)</a>
+<a href='https://ibm.com'>IBM.com (with :visited styles)</a>
 `;
 
 export const demos: Demo[] = [

From 712af127ff86e9e201aa86bc946cc3201eac3412 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Sun, 21 Jun 2026 23:27:02 +0530
Subject: [PATCH 3/9] docs: simplify

---
 docs/elements/anchor/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index 84573ca..14f4a06 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -57,8 +57,8 @@ export const demos: Demo[] = [
     },
   },
   {
-    id: 'visited-color',
-    name: 'Visited color',
+    id: 'visited',
+    name: 'Visited',
     html: {
       raw: visitedHtml,
     },

From 0382ea3e923717d93fd437f710fee5d28ef325e3 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Sun, 21 Jun 2026 23:35:35 +0530
Subject: [PATCH 4/9] fix: demo styles

---
 docs/elements/anchor/index.scss | 10 +++++++++-
 docs/elements/anchor/index.ts   |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/elements/anchor/index.scss b/docs/elements/anchor/index.scss
index 44938ca..b7fcfa6 100644
--- a/docs/elements/anchor/index.scss
+++ b/docs/elements/anchor/index.scss
@@ -12,4 +12,12 @@ $name: 'anchor';
 
 @include docs.demo($name, 'default') {
   @include anchor.styles;
-};
+}
+
+@include docs.demo($name, 'visited') {
+  @include anchor.styles(
+    (
+      visited: true,
+    )
+  );
+}
diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index 14f4a06..7214957 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -63,6 +63,7 @@ export const demos: Demo[] = [
       raw: visitedHtml,
     },
     config: {
+      selector: '.cds--demo--anchor--visited a',
       visited: 'true',
     },
   },

From 8af633731e9715ff730a27db9a4a871abe0c8d60 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Sun, 21 Jun 2026 23:38:11 +0530
Subject: [PATCH 5/9] docs: remove un-needed selector

---
 docs/elements/anchor/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index 7214957..14f4a06 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -63,7 +63,6 @@ export const demos: Demo[] = [
       raw: visitedHtml,
     },
     config: {
-      selector: '.cds--demo--anchor--visited a',
       visited: 'true',
     },
   },

From 159d7c3cfe663f55ab74ca72cd9010b9762b8fd9 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:03:11 +0530
Subject: [PATCH 6/9] fix: address review changes

---
 docs/elements/anchor/index.ts   | 10 +++++-----
 scss/elements/anchor/index.scss |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index 14f4a06..e0d370b 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -29,9 +29,9 @@ export const meta = {
       default: 'a',
     },
     {
-      key: 'visited',
+      key: 'emit-visited',
       type: 'boolean',
-      default: 'false',
+      default: 'true',
     },
   ],
 } as const satisfies Meta;
@@ -44,8 +44,8 @@ const html = /* html */`
 <a href="https://ibm.com">IBM.com ${launchIcon}</a>
 `;
 
-const visitedHtml = /* html */`
-<a href='https://ibm.com'>IBM.com (with :visited styles)</a>
+const visitedHtml = /* html */ `
+<a href="${window.location.href}">Visited link</a>
 `;
 
 export const demos: Demo[] = [
@@ -63,7 +63,7 @@ export const demos: Demo[] = [
       raw: visitedHtml,
     },
     config: {
-      visited: 'true',
+      'emit-visited': 'true',
     },
   },
 ];
diff --git a/scss/elements/anchor/index.scss b/scss/elements/anchor/index.scss
index 3879bf2..f33cb50 100644
--- a/scss/elements/anchor/index.scss
+++ b/scss/elements/anchor/index.scss
@@ -17,13 +17,13 @@ $config: () !default;
 
 $-default-config: (
   selector: 'a',
-  visited: false,
+  visited: true,
 );
 
 /// @group anchor
 /// @param {Map} config [()]
 /// @param {Selector} config.selector ['a']
-/// @param {Bool} config.visited [false] - Enable visited link styles using theme.$link-visited
+/// @param {Bool} config.emit-visited [true] - Enable visited link styles using theme.$link-visited
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
@@ -39,7 +39,7 @@ $-default-config: (
       color: theme.$link-primary-hover;
     }
 
-    @if map.get($props, 'visited') == true {
+    @if map.get($props, 'emit-visited') == true {
       &:visited {
         color: theme.$link-visited;
       }

From 455da8c4f46278cd5ce72d672d8c5d64ac860e25 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:19:40 +0530
Subject: [PATCH 7/9] fix: make default as true for visited, and alternate the
 stories

---
 docs/elements/anchor/index.scss |  4 ++--
 docs/elements/anchor/index.ts   | 12 ++++--------
 scss/elements/anchor/index.scss |  2 +-
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/docs/elements/anchor/index.scss b/docs/elements/anchor/index.scss
index b7fcfa6..7590a6e 100644
--- a/docs/elements/anchor/index.scss
+++ b/docs/elements/anchor/index.scss
@@ -14,10 +14,10 @@ $name: 'anchor';
   @include anchor.styles;
 }
 
-@include docs.demo($name, 'visited') {
+@include docs.demo($name, 'no-visited-styles') {
   @include anchor.styles(
     (
-      visited: true,
+      emit-visited: false,
     )
   );
 }
diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index e0d370b..32380bc 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -44,10 +44,6 @@ const html = /* html */`
 <a href="https://ibm.com">IBM.com ${launchIcon}</a>
 `;
 
-const visitedHtml = /* html */ `
-<a href="${window.location.href}">Visited link</a>
-`;
-
 export const demos: Demo[] = [
   {
     id: 'default',
@@ -57,13 +53,13 @@ export const demos: Demo[] = [
     },
   },
   {
-    id: 'visited',
-    name: 'Visited',
+    id: 'no-visited-styles',
+    name: 'No visited styles',
     html: {
-      raw: visitedHtml,
+      raw: html,
     },
     config: {
-      'emit-visited': 'true',
+      'emit-visited': 'false',
     },
   },
 ];
diff --git a/scss/elements/anchor/index.scss b/scss/elements/anchor/index.scss
index f33cb50..84f1c41 100644
--- a/scss/elements/anchor/index.scss
+++ b/scss/elements/anchor/index.scss
@@ -17,7 +17,7 @@ $config: () !default;
 
 $-default-config: (
   selector: 'a',
-  visited: true,
+  emit-visited: true,
 );
 
 /// @group anchor

From dc442d7e59b145ad23401554fca59c2813ea5510 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Wed, 24 Jun 2026 15:12:27 +0530
Subject: [PATCH 8/9] fix: review comments

---
 docs/elements/anchor/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index 32380bc..4496962 100644
--- a/docs/elements/anchor/index.ts
+++ b/docs/elements/anchor/index.ts
@@ -38,10 +38,14 @@ export const meta = {
 
 const html = /* html */`
 <a href="https://ibm.com">IBM.com</a>
+<br />
+<a href="${window.location.href}">Visited link</a>
 
 <br /><br />
 
 <a href="https://ibm.com">IBM.com ${launchIcon}</a>
+<br />
+<a href="${window.location.href}">Visited link${launchIcon}</a>
 `;
 
 export const demos: Demo[] = [

From 2be689560963ec2d2de7de8af144600018449515 Mon Sep 17 00:00:00 2001
From: devadula-nandan <47176249+devadula-nandan@users.noreply.github.com>
Date: Thu, 25 Jun 2026 13:55:21 +0530
Subject: [PATCH 9/9] fix: cross browser safari firefox issues

---
 scss/elements/anchor/index.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/scss/elements/anchor/index.scss b/scss/elements/anchor/index.scss
index 84f1c41..55e499d 100644
--- a/scss/elements/anchor/index.scss
+++ b/scss/elements/anchor/index.scss
@@ -26,6 +26,7 @@ $-default-config: (
 /// @param {Bool} config.emit-visited [true] - Enable visited link styles using theme.$link-visited
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
+  $emit-visited: map.get($props, 'emit-visited') == true;
 
   #{map.get($props, 'selector')} {
     display: inline-flex;
@@ -33,16 +34,22 @@ $-default-config: (
     column-gap: spacing.$spacing-03;
     color: theme.$link-primary;
     text-decoration: underline;
-    transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+    transition: if(
+      sass($emit-visited): none; else: color layout.$mode--transition-duration
+        layout.$mode--transition-timing-function
+    );
 
     &:hover {
       color: theme.$link-primary-hover;
     }
 
-    @if map.get($props, 'emit-visited') == true {
+    @if $emit-visited {
       &:visited {
         color: theme.$link-visited;
       }
+      &:visited svg {
+        fill: theme.$link-visited;
+      }
     }
 
     &:focus {