@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-link/eds-link.css

@@ -69,7 +69,6 @@ Make sure disabled buttons don't get the pointer cursor.
   font-family: var(--f-ui-01-fontFamily);
   font-weight: var(--f-ui-01-fontWeight);
   font-size: var(--f-ui-01-fontSize);
-  line-height: var(--f-ui-01-lineHeight);
   letter-spacing: var(--f-ui-01-letterSpacing);
 }
 
@@ -77,7 +76,6 @@ Make sure disabled buttons don't get the pointer cursor.
   font-family: var(--f-ui-02-fontFamily);
   font-weight: var(--f-ui-02-fontWeight);
   font-size: var(--f-ui-02-fontSize);
-  line-height: var(--f-ui-02-lineHeight);
   letter-spacing: var(--f-ui-02-letterSpacing);
 }
 
@@ -85,7 +83,6 @@ Make sure disabled buttons don't get the pointer cursor.
   font-family: var(--f-ui-04-fontFamily);
   font-weight: var(--f-ui-04-fontWeight);
   font-size: var(--f-ui-04-fontSize);
-  line-height: var(--f-ui-04-lineHeight);
   letter-spacing: var(--f-ui-04-letterSpacing);
 }
 
@@ -141,7 +138,7 @@ Make sure disabled buttons don't get the pointer cursor.
   }
 
   &::after {
-    border-color: rgba(0, 0, 0, .1);
+    border-color: rgba(7, 20, 13, 1);
   }
 
   &::after {
@@ -150,11 +147,16 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .border-inside-inverse {
-  &::after {
-    border-color: rgba(255, 255, 255, 0.3);
-  }
+  position: relative;
 
   &::after {
+    pointer-events: none;
+    position: absolute;
+    inset: 0rem;
+    z-index: 1;
+    border-radius: 8px;
+    border-width: 2px;
+    border-color: rgba(255, 255, 255, 1); /* white border */
     content: '';
   }
 }
@@ -169,6 +171,12 @@ Make sure disabled buttons don't get the pointer cursor.
   }
 }
 
+.border-inside-inverse.border-inside-pill {
+  &::after {
+    border-radius: 100px; /* pill shape for inverse border */
+  }
+}
+
 .loader {
   box-sizing: border-box;
   display: inline-block;
@@ -250,6 +258,38 @@ Make sure disabled buttons don't get the pointer cursor.
 /* endregion */
 /*region shadow*/
 /*endregion*/
+/*region brand hover effect*/
+.brand-hover-transform {
+  transition-property: transform, box-shadow, color, background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.brand-hover-transform:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 255, 157, 0.3);
+}
+
+.brand-hover-transform[aria-disabled="true"]:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+/* Secondary Inverse Transform Effect */
+.secondary-inverse-transform {
+  transition-property: transform, background-color, color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.secondary-inverse-transform:hover {
+  transform: translateY(-2px);
+}
+
+.secondary-inverse-transform[aria-disabled="true"]:hover {
+  transform: none;
+}
+/*endregion*/
 .sr-only {
   position: absolute;
   width: 1px;
@@ -544,6 +584,14 @@ Make sure disabled buttons don't get the pointer cursor.
   border-radius: 4px;
 }
 
+.rounded-full {
+  border-radius: 100px;
+}
+
+.rounded-pill {
+  border-radius: 9999px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -574,11 +622,11 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .\!bg-accent-dark {
-  background-color: var(--green-600) !important;
+  background-color: var(--brand-green-dark) !important;
 }
 
 .\!bg-darker {
-  background-color: var(--grey-400) !important;
+  background-color: var(--grey-light) !important;
 }
 
 .\!bg-strong-dark {
@@ -586,15 +634,15 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .bg-accent {
-  background-color: var(--green-500);
+  background-color: var(--brand-green);
 }
 
 .bg-accent-dark {
-  background-color: var(--green-600);
+  background-color: var(--brand-green-dark0);
 }
 
 .bg-accent-darker {
-  background-color: var(--green-800);
+  background-color: var(--brand-green-dark);
 }
 
 .bg-current {
@@ -602,15 +650,15 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .bg-dark {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light);
 }
 
 .bg-darker {
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark);
 }
 
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .bg-inverse {
@@ -642,7 +690,7 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .bg-strongest {
-  background-color: var(--black);
+  background-color: var(--brand-black);
 }
 
 .bg-transparent {
@@ -728,6 +776,10 @@ Make sure disabled buttons don't get the pointer cursor.
   padding-left: 2.25rem;
 }
 
+.pl-2 {
+  padding-left: 0.125rem;
+}
+
 .pl-4 {
   padding-left: 0.25rem;
 }
@@ -740,6 +792,10 @@ Make sure disabled buttons don't get the pointer cursor.
   padding-right: 0.75rem;
 }
 
+.pr-2 {
+  padding-right: 0.125rem;
+}
+
 .pr-28 {
   padding-right: 1.75rem;
 }
@@ -774,7 +830,7 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .text-accent {
-  color: var(--green-500);
+  color: var(--brand-green-dark);
 }
 
 .text-current {
@@ -782,7 +838,7 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
 }
 
 .text-error {
@@ -790,7 +846,7 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .text-extra-light {
-  color: var(--grey-300);
+  color: var(--grey-light);
 }
 
 .text-inverse {
@@ -821,8 +877,12 @@ Make sure disabled buttons don't get the pointer cursor.
   text-decoration-color: #0034CB;
 }
 
+.decoration-white {
+  text-decoration-color: var(--white);
+}
+
 .decoration-accent {
-  text-decoration-color: var(--green-500);
+  text-decoration-color: var(--brand-green-dark);
 }
 
 .decoration-2 {
@@ -833,6 +893,10 @@ Make sure disabled buttons don't get the pointer cursor.
   text-underline-offset: 4px;
 }
 
+.underline-offset-6 {
+  text-underline-offset: 6px;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -905,7 +969,7 @@ Make sure disabled buttons don't get the pointer cursor.
 }
 
 .hover\:bg-accent-dark:hover {
-  background-color: var(--green-600);
+  background-color: var(--brand-green-dark); /* NEW: #00C87B */
 }
 
 .hover\:bg-dark:hover {
@@ -928,12 +992,24 @@ Make sure disabled buttons don't get the pointer cursor.
   background-color: var(--grey-800);
 }
 
+.hover\:bg-strongest:hover {
+  background-color: var(--brand-black);
+}
+
 .hover\:bg-transparent:hover {
   background-color: var(--transparent);
 }
 
+.hover\:text-accent:hover {
+  color: var(--brand-green-dark);
+}
+
 .hover\:text-default:hover {
-  color: var(--black);
+  color: var(--brand-black);
+}
+
+.hover\:text-inverse:hover {
+  color: var(--white);
 }
 
 .hover\:text-lighter:hover {
@@ -948,6 +1024,11 @@ Make sure disabled buttons don't get the pointer cursor.
   text-decoration-line: none;
 }
 
+
+.hover\:decoration-accent:hover {
+  text-decoration-color: var(--brand-green-dark);
+}
+
 .hover\:shadow-hover:hover {
   --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
   --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
@@ -1004,6 +1085,10 @@ Make sure disabled buttons don't get the pointer cursor.
   border-color: var(--transparent) !important;
 }
 
+.aria-disabled\:border-transparent[aria-disabled="true"] {
+  border-color: var(--transparent)
+}
+
 .aria-disabled\:bg-dark[aria-disabled="true"] {
   background-color: var(--grey-300);
 }
@@ -1030,6 +1115,10 @@ Make sure disabled buttons don't get the pointer cursor.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.aria-disabled\:decoration-light[aria-disabled="true"] {
+  text-decoration-line: var(--grey-light);
+}
+
 .aria-disabled\:no-underline[aria-disabled="true"] {
   text-decoration-line: none;
 }
@@ -1231,6 +1320,92 @@ Make sure disabled buttons don't get the pointer cursor.
   opacity: 0;
 }
 
+/* CTA link style */
+.cta-link {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: var(--f-ui-02-fontSize);
+  color: var(--grey-dark);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cta-link:hover {
+  color: var(--brand-green);
+}
+
+/* CTA brand link style - always green */
+.cta-link-brand {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: var(--f-ui-02-fontSize);
+  color: var(--brand-green);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cta-link-brand:hover {
+  color: var(--brand-green-dark);
+}
+
+/* Animated underline effect for underline intent (brand-black text) */
+.animated-underline {
+  position: relative;
+  display: inline-block;
+  color: var(--brand-black);
+  text-decoration: none;
+}
+
+.animated-underline::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--brand-green);
+  transition: width 0.3s ease;
+}
+
+.animated-underline:hover::after {
+  width: 100%;
+}
+
+.animated-underline:focus-visible::after {
+  width: 0;
+}
+
+/* Animated underline effect for underlineInverse intent (white text) */
+.animated-underline-inverse {
+  position: relative;
+  display: inline-block;
+  color: var(--white);
+  text-decoration: none;
+}
+
+.animated-underline-inverse::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--brand-green);
+  transition: width 0.3s ease;
+}
+
+.animated-underline-inverse:hover::after {
+  width: 100%;
+}
+
+.animated-underline-inverse:focus-visible::after {
+  width: 0;
+}
+
 @media (min-width: 900px) {
   .lg\:flex {
     display: flex;

package/dist/collection/components/eds-link/eds-link.js

@@ -6,19 +6,16 @@ const linkStyles = cva([
     'relative inline-flex justify-center items-center py-8 rounded-sm',
     'effect-color effect-focus aria-disabled:text-lightest',
     'cursor-pointer',
-    'aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:!border-transparent aria-disabled:after:!border-transparent'
+    'aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:after:!border-transparent'
 ], {
     variants: {
         intent: {
-            primary: [
-                'border-inside bg-accent hover:bg-accent-dark',
-                'shadow-accent focus:shadow-none aria-disabled:shadow-none'
-            ],
-            secondary: ['border-inside border-inside-inverse bg-strongest hover:bg-strong-dark text-inverse'],
-            tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
-            ghost: ['border-inside hover:bg-darker'],
+            primary: 'bg-strongest text-inverse hover:bg-accent-dark hover:text-default focus:shadow-none aria-disabled:shadow-none',
+            secondary: 'hover:bg-strongest hover:text-inverse border-inside text-default bg-transparent hover:bg-dark',
+            secondaryInverse: 'border-inside-inverse text-inverse bg-transparent hover:bg-inverse hover:text-default',
+            ghost: 'hover:bg-darker',
             strong: [
-                '!px-0 !py-4 !min-h-20',
+                '!px-0 !py-4 !min-h-20 hover:text-accent',
                 'before:opacity-0 effect-opacity',
                 'hover:before:opacity-100 focus-visible:before:opacity-0',
                 'aria-disabled:bg-transparent aria-disabled:text-light'
@@ -40,16 +37,29 @@ const linkStyles = cva([
                 'aria-disabled:bg-transparent'
                 // aria-disabled:line-through
             ],
-            blueish: [
-                '!px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4',
-                'effect-focus focus-visible:rounded-xs',
-                'hover:no-underline',
-                'aria-disabled:bg-transparent aria-disabled:no-underline'
-                //aria-disabled:line-through
-            ],
             underline: [
-                'decoration-accent underline underline-offset-4 !px-0 !py-0',
-                'hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0'
+                'text-default animated-underline !px-0 !py-0',
+                'aria-disabled:bg-transparent aria-disabled:text-light aria-disabled:no-underline effect-focus focus-visible:rounded-xs !min-h-0'
+            ],
+            underlineInverse: [
+                'text-inverse animated-underline-inverse !px-0 !py-0',
+                'aria-disabled:bg-transparent aria-disabled:text-lightest aria-disabled:no-underline effect-focus focus-visible:rounded-xs !min-h-0'
+            ],
+            brand: [
+                'bg-accent text-default hover:bg-strongest hover:text-inverse',
+                'rounded-full',
+                'aria-disabled:bg-dark aria-disabled:text-lightest'
+            ],
+            brandInverse: [
+                'bg-accent text-default hover:bg-inverse hover:text-default',
+                'rounded-full',
+                'aria-disabled:bg-dark aria-disabled:text-lightest'
+            ],
+            cta: [
+                'cta-link !px-0 !py-0 !min-h-0 !h-auto'
+            ],
+            'cta-brand': [
+                'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
             ]
         },
         iconSmall: {
@@ -67,6 +77,10 @@ const linkStyles = cva([
         size: {
             small: 'min-h-36 f-ui-02 px-12',
             large: 'min-h-44 f-ui-01 px-16'
+        },
+        pill: {
+            true: 'rounded-full border-inside-pill',
+            false: 'rounded-sm'
         }
     },
     compoundVariants: [
@@ -80,8 +94,10 @@ const linkStyles = cva([
             size: 'large',
             class: 'pr-8'
         },
-        { intent: 'blueish', hasIcon: true, class: '-mr-4 -top-1' },
         { intent: 'underline', hasIcon: true, class: '-mr-4 -top-1' },
+        { intent: 'underlineInverse', hasIcon: true, class: '-mr-4 -top-1' },
+        { intent: 'cta', hasIcon: true, class: 'gap-8' },
+        { intent: 'cta-brand', hasIcon: true, class: 'gap-8' },
         // Active state
         {
             intent: 'primary',
@@ -94,9 +110,9 @@ const linkStyles = cva([
             class: '!bg-strong-dark'
         },
         {
-            intent: 'tertiary',
+            intent: 'secondaryInverse',
             isActive: true,
-            class: '!bg-darker'
+            class: '!bg-inverse !text-default'
         },
         {
             intent: 'ghost',
@@ -127,6 +143,41 @@ const linkStyles = cva([
             intent: 'underline',
             size: 'large',
             class: '!px-0 !py-0 !min-h-0 f-ui-01'
+        },
+        {
+            intent: 'underlineInverse',
+            size: 'small',
+            class: '!px-0 !py-0 !min-h-0 f-ui-02'
+        },
+        {
+            intent: 'underlineInverse',
+            size: 'large',
+            class: '!px-0 !py-0 !min-h-0 f-ui-01'
+        },
+        {
+            intent: 'cta',
+            size: 'small',
+            class: '!px-0 !py-0 !min-h-0 !h-auto'
+        },
+        {
+            intent: 'cta',
+            size: 'large',
+            class: '!px-0 !py-0 !min-h-0 !h-auto'
+        },
+        {
+            intent: 'cta-brand',
+            size: 'small',
+            class: '!px-0 !py-0 !min-h-0 !h-auto'
+        },
+        {
+            intent: 'cta-brand',
+            size: 'large',
+            class: '!px-0 !py-0 !min-h-0 !h-auto'
+        },
+        {
+            intent: 'brand',
+            isActive: true,
+            class: '!bg-inverse !text-default'
         }
     ],
     defaultVariants: {
@@ -134,7 +185,8 @@ const linkStyles = cva([
         isActive: false,
         iconSmall: false,
         size: 'small',
-        hasIcon: false
+        hasIcon: false,
+        pill: false
     }
 });
 /**
@@ -157,6 +209,7 @@ export class EdsLink {
         this.iconPos = 'right';
         this.iconSmall = false;
         this.size = 'small';
+        this.pill = false;
         this.external = false;
         this.current = false;
         this.download = false;
@@ -212,19 +265,13 @@ export class EdsLink {
     }
     renderLeftIcon() {
         if (this.icon && this.iconPos === 'left') {
-            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
-              flex inline-flex items-center justify-center
-              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
-            `, icon: this.icon })));
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", size: 20, class: "flex inline-flex items-center justify-center", name: this.icon })));
         }
         return null;
     }
     renderRightIcon() {
         if (this.icon && this.iconPos === 'right') {
-            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
-              flex inline-flex items-center justify-center
-              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
-            `, icon: this.icon })));
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", size: 20, class: "flex inline-flex items-center justify-center", name: this.icon })));
         }
         return null;
     }
@@ -234,7 +281,8 @@ export class EdsLink {
             size: this.getLinkSize(),
             iconSmall: this.iconSmall,
             isActive: this.current,
-            hasIcon: !!this.icon
+            hasIcon: !!this.icon,
+            pill: this.pill
         });
         const safeUrl = typeof this.url === 'string' && this.url.length ? this.url : undefined;
         const isInteractive = !this.disabled;
@@ -242,7 +290,7 @@ export class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h("a", { key: '2d72b4f56aad829c674edc920d8b8b9f83a6c9c1', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: '8a8d9d31456c414d2167db7520978aefd9d955dc', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'b26b2f5aafa647912ced4b747c8b1e1c7a508050', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h("a", { key: 'b604585e484db17a87cba4fb492ef17014c0c88a', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: 'c3d5d62b4740ecb9f4fa6330147bb1f23afe22e0', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: 'c4340d032516895b8ad9a01170998605875a5774', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}` }, this.label)), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -279,15 +327,15 @@ export class EdsLink {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'ghost'\n    | 'strong'\n    | 'weak'\n    | 'inverse'\n    | 'underline'\n    | 'blueish'",
-                    "resolved": "\"blueish\" | \"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "original": "'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline' | 'underlineInverse' | 'brand' | 'brandInverse' | 'cta' | 'cta-brand'",
+                    "resolved": "\"brand\" | \"brandInverse\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"secondaryInverse\" | \"strong\" | \"underline\" | \"underlineInverse\" | \"weak\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The visual style intent of the link.\nOptions: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'."
+                    "text": "The visual style intent of the link.\nOptions: 'primary', 'secondary', 'secondaryInverse', 'ghost', 'strong', 'weak', 'inverse', 'underline', 'underlineInverse', 'brand', 'brandInverse', 'cta', 'cta-brand'."
                 },
                 "attribute": "intent",
                 "reflect": false,
@@ -297,9 +345,15 @@ export class EdsLink {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -364,6 +418,24 @@ export class EdsLink {
                 "reflect": false,
                 "defaultValue": "'small'"
             },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean to determine if the link should have a pill shape (rounded-full).\nDefault is false."
+                },
+                "attribute": "pill",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "external": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/eds-link/eds-link.stories.js

@@ -8,7 +8,7 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline', 'blueish'],
+            options: ['primary', 'secondary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
             description: 'The intent style of the link'
         },
         icon: {
@@ -51,9 +51,9 @@ export default {
     },
     args: {
         label: 'Click Me',
-        intent: 'primary',
+        intent: 'underline',
         size: 'large',
-        icon: '',
+        icon: 'arrow-right',
         iconSmall: false,
         external: false,
         current: false,