diff --git a/docs/elements/anchor/index.scss b/docs/elements/anchor/index.scss
index 44938ca..7590a6e 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, 'no-visited-styles') {
+ @include anchor.styles(
+ (
+ emit-visited: false,
+ )
+ );
+}
diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts
index d30f8ea..4496962 100644
--- a/docs/elements/anchor/index.ts
+++ b/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 */`
IBM.com
+
+Visited link
IBM.com ${launchIcon}
+
+Visited link${launchIcon}
`;
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',
+ },
+ },
];
diff --git a/scss/elements/anchor/index.scss b/scss/elements/anchor/index.scss
index c2e7f94..55e499d 100644
--- a/scss/elements/anchor/index.scss
+++ b/scss/elements/anchor/index.scss
@@ -17,13 +17,16 @@ $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;
@@ -31,12 +34,24 @@ $-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 $emit-visited {
+ &:visited {
+ color: theme.$link-visited;
+ }
+ &:visited svg {
+ fill: theme.$link-visited;
+ }
+ }
+
&:focus {
@include focus-outline.focus-outline('outline');
}