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

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

@@ -98,7 +98,7 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
             [`${baseClass}--line`]: this.context?.variant === 'line',
             [`${baseClass}--selected`]: isSelected,
         });
-        return (h("div", { key: 'ae75a439a5169a270d6efc58cf7514597e1d10ad', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: 'ef08cacdea763f1fae8a53d5b5288d1c7749c1dc', class: `${baseClass}__content` }, h("slot", { key: 'b6677d3e5aa293c0e3e75e002470ddba2101f549', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: '16d64ca02eabae826b9a75b956cd039e2bd88f5c', dsName: this.dsIconStart })), h("slot", { key: 'bb1b7e5a72e3aca2a4c85433b87f029e4cdb60a0', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: '9ccf6bc28f27c841409643e7e301faec262ddbf9' }, this.dsText)), h("slot", { key: '6c6d0652750b3befbd7a8d9b79c7a7e832e18e52', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: 'fd0bfe7afa6b5ebf7f2cbac21c0183342b39666f', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+        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 })))));
     }
     static get is() { return "ds-tab"; }
     static get encapsulation() { return "scoped"; }
@@ -256,7 +256,7 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
                     "references": {
                         "DsTabClickEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
                             "id": "src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx::DsTabClickEvent"
                         }
                     }
@@ -277,7 +277,7 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
                     "references": {
                         "DsTabFocusEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
                             "id": "src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx::DsTabFocusEvent"
                         }
                     }

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

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

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

@@ -33,9 +33,13 @@ export class DsTablist extends Mixin(componentFactory('ds-tablist'), tabsFactory
     };
     throttledSetButtonsVisibility = throttle(this.setButtonsVisibility, this.RESIZE_THROTTLE_TIMEOUT);
     async tabConnected() {
+        if (!this.scrollableElement)
+            return;
         this.setButtonsVisibility(this.scrollableElement);
     }
     async tabDisconnected() {
+        if (!this.scrollableElement)
+            return;
         this.setButtonsVisibility(this.scrollableElement);
     }
     handleWindowResize() {
@@ -81,6 +85,9 @@ export class DsTablist extends Mixin(componentFactory('ds-tablist'), tabsFactory
             return;
         let nextIndex = 0;
         switch (event.key) {
+            case 'Home': {
+                break;
+            }
             case 'Enter':
             case ' ': {
                 if (this.context?.currentTab === tabs[activeTabIndex].dsId)
@@ -96,10 +103,6 @@ export class DsTablist extends Mixin(componentFactory('ds-tablist'), tabsFactory
                 nextIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
                 break;
             }
-            case 'Home': {
-                nextIndex = 0;
-                break;
-            }
             case 'End': {
                 nextIndex = tabs.length - 1;
                 break;
@@ -141,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: 'facb4e5c32ae467b6a5696fdfcb32ace65174167', class: baseClass }, h("div", { key: 'e16066822780aa24e748ec7086b3aac920efd364', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
+        return (h("div", { key: '60e6cb85c51ff3d3c228c0b5bdd9d6ed643fa386', class: baseClass }, h("div", { key: 'e7cc8adee51bb770139dfde2576ee34c334f2166', 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: '460bd1c6016cdf0e6580d5982e9f4fd9137bd259' })), h("div", { key: '53c5fe325aacf605633dbe24ce86b43f779c8606', 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: '0308d59773042cd2af9287f564a3bc1529222d62' })), h("div", { key: '7351051ed214b0b79087c16be908a26c5ff6263d', 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: 'fab24ecfa00273931d5623479ac2bc7a45777e1c', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
+            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: '203b45f676a3ee6fbac0251ae02cb8ea23418fb2', 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'))));
@@ -229,7 +232,7 @@ export class DsTablist extends Mixin(componentFactory('ds-tablist'), tabsFactory
                     "references": {
                         "DsTabChangeEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.tsx",
                             "id": "src/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.tsx::DsTabChangeEvent"
                         }
                     }

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

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabpanel__cpPWV0 {
+.ds-tabpanel__izAhxK {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,26 +12,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-tabpanel__cpPWV0--container {
+.ds-tabpanel__izAhxK--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__cpPWV0--padded {
+.ds-tabpanel__izAhxK--padded {
   padding-block-start: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__cpPWV0--padded {
+  .ds-tabpanel__izAhxK--padded {
     padding-block-start: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__cpPWV0--container.ds-tabpanel__cpPWV0--padded {
+.ds-tabpanel__izAhxK--container.ds-tabpanel__izAhxK--padded {
   padding: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__cpPWV0--container.ds-tabpanel__cpPWV0--padded {
+  .ds-tabpanel__izAhxK--container.ds-tabpanel__izAhxK--padded {
     padding: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__cpPWV0[hidden] {
+.ds-tabpanel__izAhxK[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: '6d91e9c0ae540f71066c31928c717be1acf090d0', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '5da4b946a5a972c53950a3309fddb6ae322062c9', 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: '7fb5cc034e18a675c0236d433738113f16fe25b9' })));
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '9ca7af52273ba9138236c459aa7f1014fa32847c' })));
     }
     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__cpPWV0 {
+.ds-tabs__izAhxK {
   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: 'f6a1374d08011b0be56a4738835ef25a80a7069a', class: baseClass }, h("slot", { key: '85cb5f6e408873bede86ba315fa36afd0a5b51c2' })));
+        return (h("div", { key: '4865050d1a88b75c46e7cd5c7a8ee49cee4f22aa', class: baseClass }, h("slot", { key: '444f0936859f4b4e1e31007b2d785f224f0c66de' })));
     }
     static get is() { return "ds-tabs"; }
     static get encapsulation() { return "scoped"; }

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

@@ -25,11 +25,11 @@ export function provideTabsContext(element, context) {
     storeTabsContext(element, context);
     const childSelector = getChildSelector(element);
     const children = element.querySelectorAll(childSelector);
-    children.forEach(child => {
+    for (const child of children) {
         if (isInCurrentTabsBoundary(child, element)) {
             dispatchContextUpdate(child, context);
         }
-    });
+    }
 }
 export function consumeTabsContext(element) {
     let parent = element.parentElement;

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

@@ -4,24 +4,24 @@
   display: block;
 }
 
-.ds-tag__cpPWV0 {
+.ds-tag__izAhxK {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-tag__cpPWV0:focus-visible {
+.ds-tag__izAhxK: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__cpPWV0:focus-within {
+.ds-tag__izAhxK: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__cpPWV0 {
+.ds-tag__izAhxK {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -30,88 +30,88 @@
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--default {
+.ds-tag__izAhxK.ds-tag__izAhxK--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--default:has(.ds-tag__cpPWV0__link:hover) {
+.ds-tag__izAhxK.ds-tag__izAhxK--default:has(.ds-tag__izAhxK__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--default:has(.ds-tag__cpPWV0__link:active) {
+.ds-tag__izAhxK.ds-tag__izAhxK--default:has(.ds-tag__izAhxK__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--black {
+.ds-tag__izAhxK.ds-tag__izAhxK--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--black:has(.ds-tag__cpPWV0__link:hover) {
+.ds-tag__izAhxK.ds-tag__izAhxK--black:has(.ds-tag__izAhxK__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--black:has(.ds-tag__cpPWV0__link:active) {
+.ds-tag__izAhxK.ds-tag__izAhxK--black:has(.ds-tag__izAhxK__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--white {
+.ds-tag__izAhxK.ds-tag__izAhxK--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--white:has(.ds-tag__cpPWV0__link:hover) {
+.ds-tag__izAhxK.ds-tag__izAhxK--white:has(.ds-tag__izAhxK__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--white:has(.ds-tag__cpPWV0__link:active) {
+.ds-tag__izAhxK.ds-tag__izAhxK--white:has(.ds-tag__izAhxK__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--info {
+.ds-tag__izAhxK.ds-tag__izAhxK--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--info:has(.ds-tag__cpPWV0__link:hover) {
+.ds-tag__izAhxK.ds-tag__izAhxK--info:has(.ds-tag__izAhxK__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--info:has(.ds-tag__cpPWV0__link:active) {
+.ds-tag__izAhxK.ds-tag__izAhxK--info:has(.ds-tag__izAhxK__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--danger {
+.ds-tag__izAhxK.ds-tag__izAhxK--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--danger:has(.ds-tag__cpPWV0__link:hover) {
+.ds-tag__izAhxK.ds-tag__izAhxK--danger:has(.ds-tag__izAhxK__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--danger:has(.ds-tag__cpPWV0__link:active) {
+.ds-tag__izAhxK.ds-tag__izAhxK--danger:has(.ds-tag__izAhxK__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--attention {
+.ds-tag__izAhxK.ds-tag__izAhxK--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--attention:has(.ds-tag__cpPWV0__link:hover) {
+.ds-tag__izAhxK.ds-tag__izAhxK--attention:has(.ds-tag__izAhxK__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--attention:has(.ds-tag__cpPWV0__link:active) {
+.ds-tag__izAhxK.ds-tag__izAhxK--attention:has(.ds-tag__izAhxK__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--success {
+.ds-tag__izAhxK.ds-tag__izAhxK--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--success:has(.ds-tag__cpPWV0__link:hover) {
+.ds-tag__izAhxK.ds-tag__izAhxK--success:has(.ds-tag__izAhxK__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__cpPWV0.ds-tag__cpPWV0--success:has(.ds-tag__cpPWV0__link:active) {
+.ds-tag__izAhxK.ds-tag__izAhxK--success:has(.ds-tag__izAhxK__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__cpPWV0__text {
+.ds-tag__izAhxK__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__cpPWV0__link {
+.ds-tag__izAhxK__link {
   display: contents;
 }
-.ds-tag__cpPWV0__link::part(link):focus-visible {
-  box-shadow: none;
-  outline: none;
-  outline-offset: none;
+.ds-tag__izAhxK__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

@@ -35,10 +35,10 @@ export class DsTag extends Mixin(componentFactory('ds-tag')) {
         });
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
-        const ariaHidden = this.dsAriaHidden !== undefined ? this.dsAriaHidden : this.dsHref ? false : true;
+        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: '19d03e47eab35b601db3b2b357487a8c0a569439', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: '51edec9e91e2ae90193977d2fb678cf6fa430bb0', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'ec2af65bcc40e5bb938db6e341a5a1d263fea8ac' }, 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: '157d438a6c3cdc44d4d8454dc1ea8db29db4ed6a', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: '66fea1337be74f8211f4bee653c0f41a232f2c93', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'f79c99343b3c9fd2ff9b51453476df223b367e66', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '6642519c5843c1db6e0cf4eca534f2fec1e664cb' }, 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: 'a1d7fb503ddee8587a2a48a85de77cf949e6a29f', 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__cpPWV0__tags {
+.ds-tag-group__izAhxK__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: '60dca229a4e47da360bd54f3d32e8acd51908dd6', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '8389032d5934b0b7259463c46529ddfe7218e827', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '6ed1eaf8c0f2913bd7ead73e6d108d7189d6288e', name: "label" }), h("slot", { key: '72b77ae86a5778285d353b184ee14eb7554e46d3', name: "assistiveText" })), h("div", { key: '7a9315fba9813a4a2a29a59030afc049d74b1da8', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '37b72f5f07405f4636a246e3888d4a05583799bf' }))));
+        return (h("div", { key: '55ef24fef882fadfa75932bdd902b37c5cf97954', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'aef6319ace51c14a71bb24c95569f80a6396c3aa', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '90982a6bed00261b799dff34df0d9bc322bb816e', name: "label" }), h("slot", { key: '28885d0da4c2f2745d513c85035a1994db53e8fe', name: "assistiveText" })), h("div", { key: '1b663d0905d0f258a458151ce714c08128745957', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'fc1ecce2421171e7e9d5e3310367d97ac0831d6c' }))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-text-area/ds-text-area.css

@@ -7,11 +7,11 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-text-area__cpPWV0__container--full-width) {
+:host:has(.ds-text-area__izAhxK__container--full-width) {
   width: 100%;
 }
 
-.ds-text-area__cpPWV0 {
+.ds-text-area__izAhxK {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -19,17 +19,17 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-area__cpPWV0__container:focus-visible {
+.ds-text-area__izAhxK__container: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-text-area__cpPWV0__container:focus-within {
+.ds-text-area__izAhxK__container: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-text-area__cpPWV0__container {
+.ds-text-area__izAhxK__container {
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
@@ -39,74 +39,74 @@
   border-color: var(--ds-borderColor-default);
   padding: 0;
 }
-.ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--invalid {
+.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--invalid:hover:not(.ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--invalid:focus-within) {
+.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid:hover:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--invalid.ds-text-area__cpPWV0__container--active {
+.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid.ds-text-area__izAhxK__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__cpPWV0__container--valid {
+.ds-text-area__izAhxK__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__cpPWV0__container--valid:hover:not(.ds-text-area__cpPWV0__container--valid:focus-within) {
+.ds-text-area__izAhxK__container--valid:hover:not(.ds-text-area__izAhxK__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__cpPWV0__container--valid.ds-text-area__cpPWV0__container--active {
+.ds-text-area__izAhxK__container--valid.ds-text-area__izAhxK__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__cpPWV0__container--readonly, .ds-text-area__cpPWV0__container--disabled {
+.ds-text-area__izAhxK__container--readonly, .ds-text-area__izAhxK__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__cpPWV0__container:focus-within:not(.ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--invalid, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--valid, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--readonly) {
+.ds-text-area__izAhxK__container:focus-within:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--valid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__cpPWV0__container:hover:not(.ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--disabled, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--readonly, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--active, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--invalid, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--valid, .ds-text-area__cpPWV0__container:focus-within) {
+.ds-text-area__izAhxK__container:hover:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--disabled, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--readonly, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--active, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--valid, .ds-text-area__izAhxK__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__cpPWV0__container.active:not(.ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--disabled, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--readonly, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--invalid, .ds-text-area__cpPWV0__container.ds-text-area__cpPWV0__container--valid) {
+.ds-text-area__izAhxK__container.active:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--disabled, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--readonly, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__cpPWV0__container--full-width {
+.ds-text-area__izAhxK__container--full-width {
   width: 100%;
 }
-.ds-text-area__cpPWV0__external-button,
-.ds-text-area__cpPWV0 ::slotted([slot=suffix]) {
+.ds-text-area__izAhxK__external-button,
+.ds-text-area__izAhxK ::slotted([slot=suffix]) {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__cpPWV0__validity-container {
+.ds-text-area__izAhxK__validity-container {
   align-items: center;
   width: 100%;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__cpPWV0__validity-container--has-character-limit {
+.ds-text-area__izAhxK__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__cpPWV0__character-count {
+.ds-text-area__izAhxK__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__cpPWV0__character-count--over-limit {
+.ds-text-area__izAhxK__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__cpPWV0__character-count > small {
+.ds-text-area__izAhxK__character-count > small {
   display: inline-block;
   font-size: inherit;
 }
-.ds-text-area__cpPWV0__textarea {
+.ds-text-area__izAhxK__textarea {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -121,7 +121,7 @@
   border: none;
   padding: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__cpPWV0__textarea::placeholder {
+.ds-text-area__izAhxK__textarea::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -129,33 +129,33 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-area__cpPWV0__textarea:disabled {
+.ds-text-area__izAhxK__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__cpPWV0__textarea:disabled::placeholder {
+.ds-text-area__izAhxK__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__cpPWV0__textarea:focus {
+.ds-text-area__izAhxK__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__cpPWV0__textarea--resize-both {
+.ds-text-area__izAhxK__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__cpPWV0__textarea--resize-auto, .ds-text-area__cpPWV0__textarea--resize-none {
+.ds-text-area__izAhxK__textarea--resize-auto, .ds-text-area__izAhxK__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__cpPWV0__textarea--resize-auto {
+.ds-text-area__izAhxK__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__cpPWV0__textarea--resize-vertical {
+.ds-text-area__izAhxK__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__cpPWV0__textarea--resize-horizontal {
+.ds-text-area__izAhxK__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__cpPWV0__textarea--full-width {
+.ds-text-area__izAhxK__textarea--full-width {
   width: 100%;
 }