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

package/dist/collection/components/01-base-components/generated-icons/ds-icon-zoom-in/ds-icon-zoom-in.js

@@ -6,7 +6,7 @@ export class DsIconZoomIn {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '2b39609c48f7cdf9077d009df14d7493d9f93c58', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '2c37b0af7e59643440cdd812ba9b20171aa2e29d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '2fada603dfa3c7a8fec594ce8c17c8392145f6b2', d: "M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406Zm-31.85-73v-77H263v-60h77v-77h60v77h77v60.5h-77v76.5h-60.5Z" }))));
+        return (h(Host, { key: '2536f61e2558dfbbbe56caaa25b8ff4d8b26d467', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9196ba5801793a7559e6d76213b1f0421325e148', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'd1f78ad0b1434497f32943b9cfbcd57e50b5b264', d: "M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406Zm-31.85-73v-77H263v-60h77v-77h60v77h77v60.5h-77v76.5h-60.5Z" }))));
     }
     static get is() { return "ds-icon-zoom-in"; }
     static get properties() {
@@ -20,7 +20,7 @@ export class DsIconZoomIn {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -78,7 +78,7 @@ export class DsIconZoomIn {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

package/dist/collection/components/01-base-components/generated-icons/ds-icon-zoom-in-map/ds-icon-zoom-in-map.js

@@ -6,7 +6,7 @@ export class DsIconZoomInMap {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '81efc048d1a700e81a6b37f1c8ba5bd037a29e6d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'a3c11fe2ba20f3aace888875233c29830c55bd4e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'e534a8437fa862ae03753914d06317d5feaabfcd', d: "m147-79-68-68 130-130H95v-94h276v276h-94v-114L147-79Zm666 0L684-209v114h-95v-276h277v94H751l130 130-68 68ZM95-589v-95h114L79-813l68-68 130 130v-115h94v277H95Zm494 0v-277h95v115l130-131 68 68-131 130h115v95H589Z" }))));
+        return (h(Host, { key: 'dc1ac36aae3baf0c784ead47b4037587088c2e25', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b218b6f3f8293a219696d0f51092eb60233195c3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '098c525880d2123e17d8265514feb6edb8fbb05f', d: "m147-79-68-68 130-130H95v-94h276v276h-94v-114L147-79Zm666 0L684-209v114h-95v-276h277v94H751l130 130-68 68ZM95-589v-95h114L79-813l68-68 130 130v-115h94v277H95Zm494 0v-277h95v115l130-131 68 68-131 130h115v95H589Z" }))));
     }
     static get is() { return "ds-icon-zoom-in-map"; }
     static get properties() {
@@ -20,7 +20,7 @@ export class DsIconZoomInMap {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -78,7 +78,7 @@ export class DsIconZoomInMap {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

package/dist/collection/components/01-base-components/generated-icons/ds-icon-zoom-out/ds-icon-zoom-out.js

@@ -6,7 +6,7 @@ export class DsIconZoomOut {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '4b360cbfb88248224443255aad967d080f5761e6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '4cb97bf40d7c65a5bea540966e885af8bdfe44b1', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '2fd4a3357ee86fea249a8daa7c7a8cdbc06f84d2', d: "M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406ZM269-556v-60h201v60H269Z" }))));
+        return (h(Host, { key: 'a997a07e0d2bb579ef28dc4a49f2e7deed931089', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '81fed5360f8c3d288248672dc8404d3583712601', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '9623747205bd6d661aad916e5d3b12f56949b284', d: "M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406ZM269-556v-60h201v60H269Z" }))));
     }
     static get is() { return "ds-icon-zoom-out"; }
     static get properties() {
@@ -20,7 +20,7 @@ export class DsIconZoomOut {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -78,7 +78,7 @@ export class DsIconZoomOut {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

package/dist/collection/components/01-base-components/generated-icons/ds-icon-zoom-out-map/ds-icon-zoom-out-map.js

@@ -6,7 +6,7 @@ export class DsIconZoomOutMap {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '02976d8fc8f8b246a0aeefec6b6d76c8289b0ac5', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '06399fd3d8d3b6b46ad5d0d5fa62d63aae5e7d3e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'b2ae04d4e3621cfc3a99529f2376cb69589ff0d3', d: "M95-95v-276h94v115l131-131 67 67-131 131h115v94H95Zm494 0v-94h115L574-319l67-67 130 130v-115h95v276H589ZM319-574 189-704v115H95v-277h276v95H256l130 130-67 67Zm322 0-67-67 130-130H589v-95h277v277h-95v-115L641-574Z" }))));
+        return (h(Host, { key: '31d053b404b617dbd712c7dd8c8450e31682f0ad', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '47c0de6a55d473fc4c2c645a5280f3a97ad035d8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'd6186b46f9d3159d5f00c72809941a5541178da1', d: "M95-95v-276h94v115l131-131 67 67-131 131h115v94H95Zm494 0v-94h115L574-319l67-67 130 130v-115h95v276H589ZM319-574 189-704v115H95v-277h276v95H256l130 130-67 67Zm322 0-67-67 130-130H589v-95h277v277h-95v-115L641-574Z" }))));
     }
     static get is() { return "ds-icon-zoom-out-map"; }
     static get properties() {
@@ -20,7 +20,7 @@ export class DsIconZoomOutMap {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -78,7 +78,7 @@ export class DsIconZoomOutMap {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

package/dist/collection/constants.js

@@ -5,3 +5,6 @@ export const BACKDROP_TRANSITION_IN_DURATION = 180;
 export const BACKDROP_TRANSITION_OUT_DURATION = 160;
 export const MODAL_TRANSITION_IN_DURATION = 220;
 export const MODAL_TRANSITION_OUT_DURATION = BACKDROP_TRANSITION_OUT_DURATION;
+export const UHDS_APP_NAME_ATTR = 'data-uhds-app-name';
+export const CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS = 140;
+export const CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS = 100;

package/dist/collection/index.js

@@ -1,3 +1,3 @@
 export { default as appData } from './data.json';
-export { componentOnReady } from './utils/utils';
+export { componentOnReady, injectMatomoScript } from './utils/utils';
 export { calculatePaginationPages } from './utils/pagination/paginationUtils';

package/dist/collection/store.js

@@ -7,9 +7,12 @@ export const defaultLanguage = 'en';
 const initialState = {
     language: defaultLanguage,
 };
-const { state, dispose, onChange } = createStore({
+const store = createStore({
     ...initialState,
 });
+const state = store.state;
+const dispose = store.dispose;
+const onChange = store.onChange;
 export const getLanguage = () => state.language;
 export const setLanguage = (language) => {
     if (!isLanguage(language)) {

package/dist/collection/testing/screenshotCommand.js

@@ -0,0 +1,78 @@
+import { mkdirSync, readFileSync, writeFileSync, existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+const FAILURE_THRESHOLD_RATIO = 0.0025;
+const getSnapshotsDir = (ctx) => {
+    return join(ctx.project.config.root, '__snapshots__');
+};
+const isUpdateMode = (ctx) => {
+    if (process.env.UPDATE_SNAPSHOTS === 'true')
+        return true;
+    const project = ctx.project;
+    if (project.config?.snapshotOptions?.updateSnapshot === 'all')
+        return true;
+    if (project.config?.update === true)
+        return true;
+    if (project.vitest?.config?.snapshotOptions?.updateSnapshot === 'all')
+        return true;
+    if (project.vitest?.config?.update === true)
+        return true;
+    return false;
+};
+export const matchScreenshotCommand = async (ctx, base64, identifier) => {
+    if (!identifier) {
+        return { matched: false, reason: 'matchScreenshot called without identifier' };
+    }
+    const snapshotsDir = getSnapshotsDir(ctx);
+    const baselinePath = join(snapshotsDir, `${identifier}.png`);
+    const diffPath = join(snapshotsDir, '__diff_output__', `${identifier}.png`);
+    const update = isUpdateMode(ctx);
+    const incoming = Buffer.from(base64, 'base64');
+    if (!existsSync(baselinePath)) {
+        mkdirSync(dirname(baselinePath), { recursive: true });
+        writeFileSync(baselinePath, incoming);
+        return { matched: true };
+    }
+    const baseline = PNG.sync.read(readFileSync(baselinePath));
+    const candidate = PNG.sync.read(incoming);
+    const dimensionMismatch = baseline.width !== candidate.width || baseline.height !== candidate.height;
+    if (dimensionMismatch) {
+        if (update) {
+            writeFileSync(baselinePath, incoming);
+            return { matched: true };
+        }
+        mkdirSync(dirname(diffPath), { recursive: true });
+        writeFileSync(diffPath, incoming);
+        return {
+            matched: false,
+            reason: `Image dimension mismatch for "${identifier}": baseline ${baseline.width}x${baseline.height} vs candidate ${candidate.width}x${candidate.height}`,
+            diffPath,
+        };
+    }
+    const { width, height } = baseline;
+    const diff = new PNG({ width, height });
+    const diffPixels = pixelmatch(baseline.data, candidate.data, diff.data, width, height, {
+        threshold: 0.2,
+        includeAA: false,
+    });
+    const totalPixels = width * height;
+    const diffRatio = diffPixels / totalPixels;
+    const exceedsThreshold = diffRatio > FAILURE_THRESHOLD_RATIO;
+    if (update) {
+        if (exceedsThreshold) {
+            writeFileSync(baselinePath, incoming);
+        }
+        return { matched: true };
+    }
+    if (exceedsThreshold) {
+        mkdirSync(dirname(diffPath), { recursive: true });
+        writeFileSync(diffPath, PNG.sync.write(diff));
+        return {
+            matched: false,
+            reason: `Screenshot "${identifier}" differs from baseline by ${(diffRatio * 100).toFixed(4)}% (${diffPixels}/${totalPixels} pixels), threshold ${(FAILURE_THRESHOLD_RATIO * 100).toFixed(4)}%`,
+            diffPath,
+        };
+    }
+    return { matched: true };
+};

package/dist/collection/utils/attributes/attributes.js

@@ -1,7 +1,7 @@
-const kebabToCamelCase = (str) => str.replace(/-./g, x => x[1].toUpperCase());
+const kebabToCamelCase = (str) => str.replaceAll(/-([a-z])/gi, (_, ch) => ch.toUpperCase());
 export const inheritSpecifiedAttributes = (el, attributes = []) => {
     const attributeObject = {};
-    attributes.forEach(attr => {
+    for (const attr of attributes) {
         if (el.hasAttribute(attr)) {
             const value = el.getAttribute(attr);
             if (value !== null) {
@@ -9,7 +9,7 @@ export const inheritSpecifiedAttributes = (el, attributes = []) => {
             }
             el.removeAttribute(attr);
         }
-    });
+    }
     return attributeObject;
 };
 export const ariaAttributes = [
@@ -65,7 +65,7 @@ export const ariaAttributes = [
     'aria-valuenow',
     'aria-valuetext',
 ];
-const booleanishAriaAttributes = [
+const booleanishAriaAttributes = new Set([
     'aria-busy',
     'aria-atomic',
     'aria-disabled',
@@ -76,15 +76,20 @@ const booleanishAriaAttributes = [
     'aria-selected',
     'aria-multiline',
     'aria-multiselectable',
-];
-const getAriaAttributeDescriptions = (attr) => `**@deprecated** Use \`${kebabToCamelCase(`ds-${attr}`)}\` instead`;
-export const getAriaAttributeArgTypes = (attrs) => attrs.reduce((acc, curr) => ((acc[kebabToCamelCase(curr)] = {
-    control: booleanishAriaAttributes.includes(curr) ? 'boolean' : 'text',
-    name: curr,
-    description: getAriaAttributeDescriptions(curr),
-    table: { category: 'attributes' },
-}),
-    acc), {});
+]);
+const getAriaAttributeDescriptions = (attr) => {
+    const camelCaseAttr = kebabToCamelCase(`ds-${attr}`);
+    return `**@deprecated** Use \`${camelCaseAttr}\` instead`;
+};
+export const getAriaAttributeArgTypes = (attrs) => attrs.reduce((acc, curr) => {
+    acc[kebabToCamelCase(curr)] = {
+        control: booleanishAriaAttributes.has(curr) ? 'boolean' : 'text',
+        name: curr,
+        description: getAriaAttributeDescriptions(curr),
+        table: { category: 'attributes' },
+    };
+    return acc;
+}, {});
 export const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = [...ariaAttributes];
     if (ignoreList && ignoreList.length > 0) {
@@ -96,11 +101,11 @@ export const inheritAttributes = (component, el, attrsToIgnore = []) => {
     const attributesToIgnore = new Set(['id', 'class', 'style', ...ariaAttributes, ...attrsToIgnore]);
     const propsToIgnore = new Set(Object.keys(component));
     const attributes = {};
-    Array.from(el.attributes).forEach(attr => {
+    for (const attr of Array.from(el.attributes)) {
         if (!propsToIgnore.has(kebabToCamelCase(attr.name)) && !attributesToIgnore.has(attr.name)) {
             attributes[attr.name] = el.getAttribute(attr.name);
             el.removeAttribute(attr.name);
         }
-    });
+    }
     return attributes;
 };

package/dist/collection/utils/datepicker/datepickerUtils.js

@@ -15,18 +15,18 @@ export const parseISODate = (dateString) => {
     let monthStr;
     let dayStr;
     if (parts[0] === '') {
-        year = -parseInt(parts[1], 10);
+        year = -Number.parseInt(parts[1], 10);
         monthStr = parts[2];
         dayStr = parts[3];
     }
     else {
-        year = parseInt(parts[0], 10);
+        year = Number.parseInt(parts[0], 10);
         monthStr = parts[1];
         dayStr = parts[2];
     }
-    const month = parseInt(monthStr, 10);
-    const day = parseInt(dayStr, 10);
-    if (isNaN(year) || isNaN(month) || isNaN(day))
+    const month = Number.parseInt(monthStr, 10);
+    const day = Number.parseInt(dayStr, 10);
+    if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day))
         return null;
     return createDate(year, month - 1, day);
 };
@@ -56,17 +56,17 @@ export const parseInputDate = (input) => {
     let day;
     let month;
     let year;
-    if (parts[0].length === 4 && !isNaN(parseInt(parts[0], 10))) {
-        year = parseInt(parts[0], 10);
-        month = parseInt(parts[1], 10);
-        day = parseInt(parts[2], 10);
+    if (parts[0].length === 4 && !Number.isNaN(Number.parseInt(parts[0], 10))) {
+        year = Number.parseInt(parts[0], 10);
+        month = Number.parseInt(parts[1], 10);
+        day = Number.parseInt(parts[2], 10);
     }
     else {
-        day = parseInt(parts[0], 10);
-        month = parseInt(parts[1], 10);
-        year = parseInt(parts[2], 10);
+        day = Number.parseInt(parts[0], 10);
+        month = Number.parseInt(parts[1], 10);
+        year = Number.parseInt(parts[2], 10);
     }
-    if (isNaN(day) || isNaN(month) || isNaN(year))
+    if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year))
         return null;
     if (day < 1 || day > 31 || month < 1 || month > 12)
         return null;

package/dist/collection/utils/pagination/paginationUtils.js

@@ -12,8 +12,7 @@ export const calculatePaginationPages = (currentPage, totalPages) => {
         for (let i = 2; i <= 7; i++) {
             pages.push(i);
         }
-        pages.push('ellipsis');
-        pages.push(totalPages);
+        pages.push('ellipsis', totalPages);
         return pages;
     }
     if (currentPage >= totalPages - 4) {
@@ -27,8 +26,7 @@ export const calculatePaginationPages = (currentPage, totalPages) => {
     for (let i = currentPage - 2; i <= currentPage + 2; i++) {
         pages.push(i);
     }
-    pages.push('ellipsis');
-    pages.push(totalPages);
+    pages.push('ellipsis', totalPages);
     return pages;
 };
 export const pagination = () => {
@@ -131,3 +129,13 @@ export const currentPage = () => {
             return 'Current page';
     }
 };
+export const pageNumber = (pageNumber) => {
+    switch (getLanguage()) {
+        case 'fi':
+            return `Sivu ${pageNumber}`;
+        case 'sv':
+            return `Sida ${pageNumber}`;
+        default:
+            return `Page ${pageNumber}`;
+    }
+};

package/dist/collection/utils/storybook/storybookUtils.js

@@ -1,3 +1,9 @@
+import { icons } from "../../components/00-foundations/icons/iconList";
+export const storybookA11yMode = {
+    todo: 'todo',
+    error: 'error',
+    off: 'off',
+};
 export const generateLoremIpsum = ({ paragraphs = 1, wordsPerParagraph = 50, startWithLorem = true, consistent = false } = {}) => {
     const loremWords = [
         'lorem',
@@ -72,7 +78,7 @@ export const generateLoremIpsum = ({ paragraphs = 1, wordsPerParagraph = 50, sta
             };
         })()
         : () => Math.floor(Math.random() * loremWords.length);
-    const generateParagraph = length => {
+    const generateParagraph = (length) => {
         const words = [];
         for (let i = 0; i < length; i++) {
             words.push(loremWords[randomGenerator()]);
@@ -123,7 +129,7 @@ export const getCssVariablesFromStyleSheet = (categories) => {
     }
     const seen = new Set();
     const variables = [];
-    const regexPattern = new RegExp(`--ds-(${Object.keys(categories).join('|')})(?:-[\\w]+)*:\\s*[^;]+`, 'g');
+    const regexPattern = new RegExp(String.raw `--ds-(${Object.keys(categories).join('|')})(?:-[\w]+)*:\s*[^;]+`, 'g');
     const matches = cssText.match(regexPattern);
     if (matches) {
         for (const match of matches) {
@@ -157,3 +163,4 @@ export const getEventsStoryStyles = () => `
     cursor: pointer;
   }
 `;
+export const sortedIconNames = icons.map(icon => icon.name).sort((a, b) => a.localeCompare(b));

package/dist/collection/utils/tests/testUtils.js

@@ -1,23 +1,23 @@
-import { fn, expect, waitFor, within } from "@storybook/test";
+import { fn, expect, waitFor, within } from "storybook/test";
 const findWhenRendered = async (customElem, selector, isShadow = true) => {
     const webc = customElem.querySelector(selector);
     await waitFor(() => {
         if (isShadow) {
-            const shadowRootFirstEl = webc.shadowRoot.firstElementChild;
+            const shadowRootFirstEl = webc?.shadowRoot?.firstElementChild;
             return expect(shadowRootFirstEl).toContainElement(shadowRootFirstEl);
         }
-        const hostFirstEl = webc.firstElementChild;
+        const hostFirstEl = webc?.firstElementChild;
         return expect(hostFirstEl).toContainElement(hostFirstEl);
     }, { timeout: 5000 });
     return webc;
 };
 export const withinShadowRoot = async (customElem, selector) => {
     const webc = await findWhenRendered(customElem, selector);
-    return within(webc.shadowRoot);
+    return within(webc?.shadowRoot);
 };
 export const getShadowRoot = async (customElem, selector) => {
     const webc = await findWhenRendered(customElem, selector);
-    return webc.shadowRoot;
+    return webc?.shadowRoot;
 };
 export const getDsElem = async (customElem, selector) => {
     const webc = await findWhenRendered(customElem, selector, false);
@@ -26,7 +26,7 @@ export const getDsElem = async (customElem, selector) => {
 export const addMockEventListener = (container, selector, eventName) => {
     const elem = container.querySelector(selector);
     const mockFunction = fn();
-    elem.addEventListener(eventName, mockFunction);
+    elem?.addEventListener(eventName, mockFunction);
     return mockFunction;
 };
 export const waitForElem = async (elem, selector) => {

package/dist/collection/utils/utils.js

@@ -1,24 +1,16 @@
+import { UHDS_APP_NAME_ATTR } from "../constants";
+export const isBrowser = () => globalThis.window !== undefined && typeof document !== 'undefined';
 export const formatAs = (value, suffix) => (value.endsWith(suffix) ? value : `${value}${suffix}`);
 export const formatAsRem = (value) => formatAs(value, 'rem');
 export const formatAsPx = (value) => formatAs(value, 'px');
-export const slugifyText = text => {
-    return text
-        .toString()
-        .toLowerCase()
-        .replace(/\s+/g, '-')
-        .replace(/[^\w-]+/g, '')
-        .replace(/--+/g, '-')
-        .replace(/^-+/, '')
-        .replace(/-+$/, '');
-};
 export const remToPx = (remString) => {
     const rootFontSize = 16;
-    const rem = parseFloat(remString);
+    const rem = Number.parseFloat(remString);
     return formatAsPx(`${rem * rootFontSize}`);
 };
 export const pxToRem = (pxString) => {
     const rootFontSize = 16;
-    const px = parseFloat(pxString);
+    const px = Number.parseFloat(pxString);
     return formatAsRem(`${px / rootFontSize}`);
 };
 export function* idGenerator(id) {
@@ -30,7 +22,9 @@ export function* idGenerator(id) {
 export const debounce = (func, wait = 0, immediate = false) => {
     let timeout = null;
     const debounced = (...args) => {
-        clearTimeout(timeout);
+        if (timeout) {
+            clearTimeout(timeout);
+        }
         if (immediate && !timeout) {
             func(...args);
         }
@@ -70,11 +64,15 @@ export const transformTagName = (tagToBeTransformed, knownUntransformedTag, know
     const [prefix, suffix] = actualCurrentTag.split(knownTagWithoutDesignSystemPrefix);
     return (prefix + targetTagWithoutDesignSystemPrefix + suffix);
 };
-export const declareComponentDependencies = (t) => false && t;
+export const declareComponentDependencies = (_t) => {
+};
 export const arrayGroupBy = (arr, key) => {
     return arr.reduce((rv, c) => {
         const groupKey = c[key];
-        (rv[groupKey] ??= []).push(c);
+        if (!rv[groupKey]) {
+            rv[groupKey] = [];
+        }
+        rv[groupKey].push(c);
         return rv;
     }, {});
 };
@@ -119,17 +117,55 @@ const selectionKeys = ['Enter', ' '];
 export function isSelectionKey(key, excludes) {
     return isKey(key, selectionKeys, excludes);
 }
-export const injectMatomoScript = (appName) => {
+export const getShadowHost = (el) => {
+    const root = el.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+};
+export const getComposedParent = (el) => {
+    return el.parentElement ?? getShadowHost(el);
+};
+export const hasComposedClosest = (el, selector) => {
+    let current = el;
+    while (current) {
+        if (current.closest(selector))
+            return true;
+        current = getShadowHost(current);
+    }
+    return false;
+};
+export const getComposedClosestElement = (el, selector) => {
+    let current = el ?? null;
+    while (current) {
+        const match = current.closest(selector);
+        if (match)
+            return match;
+        current = getShadowHost(current);
+    }
+    return null;
+};
+export const resolveMatomoAppName = (el) => {
+    if (!isBrowser()) {
+        return;
+    }
+    const closest = getComposedClosestElement(el, `[${UHDS_APP_NAME_ATTR}]`);
+    const attrValue = closest?.dataset.uhdsAppName?.trim();
+    if (attrValue)
+        return attrValue;
+    const docValue = document.documentElement?.dataset.uhdsAppName?.trim();
+    if (docValue)
+        return docValue;
+    return globalThis._uhdsMatomoAppName;
+};
+export const injectMatomoScript = () => {
     const matomoSrc = 'https://matomo.it.helsinki.fi/matomo/js/container_hxIamClK.js';
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
+    if (!isBrowser()) {
         return;
     }
     if (Array.from(document.scripts).some(s => s.src === matomoSrc)) {
         return;
     }
-    globalThis._uhdsMatomoAppName = appName;
     globalThis._mtm = globalThis._mtm || [];
-    globalThis._mtm.push({ 'mtm.startTime': new Date().getTime(), 'event': 'mtm.Start' });
+    globalThis._mtm.push({ 'mtm.startTime': Date.now(), 'event': 'mtm.Start' });
     const g = document.createElement('script');
     g.async = true;
     g.src = matomoSrc;
@@ -143,3 +179,4 @@ export const injectMatomoScript = (appName) => {
 export const isEventWithinElement = (event, elem) => {
     return event.composedPath().includes(elem);
 };
+export const nextFrame = () => new Promise(resolve => requestAnimationFrame(() => resolve()));