@uh-design-system/component-library 1.6.0-rc.2 → 1.7.0-rc.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__9el4Wy {
+.ds-tab__oJU1eo {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -33,22 +33,22 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-tab__9el4Wy {
+  .ds-tab__oJU1eo {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-tab__9el4Wy--selected, .ds-tab__9el4Wy:hover:not(.ds-tab__9el4Wy--selected), .ds-tab__9el4Wy:active:not(.ds-tab__9el4Wy--selected) {
+.ds-tab__oJU1eo--selected, .ds-tab__oJU1eo:hover:not(.ds-tab__oJU1eo--selected), .ds-tab__oJU1eo:active:not(.ds-tab__oJU1eo--selected) {
   color: var(--ds-textColor-default);
 }
-.ds-tab__9el4Wy--container:focus-visible {
+.ds-tab__oJU1eo--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__9el4Wy--container.ds-tab__9el4Wy--selected {
+.ds-tab__oJU1eo--container.ds-tab__oJU1eo--selected {
   background-color: var(--ds-bgColor-white);
 }
-.ds-tab__9el4Wy--container.ds-tab__9el4Wy--selected::after {
+.ds-tab__oJU1eo--container.ds-tab__oJU1eo--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__9el4Wy--container.ds-tab__9el4Wy--selected:not(:focus-visible)::before {
+.ds-tab__oJU1eo--container.ds-tab__oJU1eo--selected:not(:focus-visible)::before {
   content: "";
   position: absolute;
   inset: 0;
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tab__9el4Wy--container:hover:not(.ds-tab__9el4Wy--selected) {
+.ds-tab__oJU1eo--container:hover:not(.ds-tab__oJU1eo--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-tab__9el4Wy--container:active:not(.ds-tab__9el4Wy--selected) {
+.ds-tab__oJU1eo--container:active:not(.ds-tab__oJU1eo--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-tab__9el4Wy--line:focus-visible .ds-tab__9el4Wy__content {
+.ds-tab__oJU1eo--line:focus-visible .ds-tab__oJU1eo__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__9el4Wy--line.ds-tab__9el4Wy--selected::after {
+.ds-tab__oJU1eo--line.ds-tab__oJU1eo--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__9el4Wy--line:hover:not(.ds-tab__9el4Wy--selected)::after {
+.ds-tab__oJU1eo--line:hover:not(.ds-tab__oJU1eo--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__9el4Wy--line:active:not(.ds-tab__9el4Wy--selected)::after {
+.ds-tab__oJU1eo--line:active:not(.ds-tab__oJU1eo--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__9el4Wy .ds-tab__9el4Wy__content {
+.ds-tab__oJU1eo .ds-tab__oJU1eo__content {
   position: relative;
   display: flex;
   flex-direction: row;

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

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tablist__9el4Wy {
+.ds-tablist__oJU1eo {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,7 +12,7 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__scrollable {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__scrollable {
   display: flex;
   gap: var(--ds-spacing-2xSmall);
   overflow-x: auto;
@@ -20,17 +20,17 @@
   overscroll-behavior-x: contain;
   scrollbar-width: none;
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__scrollable:focus, .ds-tablist__9el4Wy .ds-tablist__9el4Wy__scrollable:focus-visible, .ds-tablist__9el4Wy .ds-tablist__9el4Wy__scrollable:-moz-focusring {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__scrollable:focus, .ds-tablist__oJU1eo .ds-tablist__oJU1eo__scrollable:focus-visible, .ds-tablist__oJU1eo .ds-tablist__oJU1eo__scrollable:-moz-focusring {
   outline: none;
   box-shadow: none;
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__scrollable--container {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__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__9el4Wy .ds-tablist__9el4Wy__scrollable--line {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__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__9el4Wy .ds-tablist__9el4Wy__button {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -39,21 +39,21 @@
   justify-content: center;
   align-items: center;
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__button--backward {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button--backward {
   left: 0;
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__button--forward {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button--forward {
   right: 0;
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__button--container {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button--container {
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__button--line {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button--line {
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__button--container.ds-tablist__9el4Wy__button--backward::after {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button--container.ds-tablist__oJU1eo__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__9el4Wy .ds-tablist__9el4Wy__button--container.ds-tablist__9el4Wy__button--forward::after {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button--container.ds-tablist__oJU1eo__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__9el4Wy .ds-tablist__9el4Wy__button[hidden] {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button[hidden] {
   display: none;
 }
-.ds-tablist__9el4Wy .ds-tablist__9el4Wy__button__ds-button {
+.ds-tablist__oJU1eo .ds-tablist__oJU1eo__button__ds-button {
   width: 100%;
   height: 100%;
 }

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

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabpanel__9el4Wy {
+.ds-tabpanel__oJU1eo {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,26 +12,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-tabpanel__9el4Wy--container {
+.ds-tabpanel__oJU1eo--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__9el4Wy--padded {
+.ds-tabpanel__oJU1eo--padded {
   padding-block-start: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__9el4Wy--padded {
+  .ds-tabpanel__oJU1eo--padded {
     padding-block-start: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__9el4Wy--container.ds-tabpanel__9el4Wy--padded {
+.ds-tabpanel__oJU1eo--container.ds-tabpanel__oJU1eo--padded {
   padding: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__9el4Wy--container.ds-tabpanel__9el4Wy--padded {
+  .ds-tabpanel__oJU1eo--container.ds-tabpanel__oJU1eo--padded {
     padding: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__9el4Wy[hidden] {
+.ds-tabpanel__oJU1eo[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: 'dcf4aec45a790b7fc0443f43f4221b4c47ed103f', 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: 'd4bc7bb63c68c58289536e3acf15d754aa228a93' })));
     }
     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__9el4Wy {
+.ds-tabs__oJU1eo {
   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: '1dfca6a95ef337cc22b26d16cb6addea05c2a719', class: baseClass }, h("slot", { key: 'bdd5ed48472cb41d43fcfe0252a23344144a1973' })));
     }
     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__9el4Wy {
+.ds-tag__oJU1eo {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-tag__9el4Wy:focus-visible {
+.ds-tag__oJU1eo: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__9el4Wy:focus-within {
+.ds-tag__oJU1eo: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__9el4Wy {
+.ds-tag__oJU1eo {
   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__9el4Wy.ds-tag__9el4Wy--default {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--default:has(.ds-tag__9el4Wy__link:hover) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--default:has(.ds-tag__oJU1eo__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--default:has(.ds-tag__9el4Wy__link:active) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--default:has(.ds-tag__oJU1eo__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--black {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--black:has(.ds-tag__9el4Wy__link:hover) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--black:has(.ds-tag__oJU1eo__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--black:has(.ds-tag__9el4Wy__link:active) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--black:has(.ds-tag__oJU1eo__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--white {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--white:has(.ds-tag__9el4Wy__link:hover) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--white:has(.ds-tag__oJU1eo__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--white:has(.ds-tag__9el4Wy__link:active) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--white:has(.ds-tag__oJU1eo__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--info {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--info:has(.ds-tag__9el4Wy__link:hover) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--info:has(.ds-tag__oJU1eo__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--info:has(.ds-tag__9el4Wy__link:active) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--info:has(.ds-tag__oJU1eo__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--danger {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--danger:has(.ds-tag__9el4Wy__link:hover) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--danger:has(.ds-tag__oJU1eo__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--danger:has(.ds-tag__9el4Wy__link:active) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--danger:has(.ds-tag__oJU1eo__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--attention {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--attention:has(.ds-tag__9el4Wy__link:hover) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--attention:has(.ds-tag__oJU1eo__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--attention:has(.ds-tag__9el4Wy__link:active) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--attention:has(.ds-tag__oJU1eo__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--success {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--success:has(.ds-tag__9el4Wy__link:hover) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--success:has(.ds-tag__oJU1eo__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__9el4Wy.ds-tag__9el4Wy--success:has(.ds-tag__9el4Wy__link:active) {
+.ds-tag__oJU1eo.ds-tag__oJU1eo--success:has(.ds-tag__oJU1eo__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__9el4Wy__text {
+.ds-tag__oJU1eo__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__9el4Wy__link {
+.ds-tag__oJU1eo__link {
   display: contents;
 }
-.ds-tag__9el4Wy__link a:focus-visible {
+.ds-tag__oJU1eo__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: '4aa78d59d29a7b02c38feafd8803267ca4d44e45', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: '5c22591ea524e20192e9cf2a729f14fd2ab4caf6', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'f78a5568a25bce3e234538525eb97c8a1c936040' }, 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: '503a2cfcacf654d3f5f218197232610523e476b4', 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__9el4Wy__tags {
+.ds-tag-group__oJU1eo__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: '814c6933edb740b3b5f2a130423c6d7fc5121a66', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'b7b4d3c1fa85819f60d177110378c5ae221abc63', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'c3f497a2d42d1a7a660effe44f72e731dd009845', name: "label" }), h("slot", { key: 'd60c04c54023eb9492a9fcbe106c4dd2f76dc079', name: "assistiveText" })), h("div", { key: '7926f67c71662ba042ef76bf59fc777ccf0b35bc', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'fd842061010b6ca450729f44f496c6a17cd46f54' }))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "scoped"; }