@uh-design-system/component-library 1.4.0-rc.3 → 1.4.0

package/dist/collection/components/01-base-components/ds-link/ds-link.css

@@ -1,16 +1,16 @@
 :host {
   display: inline;
 }
-:host:has(.ds-link__KmYz6O--standalone) {
+:host:has(.ds-link__SPFJ1E--standalone) {
   display: inline-block;
 }
 
-.ds-link__KmYz6O:focus-visible {
+.ds-link__SPFJ1E:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link__KmYz6O {
+.ds-link__SPFJ1E {
   box-sizing: border-box;
   display: inline;
   color: var(--ds-textColor-link);
@@ -25,84 +25,84 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link__KmYz6O--semibold {
+.ds-link__SPFJ1E--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-link__KmYz6O--bold {
+.ds-link__SPFJ1E--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-link__KmYz6O--2xLarge {
+.ds-link__SPFJ1E--2xLarge {
   font-size: var(--ds-fontSize-22);
 }
-.ds-link__KmYz6O--xLarge {
+.ds-link__SPFJ1E--xLarge {
   font-size: var(--ds-fontSize-20);
 }
-.ds-link__KmYz6O--large {
+.ds-link__SPFJ1E--large {
   font-size: var(--ds-fontSize-18);
 }
-.ds-link__KmYz6O--medium {
+.ds-link__SPFJ1E--medium {
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__KmYz6O--small {
+.ds-link__SPFJ1E--small {
   font-size: var(--ds-fontSize-14);
 }
-.ds-link__KmYz6O--xSmall {
+.ds-link__SPFJ1E--xSmall {
   font-size: var(--ds-fontSize-12);
 }
-.ds-link__KmYz6O__icon {
+.ds-link__SPFJ1E__icon {
   display: inline-block;
   vertical-align: -0.125em;
 }
-.ds-link__KmYz6O__icon--start-inline {
+.ds-link__SPFJ1E__icon--start-inline {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link__KmYz6O__icon--start-standalone {
+.ds-link__SPFJ1E__icon--start-standalone {
   margin-right: var(--ds-spacing-2xSmall);
 }
-.ds-link__KmYz6O__icon--end-inline {
+.ds-link__SPFJ1E__icon--end-inline {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link__KmYz6O__icon--end-standalone {
+.ds-link__SPFJ1E__icon--end-standalone {
   margin-left: var(--ds-spacing-2xSmall);
 }
-.ds-link__KmYz6O:hover, .ds-link__KmYz6O:active {
+.ds-link__SPFJ1E:hover, .ds-link__SPFJ1E:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-link__KmYz6O:hover {
+.ds-link__SPFJ1E:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__KmYz6O:active {
+.ds-link__SPFJ1E:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__KmYz6O:visited {
+.ds-link__SPFJ1E:visited {
   color: var(--ds-textColor-link-visited);
 }
-.ds-link__KmYz6O--standalone {
+.ds-link__SPFJ1E--standalone {
   color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
-.ds-link__KmYz6O--standalone:hover, .ds-link__KmYz6O--standalone:active {
+.ds-link__SPFJ1E--standalone:hover, .ds-link__SPFJ1E--standalone:active {
   text-decoration-line: underline;
 }
-.ds-link__KmYz6O--standalone:focus-visible, .ds-link__KmYz6O--standalone:visited {
+.ds-link__SPFJ1E--standalone:focus-visible, .ds-link__SPFJ1E--standalone:visited {
   color: var(--ds-textColor-link);
 }
-.ds-link__KmYz6O--standalone:active {
+.ds-link__SPFJ1E--standalone:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__KmYz6O--standalone:hover {
+.ds-link__SPFJ1E--standalone:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__KmYz6O--colour-white {
+.ds-link__SPFJ1E--colour-white {
   color: var(--ds-textColor-white);
 }
-.ds-link__KmYz6O--colour-white:hover, .ds-link__KmYz6O--colour-white:active, .ds-link__KmYz6O--colour-white:visited, .ds-link__KmYz6O--colour-white:focus-visible {
+.ds-link__SPFJ1E--colour-white:hover, .ds-link__SPFJ1E--colour-white:active, .ds-link__SPFJ1E--colour-white:visited, .ds-link__SPFJ1E--colour-white:focus-visible {
   color: var(--ds-textColor-white);
 }
-.ds-link__KmYz6O--colour-black {
+.ds-link__SPFJ1E--colour-black {
   color: var(--ds-textColor-default);
 }
-.ds-link__KmYz6O--colour-black:hover, .ds-link__KmYz6O--colour-black:active, .ds-link__KmYz6O--colour-black:visited, .ds-link__KmYz6O--colour-black:focus-visible {
+.ds-link__SPFJ1E--colour-black:hover, .ds-link__SPFJ1E--colour-black:active, .ds-link__SPFJ1E--colour-black:visited, .ds-link__SPFJ1E--colour-black:focus-visible {
   color: var(--ds-textColor-default);
 }

package/dist/collection/components/01-base-components/ds-link/stories/ds-link.features.stories.js

@@ -71,8 +71,8 @@ export const OpensInANewTab = {
             await expect(anchorElem.rel).toBe('noopener noreferrer');
         });
         await step('Anchor should have a visually hidden assistive text', async () => {
-            const visuallyHiddenElem = shadowRoot.querySelector('ds-visually-hidden');
-            await expect(visuallyHiddenElem.textContent).toBe('Opens in a new tab');
+            const anchorElem = shadowRoot.querySelector('a');
+            await expect(anchorElem.textContent).toContain('Opens in a new tab');
         });
         await step('Has an end icon', async () => {
             const iconEnd = shadowRoot.querySelector('slot[name=suffix]');

package/dist/collection/components/01-base-components/ds-link-cta/ds-link-cta.css

@@ -9,7 +9,7 @@
   vertical-align: middle;
 }
 
-.ds-link-cta__KmYz6O {
+.ds-link-cta__SPFJ1E {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -28,14 +28,14 @@
   user-select: none;
   --webkit-user-select: none;
 }
-.ds-link-cta__KmYz6O[aria-disabled=true] {
+.ds-link-cta__SPFJ1E[aria-disabled=true] {
   cursor: default;
   pointer-events: none;
   background-color: transparent !important;
   border-color: transparent !important;
   color: var(--ds-textColor-disabled-onLight) !important;
 }
-.ds-link-cta__KmYz6O__text {
+.ds-link-cta__SPFJ1E__text {
   padding: 0 var(--ds-spacing-3xSmall, 4px);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
@@ -46,26 +46,26 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link-cta__KmYz6O--no-text .ds-link-cta__KmYz6O__text {
+.ds-link-cta__SPFJ1E--no-text .ds-link-cta__SPFJ1E__text {
   padding: 0;
 }
-.ds-link-cta__KmYz6O:has(.ds-link-cta__KmYz6O__spinner):not(.ds-link-cta__KmYz6O--small) .ds-link-cta__KmYz6O__value {
+.ds-link-cta__SPFJ1E:has(.ds-link-cta__SPFJ1E__spinner):not(.ds-link-cta__SPFJ1E--small) .ds-link-cta__SPFJ1E__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__KmYz6O--icon-only {
+.ds-link-cta__SPFJ1E--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-link-cta__KmYz6O:has(.ds-link-cta__KmYz6O__text:empty) {
+.ds-link-cta__SPFJ1E:has(.ds-link-cta__SPFJ1E__text:empty) {
   width: var(--ds-link-cta-min-height);
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__KmYz6O:has(.ds-link-cta__KmYz6O__text:empty) .ds-link-cta__KmYz6O__icon {
+.ds-link-cta__SPFJ1E:has(.ds-link-cta__SPFJ1E__text:empty) .ds-link-cta__SPFJ1E__icon {
   margin: 0;
 }
-.ds-link-cta__KmYz6O:not(.ds-link-cta__KmYz6O--small):not(.ds-link-cta__KmYz6O--secondary):not(.ds-link-cta__KmYz6O--supplementary) {
+.ds-link-cta__SPFJ1E:not(.ds-link-cta__SPFJ1E--small):not(.ds-link-cta__SPFJ1E--secondary):not(.ds-link-cta__SPFJ1E--supplementary) {
   border-width: 0;
   border-style: none;
   font-size: var(--ds-fontSize-18);
@@ -74,7 +74,7 @@
   padding-block: var(--ds-link-cta-padding-block, var(--ds-spacing-3xSmall));
   padding-inline: var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall)));
 }
-.ds-link-cta__KmYz6O:not(.ds-link-cta__KmYz6O--small).ds-link-cta__KmYz6O--secondary {
+.ds-link-cta__SPFJ1E:not(.ds-link-cta__SPFJ1E--small).ds-link-cta__SPFJ1E--secondary {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   font-size: var(--ds-fontSize-18);
@@ -83,7 +83,7 @@
   padding-block: var(--ds-link-cta-padding-block, var(--ds-spacing-3xSmall));
   padding-inline: var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall)));
 }
-.ds-link-cta__KmYz6O:not(.ds-link-cta__KmYz6O--small).ds-link-cta__KmYz6O--supplementary {
+.ds-link-cta__SPFJ1E:not(.ds-link-cta__SPFJ1E--small).ds-link-cta__SPFJ1E--supplementary {
   border-width: 0;
   border-style: none;
   font-size: var(--ds-fontSize-18);
@@ -92,11 +92,11 @@
   padding-block: var(--ds-link-cta-padding-block, var(--ds-spacing-3xSmall));
   padding-inline: var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall)));
 }
-.ds-link-cta__KmYz6O:not(.ds-link-cta__KmYz6O--small).ds-link-cta__KmYz6O--icon-only {
+.ds-link-cta__SPFJ1E:not(.ds-link-cta__SPFJ1E--small).ds-link-cta__SPFJ1E--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__KmYz6O--small:not(.ds-link-cta__KmYz6O--secondary):not(.ds-link-cta__KmYz6O--supplementary) {
+.ds-link-cta__SPFJ1E--small:not(.ds-link-cta__SPFJ1E--secondary):not(.ds-link-cta__SPFJ1E--supplementary) {
   border-width: 0;
   border-style: none;
   font-size: var(--ds-fontSize-16);
@@ -106,7 +106,7 @@
   padding-block: var(--ds-link-cta-padding-block, var(--ds-spacing-4xSmall));
   padding-inline: var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall)));
 }
-.ds-link-cta__KmYz6O--small.ds-link-cta__KmYz6O--secondary {
+.ds-link-cta__SPFJ1E--small.ds-link-cta__SPFJ1E--secondary {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   font-size: var(--ds-fontSize-16);
@@ -116,7 +116,7 @@
   padding-block: var(--ds-link-cta-padding-block, var(--ds-spacing-4xSmall));
   padding-inline: var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall)));
 }
-.ds-link-cta__KmYz6O--small.ds-link-cta__KmYz6O--supplementary {
+.ds-link-cta__SPFJ1E--small.ds-link-cta__SPFJ1E--supplementary {
   border-width: 0;
   border-style: none;
   font-size: var(--ds-fontSize-16);
@@ -126,168 +126,168 @@
   padding-block: var(--ds-link-cta-padding-block, var(--ds-spacing-4xSmall));
   padding-inline: var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall)));
 }
-.ds-link-cta__KmYz6O--small.ds-link-cta__KmYz6O--icon-only {
+.ds-link-cta__SPFJ1E--small.ds-link-cta__SPFJ1E--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-link-cta__KmYz6O--small .ds-link-cta__KmYz6O__icon {
+.ds-link-cta__SPFJ1E--small .ds-link-cta__SPFJ1E__icon {
   width: var(--ds-link-cta-icon-size, auto);
   height: var(--ds-link-cta-icon-size, 1rem);
 }
-.ds-link-cta__KmYz6O__icon--start {
+.ds-link-cta__SPFJ1E__icon--start {
   margin-right: var(--ds-spacing-3xSmall);
   margin-left: 0;
 }
-.ds-link-cta__KmYz6O__icon--end {
+.ds-link-cta__SPFJ1E__icon--end {
   margin-left: var(--ds-spacing-3xSmall);
   margin-right: 0;
 }
-.ds-link-cta__KmYz6O--no-text .ds-link-cta__KmYz6O__icon--start,
-.ds-link-cta__KmYz6O--no-text .ds-link-cta__KmYz6O__icon--end {
+.ds-link-cta__SPFJ1E--no-text .ds-link-cta__SPFJ1E__icon--start,
+.ds-link-cta__SPFJ1E--no-text .ds-link-cta__SPFJ1E__icon--end {
   margin: 0;
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--blue:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--blue {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue {
   background-color: var(--ds-link-cta-bg-color, var(--ds-bgColor-primary));
   border-color: transparent;
   color: var(--ds-link-cta-text-color, var(--ds-textColor-white));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--blue:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--blue:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--black:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--black {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black {
   background-color: var(--ds-link-cta-bg-color, var(--ds-bgColor-black));
   border-color: transparent;
   color: var(--ds-link-cta-text-color, var(--ds-textColor-white));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--black:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--black:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black:active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--white:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--white {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white {
   background-color: var(--ds-link-cta-bg-color, var(--ds-bgColor-white));
   border-color: transparent;
   color: var(--ds-link-cta-text-color, var(--ds-textColor-default));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--white:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--primary.ds-link-cta__KmYz6O--white:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--blue:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--blue {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue {
   background-color: var(--ds-link-cta-bg-color, var(--ds-bgColor-secondary));
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-link-cta-text-color, var(--ds-textColor-primary));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--blue:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--blue:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--black:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--black {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black {
   background-color: var(--ds-link-cta-bg-color, transparent);
   border-color: var(--ds-borderColor-black);
   color: var(--ds-link-cta-text-color, var(--ds-textColor-default));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--black:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--black:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--white:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--white {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white {
   background-color: var(--ds-link-cta-bg-color, transparent);
   border-color: var(--ds-borderColor-white);
   color: var(--ds-link-cta-text-color, var(--ds-textColor-white));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--white:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--secondary.ds-link-cta__KmYz6O--white:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--blue:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--blue {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue {
   background-color: var(--ds-link-cta-bg-color, transparent);
   border-color: transparent;
   color: var(--ds-link-cta-text-color, var(--ds-textColor-primary));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--blue:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--blue:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--black:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--black {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black {
   background-color: var(--ds-link-cta-bg-color, transparent);
   border-color: transparent;
   color: var(--ds-link-cta-text-color, var(--ds-textColor-default));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--black:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--black:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--white:focus-visible {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--white {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white {
   background-color: var(--ds-link-cta-bg-color, transparent);
   border-color: transparent;
   color: var(--ds-link-cta-text-color, var(--ds-textColor-white));
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--white:hover {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__KmYz6O.ds-link-cta__KmYz6O--supplementary.ds-link-cta__KmYz6O--white:active {
+.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }

package/dist/collection/components/01-base-components/ds-link-logo/ds-link-logo.css

@@ -8,19 +8,19 @@
   display: inline-block;
 }
 
-.ds-link-logo__KmYz6O {
+.ds-link-logo__SPFJ1E {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-link-logo__KmYz6O:focus-visible {
+.ds-link-logo__SPFJ1E:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-logo__KmYz6O {
+.ds-link-logo__SPFJ1E {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall, 0.5rem);
@@ -33,11 +33,11 @@
   line-height: 1;
   text-transform: uppercase;
 }
-.ds-link-logo__KmYz6O:hover {
+.ds-link-logo__SPFJ1E:hover {
   color: var(--ds-bgColor-primary, #005a94);
 }
 @media (min-width: 60rem) {
-  .ds-link-logo__KmYz6O {
+  .ds-link-logo__SPFJ1E {
     font-size: var(--ds-fontSize-16, 1rem);
   }
 }

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css

@@ -1,16 +1,16 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-link-with-arrow__KmYz6O--full-width) {
+:host:has(.ds-link-with-arrow__SPFJ1E--full-width) {
   width: 100%;
 }
 
-.ds-link-with-arrow__KmYz6O:focus-visible {
+.ds-link-with-arrow__SPFJ1E:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-with-arrow__KmYz6O {
+.ds-link-with-arrow__SPFJ1E {
   display: inline-flex;
   align-items: center;
   color: var(--ds-textColor-link);
@@ -21,15 +21,15 @@
   text-decoration-line: none;
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__KmYz6O {
+  .ds-link-with-arrow__SPFJ1E {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-link-with-arrow__KmYz6O--full-width {
+.ds-link-with-arrow__SPFJ1E--full-width {
   width: 100%;
   justify-content: space-between;
 }
-.ds-link-with-arrow__KmYz6O__icon {
+.ds-link-with-arrow__SPFJ1E__icon {
   display: inline-flex;
   flex-shrink: 0;
   width: 2rem;
@@ -41,24 +41,24 @@
   background-color: var(--ds-bgColor-primary);
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__KmYz6O__icon {
+  .ds-link-with-arrow__SPFJ1E__icon {
     width: 2.5rem;
     height: 2.5rem;
   }
 }
-.ds-link-with-arrow__KmYz6O__icon--start {
+.ds-link-with-arrow__SPFJ1E__icon--start {
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-link-with-arrow__KmYz6O__icon--end {
+.ds-link-with-arrow__SPFJ1E__icon--end {
   margin-left: var(--ds-spacing-xSmall);
 }
-:hover slot > .ds-link-with-arrow__KmYz6O__icon {
+:hover slot > .ds-link-with-arrow__SPFJ1E__icon {
   background-color: var(--ds-bgColor-primary-hover);
 }
-:active slot > .ds-link-with-arrow__KmYz6O__icon {
+:active slot > .ds-link-with-arrow__SPFJ1E__icon {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-with-arrow__KmYz6O:hover, .ds-link-with-arrow__KmYz6O:active {
+.ds-link-with-arrow__SPFJ1E:hover, .ds-link-with-arrow__SPFJ1E:active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -66,9 +66,9 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link-with-arrow__KmYz6O:hover {
+.ds-link-with-arrow__SPFJ1E:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link-with-arrow__KmYz6O:active, .ds-link-with-arrow__KmYz6O:focus-visible {
+.ds-link-with-arrow__SPFJ1E:active, .ds-link-with-arrow__SPFJ1E:focus-visible {
   color: var(--ds-textColor-link-active);
 }

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.examples.stories.js

@@ -16,12 +16,11 @@ export const OpenInANewTab = {
     play: async ({ canvasElement, step }) => {
         const shadowRoot = await getShadowRoot(canvasElement, 'ds-link-with-arrow');
         const anchorElem = shadowRoot.querySelector('a');
-        const visuallyHiddenElem = shadowRoot.querySelector('ds-visually-hidden');
         await step('Anchor should have attribute rel with value "noopener noreferrer"', async () => {
             await expect(anchorElem.rel).toBe('noopener noreferrer');
         });
         await step('Anchor should have a visually hidden assistive text', async () => {
-            await expect(visuallyHiddenElem.textContent).toBe('Opens in a new tab');
+            await expect(anchorElem.textContent).toContain('Opens in a new tab');
         });
     },
 };