npm - @uh-design-system/component-library - Versions diffs - 1.5.0 → 1.5.1 - Mend

@uh-design-system/component-library 1.5.0 → 1.5.1

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

Files changed (2041) hide show

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.css CHANGED Viewed

@@ -169,47 +169,47 @@
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-spinner__GqWYnG {
+.ds-spinner__bQiYWO {
   display: inline-block;
 }
-.ds-spinner__GqWYnG:has(.ds-spinner__GqWYnG__text) {
+.ds-spinner__bQiYWO:has(.ds-spinner__bQiYWO__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__GqWYnG {
+.ds-spinner__bQiYWO {
   /* Size */
 }
-.ds-spinner__GqWYnG--small {
+.ds-spinner__bQiYWO--small {
   padding: 1.5px;
 }
-.ds-spinner__GqWYnG--medium {
+.ds-spinner__bQiYWO--medium {
   padding: 3px;
 }
-.ds-spinner__GqWYnG--large {
+.ds-spinner__bQiYWO--large {
   padding: 3px;
 }
-.ds-spinner__GqWYnG--xLarge {
+.ds-spinner__bQiYWO--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__GqWYnG--2xLarge {
+.ds-spinner__bQiYWO--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__GqWYnG--custom {
+.ds-spinner__bQiYWO--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__GqWYnG {
+.ds-spinner__bQiYWO {
   /* Position */
 }
-.ds-spinner__GqWYnG--below {
+.ds-spinner__bQiYWO--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__GqWYnG--right {
+.ds-spinner__bQiYWO--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__GqWYnG__spinner {
+.ds-spinner__bQiYWO__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -219,14 +219,14 @@
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__GqWYnG__text {
+.ds-spinner__bQiYWO__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__GqWYnG__text--white {
+.ds-spinner__bQiYWO__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__GqWYnG__segment {
+.ds-spinner__bQiYWO__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -236,13 +236,13 @@
   animation: ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
   border-color: var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
 }
-.ds-spinner__GqWYnG__segment--1 {
+.ds-spinner__bQiYWO__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__GqWYnG__segment--2 {
+.ds-spinner__bQiYWO__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__GqWYnG__segment--3 {
+.ds-spinner__bQiYWO__segment--3 {
   animation-delay: -0.1s;
 }
@@ -256,17 +256,17 @@
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__GqWYnG__segment {
+  .ds-spinner__bQiYWO__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__GqWYnG__segment--1 {
+  .ds-spinner__bQiYWO__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__GqWYnG__segment--2 {
+  .ds-spinner__bQiYWO__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__GqWYnG__segment--3 {
+  .ds-spinner__bQiYWO__segment--3 {
     animation-delay: -0.2s;
   }
 }

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

@@ -62,11 +62,11 @@ export class DsSpinner extends Mixin(componentFactory('ds-spinner')) {
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (h("div", { key: 'e005009f0d7ae9e2b65ea914b4d34121d549367c', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
+        return (h("div", { key: '5cdb1d5e91878a517e82b9cd276776ffb3d7eba3', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '7320d4ecad564b0fe273db837f8788df9779695b', class: `${baseClass}__spinner` }, h("div", { key: 'c48f5415839d7c6877aea23b0ce417083b1a3e68', class: segmentClasses(1) }), h("div", { key: '5493eb9032096b6d4465956f7464f0f1645f9b10', class: segmentClasses(2) }), h("div", { key: '21e06cea11eac46b75fa0c16e416ccce0ea7446a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'a63fa57152c2a4521c8f046648d8b17aa48b6ebd' }, h("span", { key: '918c987794b085f3f2949154816e438482652399' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '43fdbe3aca2fd375f61d70b48266b7cd533c5dbe', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: '6fb917362e05a35d8433e7e22918d29ebeeffaad', class: `${baseClass}__spinner` }, h("div", { key: '867f6cb563805351d23932167b54fbab97acacc4', class: segmentClasses(1) }), h("div", { key: '6d9edadb424708ef345dcaea44ecdcd388b27c71', class: segmentClasses(2) }), h("div", { key: '15861982856b22ba5265eaa2a29e2b67f4b70421', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'b45baa1e904f3295deba75b5cec215a32a92bf24' }, h("span", { key: 'dea5006a521e31b885f73f18a4303a5cd4332fae' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '6f0d73e6a71f8d249cfeaac9225b3ee73f7d7d6d', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@
   display: contents;
 }
-.ds-tab__GqWYnG {
+.ds-tab__bQiYWO {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -33,22 +33,22 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-tab__GqWYnG {
+  .ds-tab__bQiYWO {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-tab__GqWYnG--selected, .ds-tab__GqWYnG:hover:not(.ds-tab__GqWYnG--selected), .ds-tab__GqWYnG:active:not(.ds-tab__GqWYnG--selected) {
+.ds-tab__bQiYWO--selected, .ds-tab__bQiYWO:hover:not(.ds-tab__bQiYWO--selected), .ds-tab__bQiYWO:active:not(.ds-tab__bQiYWO--selected) {
   color: var(--ds-textColor-default);
 }
-.ds-tab__GqWYnG--container:focus-visible {
+.ds-tab__bQiYWO--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__GqWYnG--container.ds-tab__GqWYnG--selected {
+.ds-tab__bQiYWO--container.ds-tab__bQiYWO--selected {
   background-color: var(--ds-bgColor-white);
 }
-.ds-tab__GqWYnG--container.ds-tab__GqWYnG--selected::after {
+.ds-tab__bQiYWO--container.ds-tab__bQiYWO--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__GqWYnG--container.ds-tab__GqWYnG--selected:not(:focus-visible)::before {
+.ds-tab__bQiYWO--container.ds-tab__bQiYWO--selected:not(:focus-visible)::before {
   content: "";
   position: absolute;
   inset: 0;
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tab__GqWYnG--container:hover:not(.ds-tab__GqWYnG--selected) {
+.ds-tab__bQiYWO--container:hover:not(.ds-tab__bQiYWO--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-tab__GqWYnG--container:active:not(.ds-tab__GqWYnG--selected) {
+.ds-tab__bQiYWO--container:active:not(.ds-tab__bQiYWO--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-tab__GqWYnG--line:focus-visible .ds-tab__GqWYnG__content {
+.ds-tab__bQiYWO--line:focus-visible .ds-tab__bQiYWO__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__GqWYnG--line.ds-tab__GqWYnG--selected::after {
+.ds-tab__bQiYWO--line.ds-tab__bQiYWO--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__GqWYnG--line:hover:not(.ds-tab__GqWYnG--selected)::after {
+.ds-tab__bQiYWO--line:hover:not(.ds-tab__bQiYWO--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__GqWYnG--line:active:not(.ds-tab__GqWYnG--selected)::after {
+.ds-tab__bQiYWO--line:active:not(.ds-tab__bQiYWO--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__GqWYnG .ds-tab__GqWYnG__content {
+.ds-tab__bQiYWO .ds-tab__bQiYWO__content {
   position: relative;
   display: flex;
   flex-direction: row;

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

@@ -4,7 +4,8 @@ import classNames from "classnames";
 import { declareComponentDependencies, transformTagName } from "../../../../utils/utils";
 import { tabsFactory } from "../../../00-foundations/factories/tabsFactory";
 import { getIconColourVariable } from "../../../00-foundations/icons/iconList";
-export class DsTab extends Mixin(tabsFactory) {
+import { componentFactory } from "../../../00-foundations/factories/componentFactory";
+export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
     constructor() {
         super();
     }
@@ -97,7 +98,7 @@ export class DsTab extends Mixin(tabsFactory) {
             [`${baseClass}--line`]: this.context?.variant === 'line',
             [`${baseClass}--selected`]: isSelected,
         });
-        return (h("div", { key: 'f85656b4ec870dcf92947b3cbd95c80cc306d8c3', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '1e44a6af00a3637ee2b9f32d8d21571e9fe46d21', class: `${baseClass}__content` }, h("slot", { key: 'c5ce3d8c478d4781823516ca0b5f63b40ca96689', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: 'd5f1c70d72eed55890a8afb103c302f0019efc5b', dsName: this.dsIconStart })), h("slot", { key: 'dca39987bc2089aa2ffce964738b775dece1d868', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: 'cb0c79a3ff1e25d4298d6e5fdb55f55f346695e7' }, this.dsText)), h("slot", { key: '6360928755f5350ac63361cfcfa9687db6685102', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: 'e8ad3fc72b8a44d6d0c924209a140d4e25ac962b', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+        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 })))));
     }
     static get is() { return "ds-tab"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -3,7 +3,8 @@ import classNames from "classnames";
 import { cx } from "../../../../utils/cx";
 import { declareComponentDependencies, ifDefined, throttle, transformTagName } from "../../../../utils/utils";
 import { tabsFactory } from "../../../00-foundations/factories/tabsFactory";
-export class DsTablist extends Mixin(tabsFactory) {
+import { componentFactory } from "../../../00-foundations/factories/componentFactory";
+export class DsTablist extends Mixin(componentFactory('ds-tablist'), tabsFactory) {
     constructor() {
         super();
     }
@@ -37,10 +38,10 @@ export class DsTablist extends Mixin(tabsFactory) {
     async tabDisconnected() {
         this.setButtonsVisibility(this.scrollableElement);
     }
-    handleResize() {
+    handleWindowResize() {
         this.throttledSetButtonsVisibility(this.scrollableElement);
     }
-    handleTabClick(event) {
+    handleDsTabClick(event) {
         event.stopPropagation();
         if (event.detail.tabId === this.context?.currentTab)
             return;
@@ -67,7 +68,7 @@ export class DsTablist extends Mixin(tabsFactory) {
         const max = this.scrollableElement.scrollWidth - this.scrollableElement.clientWidth;
         this.scrollableElement.scrollTo({ left: Math.max(0, Math.min(next, max)), behavior: 'auto' });
     };
-    handleTabFocus(event) {
+    handleDsTabFocus(event) {
         event.stopPropagation();
         this.scrollTabIntoView(event.target);
     }
@@ -75,7 +76,7 @@ export class DsTablist extends Mixin(tabsFactory) {
         event.stopPropagation();
         const activeTab = event.target.closest(this.DsTab);
         const tabs = Array.from(this.el.querySelectorAll(this.DsTab));
-        const activeTabIndex = tabs.indexOf(activeTab);
+        const activeTabIndex = activeTab ? tabs.indexOf(activeTab) : -1;
         if (activeTabIndex === -1)
             return;
         let nextIndex = 0;
@@ -140,13 +141,13 @@ export class DsTablist extends Mixin(tabsFactory) {
         const baseClass = cx('ds-tablist');
         const scrollableClass = `${baseClass}__scrollable`;
         const buttonClass = `${baseClass}__button`;
-        return (h("div", { key: '0b8939092cebd964f1d059c39e96356c9667b30b', class: baseClass }, h("div", { key: '95df4f0c08c9d7683b7ad33c619f6316a01645bd', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
+        return (h("div", { key: 'facb4e5c32ae467b6a5696fdfcb32ace65174167', class: baseClass }, h("div", { key: 'e16066822780aa24e748ec7086b3aac920efd364', 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: '4f8a069e168c9de0387347d08c618abd0b6167a6' })), h("div", { key: '53fb3cbeca8828a5e8cb29252b62458902b2d292', 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: '460bd1c6016cdf0e6580d5982e9f4fd9137bd259' })), h("div", { key: '53c5fe325aacf605633dbe24ce86b43f779c8606', 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: '4a4b57eb33f521de240bb884252b0c557c03e7be', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
+            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: 'fab24ecfa00273931d5623479ac2bc7a45777e1c', 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'))));
@@ -277,19 +278,19 @@ export class DsTablist extends Mixin(tabsFactory) {
     static get listeners() {
         return [{
                 "name": "resize",
-                "method": "handleResize",
+                "method": "handleWindowResize",
                 "target": "window",
                 "capture": false,
                 "passive": true
             }, {
                 "name": "dsTabClick",
-                "method": "handleTabClick",
+                "method": "handleDsTabClick",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsTabFocus",
-                "method": "handleTabFocus",
+                "method": "handleDsTabFocus",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -4,7 +4,7 @@
   display: block;
 }
-.ds-tabpanel__GqWYnG {
+.ds-tabpanel__bQiYWO {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,26 +12,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-tabpanel__GqWYnG--container {
+.ds-tabpanel__bQiYWO--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__GqWYnG--padded {
+.ds-tabpanel__bQiYWO--padded {
   padding-block-start: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__GqWYnG--padded {
+  .ds-tabpanel__bQiYWO--padded {
     padding-block-start: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__GqWYnG--container.ds-tabpanel__GqWYnG--padded {
+.ds-tabpanel__bQiYWO--container.ds-tabpanel__bQiYWO--padded {
   padding: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__GqWYnG--container.ds-tabpanel__GqWYnG--padded {
+  .ds-tabpanel__bQiYWO--container.ds-tabpanel__bQiYWO--padded {
     padding: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__GqWYnG[hidden] {
+.ds-tabpanel__bQiYWO[hidden] {
   display: none;
 }

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

@@ -1,8 +1,9 @@
 import { h, Mixin } from "@stencil/core";
+import classNames from "classnames";
 import { cx } from "../../../../utils/cx";
 import { tabsFactory } from "../../../00-foundations/factories/tabsFactory";
-import classNames from "classnames";
-export class DsTabpanel extends Mixin(tabsFactory) {
+import { componentFactory } from "../../../00-foundations/factories/componentFactory";
+export class DsTabpanel extends Mixin(componentFactory('ds-tabpanel'), tabsFactory) {
     constructor() {
         super();
     }
@@ -12,10 +13,10 @@ export class DsTabpanel extends Mixin(tabsFactory) {
     dsPadded = true;
     render() {
         const baseClass = cx('ds-tabpanel');
-        return (h("div", { key: '4cc70db3ba4838fa67c1986e43ad49e08826ae64', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '0381cf5fbffeaa9715ded94760d23a38af385edf', 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: '57d406d1c0311824c2ea622009dfc937e1da39da' })));
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '7973c2edf975b23ac583c5fa16682e428ff2f0aa' })));
     }
     static get is() { return "ds-tabpanel"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -2,7 +2,7 @@ import { h, Mixin } from "@stencil/core";
 import { cx } from "../../../utils/cx";
 import { provideTabsContext, storeTabsContext } from "./tabsContext";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
-export class DsTabs extends Mixin(componentFactory('ds-tabs')) {
+export class DsTabs extends Mixin(componentFactory('ds-tabs', { stopRootTracking: true })) {
     constructor() {
         super();
     }
@@ -10,7 +10,7 @@ export class DsTabs extends Mixin(componentFactory('ds-tabs')) {
     dsCurrentTab;
     dsCurrentTabPanel;
     dsVariant = 'container';
-    handleTabChange(event) {
+    handleDsTabChange(event) {
         event.stopPropagation();
     }
     createContext = () => {
@@ -39,7 +39,7 @@ export class DsTabs extends Mixin(componentFactory('ds-tabs')) {
     }
     render() {
         const baseClass = cx('ds-tabs');
-        return (h("div", { key: 'a6821a48fca0e99284e97cadaa5def29dc0d4c08', class: baseClass }, h("slot", { key: '2261f98a9d22f2e75de26831da740c3834bf0e60' })));
+        return (h("div", { key: 'd052d2965d38dbfa76d202898b11acd55d45d16a', class: baseClass }, h("slot", { key: '2c87cb659baf883da5525579609aeb2a4b76949e' })));
     }
     static get is() { return "ds-tabs"; }
     static get encapsulation() { return "scoped"; }
@@ -119,7 +119,7 @@ export class DsTabs extends Mixin(componentFactory('ds-tabs')) {
     static get listeners() {
         return [{
                 "name": "dsTabChange",
-                "method": "handleTabChange",
+                "method": "handleDsTabChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false