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

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

@@ -1,20 +1,20 @@
-.ds-input-validity__SPFJ1E {
+.ds-input-validity__QIDqOT {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-input-validity__SPFJ1E--error {
+.ds-input-validity__QIDqOT--error {
   color: var(--ds-textColor-danger);
 }
-.ds-input-validity__SPFJ1E--success {
+.ds-input-validity__QIDqOT--success {
   color: var(--ds-textColor-success);
 }
-.ds-input-validity__SPFJ1E__icon {
+.ds-input-validity__QIDqOT__icon {
   display: block;
   height: 1.5rem;
 }
-.ds-input-validity__SPFJ1E small {
+.ds-input-validity__QIDqOT 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

@@ -61,7 +61,7 @@ export class DsInputValidity extends Mixin(ariaDeprecationFactory) {
             : {
                 role: resolvedRole,
             };
-        return (h(Elem, { key: '1f12c53e3659268e5f47ee706d2a361ae12b7f8c', ...elemProps, ...restAttributes }, h("slot", { key: '8216383059b32415cfd1017c333834bd4189feeb' }), this.dsText && (h("div", { key: 'be55937e559bc4e8a9388172c788df594c9e8c54', class: classes }, h(this.DsIcon, { key: '2a825456b67fb15c49c443f1dd4d6bb50cd9d77e', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: '551c85616e7aa0c4c30b62a554ad5ef531cafa6c', id: this.identifier }, this.dsText)))));
+        return (h(Elem, { key: '2086d6fd5e9e844a7a7c671f141ebe162fe922bf', ...elemProps, ...restAttributes }, h("slot", { key: 'e7e73b5fb1b58f5d5f961f5cb8f7900ead096a7a' }), this.dsText && (h("div", { key: '2f251bb298dab7526b95bf439e74b5d3259de829', class: classes }, h(this.DsIcon, { key: '34659bf9777946082bf6b574190fa1b2e9770913', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: '8e7eb0370b2fac62536b92fcd7d422373a2fd0ff', 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,16 +1,16 @@
 :host {
   display: inline;
 }
-:host:has(.ds-link__SPFJ1E--standalone) {
+:host:has(.ds-link__QIDqOT--standalone) {
   display: inline-block;
 }
 
-.ds-link__SPFJ1E:focus-visible {
+.ds-link__QIDqOT: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__SPFJ1E {
+.ds-link__QIDqOT {
   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__SPFJ1E--semibold {
+.ds-link__QIDqOT--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-link__SPFJ1E--bold {
+.ds-link__QIDqOT--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-link__SPFJ1E--2xLarge {
+.ds-link__QIDqOT--2xLarge {
   font-size: var(--ds-fontSize-22);
 }
-.ds-link__SPFJ1E--xLarge {
+.ds-link__QIDqOT--xLarge {
   font-size: var(--ds-fontSize-20);
 }
-.ds-link__SPFJ1E--large {
+.ds-link__QIDqOT--large {
   font-size: var(--ds-fontSize-18);
 }
-.ds-link__SPFJ1E--medium {
+.ds-link__QIDqOT--medium {
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__SPFJ1E--small {
+.ds-link__QIDqOT--small {
   font-size: var(--ds-fontSize-14);
 }
-.ds-link__SPFJ1E--xSmall {
+.ds-link__QIDqOT--xSmall {
   font-size: var(--ds-fontSize-12);
 }
-.ds-link__SPFJ1E__icon {
+.ds-link__QIDqOT__icon {
   display: inline-block;
   vertical-align: -0.125em;
 }
-.ds-link__SPFJ1E__icon--start-inline {
+.ds-link__QIDqOT__icon--start-inline {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link__SPFJ1E__icon--start-standalone {
+.ds-link__QIDqOT__icon--start-standalone {
   margin-right: var(--ds-spacing-2xSmall);
 }
-.ds-link__SPFJ1E__icon--end-inline {
+.ds-link__QIDqOT__icon--end-inline {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link__SPFJ1E__icon--end-standalone {
+.ds-link__QIDqOT__icon--end-standalone {
   margin-left: var(--ds-spacing-2xSmall);
 }
-.ds-link__SPFJ1E:hover, .ds-link__SPFJ1E:active {
+.ds-link__QIDqOT:hover, .ds-link__QIDqOT:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-link__SPFJ1E:hover {
+.ds-link__QIDqOT:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__SPFJ1E:active {
+.ds-link__QIDqOT:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__SPFJ1E:visited {
+.ds-link__QIDqOT:visited {
   color: var(--ds-textColor-link-visited);
 }
-.ds-link__SPFJ1E--standalone {
+.ds-link__QIDqOT--standalone {
   color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
-.ds-link__SPFJ1E--standalone:hover, .ds-link__SPFJ1E--standalone:active {
+.ds-link__QIDqOT--standalone:hover, .ds-link__QIDqOT--standalone:active {
   text-decoration-line: underline;
 }
-.ds-link__SPFJ1E--standalone:focus-visible, .ds-link__SPFJ1E--standalone:visited {
+.ds-link__QIDqOT--standalone:focus-visible, .ds-link__QIDqOT--standalone:visited {
   color: var(--ds-textColor-link);
 }
-.ds-link__SPFJ1E--standalone:active {
+.ds-link__QIDqOT--standalone:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__SPFJ1E--standalone:hover {
+.ds-link__QIDqOT--standalone:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__SPFJ1E--colour-white {
+.ds-link__QIDqOT--colour-white {
   color: var(--ds-textColor-white);
 }
-.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 {
+.ds-link__QIDqOT--colour-white:hover, .ds-link__QIDqOT--colour-white:active, .ds-link__QIDqOT--colour-white:visited, .ds-link__QIDqOT--colour-white:focus-visible {
   color: var(--ds-textColor-white);
 }
-.ds-link__SPFJ1E--colour-black {
+.ds-link__QIDqOT--colour-black {
   color: var(--ds-textColor-default);
 }
-.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 {
+.ds-link__QIDqOT--colour-black:hover, .ds-link__QIDqOT--colour-black:active, .ds-link__QIDqOT--colour-black:visited, .ds-link__QIDqOT--colour-black:focus-visible {
   color: var(--ds-textColor-default);
 }

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

@@ -6,6 +6,7 @@ import { declareComponentDependencies, idGenerator, ifDefined, transformTagName
 import { linkFactory } from "../../00-foundations/factories/linkFactory";
 import { ariaDeprecationFactory } from "../../00-foundations/factories/ariaDeprecationFactory";
 import { cx } from "../../../utils/cx";
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 const linkIconSizeMap = {
     '2xLarge': '1.375rem',
@@ -15,7 +16,7 @@ const linkIconSizeMap = {
     'small': '0.875rem',
     'xSmall': '0.75rem',
 };
-export class DsLink extends Mixin(linkFactory, ariaDeprecationFactory) {
+export class DsLink extends Mixin(componentFactory('ds-link'), linkFactory, ariaDeprecationFactory) {
     constructor() {
         super();
     }
@@ -68,6 +69,9 @@ export class DsLink extends Mixin(linkFactory, ariaDeprecationFactory) {
         };
         this.setTargetBlank(this.dsTarget);
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     onTargetChanged(newValue) {
         this.setTargetBlank(newValue);
     }
@@ -83,7 +87,7 @@ export class DsLink extends Mixin(linkFactory, ariaDeprecationFactory) {
             [`${baseClass}__icon--start-${this.dsVariant}`]: iconPosition === 'start',
             [`${baseClass}__icon--end-${this.dsVariant}`]: iconPosition === 'end',
         });
-        const iconSize = linkIconSizeMap[this.dsSize] ?? '1rem';
+        const iconSize = this.dsSize ? linkIconSizeMap[this.dsSize] : '1rem';
         const DsIcon = transformTagName('ds-icon', 'ds-link', this.el);
         return (h(DsIcon, { dsName: iconName, class: iconClasses, dsSize: iconSize, dsTitle: this.dsIconTitle, dsAriaLabel: this.dsIconAriaLabel, dsHidden: this.dsIconHidden, dsAriaHidden: this.dsIconAriaHidden }));
     }
@@ -106,7 +110,7 @@ export class DsLink extends Mixin(linkFactory, ariaDeprecationFactory) {
         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: '473090c1309762d7bf8be27568c1f35307774514', ref: el => (this.linkRef = el), part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '8cdb65481a0b646a2fed499f5945bb81b03b164c', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: '4bb55caa2e5491181d99be9ecd73166175bf2e83', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '080db20d8bb58e5c230d2de759744daea0b2ce46', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: 'ad7cf9b1e8f4fe1bc26ec5335d6c3ef2feadd32a', ref: el => (this.linkRef = el), part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'e057ff567be1b2ab1ca8f12a10673aba6200e8a6', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: '77eedbd23fe1866b1237f26c5db4db993dd1a2d0', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '02ab44244d7f5799253eeb44141c03c10b65533c', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -364,7 +368,7 @@ export class DsLink extends Mixin(linkFactory, ariaDeprecationFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specifies the HTML tag to render for the link component.\n\nBy default, the link is rendered as an `<a>` element. However, when using client-side routing libraries\nlike `react-router`, you may want to render the link as a `<span>` instead, and wrap this component\nwith a router-specific link component (e.g., `<Link>` in React Router) to enable navigation without\ncausing a full page reload."

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

@@ -9,7 +9,7 @@
   vertical-align: middle;
 }
 
-.ds-link-cta__SPFJ1E {
+.ds-link-cta__QIDqOT {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -28,14 +28,14 @@
   user-select: none;
   --webkit-user-select: none;
 }
-.ds-link-cta__SPFJ1E[aria-disabled=true] {
+.ds-link-cta__QIDqOT[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__SPFJ1E__text {
+.ds-link-cta__QIDqOT__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__SPFJ1E--no-text .ds-link-cta__SPFJ1E__text {
+.ds-link-cta__QIDqOT--no-text .ds-link-cta__QIDqOT__text {
   padding: 0;
 }
-.ds-link-cta__SPFJ1E:has(.ds-link-cta__SPFJ1E__spinner):not(.ds-link-cta__SPFJ1E--small) .ds-link-cta__SPFJ1E__value {
+.ds-link-cta__QIDqOT:has(.ds-link-cta__QIDqOT__spinner):not(.ds-link-cta__QIDqOT--small) .ds-link-cta__QIDqOT__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__SPFJ1E--icon-only {
+.ds-link-cta__QIDqOT--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-link-cta__SPFJ1E:has(.ds-link-cta__SPFJ1E__text:empty) {
+.ds-link-cta__QIDqOT:has(.ds-link-cta__QIDqOT__text:empty) {
   width: var(--ds-link-cta-min-height);
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__SPFJ1E:has(.ds-link-cta__SPFJ1E__text:empty) .ds-link-cta__SPFJ1E__icon {
+.ds-link-cta__QIDqOT:has(.ds-link-cta__QIDqOT__text:empty) .ds-link-cta__QIDqOT__icon {
   margin: 0;
 }
-.ds-link-cta__SPFJ1E:not(.ds-link-cta__SPFJ1E--small):not(.ds-link-cta__SPFJ1E--secondary):not(.ds-link-cta__SPFJ1E--supplementary) {
+.ds-link-cta__QIDqOT:not(.ds-link-cta__QIDqOT--small):not(.ds-link-cta__QIDqOT--secondary):not(.ds-link-cta__QIDqOT--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__SPFJ1E:not(.ds-link-cta__SPFJ1E--small).ds-link-cta__SPFJ1E--secondary {
+.ds-link-cta__QIDqOT:not(.ds-link-cta__QIDqOT--small).ds-link-cta__QIDqOT--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__SPFJ1E:not(.ds-link-cta__SPFJ1E--small).ds-link-cta__SPFJ1E--supplementary {
+.ds-link-cta__QIDqOT:not(.ds-link-cta__QIDqOT--small).ds-link-cta__QIDqOT--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__SPFJ1E:not(.ds-link-cta__SPFJ1E--small).ds-link-cta__SPFJ1E--icon-only {
+.ds-link-cta__QIDqOT:not(.ds-link-cta__QIDqOT--small).ds-link-cta__QIDqOT--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__SPFJ1E--small:not(.ds-link-cta__SPFJ1E--secondary):not(.ds-link-cta__SPFJ1E--supplementary) {
+.ds-link-cta__QIDqOT--small:not(.ds-link-cta__QIDqOT--secondary):not(.ds-link-cta__QIDqOT--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__SPFJ1E--small.ds-link-cta__SPFJ1E--secondary {
+.ds-link-cta__QIDqOT--small.ds-link-cta__QIDqOT--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__SPFJ1E--small.ds-link-cta__SPFJ1E--supplementary {
+.ds-link-cta__QIDqOT--small.ds-link-cta__QIDqOT--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__SPFJ1E--small.ds-link-cta__SPFJ1E--icon-only {
+.ds-link-cta__QIDqOT--small.ds-link-cta__QIDqOT--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-link-cta__SPFJ1E--small .ds-link-cta__SPFJ1E__icon {
+.ds-link-cta__QIDqOT--small .ds-link-cta__QIDqOT__icon {
   width: var(--ds-link-cta-icon-size, auto);
   height: var(--ds-link-cta-icon-size, 1rem);
 }
-.ds-link-cta__SPFJ1E__icon--start {
+.ds-link-cta__QIDqOT__icon--start {
   margin-right: var(--ds-spacing-3xSmall);
   margin-left: 0;
 }
-.ds-link-cta__SPFJ1E__icon--end {
+.ds-link-cta__QIDqOT__icon--end {
   margin-left: var(--ds-spacing-3xSmall);
   margin-right: 0;
 }
-.ds-link-cta__SPFJ1E--no-text .ds-link-cta__SPFJ1E__icon--start,
-.ds-link-cta__SPFJ1E--no-text .ds-link-cta__SPFJ1E__icon--end {
+.ds-link-cta__QIDqOT--no-text .ds-link-cta__QIDqOT__icon--start,
+.ds-link-cta__QIDqOT--no-text .ds-link-cta__QIDqOT__icon--end {
   margin: 0;
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--blue:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--blue:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--black:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--black:active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--primary.ds-link-cta__SPFJ1E--white:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--primary.ds-link-cta__QIDqOT--white:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--blue:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--black:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--secondary.ds-link-cta__SPFJ1E--white:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--secondary.ds-link-cta__QIDqOT--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--blue:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--black:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white:focus-visible {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--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__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white:hover {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__SPFJ1E.ds-link-cta__SPFJ1E--supplementary.ds-link-cta__SPFJ1E--white:active {
+.ds-link-cta__QIDqOT.ds-link-cta__QIDqOT--supplementary.ds-link-cta__QIDqOT--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }

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

@@ -5,8 +5,9 @@ import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/
 import { declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
 import { linkFactory } from "../../00-foundations/factories/linkFactory";
 import { cx } from "../../../utils/cx";
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
-export class DsLinkCta extends Mixin(linkFactory) {
+export class DsLinkCta extends Mixin(componentFactory('ds-link-cta'), linkFactory) {
     constructor() {
         super();
     }
@@ -60,6 +61,9 @@ export class DsLinkCta extends Mixin(linkFactory) {
         };
         this.updateIcon(this.dsTarget);
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     onTargetChanged(newValue) {
         this.updateIcon(newValue);
     }
@@ -88,10 +92,10 @@ export class DsLinkCta extends Mixin(linkFactory) {
         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: 'e01edbf87e51d1f27a01e5e6da3cead73298ee64', dsName: this.currentIcon, class: iconClasses, dsCustomSize: this.dsSize === 'medium' ? '1.5rem' : '1.25rem' });
+        const iconElement = !this.dsHideIcon && h(DsIcon, { key: '448eb8dcf11f9fa9c95ecb610f15da2c63704dc4', dsName: this.currentIcon, class: iconClasses, dsCustomSize: this.dsSize === 'medium' ? '1.5rem' : '1.25rem' });
         const tabindex = this.dsTabIndex !== undefined ? this.dsTabIndex : this.dsTag === 'a' && !this.dsHref ? '0' : undefined;
         const role = this.dsTag === 'span' ? 'link' : undefined;
-        return (h(this.dsTag, { key: 'f4438b02d0ee321dd505478cbde5605d35fb8d90', ref: el => (this.linkEl = el), part: "link", 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: '40203ab8b05342f5c01f03e8592c999bcf020f03', class: linkTextClasses }, this.dsText), this.dsIconPosition === 'end' && iconElement, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'b640c395df6588b797b71dbdb93e37263480f579', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '9e5e7be6d458f052d385d3d08a8675b0353db9ef', ref: el => (this.linkEl = el), part: "link", 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: 'ad0fe622a4ea7b142db72198033055698c24298a', class: linkTextClasses }, this.dsText), this.dsIconPosition === 'end' && iconElement, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'ffea96701af76a2dbde3164bb2daa63d40500b21', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-cta"; }
     static get encapsulation() { return "shadow"; }
@@ -254,7 +258,7 @@ export class DsLinkCta extends Mixin(linkFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specifies the HTML tag to render for the link component.\n\nBy default, the link is rendered as an `<a>` element. However, when using client-side routing libraries\nlike `react-router`, you may want to render the link as a `<span>` instead, and wrap this component\nwith a router-specific link component (e.g., `<Link>` in React Router) to enable navigation without\ncausing a full page reload."

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

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

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

@@ -66,7 +66,7 @@ export class DsLinkLogo extends Mixin(linkFactory) {
         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: 'c22bfdb0d15a07deab3dda38c87ecdc8dcda13e6', part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIcon && h(this.DsIcon, { key: 'd6ba5703084ef752b5e54bb4286fded73c127dac', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'e134912dfff02fcb1d447d2d089fa061daaeb33a', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '510884ff3bceb2e72648465a0c176524114e990d', part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIcon && h(this.DsIcon, { key: 'af02f372577dd0f422a9cc6ddaf69465851e28bf', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '3bd78b4d2e7662786373ee5167ca7050d3d2b0b5', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-logo"; }
     static get encapsulation() { return "shadow"; }