@uh-design-system/component-library 1.1.0-rc.5 → 1.1.0-rc.7

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

@@ -35,11 +35,13 @@ export class DsLink {
     dsAriaLabel;
     dsColour;
     dsTag = 'a';
-    dsIsSpaceClickable = false;
     targetBlank = null;
     async setFocus() {
         this.linkRef?.focus();
     }
+    async getLink() {
+        return this.linkRef;
+    }
     get linkAttributes() {
         if (this.dsTag !== 'a')
             return {};
@@ -75,11 +77,6 @@ export class DsLink {
         };
         forceUpdate(this);
     }
-    handleKeyDown(event) {
-        if (this.dsTag === 'a' && this.dsIsSpaceClickable && event.key === ' ') {
-            this.linkRef.click();
-        }
-    }
     renderIcon(baseClass, iconName = this.dsIcon, iconPosition = this.dsIconPosition) {
         const iconClasses = classNames(`${baseClass}__icon`, {
             [`${baseClass}__icon--start-${this.dsVariant}`]: iconPosition === 'start',
@@ -107,7 +104,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: '1c2845c8222a5ea92125211f5e3d82fc27978a2b', ref: el => (this.linkRef = el), part: "link", class: classes, ...ifDefined('aria-label', ariaLabel), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '055a605ac020a1abd7e4191de3d3d14adf17ffd5', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, h("slot", { key: '5e248e99d2bdc06a67c4046f4d0da21972a4623f', name: "suffix" }, this.renderSuffixIcon(baseClass)), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '13638a92624d8bcfeb8afa37a1fea54c419c00c9', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        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()))));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -476,26 +473,6 @@ export class DsLink {
                 "reflect": false,
                 "attribute": "ds-tag",
                 "defaultValue": "'a'"
-            },
-            "dsIsSpaceClickable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, the spacebar key can be used to activate the link when `dsTag` is set to `a`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-is-space-clickable",
-                "defaultValue": "false"
             }
         };
     }
@@ -522,6 +499,34 @@ export class DsLink {
                     "text": "Sets focus to the a/span element rendered inside `ds-link` component.",
                     "tags": []
                 }
+            },
+            "getLink": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLSpanElement | HTMLAnchorElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLSpanElement": {
+                            "location": "global",
+                            "id": "global::HTMLSpanElement"
+                        },
+                        "HTMLAnchorElement": {
+                            "location": "global",
+                            "id": "global::HTMLAnchorElement"
+                        }
+                    },
+                    "return": "Promise<HTMLSpanElement | HTMLAnchorElement>"
+                },
+                "docs": {
+                    "text": "Get the a/span element rendered inside `ds-link` component.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The a/span element."
+                        }]
+                }
             }
         };
     }
@@ -535,14 +540,5 @@ export class DsLink {
                 "methodName": "ariaLabelObserver"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-visually-hidden", null)]);

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

@@ -51,3 +51,44 @@ export const NavigationLink = {
         dsVariant: 'standalone',
     },
 };
+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.stories.js

@@ -17,7 +17,6 @@ const meta = {
         dsWeight: 'regular',
         dsIconPosition: 'end',
         dsTag: 'a',
-        dsIsSpaceClickable: false,
     },
 };
 export default meta;

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

@@ -8,7 +8,7 @@
   display: inline-block;
 }
 
-.ds-link-cta__BahgnS {
+.ds-link-cta__kfFKF0 {
   width: 100%;
   align-items: center;
   border-radius: 0;
@@ -22,7 +22,7 @@
   user-select: none;
   --webkit-user-select: none;
 }
-.ds-link-cta__BahgnS__text {
+.ds-link-cta__kfFKF0__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__BahgnS__icon {
+.ds-link-cta__kfFKF0__icon {
   margin-left: var(--ds-spacing-3xSmall, 4px);
 }
-.ds-link-cta__BahgnS:has(.ds-link-cta__BahgnS__spinner):not(.ds-link-cta__BahgnS--small) .ds-link-cta__BahgnS__value {
+.ds-link-cta__kfFKF0:has(.ds-link-cta__kfFKF0__spinner):not(.ds-link-cta__kfFKF0--small) .ds-link-cta__kfFKF0__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__BahgnS--icon-only {
+.ds-link-cta__kfFKF0--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-link-cta__BahgnS:not(.ds-link-cta__BahgnS--small):not(.ds-link-cta__BahgnS--secondary) {
+.ds-link-cta__kfFKF0:not(.ds-link-cta__kfFKF0--small):not(.ds-link-cta__kfFKF0--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__BahgnS:not(.ds-link-cta__BahgnS--small).ds-link-cta__BahgnS--secondary {
+.ds-link-cta__kfFKF0:not(.ds-link-cta__kfFKF0--small).ds-link-cta__kfFKF0--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__BahgnS:not(.ds-link-cta__BahgnS--small).ds-link-cta__BahgnS--icon-only {
+.ds-link-cta__kfFKF0:not(.ds-link-cta__kfFKF0--small).ds-link-cta__kfFKF0--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-link-cta__BahgnS--small:not(.ds-link-cta__BahgnS--secondary) {
+.ds-link-cta__kfFKF0--small:not(.ds-link-cta__kfFKF0--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__BahgnS--small.ds-link-cta__BahgnS--secondary {
+.ds-link-cta__kfFKF0--small.ds-link-cta__kfFKF0--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__BahgnS--small.ds-link-cta__BahgnS--icon-only {
+.ds-link-cta__kfFKF0--small.ds-link-cta__kfFKF0--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-link-cta__BahgnS--small .ds-link-cta__BahgnS__icon {
+.ds-link-cta__kfFKF0--small .ds-link-cta__kfFKF0__icon {
   height: 1rem;
 }
-.ds-link-cta__BahgnS--icon-start:not(.ds-link-cta__BahgnS--small) .ds-link-cta__BahgnS__icon {
+.ds-link-cta__kfFKF0--icon-start:not(.ds-link-cta__kfFKF0--small) .ds-link-cta__kfFKF0__icon {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__BahgnS--icon-end:not(.ds-link-cta__BahgnS--small) .ds-link-cta__BahgnS__icon {
+.ds-link-cta__kfFKF0--icon-end:not(.ds-link-cta__kfFKF0--small) .ds-link-cta__kfFKF0__icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--blue:focus-visible {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--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__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--blue {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--blue {
   background-color: var(--ds-bgColor-primary);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--blue:hover {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--blue:active {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--blue:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--black:focus-visible {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--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__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--black {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--black {
   background-color: var(--ds-bgColor-black);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--black:hover {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--black:active {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--black:active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--white:focus-visible {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--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__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--white {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--white {
   background-color: var(--ds-bgColor-white);
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--white:hover {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--primary.ds-link-cta__BahgnS--white:active {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--primary.ds-link-cta__kfFKF0--white:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--blue:focus-visible {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--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__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--blue {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--blue {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--blue:hover {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--blue:active {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--blue:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--black:focus-visible {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--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__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--black {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--black {
   background-color: transparent;
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--black:hover {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--black:active {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--black:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--white:focus-visible {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--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__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--white {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--white {
   background-color: transparent;
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--white:hover {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-link-cta__BahgnS.ds-link-cta__BahgnS--secondary.ds-link-cta__BahgnS--white:active {
+.ds-link-cta__kfFKF0.ds-link-cta__kfFKF0--secondary.ds-link-cta__kfFKF0--white:active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }

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

@@ -67,7 +67,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: 'a16016a291f70160b7c3ec5dc7a649ee4cf392fd', ref: el => (this.linkEl = el), part: "link", class: classes, onKeyDown: this.handleKeyDown, ...this.inheritedAttributes, ...this.linkAttributes }, h("span", { key: 'eccc856f4a30e5a1711810be4eaa1d2d09a8c075', class: linkTextClasses }, this.dsText), h(DsIcon, { key: 'a9540ef0c5368882ed31d99f800a262c40aac07e', dsName: this.icon, class: iconClasses, dsSize: this.dsSize === 'medium' ? '1.5rem' : '1rem' }), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '8ccb4387ca0892fe83465a6784d18898f126006f', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        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()))));
     }
     static get is() { return "ds-link-cta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,12 +8,12 @@
   display: inline-block;
 }
 
-.ds-link-logo__BahgnS:focus-visible {
+.ds-link-logo__kfFKF0: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__BahgnS {
+.ds-link-logo__kfFKF0 {
   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__BahgnS:hover {
+.ds-link-logo__kfFKF0:hover {
   color: var(--ds-bgColor-primary, #005a94);
 }
 @media (min-width: 60rem) {
-  .ds-link-logo__BahgnS {
+  .ds-link-logo__kfFKF0 {
     font-size: var(--ds-fontSize-16, 1rem);
   }
 }

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

@@ -63,7 +63,7 @@ export class DsLinkLogo {
             [`${baseClass}--colour-${this.dsColour}`]: !!this.dsColour,
         });
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link-logo', this.el);
-        return (h(this.dsTag, { key: '25d1c433e1b7afdcd76d5885239c1d4e0b367f0b', part: "link", class: classes, ...this.linkAttributes }, this.dsIcon && h(this.DsIcon, { key: 'f93cc553ca21c12e411694df09ecd69631ddc493', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '3aa571df73a1c4186928092788067b9457926c9a', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: 'ea76b7d78f4b6a3437330b33a990f093e2c9b4be', part: "link", class: classes, ...this.linkAttributes }, this.dsIcon && h(this.DsIcon, { key: 'd2f38ce46c94571ba31e06cfa01106cce8b4927e', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'ef59a212957bafa6d1e70259bd90d07acf7f28df', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,16 +1,16 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-link-with-arrow__BahgnS--full-width) {
+:host:has(.ds-link-with-arrow__kfFKF0--full-width) {
   width: 100%;
 }
 
-.ds-link-with-arrow__BahgnS:focus-visible {
+.ds-link-with-arrow__kfFKF0:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-with-arrow__BahgnS {
+.ds-link-with-arrow__kfFKF0 {
   display: inline-flex;
   align-items: center;
   color: var(--ds-textColor-link);
@@ -21,15 +21,15 @@
   text-decoration-line: none;
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__BahgnS {
+  .ds-link-with-arrow__kfFKF0 {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-link-with-arrow__BahgnS--full-width {
+.ds-link-with-arrow__kfFKF0--full-width {
   width: 100%;
   justify-content: space-between;
 }
-.ds-link-with-arrow__BahgnS__icon {
+.ds-link-with-arrow__kfFKF0__icon {
   display: inline-flex;
   flex-shrink: 0;
   width: 2rem;
@@ -41,24 +41,24 @@
   background-color: var(--ds-bgColor-primary);
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__BahgnS__icon {
+  .ds-link-with-arrow__kfFKF0__icon {
     width: 2.5rem;
     height: 2.5rem;
   }
 }
-.ds-link-with-arrow__BahgnS__icon--start {
+.ds-link-with-arrow__kfFKF0__icon--start {
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-link-with-arrow__BahgnS__icon--end {
+.ds-link-with-arrow__kfFKF0__icon--end {
   margin-left: var(--ds-spacing-xSmall);
 }
-:hover slot > .ds-link-with-arrow__BahgnS__icon {
+:hover slot > .ds-link-with-arrow__kfFKF0__icon {
   background-color: var(--ds-bgColor-primary-hover);
 }
-:active slot > .ds-link-with-arrow__BahgnS__icon {
+:active slot > .ds-link-with-arrow__kfFKF0__icon {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-with-arrow__BahgnS:hover, .ds-link-with-arrow__BahgnS:active {
+.ds-link-with-arrow__kfFKF0:hover, .ds-link-with-arrow__kfFKF0:active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -66,9 +66,9 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link-with-arrow__BahgnS:hover {
+.ds-link-with-arrow__kfFKF0:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link-with-arrow__BahgnS:active, .ds-link-with-arrow__BahgnS:focus-visible {
+.ds-link-with-arrow__kfFKF0:active, .ds-link-with-arrow__kfFKF0:focus-visible {
   color: var(--ds-textColor-link-active);
 }

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

@@ -68,7 +68,7 @@ export class DsLinkWithArrow {
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link-with-arrow', this.el);
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = attrAriaLabel || this.dsAriaLabel;
-        return (h(this.dsTag, { key: '0063266f1319a3922c9a498f3c548782670ddd8a', class: classes, ...ifDefined('aria-label', ariaLabel), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '93c7ac78a0bf720de304f7c79d7796cc2b0e183e', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: '7dd04b9df6312ee178ec7adc2a191976d80eb771', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'a675379ba66fb179708e77733516c36dd0d07e59', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: 'd021f0c5b3fffd0e5196da0b426c6808f2b9b47f', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '811b598ca286607f34722d98c631a6f8ef7d75f2', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '1dd4827c088aa82d332eb0369f9bc9feccb0b383', class: classes, ...ifDefined('aria-label', ariaLabel), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'cb1251e6a73801d7419acc1918d712480d65a2a9', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'fdaf92722184092e4a1d1ee44228601018a12758', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'b4013d14303cde6db5e6a7a35ee482a771f8d130', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '52886e6009a229144512ed24ed4f3e62c895fe46', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'b9099bb63160adb0fb7fd433d5a662b7774e3c32', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,72 +3,72 @@
   width: 100%;
 }
 
-.ds-notification__BahgnS {
+.ds-notification__kfFKF0 {
   display: flex;
   padding: var(--ds-spacing-xSmall, 12px);
   gap: var(--ds-spacing-2xSmall, 8px);
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--neutral {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--neutral {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--neutral .ds-notification__BahgnS__icon {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--neutral .ds-notification__kfFKF0__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--neutralWhite {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--neutralWhite {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--neutralWhite .ds-notification__BahgnS__icon {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--neutralWhite .ds-notification__kfFKF0__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--info {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--info .ds-notification__BahgnS__icon {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--info .ds-notification__kfFKF0__icon {
   color: var(--ds-iconColor-info);
   margin-bottom: auto;
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--success {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--success .ds-notification__BahgnS__icon {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--success .ds-notification__kfFKF0__icon {
   color: var(--ds-iconColor-success);
   margin-bottom: auto;
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--attention {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--attention .ds-notification__BahgnS__icon {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--attention .ds-notification__kfFKF0__icon {
   color: var(--ds-iconColor-attention);
   margin-bottom: auto;
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--danger {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__BahgnS.ds-notification__BahgnS--danger .ds-notification__BahgnS__icon {
+.ds-notification__kfFKF0.ds-notification__kfFKF0--danger .ds-notification__kfFKF0__icon {
   color: var(--ds-iconColor-danger);
   margin-bottom: auto;
 }
-.ds-notification__BahgnS__content {
+.ds-notification__kfFKF0__content {
   display: flex;
   padding: var(--ds-spacing-4xSmall, 2px) 0;
   flex-direction: column;
@@ -76,11 +76,11 @@
   gap: var(--ds-spacing-4xSmall, 2px);
   flex: 1 0 0;
 }
-.ds-notification__BahgnS__content__heading, .ds-notification__BahgnS__content__description {
+.ds-notification__kfFKF0__content__heading, .ds-notification__kfFKF0__content__description {
   font-family: var(--ds-fontFamily-body);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-notification__BahgnS__content__description {
+.ds-notification__kfFKF0__content__description {
   max-width: 550px;
 }

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

@@ -133,7 +133,7 @@ export class DsNotification {
         const contentClass = `${baseClass}__content`;
         const classes = classNames(baseClass, `${baseClass}--${this.variant}`);
         const restAttributes = omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label']);
-        return (h("div", { key: 'f02b35539d7bb6fa7638dfc4720cb82e796f93fd', class: classes, id: this.dsId, role: "group", 'aria-labelledby': this.ariaLabelledBy, 'aria-label': this.ariaLabel, ...restAttributes }, this.dsIcon && (h("div", { key: '2172ab0219e4f5467058b63ba245c964f597a8a9', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '1135d5b10dc03cc1ef41c22b6a3c88816d060823', dsName: this.dsIcon }))), h("div", { key: '2a89529e5f82030d380d59957a6a30e18e2d2e25', class: contentClass }, h("slot", { key: 'e799d6f298d533d69bd1ba09c9fbf66cb3f488e0', name: "heading" }, this.dsHeading && (h("div", { key: '44fc1bb1730d68a353d5446dfc9ba55bdb6db135', class: `${contentClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '3b98e5c64f9612c95b3350858859e378df8d4b52', name: "description" }, this.dsDescription && h("div", { key: '7f9d8dc703d2886b1770745d6e90e45b8ba83fe6', class: `${contentClass}__description ds-text-regular-md` }, this.dsDescription)), h("slot", { key: 'e180c2e85ca9e8dc7fda4fb170bc40d8ee5a5239' })), this.dsDismissable && (h(this.DsButton, { key: '6e52d3c0f62cffeffbfaf7502190e9d583b42a73', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", "aria-labelledby": [`${this.dsId}-dismiss-button`, this.ariaLabelledBy].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: '6013927b6bbd386dc5bb9e23eafd061db7fac06b', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close)))));
+        return (h("div", { key: 'ed19f8afe55da2e9a832841d5503a578cd3b7cbe', class: classes, id: this.dsId, role: "group", 'aria-labelledby': this.ariaLabelledBy, 'aria-label': this.ariaLabel, ...restAttributes }, this.dsIcon && (h("div", { key: '54931f732bfe68a737c19a40ff858db0397c5675', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '0d38865ed86961fa33e31831a2bd26775a95f1ce', dsName: this.dsIcon }))), h("div", { key: '675a08d70df91abadc6b959e01b11024bf44eab2', class: contentClass }, h("slot", { key: '2b966e2fef58a9542e6c25af5274796dd2562720', name: "heading" }, this.dsHeading && (h("div", { key: 'e6bbd26db474df215491cbe577a38ddd3d623f70', class: `${contentClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '8e6b82ba03ed3bb623da1b629d9aa568d2a84e7b', name: "description" }, this.dsDescription && h("div", { key: 'a518b7921bc2753678a72aafcffd91168993d414', class: `${contentClass}__description ds-text-regular-md` }, this.dsDescription)), h("slot", { key: '834d6584069f5f16eb9eeec2e2cc83cef876bcb6' })), this.dsDismissable && (h(this.DsButton, { key: '2a23b880791bd092c44612d9eb32c2e2096da072', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", "aria-labelledby": [`${this.dsId}-dismiss-button`, this.ariaLabelledBy].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: 'd07b1c78f4c43c2c52bbc2516e4edc50751877b1', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close)))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "scoped"; }
@@ -173,7 +173,7 @@ export class DsNotification {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"success\" | \"info\" | \"neutral\" | \"neutralWhite\" | \"attention\" | \"danger\"",
+                    "original": "\"success\" | \"info\" | \"attention\" | \"danger\" | \"neutral\" | \"neutralWhite\"",
                     "resolved": "\"attention\" | \"danger\" | \"info\" | \"neutral\" | \"neutralWhite\" | \"success\"",
                     "references": {}
                 },