@uh-design-system/component-library 1.4.0 → 1.5.0-rc.0

package/dist/cjs/utils-DMgbvnde.js

@@ -0,0 +1,101 @@
+'use strict';
+
+const formatAs = (value, suffix) => (value.endsWith(suffix) ? value : `${value}${suffix}`);
+const formatAsPx = (value) => formatAs(value, 'px');
+const remToPx = (remString) => {
+    const rootFontSize = 16;
+    const rem = parseFloat(remString);
+    return formatAsPx(`${rem * rootFontSize}`);
+};
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
+}
+const debounce = (func, wait = 0, immediate = false) => {
+    let timeout = null;
+    const debounced = (...args) => {
+        clearTimeout(timeout);
+        if (immediate && !timeout) {
+            func(...args);
+        }
+        timeout = setTimeout(function () {
+            timeout = null;
+            if (!immediate) {
+                func(...args);
+            }
+        }, wait);
+    };
+    debounced.cancel = () => {
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+    return debounced;
+};
+const throttle = (func, timeFrame = 0) => {
+    let lastTime = 0;
+    return (...args) => {
+        const now = Date.now();
+        if (now - lastTime >= timeFrame) {
+            func(...args);
+            lastTime = now;
+        }
+    };
+};
+const transformTagName = (tagToBeTransformed, knownUntransformedTag, knownUntransformedTagElementReference) => {
+    const actualTagName = knownUntransformedTagElementReference.tagName.toLowerCase();
+    if (!actualTagName.includes(knownUntransformedTag)) {
+        throw new Error(`knownUntransformedTag mismatch: expected tag to include '${knownUntransformedTag}', ` + `but got '${actualTagName}'`);
+    }
+    const actualCurrentTag = knownUntransformedTagElementReference.tagName.toLowerCase();
+    const knownTagWithoutDesignSystemPrefix = knownUntransformedTag.split(/^ds-/)[1];
+    const targetTagWithoutDesignSystemPrefix = tagToBeTransformed.split(/^ds-/)[1];
+    const [prefix, suffix] = actualCurrentTag.split(knownTagWithoutDesignSystemPrefix);
+    return (prefix + targetTagWithoutDesignSystemPrefix + suffix);
+};
+const declareComponentDependencies = (t) => false;
+const omit = (obj, keys) => {
+    const omitSet = new Set(keys);
+    return Object.fromEntries(Object.entries(obj).filter(([key]) => !omitSet.has(key)));
+};
+const ifDefined = (key, value) => {
+    if (value === undefined || value === null || value === '') {
+        return {};
+    }
+    return { [key]: value };
+};
+const componentOnReady = (el) => {
+    if (el?.componentOnReady) {
+        return el.componentOnReady();
+    }
+    return new Promise(resolve => {
+        requestAnimationFrame(() => resolve(el));
+    });
+};
+function isKey(key, keys, excludes) {
+    const allowedKeys = keys;
+    return allowedKeys.includes(key);
+}
+const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+function isArrowKey(key, excludes) {
+    return isKey(key, arrowKeys);
+}
+const selectionKeys = ['Enter', ' '];
+function isSelectionKey(key, excludes) {
+    return isKey(key, selectionKeys);
+}
+
+exports.componentOnReady = componentOnReady;
+exports.debounce = debounce;
+exports.declareComponentDependencies = declareComponentDependencies;
+exports.idGenerator = idGenerator;
+exports.ifDefined = ifDefined;
+exports.isArrowKey = isArrowKey;
+exports.isSelectionKey = isSelectionKey;
+exports.omit = omit;
+exports.remToPx = remToPx;
+exports.throttle = throttle;
+exports.transformTagName = transformTagName;

package/dist/collection/collection-manifest.json

@@ -33,7 +33,9 @@
     "components/01-base-components/ds-card/ds-card.js",
     "components/01-base-components/ds-chip-group/ds-chip-group.js",
     "components/01-base-components/ds-control-label/ds-control-label.js",
+    "components/01-base-components/ds-datepicker/ds-datepicker-custom/ds-datepicker-custom.js",
     "components/01-base-components/ds-datepicker/ds-datepicker-native/ds-datepicker-native.js",
+    "components/01-base-components/ds-datepicker/ds-datepicker-simple/ds-datepicker-simple.js",
     "components/01-base-components/ds-feedback/ds-feedback.js",
     "components/01-base-components/ds-grid/ds-grid.js",
     "components/01-base-components/ds-group-label/ds-group-label.js",
@@ -354,7 +356,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.3",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/00-foundations/factories/componentFactory.js

@@ -0,0 +1,75 @@
+import { idGenerator } from "../../../utils/utils";
+import { analyticsState } from "../global/analyticsState";
+const COLLECTION_PROBABILITY = 0.5;
+const COLLECTION_STORAGE_KEY = 'uhds_collect_analytics';
+if (window.sessionStorage && window.sessionStorage.getItem(COLLECTION_STORAGE_KEY) === null) {
+    window.sessionStorage.setItem(COLLECTION_STORAGE_KEY, (Math.random() <= COLLECTION_PROBABILITY).toString());
+}
+const generators = new Map();
+let isFlushing = false;
+let isBatchTrackingInitialized = false;
+function flushState() {
+    if (isFlushing)
+        return;
+    const components = analyticsState.getAll();
+    if (components.size === 0)
+        return;
+    isFlushing = true;
+    try {
+        if (!Array.isArray(window._mtm))
+            return;
+        const tracker = window._mtm;
+        const appHost = window.location.hostname;
+        const appName = window._uhdsMatomoAppName;
+        for (const [name, stats] of components.entries()) {
+            tracker.push({
+                'event': 'uhds.components',
+                'uhds.action': 'mounted',
+                'uhds.component': name,
+                'uhds.app_name': appName,
+                'uhds.app_host': appHost,
+                'uhds.instance_key': `${appHost}::${name}`,
+                'uhds.instances_seen': stats.mountEventsTotal,
+            });
+        }
+        analyticsState.clear();
+    }
+    finally {
+        isFlushing = false;
+    }
+}
+function initBatchTracking() {
+    if (isBatchTrackingInitialized)
+        return;
+    globalThis.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden')
+            flushState();
+    });
+    globalThis.addEventListener('pagehide', flushState);
+    globalThis.addEventListener('beforeunload', flushState);
+    isBatchTrackingInitialized = true;
+}
+export const componentFactory = (componentName) => (Base) => {
+    class BaseComponent extends Base {
+        static isFlushing = false;
+        getGenerator() {
+            const name = componentName.trim() || 'ds-component';
+            if (!generators.has(name)) {
+                generators.set(name, idGenerator(name));
+            }
+            return generators.get(name);
+        }
+        getUniqueId() {
+            return this.getGenerator().next().value;
+        }
+        componentMounted() {
+            if (!window._uhdsMatomoAppName)
+                return;
+            if (!window.sessionStorage || window.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === 'false')
+                return;
+            initBatchTracking();
+            analyticsState.incrementMount(componentName);
+        }
+    }
+    return BaseComponent;
+};

package/dist/collection/components/00-foundations/factories/linkFactory.js

@@ -72,7 +72,7 @@ export const linkFactory = (Base) => {
                         "references": {}
                     },
                     "required": false,
-                    "optional": false,
+                    "optional": true,
                     "docs": {
                         "tags": [],
                         "text": "Passed to the `href` attribute of the `a` element"
@@ -90,10 +90,8 @@ export const linkFactory = (Base) => {
                         "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | \"_unfencedTop\"",
                         "references": {
                             "LinkTarget": {
-                                "location": "import",
-                                "path": "../../../utils/link/linkUtils",
-                                "id": "src/utils/link/linkUtils.ts::LinkTarget",
-                                "referenceLocation": "LinkTarget"
+                                "location": "global",
+                                "id": "global::LinkTarget"
                             }
                         }
                     },

package/dist/collection/components/00-foundations/factories/multipleValueFactory.js

@@ -14,7 +14,7 @@ export const multipleValueFactory = (Base) => {
             return this.value;
         }
         withoutValue(value) {
-            if (this.value.includes(value)) {
+            if (this.value?.includes(value)) {
                 return this.value.filter(v => v !== value);
             }
             return this.value;

package/dist/collection/components/00-foundations/global/analyticsState.js

@@ -0,0 +1,22 @@
+const state = new Map();
+const createDefaultStats = () => Object.freeze({
+    mountEventsTotal: 0,
+});
+const getAll = () => state;
+const getOne = (componentName) => state.get(componentName) ?? createDefaultStats();
+const incrementMount = (componentName) => {
+    const prev = getOne(componentName);
+    state.set(componentName, Object.freeze({
+        ...prev,
+        mountEventsTotal: prev.mountEventsTotal + 1,
+    }));
+};
+const clear = () => {
+    state.clear();
+};
+export const analyticsState = {
+    getAll,
+    getOne,
+    incrementMount,
+    clear,
+};

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

@@ -1,23 +1,23 @@
-.ds-accordion__SPFJ1E {
+.ds-accordion__QIDqOT {
   box-sizing: border-box;
   position: relative;
 }
-.ds-accordion__SPFJ1E__title {
+.ds-accordion__QIDqOT__title {
   position: relative;
   display: flex;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-right: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__SPFJ1E__title:not(.ds-accordion__SPFJ1E__title--hide-top-border) .ds-accordion__SPFJ1E__open-button {
+.ds-accordion__QIDqOT__title:not(.ds-accordion__QIDqOT__title--hide-top-border) .ds-accordion__QIDqOT__open-button {
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__SPFJ1E__title--hide-right-border {
+.ds-accordion__QIDqOT__title--hide-right-border {
   border-right: 0;
 }
-.ds-accordion__SPFJ1E__title--hide-left-border {
+.ds-accordion__QIDqOT__title--hide-left-border {
   border-left: 0;
 }
-.ds-accordion__SPFJ1E__title--border-aligned.ds-accordion__SPFJ1E__title--with-background::before {
+.ds-accordion__QIDqOT__title--border-aligned.ds-accordion__QIDqOT__title--with-background::before {
   content: "";
   position: absolute;
   display: block;
@@ -26,7 +26,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__SPFJ1E__title--border-aligned.ds-accordion__SPFJ1E__title--with-background::after {
+.ds-accordion__QIDqOT__title--border-aligned.ds-accordion__QIDqOT__title--with-background::after {
   content: "";
   position: absolute;
   display: block;
@@ -35,43 +35,43 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__SPFJ1E__title--with-background .ds-accordion__SPFJ1E__open-button:not(.ds-accordion__SPFJ1E__open-button--icon-button) {
+.ds-accordion__QIDqOT__title--with-background .ds-accordion__QIDqOT__open-button:not(.ds-accordion__QIDqOT__open-button--icon-button) {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__SPFJ1E__title--with-background:has(.ds-accordion__SPFJ1E__open-button.ds-accordion__SPFJ1E__open-button--icon-button) {
+.ds-accordion__QIDqOT__title--with-background:has(.ds-accordion__QIDqOT__open-button.ds-accordion__QIDqOT__open-button--icon-button) {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__SPFJ1E__title:has(.ds-accordion__SPFJ1E__open-button:hover:not(.ds-accordion__SPFJ1E__open-button--icon-button)) .ds-accordion__SPFJ1E__open-button-container::after {
+.ds-accordion__QIDqOT__title:has(.ds-accordion__QIDqOT__open-button:hover:not(.ds-accordion__QIDqOT__open-button--icon-button)) .ds-accordion__QIDqOT__open-button-container::after {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__SPFJ1E__title:has(.ds-accordion__SPFJ1E__open-button:active:not(.ds-accordion__SPFJ1E__open-button--icon-button)) .ds-accordion__SPFJ1E__open-button-container::after {
+.ds-accordion__QIDqOT__title:has(.ds-accordion__QIDqOT__open-button:active:not(.ds-accordion__QIDqOT__open-button--icon-button)) .ds-accordion__QIDqOT__open-button-container::after {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__SPFJ1E__header-slot {
+.ds-accordion__QIDqOT__header-slot {
   order: 2;
   position: relative;
   display: block;
   width: 100%;
 }
-.ds-accordion__SPFJ1E__header-slot--icon-button {
+.ds-accordion__QIDqOT__header-slot--icon-button {
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__SPFJ1E__header-slot--hide-top-border {
+.ds-accordion__QIDqOT__header-slot--hide-top-border {
   border-top: 0;
 }
-.ds-accordion__SPFJ1E__header-slot--hide-bottom-border {
+.ds-accordion__QIDqOT__header-slot--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__SPFJ1E__open-button-container {
+.ds-accordion__QIDqOT__open-button-container {
   position: relative;
   width: auto;
 }
-.ds-accordion__SPFJ1E__open-button-container:has(.ds-accordion__SPFJ1E__open-button:not(.ds-accordion__SPFJ1E__open-button--icon-button)) {
+.ds-accordion__QIDqOT__open-button-container:has(.ds-accordion__QIDqOT__open-button:not(.ds-accordion__QIDqOT__open-button--icon-button)) {
   width: 100%;
 }
-.ds-accordion__SPFJ1E__open-button-container::after {
+.ds-accordion__QIDqOT__open-button-container::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -79,10 +79,10 @@
   pointer-events: none;
   z-index: 1;
 }
-.ds-accordion__SPFJ1E__open-button-container:has(.ds-accordion__SPFJ1E__open-button--border-aligned:not(.ds-accordion__SPFJ1E__open-button--icon-button))::after {
+.ds-accordion__QIDqOT__open-button-container:has(.ds-accordion__QIDqOT__open-button--border-aligned:not(.ds-accordion__QIDqOT__open-button--icon-button))::after {
   inset-inline: calc(-1 * var(--ds-spacing-small));
 }
-.ds-accordion__SPFJ1E__open-button {
+.ds-accordion__QIDqOT__open-button {
   all: unset;
   position: relative;
   box-sizing: border-box;
@@ -101,37 +101,37 @@
   line-height: var(--ds-lineHeight-large);
   padding: calc(var(--ds-spacing-xSmall) - var(--ds-borderWidth-hairline)) var(--ds-spacing-xSmall);
 }
-.ds-accordion__SPFJ1E__open-button:focus-visible {
+.ds-accordion__QIDqOT__open-button: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) * 0);
 }
-.ds-accordion__SPFJ1E__open-button:hover {
+.ds-accordion__QIDqOT__open-button:hover {
   cursor: pointer;
 }
-.ds-accordion__SPFJ1E__open-button:focus-visible {
+.ds-accordion__QIDqOT__open-button:focus-visible {
   z-index: 1;
 }
-.ds-accordion__SPFJ1E__open-button--default {
+.ds-accordion__QIDqOT__open-button--default {
   font-size: var(--ds-fontSize-16);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__SPFJ1E__open-button--default {
+  .ds-accordion__QIDqOT__open-button--default {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-accordion__SPFJ1E__open-button--compact {
+.ds-accordion__QIDqOT__open-button--compact {
   font-size: var(--ds-fontSize-14);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__SPFJ1E__open-button--compact {
+  .ds-accordion__QIDqOT__open-button--compact {
     font-size: var(--ds-fontSize-16);
   }
 }
-.ds-accordion__SPFJ1E__open-button--border-aligned:not(.ds-accordion__SPFJ1E__open-button--icon-button) {
+.ds-accordion__QIDqOT__open-button--border-aligned:not(.ds-accordion__QIDqOT__open-button--icon-button) {
   padding-inline: 0;
 }
-.ds-accordion__SPFJ1E__open-button--border-aligned:not(.ds-accordion__SPFJ1E__open-button--icon-button)::before {
+.ds-accordion__QIDqOT__open-button--border-aligned:not(.ds-accordion__QIDqOT__open-button--icon-button)::before {
   content: "";
   position: absolute;
   display: block;
@@ -140,7 +140,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__SPFJ1E__open-button--border-aligned:not(.ds-accordion__SPFJ1E__open-button--icon-button)::after {
+.ds-accordion__QIDqOT__open-button--border-aligned:not(.ds-accordion__QIDqOT__open-button--icon-button)::after {
   content: "";
   position: absolute;
   display: block;
@@ -149,82 +149,82 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__SPFJ1E__title--with-background .ds-accordion__SPFJ1E__open-button--border-aligned:not(.ds-accordion__SPFJ1E__open-button--icon-button)::before, .ds-accordion__SPFJ1E__title--with-background .ds-accordion__SPFJ1E__open-button--border-aligned:not(.ds-accordion__SPFJ1E__open-button--icon-button)::after {
+.ds-accordion__QIDqOT__title--with-background .ds-accordion__QIDqOT__open-button--border-aligned:not(.ds-accordion__QIDqOT__open-button--icon-button)::before, .ds-accordion__QIDqOT__title--with-background .ds-accordion__QIDqOT__open-button--border-aligned:not(.ds-accordion__QIDqOT__open-button--icon-button)::after {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__SPFJ1E__open-button--hide-bottom-border {
+.ds-accordion__QIDqOT__open-button--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__SPFJ1E__open-button--icon-button {
+.ds-accordion__QIDqOT__open-button--icon-button {
   display: inline-flex;
   width: auto;
   height: 100%;
   order: 1;
 }
-.ds-accordion__SPFJ1E__open-button--icon-button:hover {
+.ds-accordion__QIDqOT__open-button--icon-button:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__SPFJ1E__open-button--icon-button:active {
+.ds-accordion__QIDqOT__open-button--icon-button:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__SPFJ1E__open-button__icon--default {
+.ds-accordion__QIDqOT__open-button__icon--default {
   padding-block: var(--ds-spacing-3xSmall);
 }
-.ds-accordion__SPFJ1E__open-button__header-slot {
+.ds-accordion__QIDqOT__open-button__header-slot {
   display: inline-block;
   width: 100%;
 }
-.ds-accordion__SPFJ1E__open-button__header-slot--default {
+.ds-accordion__QIDqOT__open-button__header-slot--default {
   padding-block: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__SPFJ1E__open-button__header-slot--default {
+  .ds-accordion__QIDqOT__open-button__header-slot--default {
     padding-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-accordion__SPFJ1E__open-button__header-slot--compact {
+.ds-accordion__QIDqOT__open-button__header-slot--compact {
   padding-block: 0.0625rem; /* 1px */
 }
 @media (min-width: 60rem) {
-  .ds-accordion__SPFJ1E__open-button__header-slot--compact {
+  .ds-accordion__QIDqOT__open-button__header-slot--compact {
     padding-block: 0;
   }
 }
-.ds-accordion__SPFJ1E__panel {
+.ds-accordion__QIDqOT__panel {
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-right: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__SPFJ1E__panel--hide-right-border {
+.ds-accordion__QIDqOT__panel--hide-right-border {
   border-right: 0;
 }
-.ds-accordion__SPFJ1E__panel--hide-left-border {
+.ds-accordion__QIDqOT__panel--hide-left-border {
   border-left: 0;
 }
-.ds-accordion__SPFJ1E__panel--expanded {
+.ds-accordion__QIDqOT__panel--expanded {
   display: block;
 }
-.ds-accordion__SPFJ1E__panel--with-background {
+.ds-accordion__QIDqOT__panel--with-background {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__SPFJ1E ::slotted([slot=header]) {
+.ds-accordion__QIDqOT ::slotted([slot=header]) {
   color: var(--ds-textColor-default);
 }
-.ds-accordion__SPFJ1E__content {
+.ds-accordion__QIDqOT__content {
   position: relative;
   color: var(--ds-textColor-default);
   padding: var(--ds-accordion-content-padding, var(--ds-spacing-2xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall));
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__SPFJ1E__content--hide-bottom-border {
+.ds-accordion__QIDqOT__content--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__SPFJ1E__content--has-close-button {
+.ds-accordion__QIDqOT__content--has-close-button {
   padding-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-accordion__SPFJ1E__content--border-aligned {
+.ds-accordion__QIDqOT__content--border-aligned {
   padding-inline: 0;
 }
-.ds-accordion__SPFJ1E__content--border-aligned::before {
+.ds-accordion__QIDqOT__content--border-aligned::before {
   content: "";
   position: absolute;
   display: block;
@@ -233,7 +233,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__SPFJ1E__content--border-aligned::after {
+.ds-accordion__QIDqOT__content--border-aligned::after {
   content: "";
   position: absolute;
   display: block;
@@ -242,10 +242,10 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__SPFJ1E__content--with-background::before, .ds-accordion__SPFJ1E__content--with-background::after {
+.ds-accordion__QIDqOT__content--with-background::before, .ds-accordion__QIDqOT__content--with-background::after {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__SPFJ1E__close-button {
+.ds-accordion__QIDqOT__close-button {
   display: flex;
   flex-direction: row;
   padding-block-start: var(--ds-spacing-2xSmall);
@@ -253,16 +253,16 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   width: max-content;
 }
-.ds-accordion__SPFJ1E {
+.ds-accordion__QIDqOT {
   /*
     Utility styles
   */
 }
-.ds-accordion__SPFJ1E ::slotted(div[slot=header][class*=toc]) {
+.ds-accordion__QIDqOT ::slotted(div[slot=header][class*=toc]) {
   display: flex;
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-accordion__SPFJ1E ::slotted(ul[slot=content][class*=toc]) {
+.ds-accordion__QIDqOT ::slotted(ul[slot=content][class*=toc]) {
   display: flex;
   flex-direction: column;
   gap: var(--ds-spacing-small);

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

@@ -1,17 +1,20 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
-import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
+import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { getLanguage } from "../../../store";
-const dsAccordionIdGenerator = idGenerator('ds-accordion');
-export class DsAccordion {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsAccordion extends Mixin(componentFactory('ds-accordion')) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     el;
     dsVariant = 'default';
     dsBorderAligned = false;
     dsOpenByDefault = false;
-    dsId = dsAccordionIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsHeadingLevel = 2;
     dsUseCloseButton = false;
     dsCloseButtonLabel;
@@ -60,6 +63,9 @@ export class DsAccordion {
             ...inheritAttributes(this, this.el),
         };
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     watchHandler(isExpanded) {
         if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
             this.headerButtonRef.focus();
@@ -113,21 +119,21 @@ export class DsAccordion {
     }
     render() {
         const baseClass = cx('ds-accordion');
-        return (h("div", { key: 'b7cc6ef132e65aa26faa5d7c2a8271f0362bfb14', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
+        return (h("div", { key: '1a79a3a29b1837cb83898e38a8b4a675a24c4cf3', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
                 [`${baseClass}--expanded`]: this.isExpanded,
-            }), ...this.inheritedAttributes }, h("div", { key: '3ab729eceba8129e9a085298d9508db96e301868', class: `${baseClass}__item` }, this.renderHeading(baseClass), h("div", { key: '4f784f836397c8390886b90ecd06aac1d0efe7bc', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
+            }), ...this.inheritedAttributes }, h("div", { key: 'f268e14d1eace0f1674aba518cb678086cff5ba9', class: `${baseClass}__item` }, this.renderHeading(baseClass), h("div", { key: '821be48cf853910c9f764fe3a7ac56acce8f2060', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
                 [`${baseClass}__panel--expanded`]: this.isExpanded,
                 [`${baseClass}__panel--with-background`]: this.dsContentHasBackground,
                 [`${baseClass}__panel--hide-right-border`]: this.dsHideRightBorder || this.dsHideContentBorders,
                 [`${baseClass}__panel--hide-left-border`]: this.dsHideLeftBorder || this.dsHideContentBorders,
-            }), hidden: !this.isExpanded }, h("div", { key: '33614a6e82bfee93c85d48219136a3946073281e', class: classNames(`${baseClass}__content`, {
+            }), hidden: !this.isExpanded }, h("div", { key: '530b319ced7cb507ff83bb41bfbb92de935674b4', class: classNames(`${baseClass}__content`, {
                 'ds-bodytext-lg': this.dsVariant === 'default',
                 'ds-bodytext-md': this.dsVariant === 'compact',
                 [`${baseClass}__content--border-aligned`]: this.dsBorderAligned,
                 [`${baseClass}__content--with-background`]: this.dsContentHasBackground,
                 [`${baseClass}__content--hide-bottom-border`]: this.dsHideBottomBorder || this.dsHideContentBorders,
                 [`${baseClass}__content--has-close-button`]: this.dsUseCloseButton,
-            }) }, h("slot", { key: '6fb4699c56d9e68e608ba3ee8b9d0cd9e1b8e204', name: "content" }), this.dsUseCloseButton && (h(this.DsButton, { key: 'e1cee8daae139e312c12d9102dd5d400b7ee7940', id: `${this.dsId}-close-button`, class: `${baseClass}__close-button`, dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel || this.close, dsSize: "small", dsType: "button" })))))));
+            }) }, h("slot", { key: '74d60fc517465d8d88483d7ff5337f0b3b1ae28e', name: "content" }), this.dsUseCloseButton && (h(this.DsButton, { key: '2b4614d52c3a6dcd2ea469f3760756fd314c23d6', id: `${this.dsId}-close-button`, class: `${baseClass}__close-button`, dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel || this.close, dsSize: "small", dsType: "button" })))))));
     }
     static get is() { return "ds-accordion"; }
     static get encapsulation() { return "scoped"; }
@@ -221,7 +227,7 @@ export class DsAccordion {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "dsAccordionIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsHeadingLevel": {
                 "type": "number",

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list/ds-action-list.css

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

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-divider/ds-action-list-divider.css

@@ -8,7 +8,7 @@
   display: block;
 }
 
-.ds-action-list-divider__SPFJ1E {
+.ds-action-list-divider__QIDqOT {
   all: initial;
   display: revert;
   box-sizing: border-box;

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-group-title/ds-action-list-group-title.css

@@ -8,7 +8,7 @@
   display: block;
 }
 
-.ds-action-list-group-title__SPFJ1E {
+.ds-action-list-group-title__QIDqOT {
   all: initial;
   display: revert;
   box-sizing: border-box;