@uh-design-system/component-library 1.5.2 → 1.6.0-rc.1

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

@@ -19,13 +19,12 @@ export class DsFeedback {
         }
         if (!this.dsRole && !this.dsAriaLive) {
             console.warn(`ds-feedback: ${eitherMessage}.`);
-            return;
         }
     }
     render() {
         const Elem = this.dsSrOnly ? this.DsVisuallyHidden : Fragment;
         const elemProps = this.dsSrOnly ? { dsTag: this.dsSrOnlyTag } : {};
-        return (h(this.dsTag, { key: '497f819b1680697bd1bb961ce5437e57fff1a1c0', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: 'e250d489a186701d2af3e3c643d6282721e30cfd', ...elemProps }, h("slot", { key: 'abca085a9e20f4861a8cf31cffd72ed3f6a10702' }))));
+        return (h(this.dsTag, { key: '8b2903da943825162a5290feb7b9887f3dc7d9c4', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: 'd067502390fecfe53d1c7923a0cd7a24b25fb61d', ...elemProps }, h("slot", { key: '8f15e17861817e811e5960c995080e0382eaca7a' }))));
     }
     static get is() { return "ds-feedback"; }
     static get encapsulation() { return "scoped"; }
@@ -114,17 +113,12 @@ export class DsFeedback {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "AriaAtomic",
+                    "original": "boolean",
                     "resolved": "boolean",
-                    "references": {
-                        "AriaAtomic": {
-                            "location": "global",
-                            "id": "global::AriaAtomic"
-                        }
-                    }
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `aria-atomic` attribute of the rendered element."

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

@@ -1,18 +1,18 @@
-.ds-grid__MsKlb0.ds-grid__MsKlb0--container {
+.ds-grid__izAhxK.ds-grid__izAhxK--container {
   max-width: calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));
   margin: 0 var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0--container {
+  .ds-grid__izAhxK.ds-grid__izAhxK--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0--container {
+  .ds-grid__izAhxK.ds-grid__izAhxK--container {
     margin: 0 auto;
   }
 }
-.ds-grid__MsKlb0.ds-grid__MsKlb0__flex {
+.ds-grid__izAhxK.ds-grid__izAhxK__flex {
   display: flex;
   flex-flow: wrap;
   min-width: 0;
@@ -20,91 +20,91 @@
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__flex {
+  .ds-grid__izAhxK.ds-grid__izAhxK__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__flex {
+  .ds-grid__izAhxK.ds-grid__izAhxK__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__flex--container) {
+.ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
   width: calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile));
 }
 @media (min-width: 30rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__flex--container) {
+  .ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
     width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-tablet));
   }
 }
 @media (min-width: 45rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__flex--container) {
+  .ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
     width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet));
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__flex--container) {
+  .ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
     width: calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop));
   }
 }
-.ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container {
+.ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
   display: grid;
   grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container {
+  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container {
+  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container {
+  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
     grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container {
+  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__MsKlb0.ds-grid__MsKlb0__grid {
+.ds-grid__izAhxK.ds-grid__izAhxK__grid {
   grid-column: span var(--ds-size-mobile);
   grid-row: span var(--ds-row-span-mobile, 1);
 }
 @supports (grid-column: span var(--ds-size-mobile)) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__grid[style*="--ds-size-mobile: -1"] {
+  .ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-mobile: -1"] {
     grid-column: 1/-1;
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__grid {
+  .ds-grid__izAhxK.ds-grid__izAhxK__grid {
     grid-column: span var(--ds-size-tablet);
     grid-row: span var(--ds-row-span-tablet, 1);
   }
   @supports (grid-column: span var(--ds-size-tablet)) {
-    .ds-grid__MsKlb0.ds-grid__MsKlb0__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__MsKlb0.ds-grid__MsKlb0__grid:not([style*="--ds-size-tablet: -1"]) {
+    .ds-grid__izAhxK.ds-grid__izAhxK__grid:not([style*="--ds-size-tablet: -1"]) {
       grid-column: span var(--ds-size-tablet);
     }
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__MsKlb0.ds-grid__MsKlb0__grid {
+  .ds-grid__izAhxK.ds-grid__izAhxK__grid {
     grid-column: span var(--ds-size-desktop);
     grid-row: span var(--ds-row-span-desktop, 1);
   }
   @supports (grid-column: span var(--ds-size-desktop)) {
-    .ds-grid__MsKlb0.ds-grid__MsKlb0__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__MsKlb0.ds-grid__MsKlb0__grid:not([style*="--ds-size-desktop: -1"]) {
+    .ds-grid__izAhxK.ds-grid__izAhxK__grid:not([style*="--ds-size-desktop: -1"]) {
       grid-column: span var(--ds-size-desktop);
     }
   }

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

@@ -55,7 +55,7 @@ export class DsGrid extends Mixin(componentFactory('ds-grid', { transparentForRo
             [`${baseClass}--container`]: this.dsContainer,
             [`${baseClass}__${this.dsType}`]: this.dsType,
         });
-        return (h(Host, { key: '7adc0df22b107ba3146aa2c75f44da3b3d461032', class: classes, style: {
+        return (h(Host, { key: 'd57b350c30ff2b0326a7498219823c27932dd0a6', class: classes, style: {
                 ...(this.dsType === 'flex'
                     ? {
                         '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
@@ -84,7 +84,7 @@ export class DsGrid extends Mixin(componentFactory('ds-grid', { transparentForRo
                         '--ds-row-span-tablet': this.dsRowSpanTablet ? `${this.dsRowSpanTablet}` : undefined,
                         '--ds-row-span-desktop': this.dsRowSpanDesktop ? `${this.dsRowSpanDesktop}` : undefined,
                     }),
-            } }, h("slot", { key: '2a03a39994a07f0e22611e0fa59c580022ac339d' })));
+            } }, h("slot", { key: '05e2fce65904e04e52f6a0588ddff823b78b34a5' })));
     }
     static get is() { return "ds-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/01-base-components/ds-group-label/ds-group-label.css

@@ -1,4 +1,4 @@
-.ds-group-label__MsKlb0__label {
+.ds-group-label__izAhxK__label {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -8,10 +8,10 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-group-label__MsKlb0 {
+.ds-group-label__izAhxK {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__MsKlb0:empty {
+.ds-group-label__izAhxK:empty {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-group-label/ds-group-label.js

@@ -18,7 +18,7 @@ export class DsGroupLabel extends Mixin(componentFactory('ds-group-label')) {
     }
     render() {
         const baseClass = cx('ds-group-label');
-        return (h("div", { key: '1bfffa0fd3604e6190596fd7b04663f28d54e7d4', class: baseClass }, h("slot", { key: '99f4ed52b13edc604e021fd6ea5aec9935e09212', name: "label" }, this.dsLabel && h("div", { key: 'a75e5fd584a2e5e446d3152819cf07fef2f0d627', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: '4594140fd422c65c2ab882c5dc615c9134000521', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'a38d19a19394b73956e998e84b08e79e043e2e57', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
+        return (h("div", { key: '464d44f204db2ad4856afdbd42c88fb37946c821', class: baseClass }, h("slot", { key: '84b0c2aed1cb714ec1c9b18a20aab875c8a53b26', name: "label" }, this.dsLabel && h("div", { key: '657a67c761189e370209ad4e91b59e85b88588c3', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: '5c2c0a22ce3590701544d6f125f95d431b2c644f', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'eed3766a7fa01b160330e44ea8c83938c9f9e7f7', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
     }
     static get is() { return "ds-group-label"; }
     static get originalStyleUrls() {

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

@@ -2,9 +2,9 @@
   display: flex;
 }
 
-.ds-icon__MsKlb0--container {
+.ds-icon__izAhxK--container {
   display: flex;
 }
-.ds-icon__MsKlb0--hidden {
+.ds-icon__izAhxK--hidden {
   display: none;
 }

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

@@ -1,4 +1,4 @@
-import { Fragment, Mixin, h, forceUpdate } from "@stencil/core";
+import { Mixin, h, forceUpdate } from "@stencil/core";
 import classNames from "classnames";
 import { remToPx, transformTagName, omit } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
@@ -54,16 +54,16 @@ export class DsIcon extends Mixin(componentFactory('ds-icon'), ariaDeprecationFa
     }
     render() {
         const baseClass = cx('ds-icon');
-        const iconComponentName = `ds-icon-${this.dsName?.replace(/_/g, '-')}`;
+        const iconComponentName = `ds-icon-${this.dsName?.replaceAll('_', '-')}`;
         const IconTag = transformTagName(iconComponentName, 'ds-icon', this.el);
         const iconAriaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'];
         const iconAriaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'];
         const iconRole = this.dsRole ?? this.inheritedAttributes['role'];
         const iconAriaHidden = String(this.dsAriaHidden ?? true);
         const restAttributes = omit(this.inheritedAttributes, ['aria-label', 'aria-labelledby', 'role', 'aria-hidden']);
-        return (h(Fragment, { key: '1b1a0992f993fa4becba7de919f3e0af2a0c4a0c' }, h("span", { key: '2aa51e19fd6d4eafd22a112bbb688228e9965127', class: classNames(`${baseClass}--container`, {
+        return (h("span", { key: '503eb77e868a946cf24b91a577b7eb3385be8580', class: classNames(`${baseClass}--container`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: '7d503e013eac2c7c73c68dbc3c3bf197b8cce329', dsSize: this.dsCustomSize ? this.dsCustomSize : remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: iconRole, dsTitle: this.dsTitle, dsAriaLabel: iconAriaLabel, dsAriaLabelledby: iconAriaLabelledby, ...restAttributes }))));
+            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: 'c5fe1a86dc27ed61d870f607a4f04671a697f53f', dsSize: this.dsCustomSize ? this.dsCustomSize : remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: iconRole, dsTitle: this.dsTitle, dsAriaLabel: iconAriaLabel, dsAriaLabelledby: iconAriaLabelledby, ...restAttributes })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css

@@ -1,20 +1,20 @@
-.ds-input-validity__MsKlb0 {
+.ds-input-validity__izAhxK {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-input-validity__MsKlb0--error {
+.ds-input-validity__izAhxK--error {
   color: var(--ds-textColor-danger);
 }
-.ds-input-validity__MsKlb0--success {
+.ds-input-validity__izAhxK--success {
   color: var(--ds-textColor-success);
 }
-.ds-input-validity__MsKlb0__icon {
+.ds-input-validity__izAhxK__icon {
   display: block;
   height: 1.5rem;
 }
-.ds-input-validity__MsKlb0 small {
+.ds-input-validity__izAhxK small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js

@@ -62,7 +62,7 @@ export class DsInputValidity extends Mixin(componentFactory('ds-input-validity')
             : {
                 role: resolvedRole,
             };
-        return (h(Elem, { key: '1fe7ff2fa404bb89714a4fec77d16e1bb86192fe', ...elemProps, ...restAttributes }, h("slot", { key: '305278ea4e5e1baa8dbd7c95ce8a28da44c432ae' }), this.dsText && (h("div", { key: '1a64816d35eb1eaa9ae77e9b44c35c466d93cbfd', class: classes }, h(this.DsIcon, { key: '6a2af244da9d8053c9736a9478ced2a87e02d5d8', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: '810eb5b78a4303c2bbaa681f5e8480943a16f574', id: this.identifier }, this.dsText)))));
+        return (h(Elem, { key: 'bc86c1c36ce83a4e79eda5772c1792cba8842d63', ...elemProps, ...restAttributes }, h("slot", { key: '1ef33d724df9955b1f88ed166aab5b82006e8637' }), this.dsText && (h("div", { key: '7f3382c8e093c42ac5486eb46361a7dc3f14bfe9', class: classes }, h(this.DsIcon, { key: 'b51969dd04dd66fabcead6e39cf8fdf00a6bd8fc', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: 'b4be918b322bbc27e3e8c09ef55a33b0d4d39f80', id: this.identifier }, this.dsText)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {

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

@@ -1,21 +1,30 @@
-:host {
-  display: inline;
-}
-:host:has(.ds-link__MsKlb0--standalone) {
-  display: inline-block;
+.ds-no-style-leak * {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
 }
 
-.ds-link__MsKlb0:focus-visible {
+.ds-link__izAhxK {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+}
+.ds-link__izAhxK: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__MsKlb0 {
+.ds-link__izAhxK {
   box-sizing: border-box;
   display: inline;
+  vertical-align: var(--ds-link-vertical-align, baseline);
   color: var(--ds-textColor-link);
   font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-link-font-size, var(--ds-fontSize-16));
   font-weight: var(--ds-fontWeight-regular);
+  text-transform: var(--ds-link-text-transform, none);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
   text-decoration-line: underline;
@@ -25,84 +34,86 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link__MsKlb0--semibold {
+.ds-link__izAhxK--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-link__MsKlb0--bold {
+.ds-link__izAhxK--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-link__MsKlb0--2xLarge {
+.ds-link__izAhxK--2xLarge {
   font-size: var(--ds-fontSize-22);
 }
-.ds-link__MsKlb0--xLarge {
+.ds-link__izAhxK--xLarge {
   font-size: var(--ds-fontSize-20);
 }
-.ds-link__MsKlb0--large {
+.ds-link__izAhxK--large {
   font-size: var(--ds-fontSize-18);
 }
-.ds-link__MsKlb0--medium {
+.ds-link__izAhxK--medium {
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__MsKlb0--small {
+.ds-link__izAhxK--small {
   font-size: var(--ds-fontSize-14);
 }
-.ds-link__MsKlb0--xSmall {
+.ds-link__izAhxK--xSmall {
   font-size: var(--ds-fontSize-12);
 }
-.ds-link__MsKlb0__icon {
+.ds-link__izAhxK__icon {
   display: inline-block;
   vertical-align: -0.125em;
 }
-.ds-link__MsKlb0__icon--start-inline {
+.ds-link__izAhxK__icon--start-inline {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link__MsKlb0__icon--start-standalone {
+.ds-link__izAhxK__icon--start-standalone {
   margin-right: var(--ds-spacing-2xSmall);
 }
-.ds-link__MsKlb0__icon--end-inline {
+.ds-link__izAhxK__icon--end-inline {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link__MsKlb0__icon--end-standalone {
+.ds-link__izAhxK__icon--end-standalone {
   margin-left: var(--ds-spacing-2xSmall);
 }
-.ds-link__MsKlb0:hover, .ds-link__MsKlb0:active {
+.ds-link__izAhxK:hover, .ds-link__izAhxK:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-link__MsKlb0:hover {
+.ds-link__izAhxK:hover {
   color: var(--ds-textColor-link-hover);
+  cursor: pointer;
 }
-.ds-link__MsKlb0:active {
+.ds-link__izAhxK:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__MsKlb0:visited {
+.ds-link__izAhxK:visited {
   color: var(--ds-textColor-link-visited);
 }
-.ds-link__MsKlb0--standalone {
+.ds-link__izAhxK--standalone {
+  display: inline-block;
   color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
-.ds-link__MsKlb0--standalone:hover, .ds-link__MsKlb0--standalone:active {
+.ds-link__izAhxK--standalone:hover, .ds-link__izAhxK--standalone:active {
   text-decoration-line: underline;
 }
-.ds-link__MsKlb0--standalone:focus-visible, .ds-link__MsKlb0--standalone:visited {
+.ds-link__izAhxK--standalone:focus-visible, .ds-link__izAhxK--standalone:visited {
   color: var(--ds-textColor-link);
 }
-.ds-link__MsKlb0--standalone:active {
+.ds-link__izAhxK--standalone:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__MsKlb0--standalone:hover {
+.ds-link__izAhxK--standalone:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__MsKlb0--colour-white {
+.ds-link__izAhxK--colour-white {
   color: var(--ds-textColor-white);
 }
-.ds-link__MsKlb0--colour-white:hover, .ds-link__MsKlb0--colour-white:active, .ds-link__MsKlb0--colour-white:visited, .ds-link__MsKlb0--colour-white:focus-visible {
+.ds-link__izAhxK--colour-white:hover, .ds-link__izAhxK--colour-white:active, .ds-link__izAhxK--colour-white:visited, .ds-link__izAhxK--colour-white:focus-visible {
   color: var(--ds-textColor-white);
 }
-.ds-link__MsKlb0--colour-black {
+.ds-link__izAhxK--colour-black {
   color: var(--ds-textColor-default);
 }
-.ds-link__MsKlb0--colour-black:hover, .ds-link__MsKlb0--colour-black:active, .ds-link__MsKlb0--colour-black:visited, .ds-link__MsKlb0--colour-black:focus-visible {
+.ds-link__izAhxK--colour-black:hover, .ds-link__izAhxK--colour-black:active, .ds-link__izAhxK--colour-black:visited, .ds-link__izAhxK--colour-black:focus-visible {
   color: var(--ds-textColor-default);
 }

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

@@ -110,10 +110,10 @@ 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: 'ec417721a685f4273f21e36d5065b80214a03cf8', ref: el => (this.linkRef = el), part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '7fb3479d3a5e88382bf61e71d257fbc99c56fd14', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: 'a7af69b051d911eccf3e48b67322d3bc80bb9dd5', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '40d42a4016a996cab8fc3f6faf6cad37bd062930', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '1d75e8ca921ab64b9b5ed2f31b0934d62c7007dd', ref: el => (this.linkRef = el), class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'c0e65cf506738473bdfae6015a346510825d92ae', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: '6086b8a915874b90d4f01c0fb0b510a64f9c9f41', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'bb47ca4ce22c49fc501b4516f59faebc39444e92', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["ds-link.scss"]