@uh-design-system/component-library 1.7.0 → 1.7.1-rc.1

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

@@ -24,6 +24,7 @@ export class DsLink extends Mixin(componentFactory('ds-link'), linkFactory, aria
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
     linkRef;
+    dsId = this.getUniqueId();
     dsText;
     dsSize;
     dsVariant = 'inline';
@@ -110,7 +111,7 @@ export class DsLink extends Mixin(componentFactory('ds-link'), linkFactory, aria
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (h(this.dsTag, { key: '7cb39dfc5bb57ef6bcabc4e7a0f1815edd15bc3b', ref: el => (this.linkRef = el), class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '630bd0be06599e988a4fc9155eb466df967a3cbd', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: '878a0915db6a6d491a3ddfc21ddcf1e31d41fae8', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '2041fdc422f07be45a74ed153705f831249f55ea', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: 'cbe0b698c4dc07c27a5234a8df2c186bc2d1b0c6', ref: el => (this.linkRef = el), class: classes, id: this.dsId, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '7cae380ec5cf8fff35824886fbc28733a3433f18', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: '262cb6fd01bffe21cdd86104626d1a5cfcfb8ab4', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'b63a7f1aee43ae2e002dee25388660ecb04ed0d3', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "scoped"; }
@@ -126,6 +127,26 @@ export class DsLink extends Mixin(componentFactory('ds-link'), linkFactory, aria
     }
     static get properties() {
         return {
+            "dsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `id` attribute of the `a`/`span` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-id",
+                "defaultValue": "this.getUniqueId()"
+            },
             "dsText": {
                 "type": "string",
                 "mutable": false,

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

@@ -9,7 +9,7 @@
   vertical-align: middle;
 }
 
-.ds-link-cta__pA2cRq {
+.ds-link-cta__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -28,14 +28,14 @@
   user-select: none;
   --webkit-user-select: none;
 }
-.ds-link-cta__pA2cRq[aria-disabled=true] {
+.ds-link-cta__0apwgA[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__pA2cRq__text {
+.ds-link-cta__0apwgA__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__pA2cRq--no-text .ds-link-cta__pA2cRq__text {
+.ds-link-cta__0apwgA--no-text .ds-link-cta__0apwgA__text {
   padding: 0;
 }
-.ds-link-cta__pA2cRq:has(.ds-link-cta__pA2cRq__spinner):not(.ds-link-cta__pA2cRq--small) .ds-link-cta__pA2cRq__value {
+.ds-link-cta__0apwgA:has(.ds-link-cta__0apwgA__spinner):not(.ds-link-cta__0apwgA--small) .ds-link-cta__0apwgA__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__pA2cRq--icon-only {
+.ds-link-cta__0apwgA--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-link-cta__pA2cRq:has(.ds-link-cta__pA2cRq__text:empty) {
+.ds-link-cta__0apwgA:has(.ds-link-cta__0apwgA__text:empty) {
   width: var(--ds-link-cta-min-height);
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__pA2cRq:has(.ds-link-cta__pA2cRq__text:empty) .ds-link-cta__pA2cRq__icon {
+.ds-link-cta__0apwgA:has(.ds-link-cta__0apwgA__text:empty) .ds-link-cta__0apwgA__icon {
   margin: 0;
 }
-.ds-link-cta__pA2cRq:not(.ds-link-cta__pA2cRq--small):not(.ds-link-cta__pA2cRq--secondary):not(.ds-link-cta__pA2cRq--supplementary) {
+.ds-link-cta__0apwgA:not(.ds-link-cta__0apwgA--small):not(.ds-link-cta__0apwgA--secondary):not(.ds-link-cta__0apwgA--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__pA2cRq:not(.ds-link-cta__pA2cRq--small).ds-link-cta__pA2cRq--secondary {
+.ds-link-cta__0apwgA:not(.ds-link-cta__0apwgA--small).ds-link-cta__0apwgA--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__pA2cRq:not(.ds-link-cta__pA2cRq--small).ds-link-cta__pA2cRq--supplementary {
+.ds-link-cta__0apwgA:not(.ds-link-cta__0apwgA--small).ds-link-cta__0apwgA--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__pA2cRq:not(.ds-link-cta__pA2cRq--small).ds-link-cta__pA2cRq--icon-only {
+.ds-link-cta__0apwgA:not(.ds-link-cta__0apwgA--small).ds-link-cta__0apwgA--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__pA2cRq--small:not(.ds-link-cta__pA2cRq--secondary):not(.ds-link-cta__pA2cRq--supplementary) {
+.ds-link-cta__0apwgA--small:not(.ds-link-cta__0apwgA--secondary):not(.ds-link-cta__0apwgA--supplementary) {
   font-weight: var(--ds-fontWeight-semibold);
   border-width: 0;
   border-style: none;
@@ -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__pA2cRq--small.ds-link-cta__pA2cRq--secondary {
+.ds-link-cta__0apwgA--small.ds-link-cta__0apwgA--secondary {
   font-weight: var(--ds-fontWeight-semibold);
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
@@ -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__pA2cRq--small.ds-link-cta__pA2cRq--supplementary {
+.ds-link-cta__0apwgA--small.ds-link-cta__0apwgA--supplementary {
   font-weight: var(--ds-fontWeight-semibold);
   border-width: 0;
   border-style: none;
@@ -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__pA2cRq--small.ds-link-cta__pA2cRq--icon-only {
+.ds-link-cta__0apwgA--small.ds-link-cta__0apwgA--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-link-cta__pA2cRq--small .ds-link-cta__pA2cRq__icon {
+.ds-link-cta__0apwgA--small .ds-link-cta__0apwgA__icon {
   width: var(--ds-link-cta-icon-size, auto);
   height: var(--ds-link-cta-icon-size, 1rem);
 }
-.ds-link-cta__pA2cRq__icon--start {
+.ds-link-cta__0apwgA__icon--start {
   margin-right: var(--ds-spacing-3xSmall);
   margin-left: 0;
 }
-.ds-link-cta__pA2cRq__icon--end {
+.ds-link-cta__0apwgA__icon--end {
   margin-left: var(--ds-spacing-3xSmall);
   margin-right: 0;
 }
-.ds-link-cta__pA2cRq--no-text .ds-link-cta__pA2cRq__icon--start,
-.ds-link-cta__pA2cRq--no-text .ds-link-cta__pA2cRq__icon--end {
+.ds-link-cta__0apwgA--no-text .ds-link-cta__0apwgA__icon--start,
+.ds-link-cta__0apwgA--no-text .ds-link-cta__0apwgA__icon--end {
   margin: 0;
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--blue:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--blue {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--blue:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--blue:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--blue:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--black:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--black {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--black:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--black:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--black:active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--white:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--white {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--white:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--primary.ds-link-cta__pA2cRq--white:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--primary.ds-link-cta__0apwgA--white:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--blue:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--blue {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--blue:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--blue:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--black:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--black {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--black:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--black:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--white:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--white {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--white:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--secondary.ds-link-cta__pA2cRq--white:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--secondary.ds-link-cta__0apwgA--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--blue:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--blue {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--blue:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--blue:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--black:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--black {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--black:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--black:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--white:focus-visible {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--white {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--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__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--white:hover {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__pA2cRq.ds-link-cta__pA2cRq--supplementary.ds-link-cta__pA2cRq--white:active {
+.ds-link-cta__0apwgA.ds-link-cta__0apwgA--supplementary.ds-link-cta__0apwgA--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }

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

@@ -15,6 +15,7 @@ export class DsLinkCta extends Mixin(componentFactory('ds-link-cta'), linkFactor
     linkEl;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
+    dsId = this.getUniqueId();
     dsText;
     dsVariant = 'primary';
     dsColour = 'blue';
@@ -92,10 +93,10 @@ export class DsLinkCta extends Mixin(componentFactory('ds-link-cta'), linkFactor
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        const iconElement = !this.dsHideIcon && h(DsIcon, { key: '9555ab29c26405e83efa1539f2d3dded99387d6d', dsName: this.currentIcon, class: iconClasses, dsCustomSize: this.dsSize === 'medium' ? '1.5rem' : '1.25rem' });
+        const iconElement = !this.dsHideIcon && h(DsIcon, { key: '8cddab101a7f2701f2435e4297c83ff3e5adb9b1', dsName: this.currentIcon, class: iconClasses, dsCustomSize: this.dsSize === 'medium' ? '1.5rem' : '1.25rem' });
         const tabindex = this.dsTabIndex ?? (this.dsTag === 'a' && !this.dsHref ? '0' : undefined);
         const role = this.dsTag === 'span' ? 'link' : undefined;
-        return (h(this.dsTag, { key: '576f3abfd9cff4f91484908dcc745c21460fbcf8', ref: el => (this.linkEl = el), class: classes, onKeyDown: this.handleKeyDown, tabindex: tabindex, ...ifDefined('role', role), ...ifDefined('aria-disabled', this.dsDisabled ? 'true' : undefined), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIconPosition === 'start' && iconElement, h("span", { key: 'df2b41f778e759a0f94874b38dc74b54b9ffdaad', class: linkTextClasses }, this.dsText), this.dsIconPosition === 'end' && iconElement, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'bf380d2fabb9170a0805a1c5bf162ac9e1a9d4fc', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '859048b39b4c0b7e31b64ce445519183dab21ef4', ref: el => (this.linkEl = el), class: classes, id: this.dsId, onKeyDown: this.handleKeyDown, tabindex: tabindex, ...ifDefined('role', role), ...ifDefined('aria-disabled', this.dsDisabled ? 'true' : undefined), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIconPosition === 'start' && iconElement, h("span", { key: 'b8418492b46fb0dde985cddf257518faa8db21d6', class: linkTextClasses }, this.dsText), this.dsIconPosition === 'end' && iconElement, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'df6b8630ad04158739cecf9aeeabc28cc5e0043f', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-cta"; }
     static get encapsulation() { return "scoped"; }
@@ -111,6 +112,26 @@ export class DsLinkCta extends Mixin(componentFactory('ds-link-cta'), linkFactor
     }
     static get properties() {
         return {
+            "dsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `id` attribute of the `a`/`span` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-id",
+                "defaultValue": "this.getUniqueId()"
+            },
             "dsText": {
                 "type": "string",
                 "mutable": false,

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

@@ -8,19 +8,19 @@
   display: inline-block;
 }
 
-.ds-link-logo__pA2cRq {
+.ds-link-logo__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-link-logo__pA2cRq:focus-visible {
+.ds-link-logo__0apwgA: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__pA2cRq {
+.ds-link-logo__0apwgA {
   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__pA2cRq:hover {
+.ds-link-logo__0apwgA:hover {
   color: var(--ds-bgColor-primary, #005a94);
 }
 @media (min-width: 60rem) {
-  .ds-link-logo__pA2cRq {
+  .ds-link-logo__0apwgA {
     font-size: var(--ds-fontSize-16, 1rem);
   }
 }

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

@@ -14,6 +14,7 @@ export class DsLinkLogo extends Mixin(componentFactory('ds-link-logo'), linkFact
     inheritedAttributes = {};
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
+    dsId = this.getUniqueId();
     dsIcon;
     dsText;
     dsSize;
@@ -70,7 +71,7 @@ export class DsLinkLogo extends Mixin(componentFactory('ds-link-logo'), linkFact
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (h(this.dsTag, { key: 'd7b1c58186d068de66ba8dc0ab9ac081a8123a56', part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIcon && h(this.DsIcon, { key: 'd55b2710d004dcf24a0521e7ce91ad6b224342f8', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '2c4be790fc7f5d7a49cbe2daa259b6389f8820e4', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: 'cb0ca7a85679f8cda0d391984d304cadf0989fa0', part: "link", class: classes, id: this.dsId, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIcon && h(this.DsIcon, { key: '08dd3d9becdaacac5fb1fd6b645658b7abc9b33c', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'c5e7990df78a9863d6481a571af83a7e7734d022', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -86,6 +87,26 @@ export class DsLinkLogo extends Mixin(componentFactory('ds-link-logo'), linkFact
     }
     static get properties() {
         return {
+            "dsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `id` attribute of the `a`/`span` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-id",
+                "defaultValue": "this.getUniqueId()"
+            },
             "dsIcon": {
                 "type": "string",
                 "mutable": false,

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

@@ -4,19 +4,19 @@
   display: block;
 }
 
-.ds-link-with-arrow__pA2cRq {
+.ds-link-with-arrow__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-link-with-arrow__pA2cRq:focus-visible {
+.ds-link-with-arrow__0apwgA: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__pA2cRq {
+.ds-link-with-arrow__0apwgA {
   display: inline-flex;
   align-items: center;
   color: var(--ds-textColor-link);
@@ -27,15 +27,15 @@
   text-decoration-line: none;
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__pA2cRq {
+  .ds-link-with-arrow__0apwgA {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-link-with-arrow__pA2cRq--full-width {
+.ds-link-with-arrow__0apwgA--full-width {
   width: 100%;
   justify-content: space-between;
 }
-.ds-link-with-arrow__pA2cRq__icon {
+.ds-link-with-arrow__0apwgA__icon {
   display: inline-flex;
   flex-shrink: 0;
   width: 2rem;
@@ -47,18 +47,18 @@
   background-color: var(--ds-bgColor-primary);
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__pA2cRq__icon {
+  .ds-link-with-arrow__0apwgA__icon {
     width: 2.5rem;
     height: 2.5rem;
   }
 }
-.ds-link-with-arrow__pA2cRq__icon--start {
+.ds-link-with-arrow__0apwgA__icon--start {
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-link-with-arrow__pA2cRq__icon--end {
+.ds-link-with-arrow__0apwgA__icon--end {
   margin-left: var(--ds-spacing-xSmall);
 }
-.ds-link-with-arrow__pA2cRq:hover, .ds-link-with-arrow__pA2cRq:active {
+.ds-link-with-arrow__0apwgA:hover, .ds-link-with-arrow__0apwgA:active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -66,16 +66,16 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link-with-arrow__pA2cRq:hover {
+.ds-link-with-arrow__0apwgA:hover {
   cursor: pointer;
   color: var(--ds-textColor-link-hover);
 }
-.ds-link-with-arrow__pA2cRq:hover .ds-link-with-arrow__pA2cRq__icon {
+.ds-link-with-arrow__0apwgA:hover .ds-link-with-arrow__0apwgA__icon {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-with-arrow__pA2cRq:active, .ds-link-with-arrow__pA2cRq:focus-visible {
+.ds-link-with-arrow__0apwgA:active, .ds-link-with-arrow__0apwgA:focus-visible {
   color: var(--ds-textColor-link-active);
 }
-.ds-link-with-arrow__pA2cRq:active .ds-link-with-arrow__pA2cRq__icon {
+.ds-link-with-arrow__0apwgA:active .ds-link-with-arrow__0apwgA__icon {
   background-color: var(--ds-bgColor-primary-active);
 }

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

@@ -18,6 +18,7 @@ export class DsLinkWithArrow extends Mixin(componentFactory('ds-link-with-arrow'
     defaultIcon = 'arrow_forward';
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
+    dsId = this.getUniqueId();
     dsText;
     dsIconPosition = 'start';
     dsTag = 'a';
@@ -78,7 +79,7 @@ export class DsLinkWithArrow extends Mixin(componentFactory('ds-link-with-arrow'
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (h(this.dsTag, { key: '1d23feca569fa2a2bf438db4446283f12215eba8', class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'acc62c6dd5cf5a0262c10ffa1f0d1723a7f4e4ea', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: '4ff8d012d980e5ba799adfcc0fc0d442f2ea7599', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'a68628f775ae39b7942543ce982aeeddc7c1ea59', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: 'cd849008980aea45c6166bdf43641218ff394619', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '450738f6df19a886c122f984bf7fff34345383d7', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '969fd489a4a90f37a4b8e9c97f48114ddaa34244', class: classes, id: this.dsId, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '98791e9f547b20649805970204bf497bcb733ab8', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'bb6f03409e2706a9ffc92356015b011a1b0cee40', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'b0c2cc79301cd7a38ab245b717c0e5edb1225fa6', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '15caee7cfcce6609aba5336e9c276c522a7f1d6c', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '840971928b2e3d3255eef5f27a19b800dd71867a', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "scoped"; }
@@ -94,6 +95,26 @@ export class DsLinkWithArrow extends Mixin(componentFactory('ds-link-with-arrow'
     }
     static get properties() {
         return {
+            "dsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `id` attribute of the `a`/`span` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-id",
+                "defaultValue": "this.getUniqueId()"
+            },
             "dsText": {
                 "type": "string",
                 "mutable": false,