@uh-design-system/component-library 1.6.0 → 1.7.0

package/dist/collection/components/01-base-components/ds-steps/stepsContext.js

@@ -0,0 +1,33 @@
+import { transformTagName } from "../../../utils/utils";
+const CONTEXT_KEY = '__ds_steps_context__';
+export const CONTEXT_UPDATE_EVENT = 'dsStepsContextUpdate';
+function getChildSelector(parentElement) {
+    return transformTagName('ds-step', 'ds-steps', parentElement);
+}
+function dispatchContextUpdate(element, context) {
+    element.dispatchEvent(new CustomEvent(CONTEXT_UPDATE_EVENT, {
+        bubbles: false,
+        detail: { ...context },
+    }));
+}
+export function storeStepsContext(element, context) {
+    element[CONTEXT_KEY] = context;
+}
+export function provideStepsContext(element, context) {
+    storeStepsContext(element, context);
+    const childSelector = getChildSelector(element);
+    const children = element.querySelectorAll(childSelector);
+    for (const child of children) {
+        dispatchContextUpdate(child, context);
+    }
+}
+export function consumeStepsContext(element) {
+    let parent = element.parentElement;
+    while (parent) {
+        if (parent[CONTEXT_KEY]) {
+            return parent[CONTEXT_KEY];
+        }
+        parent = parent.parentElement;
+    }
+    return null;
+}

package/dist/collection/components/01-base-components/ds-tabs/ds-tab/ds-tab.css

@@ -8,7 +8,7 @@
   display: contents;
 }
 
-.ds-tab__WN0Emr {
+.ds-tab__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -33,22 +33,22 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-tab__WN0Emr {
+  .ds-tab__pA2cRq {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-tab__WN0Emr--selected, .ds-tab__WN0Emr:hover:not(.ds-tab__WN0Emr--selected), .ds-tab__WN0Emr:active:not(.ds-tab__WN0Emr--selected) {
+.ds-tab__pA2cRq--selected, .ds-tab__pA2cRq:hover:not(.ds-tab__pA2cRq--selected), .ds-tab__pA2cRq:active:not(.ds-tab__pA2cRq--selected) {
   color: var(--ds-textColor-default);
 }
-.ds-tab__WN0Emr--container:focus-visible {
+.ds-tab__pA2cRq--container:focus-visible {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-tab__WN0Emr--container.ds-tab__WN0Emr--selected {
+.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected {
   background-color: var(--ds-bgColor-white);
 }
-.ds-tab__WN0Emr--container.ds-tab__WN0Emr--selected::after {
+.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected::after {
   content: "";
   position: absolute;
   top: 0;
@@ -56,24 +56,24 @@
   right: 0;
   border-block-start: var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary);
 }
-.ds-tab__WN0Emr--container.ds-tab__WN0Emr--selected:not(:focus-visible)::before {
+.ds-tab__pA2cRq--container.ds-tab__pA2cRq--selected:not(:focus-visible)::before {
   content: "";
   position: absolute;
   inset: 0;
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tab__WN0Emr--container:hover:not(.ds-tab__WN0Emr--selected) {
+.ds-tab__pA2cRq--container:hover:not(.ds-tab__pA2cRq--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-tab__WN0Emr--container:active:not(.ds-tab__WN0Emr--selected) {
+.ds-tab__pA2cRq--container:active:not(.ds-tab__pA2cRq--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-tab__WN0Emr--line:focus-visible .ds-tab__WN0Emr__content {
+.ds-tab__pA2cRq--line:focus-visible .ds-tab__pA2cRq__content {
   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-tab__WN0Emr--line.ds-tab__WN0Emr--selected::after {
+.ds-tab__pA2cRq--line.ds-tab__pA2cRq--selected::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -81,7 +81,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary);
 }
-.ds-tab__WN0Emr--line:hover:not(.ds-tab__WN0Emr--selected)::after {
+.ds-tab__pA2cRq--line:hover:not(.ds-tab__pA2cRq--selected)::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -89,7 +89,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-default);
 }
-.ds-tab__WN0Emr--line:active:not(.ds-tab__WN0Emr--selected)::after {
+.ds-tab__pA2cRq--line:active:not(.ds-tab__pA2cRq--selected)::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -97,7 +97,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-black);
 }
-.ds-tab__WN0Emr .ds-tab__WN0Emr__content {
+.ds-tab__pA2cRq .ds-tab__pA2cRq__content {
   position: relative;
   display: flex;
   flex-direction: row;

package/dist/collection/components/01-base-components/ds-tabs/ds-tab/ds-tab.js

@@ -18,7 +18,9 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
     dsTabPanelId;
     dsText;
     dsIconStart;
+    dsIconStartAriaLabel;
     dsIconEnd;
+    dsIconEndAriaLabel;
     dsIconEndColour;
     hasPrefixSlot = false;
     hasContentSlot = false;
@@ -98,7 +100,12 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
             [`${baseClass}--line`]: this.context?.variant === 'line',
             [`${baseClass}--selected`]: isSelected,
         });
-        return (h("div", { key: '0a6c6d728f3cd2a94607841b48bbe3175ce8eb9c', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '74dda6d84b96ba52bd27d7d26981dd0ac6aefa8d', class: `${baseClass}__content` }, h("slot", { key: 'd86cfa386a03900c9fc4ef8d8742b06ddbe1b894', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: '8fefb92b506fdb891d0ae2e0b09e9e88ca3c3781', dsName: this.dsIconStart })), h("slot", { key: 'bfac3a742edef0839bfc7e4d172fc4c494ead1f2', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: '59accad649404c11f74b4883e3296286871cb323' }, this.dsText)), h("slot", { key: 'b3816680181748f8a3726066657ae832eb2698e4', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: '4a1c073f90003442bd88aaa1ec4bb77925ea5aed', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+        const iconProps = (ariaLabel, colour) => ({
+            dsAriaHidden: !ariaLabel,
+            ...(ariaLabel ? { dsAriaLabel: ariaLabel } : {}),
+            ...(colour ? { dsColour: colour } : {}),
+        });
+        return (h("div", { key: '43df10cb24a93e854ab7e8c3bb0b88c97f23cb50', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '05657093b4ccd9efe7ca6b17d47828c6f90024e9', class: `${baseClass}__content` }, h("slot", { key: '21525ce4cad8bd98cf51e3c2127f3b3377ec17ea', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: 'ee5fba35d72533bd51ca49d145282e50e2578244', dsName: this.dsIconStart, ...iconProps(this.dsIconStartAriaLabel) })), h("slot", { key: '2a48ec40d1ead08e5e2123e794a57efa9162110d', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: 'd11f324967e0d912a860ace3583bf94b70a61106' }, this.dsText)), h("slot", { key: '12ddec31a796d198199fb295984b431b194d8210', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: '83df1f640e3373de23d979380a7a1e3f6757688d', dsName: this.dsIconEnd, ...iconProps(this.dsIconEndAriaLabel, this.iconColour) })))));
     }
     static get is() { return "ds-tab"; }
     static get encapsulation() { return "scoped"; }
@@ -190,6 +197,25 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
                 "reflect": false,
                 "attribute": "ds-icon-start"
             },
+            "dsIconStartAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-label for the start icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-icon-start-aria-label"
+            },
             "dsIconEnd": {
                 "type": "string",
                 "mutable": false,
@@ -209,6 +235,25 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
                 "reflect": false,
                 "attribute": "ds-icon-end"
             },
+            "dsIconEndAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-label for the end icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-icon-end-aria-label"
+            },
             "dsIconEndColour": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tablist__WN0Emr {
+.ds-tablist__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,7 +12,7 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable {
   display: flex;
   gap: var(--ds-spacing-2xSmall);
   overflow-x: auto;
@@ -20,17 +20,17 @@
   overscroll-behavior-x: contain;
   scrollbar-width: none;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable:focus, .ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable:focus-visible, .ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable:-moz-focusring {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable:focus, .ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable:focus-visible, .ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable:-moz-focusring {
   outline: none;
   box-shadow: none;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable--container {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable--container {
   background: linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable--line {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__scrollable--line {
   background: linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -39,21 +39,21 @@
   justify-content: center;
   align-items: center;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--backward {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--backward {
   left: 0;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--forward {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--forward {
   right: 0;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--container {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--container {
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--line {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--line {
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--container.ds-tablist__WN0Emr__button--backward::after {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--container.ds-tablist__pA2cRq__button--backward::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -61,7 +61,7 @@
   box-shadow: var(--ds-shadow-overlay);
   clip-path: inset(0 calc(-1 * var(--ds-spacing-small)) 0 0);
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--container.ds-tablist__WN0Emr__button--forward::after {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button--container.ds-tablist__pA2cRq__button--forward::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -69,10 +69,10 @@
   box-shadow: var(--ds-shadow-overlay);
   clip-path: inset(0 0 0 calc(-1 * var(--ds-spacing-small)));
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button[hidden] {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button[hidden] {
   display: none;
 }
-.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button__ds-button {
+.ds-tablist__pA2cRq .ds-tablist__pA2cRq__button__ds-button {
   width: 100%;
   height: 100%;
 }

package/dist/collection/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.js

@@ -144,13 +144,13 @@ export class DsTablist extends Mixin(componentFactory('ds-tablist'), tabsFactory
         const baseClass = cx('ds-tablist');
         const scrollableClass = `${baseClass}__scrollable`;
         const buttonClass = `${baseClass}__button`;
-        return (h("div", { key: '60e6cb85c51ff3d3c228c0b5bdd9d6ed643fa386', class: baseClass }, h("div", { key: 'e7cc8adee51bb770139dfde2576ee34c334f2166', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
+        return (h("div", { key: 'fa8bc3aee9cca02d68056496218ebeea494df020', class: baseClass }, h("div", { key: 'dd98a5ef23e27a4bd9210e2413babee68b6e5227', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
                 [`${scrollableClass}--container`]: this.context?.variant === 'container',
                 [`${scrollableClass}--line`]: this.context?.variant === 'line',
-            }), role: "tablist", ...ifDefined('aria-label', this.dsAriaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), onScroll: this.handleScroll }, h("slot", { key: '0308d59773042cd2af9287f564a3bc1529222d62' })), h("div", { key: '7351051ed214b0b79087c16be908a26c5ff6263d', ref: el => (this.backwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--backward`, {
+            }), role: "tablist", ...ifDefined('aria-label', this.dsAriaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), onScroll: this.handleScroll }, h("slot", { key: 'd06da5b234efb4d7fdea8dcbbd21ee9938574ef3' })), h("div", { key: 'e239e750fe0a74d0cbd973d9823eef402afd8d24', ref: el => (this.backwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--backward`, {
                 [`${buttonClass}--container`]: this.context?.variant === 'container',
                 [`${buttonClass}--line`]: this.context?.variant === 'line',
-            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: '203b45f676a3ee6fbac0251ae02cb8ea23418fb2', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
+            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: '129783525b89bfbe4526c104ef461708fd6fa9e7', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
                 [`${buttonClass}--container`]: this.context?.variant === 'container',
                 [`${buttonClass}--line`]: this.context?.variant === 'line',
             }), "aria-hidden": "true", hidden: !this.showForwardButton }, this.renderButton('forward'))));

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/ds-tabpanel.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabpanel__WN0Emr {
+.ds-tabpanel__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,26 +12,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-tabpanel__WN0Emr--container {
+.ds-tabpanel__pA2cRq--container {
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tabpanel__WN0Emr--padded {
+.ds-tabpanel__pA2cRq--padded {
   padding-block-start: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__WN0Emr--padded {
+  .ds-tabpanel__pA2cRq--padded {
     padding-block-start: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__WN0Emr--container.ds-tabpanel__WN0Emr--padded {
+.ds-tabpanel__pA2cRq--container.ds-tabpanel__pA2cRq--padded {
   padding: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__WN0Emr--container.ds-tabpanel__WN0Emr--padded {
+  .ds-tabpanel__pA2cRq--container.ds-tabpanel__pA2cRq--padded {
     padding: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__WN0Emr[hidden] {
+.ds-tabpanel__pA2cRq[hidden] {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/ds-tabpanel.js

@@ -13,10 +13,10 @@ export class DsTabpanel extends Mixin(componentFactory('ds-tabpanel'), tabsFacto
     dsPadded = true;
     render() {
         const baseClass = cx('ds-tabpanel');
-        return (h("div", { key: 'c69bf6f708992fe08bebd4ad8535bc6f48d46166', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: 'cadc1dcef399b0d9cbcb0029cb1b340a7423745a', id: this.dsId, class: classNames(baseClass, {
                 [`${baseClass}--container`]: this.context?.variant === 'container',
                 [`${baseClass}--padded`]: this.dsPadded,
-            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '091708ead106bcfb48cfeeac6f4162608b48e325' })));
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: 'bb4f82e83b842bf9d5379aa60a830c4e9addf2d1' })));
     }
     static get is() { return "ds-tabpanel"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabs__WN0Emr {
+.ds-tabs__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;

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

@@ -39,7 +39,7 @@ export class DsTabs extends Mixin(componentFactory('ds-tabs', { stopRootTracking
     }
     render() {
         const baseClass = cx('ds-tabs');
-        return (h("div", { key: '9ac888e3f6040c0f96795aa315848345b44338b0', class: baseClass }, h("slot", { key: '6a920af35a3df205d0e9aef5f843eca4e0ddb716' })));
+        return (h("div", { key: '559aff8fb3022192542ca848b25f0091e7b9152b', class: baseClass }, h("slot", { key: '8c483be2dd7ed6ecd0ac84ea00827272a9fd4c9f' })));
     }
     static get is() { return "ds-tabs"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,24 +4,24 @@
   display: block;
 }
 
-.ds-tag__WN0Emr {
+.ds-tag__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-tag__WN0Emr:focus-visible {
+.ds-tag__pA2cRq: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-tag__WN0Emr:focus-within {
+.ds-tag__pA2cRq:focus-within {
   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-tag__WN0Emr {
+.ds-tag__pA2cRq {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -30,87 +30,87 @@
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--default {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--default:has(.ds-tag__WN0Emr__link:hover) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--default:has(.ds-tag__pA2cRq__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--default:has(.ds-tag__WN0Emr__link:active) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--default:has(.ds-tag__pA2cRq__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--black {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--black:has(.ds-tag__WN0Emr__link:hover) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--black:has(.ds-tag__pA2cRq__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--black:has(.ds-tag__WN0Emr__link:active) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--black:has(.ds-tag__pA2cRq__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--white {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--white:has(.ds-tag__WN0Emr__link:hover) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--white:has(.ds-tag__pA2cRq__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--white:has(.ds-tag__WN0Emr__link:active) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--white:has(.ds-tag__pA2cRq__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--info {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--info:has(.ds-tag__WN0Emr__link:hover) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--info:has(.ds-tag__pA2cRq__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--info:has(.ds-tag__WN0Emr__link:active) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--info:has(.ds-tag__pA2cRq__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--danger {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--danger:has(.ds-tag__WN0Emr__link:hover) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--danger:has(.ds-tag__pA2cRq__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--danger:has(.ds-tag__WN0Emr__link:active) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--danger:has(.ds-tag__pA2cRq__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--attention {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--attention:has(.ds-tag__WN0Emr__link:hover) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--attention:has(.ds-tag__pA2cRq__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--attention:has(.ds-tag__WN0Emr__link:active) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--attention:has(.ds-tag__pA2cRq__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--success {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--success:has(.ds-tag__WN0Emr__link:hover) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--success:has(.ds-tag__pA2cRq__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__WN0Emr.ds-tag__WN0Emr--success:has(.ds-tag__WN0Emr__link:active) {
+.ds-tag__pA2cRq.ds-tag__pA2cRq--success:has(.ds-tag__pA2cRq__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__WN0Emr__text {
+.ds-tag__pA2cRq__text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-tag__WN0Emr__link {
+.ds-tag__pA2cRq__link {
   display: contents;
 }
-.ds-tag__WN0Emr__link a:focus-visible {
+.ds-tag__pA2cRq__link a:focus-visible {
   box-shadow: none !important;
   outline: none !important;
   outline-offset: unset !important;

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

@@ -38,7 +38,7 @@ export class DsTag extends Mixin(componentFactory('ds-tag')) {
         const ariaHidden = this.dsAriaHidden ?? !this.dsHref;
         const role = this.dsRole ?? this.inheritedAttributes.role;
         const restAttributes = omit(this.inheritedAttributes, ['aria-hidden', 'role']);
-        return (h("div", { key: 'da1837357461b963d2e30a35e25ca5f0ae8b13a2', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'abbc64900bc1d8a75c90781ba526943369171eb2', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '673a87cab70dfd14a4e9fa4e498be96641cceb82' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '2e2603c51ba49f5791d59926283053107275de43', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: '3305650df4292d39cde25b9a84e7350d02dfd53d', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'e403d25adf10157c46debb2c877e7fe7c294eb16', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '605714b89a4683dee8e102f50f5ec93c7023def7' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '91eb6271152b525043529a7d1963d6e81195e856', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
     static get is() { return "ds-tag"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,4 @@
-.ds-tag-group__WN0Emr__tags {
+.ds-tag-group__pA2cRq__tags {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);

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

@@ -29,7 +29,7 @@ export class DsTagGroup extends Mixin(componentFactory('ds-tag-group', { stopRoo
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (h("div", { key: '10a9f91d8129b8f46d636d3283890afc24e91401', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'c040bfa3abd76bcfaa5994ff7b1c57d36e2b5ef7', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '8311510a194bb1c833e5ca9c5554f5ce92794d2b', name: "label" }), h("slot", { key: '9a3184d168ba1c0708276e25eab91c4cf84c40f9', name: "assistiveText" })), h("div", { key: '3127eee23cbbee234ab952de0bf7dfbe5f512290', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '250ac2c8e31205bb22f92640d1b0ab51689dd081' }))));
+        return (h("div", { key: '22f0cf9fec72ad9226961b87763ab1d2e2573c3b', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '2cfb0354fe21fe86fe13700998d7785b42858e33', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '93d1ea469ce4e7e82b98478e208c6c6ddc1ba365', name: "label" }), h("slot", { key: '5a627221e89fcd7f710bd12c21531c2aa642d5a1', name: "assistiveText" })), h("div", { key: '0d25a9ca95a856291fa2f07c9c910e7a2e6b8304', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'f9153fe2f2caf620bd3c5beee17f79667646eae6' }))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "scoped"; }