@uh-design-system/component-library 1.1.0 → 1.2.0-rc.0

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

@@ -1,8 +1,9 @@
-import { h, forceUpdate } from "@stencil/core";
+import { h, Mixin, forceUpdate } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
 import { declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
+import { linkFactory } from "../../00-foundations/factories/linkFactory";
 import { cx } from "../../../utils/cx";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 const linkIconSizeMap = {
@@ -13,13 +14,14 @@ const linkIconSizeMap = {
     'small': '0.875rem',
     'xSmall': '0.75rem',
 };
-export class DsLink {
+export class DsLink extends Mixin(linkFactory) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
     linkRef;
-    dsRel;
-    dsHrefLang;
     dsText;
     dsSize;
     dsVariant = 'inline';
@@ -29,9 +31,6 @@ export class DsLink {
     dsIconTitle;
     dsIconAriaLabel;
     dsIconHidden;
-    dsHref;
-    dsTarget;
-    dsDownload;
     dsAriaLabel;
     dsColour;
     dsTag = 'a';
@@ -104,7 +103,7 @@ export class DsLink {
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link', this.el);
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = attrAriaLabel || this.dsAriaLabel;
-        return (h(this.dsTag, { key: 'c2899ba19a973ae45c3c185dac19b4fa4f691cd1', ref: el => (this.linkRef = el), part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'ae8e80f65cc6f309922c343e9d661226dd76345c', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: '7f92ccab3f02a03c2669e0255095cccd6463ee68', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '480e988cf0e164db4bd4f3b4cec074da133d3d10', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '18b2823ef8451c0655edae556d81c1d0ef840597', ref: el => (this.linkRef = el), part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'b2bb2021fa2dd2d23c30626d4fb487b1f4dba6e2', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: 'c124a771f6ced86738f734a083ab31793acdb46f', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '93d953d93257371fa0996a8f3126a75330e23ce6', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -120,44 +119,6 @@ export class DsLink {
     }
     static get properties() {
         return {
-            "dsRel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `rel` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-rel"
-            },
-            "dsHrefLang": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `hreflang` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-href-lang"
-            },
             "dsText": {
                 "type": "string",
                 "mutable": false,
@@ -353,69 +314,6 @@ export class DsLink {
                 "reflect": false,
                 "attribute": "ds-icon-hidden"
             },
-            "dsHref": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `href` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-href"
-            },
-            "dsTarget": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LinkTarget",
-                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | \"_unfencedTop\"",
-                    "references": {
-                        "LinkTarget": {
-                            "location": "import",
-                            "path": "../../../utils/link/linkUtils",
-                            "id": "src/utils/link/linkUtils.ts::LinkTarget"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `target` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-target"
-            },
-            "dsDownload": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `download` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-download"
-            },
             "dsAriaLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -1,3 +1,4 @@
+import { html } from "lit";
 import { icons } from "../../../00-foundations/icons/iconList";
 import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const meta = {
@@ -21,4 +22,45 @@ const meta = {
 };
 export default meta;
 export const Default = {};
+export const Events = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          <ul id="link-output">
+            <li>
+              Link clicked: <span id="link-output__clicked-text">No</span>
+            </li>
+          </ul>
+          <script>
+            document.addEventListener('dsClick', (event) => {
+              const output = document.getElementById('link-output__clicked-text');
+              if (output) {
+                output.textContent = 'Yes';
+              }
+            });
+          </script>
+        `,
+            },
+        },
+    },
+    render: () => html `
+    <ds-card ds-heading="Events" ds-description="Click the link and observe the event trigger. See implementation in 'Show code' tab in Docs." style="margin-bottom: 1.5rem;">
+      <ul slot="content" id="link-output" class="ds-bodytext-sm ds-m-sm">
+        <li>Link clicked: <span id="link-output__clicked-text">No</span></li>
+      </ul>
+    </ds-card>
+    <ds-link
+      ds-text="Test click event"
+      ds-href="#"
+      @click=${(e) => e.preventDefault()}
+      @dsClick=${() => {
+        const output = document.getElementById('link-output__clicked-text');
+        if (output) {
+            output.textContent = 'Yes';
+        }
+    }}
+    ></ds-link>
+  `,
+};
 export const Playground = {};

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

@@ -8,7 +8,7 @@
   display: inline-block;
 }
 
-.ds-link-cta__JDwdTJ {
+.ds-link-cta__nkrEji {
   width: 100%;
   align-items: center;
   border-radius: 0;
@@ -22,7 +22,7 @@
   user-select: none;
   --webkit-user-select: none;
 }
-.ds-link-cta__JDwdTJ__text {
+.ds-link-cta__nkrEji__text {
   padding: 0 var(--ds-spacing-3xSmall, 4px);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
@@ -33,151 +33,151 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link-cta__JDwdTJ__icon {
+.ds-link-cta__nkrEji__icon {
   margin-left: var(--ds-spacing-3xSmall, 4px);
 }
-.ds-link-cta__JDwdTJ:has(.ds-link-cta__JDwdTJ__spinner):not(.ds-link-cta__JDwdTJ--small) .ds-link-cta__JDwdTJ__value {
+.ds-link-cta__nkrEji:has(.ds-link-cta__nkrEji__spinner):not(.ds-link-cta__nkrEji--small) .ds-link-cta__nkrEji__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__JDwdTJ--icon-only {
+.ds-link-cta__nkrEji--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-link-cta__JDwdTJ:not(.ds-link-cta__JDwdTJ--small):not(.ds-link-cta__JDwdTJ--secondary) {
+.ds-link-cta__nkrEji:not(.ds-link-cta__nkrEji--small):not(.ds-link-cta__nkrEji--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-.ds-link-cta__JDwdTJ:not(.ds-link-cta__JDwdTJ--small).ds-link-cta__JDwdTJ--secondary {
+.ds-link-cta__nkrEji:not(.ds-link-cta__nkrEji--small).ds-link-cta__nkrEji--secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-.ds-link-cta__JDwdTJ:not(.ds-link-cta__JDwdTJ--small).ds-link-cta__JDwdTJ--icon-only {
+.ds-link-cta__nkrEji:not(.ds-link-cta__nkrEji--small).ds-link-cta__nkrEji--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__JDwdTJ--small:not(.ds-link-cta__JDwdTJ--secondary) {
+.ds-link-cta__nkrEji--small:not(.ds-link-cta__nkrEji--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-link-cta__JDwdTJ--small.ds-link-cta__JDwdTJ--secondary {
+.ds-link-cta__nkrEji--small.ds-link-cta__nkrEji--secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-link-cta__JDwdTJ--small.ds-link-cta__JDwdTJ--icon-only {
+.ds-link-cta__nkrEji--small.ds-link-cta__nkrEji--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-link-cta__JDwdTJ--small .ds-link-cta__JDwdTJ__icon {
+.ds-link-cta__nkrEji--small .ds-link-cta__nkrEji__icon {
   height: 1rem;
 }
-.ds-link-cta__JDwdTJ--icon-start:not(.ds-link-cta__JDwdTJ--small) .ds-link-cta__JDwdTJ__icon {
+.ds-link-cta__nkrEji--icon-start:not(.ds-link-cta__nkrEji--small) .ds-link-cta__nkrEji__icon {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__JDwdTJ--icon-end:not(.ds-link-cta__JDwdTJ--small) .ds-link-cta__JDwdTJ__icon {
+.ds-link-cta__nkrEji--icon-end:not(.ds-link-cta__nkrEji--small) .ds-link-cta__nkrEji__icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--blue:focus-visible {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--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__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--blue {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--blue {
   background-color: var(--ds-bgColor-primary);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--blue:hover {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--blue:active {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--blue:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--black:focus-visible {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--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__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--black {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--black {
   background-color: var(--ds-bgColor-black);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--black:hover {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--black:active {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--black:active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--white:focus-visible {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--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__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--white {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--white {
   background-color: var(--ds-bgColor-white);
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--white:hover {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--primary.ds-link-cta__JDwdTJ--white:active {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--primary.ds-link-cta__nkrEji--white:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--blue:focus-visible {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--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__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--blue {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--blue {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--blue:hover {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--blue:active {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--black:focus-visible {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--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__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--black {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--black {
   background-color: transparent;
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--black:hover {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--black:active {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--white:focus-visible {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--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__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--white {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--white {
   background-color: transparent;
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--white:hover {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__JDwdTJ.ds-link-cta__JDwdTJ--secondary.ds-link-cta__JDwdTJ--white:active {
+.ds-link-cta__nkrEji.ds-link-cta__nkrEji--secondary.ds-link-cta__nkrEji--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }

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

@@ -1,24 +1,23 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
 import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
+import { linkFactory } from "../../00-foundations/factories/linkFactory";
 import { cx } from "../../../utils/cx";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
-export class DsLinkCta {
+export class DsLinkCta extends Mixin(linkFactory) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     linkEl;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
-    dsRel;
-    dsHrefLang;
     dsText;
     dsVariant = 'primary';
     dsColour = 'blue';
     dsSize = 'medium';
-    dsHref;
-    dsTarget;
-    dsDownload;
     dsTag = 'a';
     rel;
     icon = 'arrow_forward';
@@ -67,7 +66,7 @@ export class DsLinkCta {
         const iconClasses = classNames(`${baseClass}__icon`);
         const DsIcon = transformTagName('ds-icon', 'ds-link-cta', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link-cta', this.el);
-        return (h(this.dsTag, { key: '8f56e299bc4ed935a1cfd7d04e3739cb2b3ddd17', ref: el => (this.linkEl = el), part: "link", class: classes, onKeyDown: this.handleKeyDown, ...this.inheritedAttributes, ...this.linkAttributes }, h("span", { key: '08c34adc72c696e751061ff8abbeba2b0307874b', class: linkTextClasses }, this.dsText), h(DsIcon, { key: 'bca13142c5253dc5828fecb8a372d44bbd35126a', dsName: this.icon, class: iconClasses, dsSize: this.dsSize === 'medium' ? '1.5rem' : '1rem' }), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '217377f8d5815284d8ab12cb683accf645a77ef2', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: 'bf9b14a96450b7f6b48084b539e85acd4beec327', ref: el => (this.linkEl = el), part: "link", class: classes, onKeyDown: this.handleKeyDown, ...this.inheritedAttributes, ...this.linkAttributes }, h("span", { key: 'bf72c6a7df7e2c2f1eb3fd6114d6bdf7bd948f73', class: linkTextClasses }, this.dsText), h(DsIcon, { key: 'a73647b4d73eb49ea7f7706243e66d229c3bee57', dsName: this.icon, class: iconClasses, dsSize: this.dsSize === 'medium' ? '1.5rem' : '1rem' }), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'b8e96dff07d20a1a021b8f864079e364a0a3e2e0', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-cta"; }
     static get encapsulation() { return "shadow"; }
@@ -83,44 +82,6 @@ export class DsLinkCta {
     }
     static get properties() {
         return {
-            "dsRel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `rel` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-rel"
-            },
-            "dsHrefLang": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `hreflang` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-href-lang"
-            },
             "dsText": {
                 "type": "string",
                 "mutable": false,
@@ -200,69 +161,6 @@ export class DsLinkCta {
                 "attribute": "ds-size",
                 "defaultValue": "'medium'"
             },
-            "dsHref": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `href` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-href"
-            },
-            "dsTarget": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LinkTarget",
-                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | \"_unfencedTop\"",
-                    "references": {
-                        "LinkTarget": {
-                            "location": "import",
-                            "path": "../../../utils/link/linkUtils",
-                            "id": "src/utils/link/linkUtils.ts::LinkTarget"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `target` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-target"
-            },
-            "dsDownload": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `download` attribute of the `a` element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-download"
-            },
             "dsTag": {
                 "type": "string",
                 "mutable": false,

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

@@ -1,3 +1,45 @@
+import { html } from "lit";
+export const Events = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          <ul id="link-cta-output">
+            <li>
+              Link clicked: <span id="link-cta-output__clicked-text">No</span>
+            </li>
+          </ul>
+          <script>
+            document.addEventListener('dsClick', (event) => {
+              const output = document.getElementById('link-cta-output__clicked-text');
+              if (output) {
+                output.textContent = 'Yes';
+              }
+            });
+          </script>
+        `,
+            },
+        },
+    },
+    render: () => html `
+    <ds-card ds-heading="Events" ds-description="Click the link and observe the event trigger. See implementation in 'Show code' tab in Docs." style="margin-bottom: 1.5rem;">
+      <ul slot="content" id="link-cta-output" class="ds-bodytext-sm ds-m-sm">
+        <li>Link clicked: <span id="link-cta-output__clicked-text">No</span></li>
+      </ul>
+    </ds-card>
+    <ds-link-cta
+      ds-text="Test click event"
+      ds-href="#"
+      @click=${(e) => e.preventDefault()}
+      @dsClick=${() => {
+        const output = document.getElementById('link-cta-output__clicked-text');
+        if (output) {
+            output.textContent = 'Yes';
+        }
+    }}
+    ></ds-link-cta>
+  `,
+};
 import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const meta = {
     title: 'Base Components/LinkCta',

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

@@ -8,12 +8,12 @@
   display: inline-block;
 }
 
-.ds-link-logo__JDwdTJ:focus-visible {
+.ds-link-logo__nkrEji: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__JDwdTJ {
+.ds-link-logo__nkrEji {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall, 0.5rem);
@@ -26,11 +26,11 @@
   line-height: 1;
   text-transform: uppercase;
 }
-.ds-link-logo__JDwdTJ:hover {
+.ds-link-logo__nkrEji:hover {
   color: var(--ds-bgColor-primary, #005a94);
 }
 @media (min-width: 60rem) {
-  .ds-link-logo__JDwdTJ {
+  .ds-link-logo__nkrEji {
     font-size: var(--ds-fontSize-16, 1rem);
   }
 }