anchor: add visited configurable

docs/elements/anchor/index.scss

@@ -12,4 +12,12 @@ $name: 'anchor';
 
 @include docs.demo($name, 'default') {
   @include anchor.styles;
-};
+}
+
+@include docs.demo($name, 'no-visited-styles') {
+  @include anchor.styles(
+    (
+      emit-visited: false,
+    )
+  );
+}

docs/elements/anchor/index.ts

@@ -28,15 +28,24 @@ export const meta = {
       type: 'selector',
       default: 'a',
     },
+    {
+      key: 'emit-visited',
+      type: 'boolean',
+      default: 'true',
+    },
   ],
 } as const satisfies 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[] = [
@@ -47,4 +56,14 @@ export const demos: Demo[] = [
       raw: html,
     },
   },
+  {
+    id: 'no-visited-styles',
+    name: 'No visited styles',
+    html: {
+      raw: html,
+    },
+    config: {
+      'emit-visited': 'false',
+    },
+  },
 ];

scss/elements/anchor/index.scss

@@ -17,26 +17,41 @@ $config: () !default;
 
 $-default-config: (
   selector: 'a',
+  emit-visited: true,
 );
 
 /// @group anchor
 /// @param {Map} config [()]
 /// @param {Selector} config.selector ['a']
+/// @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;
     align-items: center;
     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 $emit-visited {
+      &:visited {
+        color: theme.$link-visited;
+      }
+      &:visited svg {
+        fill: theme.$link-visited;
+      }
+    }
+
     &:focus {
       @include focus-outline.focus-outline('outline');
     }