npm - @uh-design-system/component-library - Versions diffs - 1.5.2-rc.1 → 1.6.0-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2562) hide show

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

@@ -0,0 +1,104 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Link/Examples',
+    component: 'ds-link',
+};
+export default meta;
+export const Inline = {
+    render: () => html ` Text with <ds-link ds-href="#" ds-text="inline link"></ds-link>. `,
+};
+export const OpenInANewTab = {
+    render: () => html ` Text with <ds-link ds-href="#" ds-target="_blank" ds-text="open in a new tab inline link"></ds-link>. `,
+};
+export const Back = {
+    args: {
+        dsText: 'Back',
+        dsHref: '#',
+        dsIcon: 'arrow_back',
+        dsIconPosition: 'start',
+        dsIconAriaLabel: 'Arrow back',
+    },
+};
+export const Download = {
+    args: {
+        dsText: 'Link to download a file',
+        dsHref: '#',
+        dsIcon: 'download',
+        dsIconPosition: 'start',
+        dsIconAriaLabel: 'Download',
+        dsIconHidden: false,
+        dsVariant: 'standalone',
+        dsSize: 'xLarge',
+        dsWeight: 'semibold',
+        dsDownload: true,
+    },
+};
+export const StandaloneBoldLinkWithIcon = {
+    args: {
+        dsText: 'Standalone bold link with icon',
+        dsHref: '#',
+        dsIcon: 'arrow_forward',
+        dsIconAriaLabel: 'Arrow forward',
+        dsVariant: 'standalone',
+        dsSize: '2xLarge',
+        dsWeight: 'bold',
+    },
+};
+export const NavigationLink = {
+    args: {
+        dsText: 'Navigation link',
+        dsHref: '#',
+        dsVariant: 'standalone',
+        dsSize: 'large',
+    },
+};
+export const AnchorLink = {
+    args: {
+        dsVariant: 'standalone',
+        dsText: 'Anchor link',
+        dsHref: '#',
+        dsIcon: 'arrow_downward',
+        dsIconPosition: 'start',
+    },
+};
+export const MenuItemLink = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          <div role="menu">
+            <ds-link
+              role="menuitem"
+              ds-variant="standalone"
+              ds-href="#"
+              ds-text="Menu item"
+            ></ds-link>
+          </div>
+          <script>
+            const dsLink = document.querySelector('ds-link');
+            dsLink.addEventListener('keydown', async (event: KeyboardEvent) => {
+              if (event.key === ' ') {
+                (await dsLink.getLink())?.click();
+              }
+            });
+          </script>
+        `,
+            },
+        },
+    },
+    render: () => html `
+    <div role="menu">
+      <ds-link
+        @keydown=${async (event) => {
+        if (event.key === ' ') {
+            (await event.target.getLink())?.click();
+        }
+    }}
+        role="menuitem"
+        ds-variant="standalone"
+        ds-href="#"
+        ds-text="Menu item"
+      ></ds-link>
+    </div>
+  `,
+};

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

@@ -0,0 +1,107 @@
+import { expect } from "@storybook/test";
+import { getShadowRoot } from "../../../../utils/tests/testUtils";
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Link/Features',
+    component: 'ds-link',
+};
+export default meta;
+export const Inline = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsVariant: 'inline',
+    },
+};
+export const Standalone = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsVariant: 'standalone',
+    },
+};
+export const Size = {
+    render: () => html `
+    <div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="2xLarge"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="xLarge"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="large"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="medium"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="small"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="xSmall"></ds-link></div>
+    </div>
+  `,
+};
+export const Weight = {
+    render: () => html `
+    <div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-weight="regular"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-weight="semibold"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-weight="bold"></ds-link></div>
+    </div>
+  `,
+};
+export const Black = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsColour: 'black',
+    },
+};
+export const White = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsColour: 'white',
+    },
+    parameters: {
+        backgrounds: { default: 'Black 90%' },
+    },
+};
+export const OpensInANewTab = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsTarget: '_blank',
+    },
+    play: async ({ canvasElement, step }) => {
+        const shadowRoot = await getShadowRoot(canvasElement, 'ds-link');
+        await step('Anchor should have attribute rel with value "noopener noreferrer"', async () => {
+            const anchorElem = shadowRoot.querySelector('a');
+            await expect(anchorElem.rel).toBe('noopener noreferrer');
+        });
+        await step('Anchor should have a visually hidden assistive text', async () => {
+            const anchorElem = shadowRoot.querySelector('a');
+            await expect(anchorElem.textContent).toContain('Opens in a new tab');
+        });
+        await step('Has an end icon', async () => {
+            const iconEnd = shadowRoot.querySelector('slot[name=suffix]');
+            await expect(iconEnd).toBeInTheDocument();
+        });
+    },
+};
+export const IconPosition = {
+    render: () => html `
+    <div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-icon="download" ds-icon-position="start" ds-icon-title="Download icon"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-icon="download" ds-icon-position="end" ds-icon-title="Download icon"></ds-link></div>
+    </div>
+  `,
+};
+export const AlternativeTag = {
+    args: {
+        dsText: 'Link text',
+        dsTag: 'span',
+    },
+};
+export const Slots = {
+    render: () => html `
+    <ds-link ds-text="Link text">
+      <span slot="prefix">Prefix slot</span>
+      <span slot="suffix">Suffix slot</span>
+    </ds-link>
+  `,
+};
+export const CustomTagName = {
+    render: () => html ` <custom-ds-link ds-icon="download" ds-href="#" ds-text="custom-ds-link"></custom-ds-link> `,
+};

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

@@ -0,0 +1,73 @@
+import { html } from "lit";
+import { icons } from "../../../00-foundations/icons/iconList";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
+const meta = {
+    title: 'Base Components/Link',
+    component: 'ds-link',
+    argTypes: {
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name).sort(),
+        },
+        ...getAriaAttributeArgTypes(['aria-label', 'aria-labelledby']),
+    },
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsVariant: 'inline',
+        dsWeight: 'regular',
+        dsIconPosition: 'end',
+        dsIconHidden: false,
+        dsIconAriaHidden: true,
+        dsTag: 'a',
+    },
+};
+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-link-type="none"
+      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 CHANGED Viewed

@@ -9,7 +9,7 @@
   vertical-align: middle;
 }
-.ds-link-cta__m9sbXh {
+.ds-link-cta__cpPWV0 {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -28,14 +28,14 @@
   user-select: none;
   --webkit-user-select: none;
 }
-.ds-link-cta__m9sbXh[aria-disabled=true] {
+.ds-link-cta__cpPWV0[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__m9sbXh__text {
+.ds-link-cta__cpPWV0__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__m9sbXh--no-text .ds-link-cta__m9sbXh__text {
+.ds-link-cta__cpPWV0--no-text .ds-link-cta__cpPWV0__text {
   padding: 0;
 }
-.ds-link-cta__m9sbXh:has(.ds-link-cta__m9sbXh__spinner):not(.ds-link-cta__m9sbXh--small) .ds-link-cta__m9sbXh__value {
+.ds-link-cta__cpPWV0:has(.ds-link-cta__cpPWV0__spinner):not(.ds-link-cta__cpPWV0--small) .ds-link-cta__cpPWV0__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__m9sbXh--icon-only {
+.ds-link-cta__cpPWV0--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-link-cta__m9sbXh:has(.ds-link-cta__m9sbXh__text:empty) {
+.ds-link-cta__cpPWV0:has(.ds-link-cta__cpPWV0__text:empty) {
   width: var(--ds-link-cta-min-height);
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__m9sbXh:has(.ds-link-cta__m9sbXh__text:empty) .ds-link-cta__m9sbXh__icon {
+.ds-link-cta__cpPWV0:has(.ds-link-cta__cpPWV0__text:empty) .ds-link-cta__cpPWV0__icon {
   margin: 0;
 }
-.ds-link-cta__m9sbXh:not(.ds-link-cta__m9sbXh--small):not(.ds-link-cta__m9sbXh--secondary):not(.ds-link-cta__m9sbXh--supplementary) {
+.ds-link-cta__cpPWV0:not(.ds-link-cta__cpPWV0--small):not(.ds-link-cta__cpPWV0--secondary):not(.ds-link-cta__cpPWV0--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__m9sbXh:not(.ds-link-cta__m9sbXh--small).ds-link-cta__m9sbXh--secondary {
+.ds-link-cta__cpPWV0:not(.ds-link-cta__cpPWV0--small).ds-link-cta__cpPWV0--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__m9sbXh:not(.ds-link-cta__m9sbXh--small).ds-link-cta__m9sbXh--supplementary {
+.ds-link-cta__cpPWV0:not(.ds-link-cta__cpPWV0--small).ds-link-cta__cpPWV0--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__m9sbXh:not(.ds-link-cta__m9sbXh--small).ds-link-cta__m9sbXh--icon-only {
+.ds-link-cta__cpPWV0:not(.ds-link-cta__cpPWV0--small).ds-link-cta__cpPWV0--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__m9sbXh--small:not(.ds-link-cta__m9sbXh--secondary):not(.ds-link-cta__m9sbXh--supplementary) {
+.ds-link-cta__cpPWV0--small:not(.ds-link-cta__cpPWV0--secondary):not(.ds-link-cta__cpPWV0--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__m9sbXh--small.ds-link-cta__m9sbXh--secondary {
+.ds-link-cta__cpPWV0--small.ds-link-cta__cpPWV0--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__m9sbXh--small.ds-link-cta__m9sbXh--supplementary {
+.ds-link-cta__cpPWV0--small.ds-link-cta__cpPWV0--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__m9sbXh--small.ds-link-cta__m9sbXh--icon-only {
+.ds-link-cta__cpPWV0--small.ds-link-cta__cpPWV0--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-link-cta__m9sbXh--small .ds-link-cta__m9sbXh__icon {
+.ds-link-cta__cpPWV0--small .ds-link-cta__cpPWV0__icon {
   width: var(--ds-link-cta-icon-size, auto);
   height: var(--ds-link-cta-icon-size, 1rem);
 }
-.ds-link-cta__m9sbXh__icon--start {
+.ds-link-cta__cpPWV0__icon--start {
   margin-right: var(--ds-spacing-3xSmall);
   margin-left: 0;
 }
-.ds-link-cta__m9sbXh__icon--end {
+.ds-link-cta__cpPWV0__icon--end {
   margin-left: var(--ds-spacing-3xSmall);
   margin-right: 0;
 }
-.ds-link-cta__m9sbXh--no-text .ds-link-cta__m9sbXh__icon--start,
-.ds-link-cta__m9sbXh--no-text .ds-link-cta__m9sbXh__icon--end {
+.ds-link-cta__cpPWV0--no-text .ds-link-cta__cpPWV0__icon--start,
+.ds-link-cta__cpPWV0--no-text .ds-link-cta__cpPWV0__icon--end {
   margin: 0;
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--blue:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--blue {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--blue:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--blue:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--blue:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--black:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--black {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--black:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--black:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--black:active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--white:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--white {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--white:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--primary.ds-link-cta__m9sbXh--white:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--primary.ds-link-cta__cpPWV0--white:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--blue:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--blue {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--blue:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--blue:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--black:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--black {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--black:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--black:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--white:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--white {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--white:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--secondary.ds-link-cta__m9sbXh--white:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--secondary.ds-link-cta__cpPWV0--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--blue:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--blue {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--blue:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--blue:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--black:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--black {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--black:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--black:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--white:focus-visible {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--white {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--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__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--white:hover {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__m9sbXh.ds-link-cta__m9sbXh--supplementary.ds-link-cta__m9sbXh--white:active {
+.ds-link-cta__cpPWV0.ds-link-cta__cpPWV0--supplementary.ds-link-cta__cpPWV0--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }

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

@@ -92,10 +92,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: '2a38823579a807abf04432ed1ea29e03ab03a16a', dsName: this.currentIcon, class: iconClasses, dsCustomSize: this.dsSize === 'medium' ? '1.5rem' : '1.25rem' });
+        const iconElement = !this.dsHideIcon && h(DsIcon, { key: '00840b2c7ab5ed388c5c8520e898e54809282423', 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: 'b32b7abec8a16e0fcece62faaf11fcf2b115a935', 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: '7f68fca68010c1551bf1d8d66d139940ab56e769', class: linkTextClasses }, this.dsText), this.dsIconPosition === 'end' && iconElement, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '790036c82eb7e49f295785582d72741a9e16d636', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '6de0b56f89b81bafc1ec74f79555cf5f2eb76548', 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: '5db7697615392677720ad5d4805b92850535251e', class: linkTextClasses }, this.dsText), this.dsIconPosition === 'end' && iconElement, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'd84ecc6af4e7b9656d9c24042e780b72db6d76e4', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-cta"; }
     static get encapsulation() { return "shadow"; }