@uh-design-system/component-library 1.7.0 → 1.7.1-rc.0

package/dist/types/components/01-base-components/ds-combobox/ds-combobox.d.ts

@@ -120,6 +120,9 @@ export declare class DsCombobox extends DsCombobox_base {
         label: string;
         description: string;
     }[]>;
+    private readonly setValueMissingValidity;
+    private readonly emitValidity;
+    dsRequiredObserver(newValue: boolean): void;
     selectedOptionsObserver(newValue: HTMLDsOptionElement[], oldValue?: HTMLDsOptionElement[]): void;
     inputValueObserver(newValue: string): void;
     hasFocusObserver(newValue: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.7.0",
+  "version": "1.7.1-rc.0",
   "publishConfig": {
     "access": "public"
   },
@@ -89,7 +89,7 @@
     "@types/node": "^22.19.19",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "@uh-design-system/storybook-stencil-docs-utils": "^1.7.0",
+    "@uh-design-system/storybook-stencil-docs-utils": "^1.7.1-rc.0",
     "@vitest/browser": "4.1.8",
     "@vitest/browser-playwright": "4.1.8",
     "@vitest/coverage-v8": "4.1.8",
@@ -111,5 +111,5 @@
     "vitest": "4.1.8"
   },
   "license": "MIT",
-  "gitHead": "95e9b6931917a027034c116be39d78866d607bc7"
+  "gitHead": "ddbe3d05c44d5d2b2a3a687035b361b3f240ae07"
 }

package/dist/cjs/ariaDeprecationFactory-aTPCMCOZ.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var index = require('./index-DNG8iA6h.js');
-var attributes = require('./attributes-DbNfxmvc.js');
-
-const ariaDeprecationFactory = (Base) => {
-    const AriaDeprecation = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        dsMuteAriaDeprecationWarning = false;
-        getDeprecationWarningForAriaAttribute = (el, attr) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            if (el.hasAttribute(attr)) {
-                console.warn(`[DEPRECATION] The use of the '${attr}' attribute on <${el.tagName.toLowerCase()}> is deprecated and will be removed in a future version (tba). Please refer to the documentation for alternative ds-prefixed property name. If the attribute you are using does not have a corresponding ds-prefixed property name, please contact developers at #designsystem Slack channel. In the future, any aria-attributes set on the web component will remain on the host element. To mute all warnings on this component instance, set the "dsMuteAriaDeprecationWarning" property.`);
-            }
-        };
-        getDeprecationWarningsForAriaAttributes = (el) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            for (const attr of attributes.ariaAttributes)
-                this.getDeprecationWarningForAriaAttribute(el, attr);
-        };
-    };
-    return AriaDeprecation;
-};
-
-exports.ariaDeprecationFactory = ariaDeprecationFactory;

package/dist/cjs/componentFactory-D5oS4vfA.js

@@ -1,193 +0,0 @@
-'use strict';
-
-var utils = require('./utils-DWrHry7C.js');
-var store = require('./store-BDEqiIFl.js');
-
-const state = new Map();
-const createDefaultStats = () => Object.freeze({
-    mountEventsTotal: 0,
-});
-const getOrCreateAppBucket = (appName) => {
-    const existing = state.get(appName);
-    const created = new Map();
-    if (!existing) {
-        state.set(appName, created);
-    }
-    return existing ?? created;
-};
-const getAll = () => {
-    const entries = [];
-    for (const [appName, components] of state.entries()) {
-        for (const [componentName, stats] of components.entries()) {
-            entries.push({ appName, componentName, stats });
-        }
-    }
-    return entries;
-};
-const getOne = (appName, componentName) => {
-    const appBucket = state.get(appName);
-    return appBucket?.get(componentName) ?? createDefaultStats();
-};
-const incrementMount = (appName, componentName) => {
-    const appBucket = getOrCreateAppBucket(appName);
-    const prev = getOne(appName, componentName);
-    appBucket.set(componentName, Object.freeze({
-        ...prev,
-        mountEventsTotal: prev.mountEventsTotal + 1,
-    }));
-};
-const clear = () => {
-    state.clear();
-};
-const analyticsState = {
-    getAll,
-    getOne,
-    incrementMount,
-    clear,
-};
-
-const FALLBACK_COLLECTION_PROBABILITY = 0.5;
-const COLLECTION_PROBABILITY = globalThis._uhdsMatomoCollectionProbability ?? FALLBACK_COLLECTION_PROBABILITY;
-const COLLECTION_STORAGE_KEY = 'uhds_collect_analytics';
-if (globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === null) {
-    globalThis.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 entries = analyticsState.getAll();
-    if (entries.length === 0)
-        return;
-    isFlushing = true;
-    try {
-        if (!Array.isArray(globalThis._mtm))
-            return;
-        const tracker = globalThis._mtm;
-        const appHost = globalThis.location.hostname;
-        for (const { appName, componentName, stats } of entries) {
-            tracker.push({
-                'event': 'uhds.components',
-                'uhds.action': 'mounted',
-                'uhds.component': componentName,
-                'uhds.app_name': appName,
-                'uhds.app_host': appHost,
-                'uhds.instance_key': `${appHost}::${appName}::${componentName}`,
-                '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;
-}
-const transparentRootTrackingAncestors = new Set();
-const rootTrackingStopTags = new Map();
-const rootTrackingStopSelectors = new Map();
-const designSystemComponentTags = new Set();
-const normalizeTag = (tag) => tag.trim().toLowerCase();
-function shouldStopRootTracking(el, tag) {
-    if (!rootTrackingStopTags.has(tag))
-        return false;
-    const selector = rootTrackingStopSelectors.get(tag) ?? '';
-    if (!selector)
-        return true;
-    return !utils.hasComposedClosest(utils.getComposedParent(el), selector);
-}
-function isBlockingAncestorTag(tag) {
-    return designSystemComponentTags.has(tag) && !transparentRootTrackingAncestors.has(tag);
-}
-function hasBlockingAncestor(el) {
-    const ownTag = normalizeTag(el.tagName);
-    if (isBlockingAncestorTag(ownTag) && shouldStopRootTracking(el, ownTag))
-        return false;
-    let current = utils.getComposedParent(el);
-    while (current) {
-        const tag = normalizeTag(current.tagName);
-        if (!isBlockingAncestorTag(tag)) {
-            current = utils.getComposedParent(current);
-            continue;
-        }
-        if (rootTrackingStopTags.has(tag) && !shouldStopRootTracking(current, tag)) {
-            current = utils.getComposedParent(current);
-            continue;
-        }
-        return true;
-    }
-    return false;
-}
-const componentFactory = (componentName, options = {}) => (Base) => {
-    const ownTag = normalizeTag(componentName);
-    designSystemComponentTags.add(ownTag);
-    if (options.stopRootTracking) {
-        const exceptions = new Set((options.stopRootTrackingExcept || []).map(normalizeTag));
-        rootTrackingStopTags.set(ownTag, exceptions);
-        rootTrackingStopSelectors.set(ownTag, Array.from(exceptions).join(','));
-    }
-    if (options.transparentForRootTracking) {
-        transparentRootTrackingAncestors.add(ownTag);
-    }
-    class BaseComponent extends Base {
-        constructor() {
-            super();
-        }
-        lang = store.getLanguage();
-        getGenerator() {
-            const name = componentName.trim() || 'ds-component';
-            if (!generators.has(name)) {
-                generators.set(name, utils.idGenerator(name));
-            }
-            return generators.get(name);
-        }
-        getUniqueId() {
-            return this.getGenerator().next().value;
-        }
-        componentMounted() {
-            const appName = utils.resolveMatomoAppName(this.el);
-            if (!appName)
-                return;
-            if (!globalThis.sessionStorage || globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === 'false')
-                return;
-            if (options.disableAnalytics)
-                return;
-            if (hasBlockingAncestor(this.el))
-                return;
-            initBatchTracking();
-            analyticsState.incrementMount(appName, componentName);
-        }
-        handleLanguageChange(newValue) {
-            this.lang = newValue.detail;
-        }
-        static get states() {
-            return {
-                "lang": {}
-            };
-        }
-        static get listeners() {
-            return [{
-                    "name": "dsLanguageChange",
-                    "method": "handleLanguageChange",
-                    "target": "body",
-                    "capture": false,
-                    "passive": false
-                }];
-        }
-    }
-    return BaseComponent;
-};
-
-exports.componentFactory = componentFactory;

package/dist/cjs/controlUtils-CuHQwicz.js

@@ -1,414 +0,0 @@
-'use strict';
-
-var store = require('./store-BDEqiIFl.js');
-
-const valueMissing = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Täytä tämä kenttä.';
-        case 'sv':
-            return 'Fyll i det här fältet.';
-        default:
-            return 'Fill in this field.';
-    }
-};
-const typeMismatch = (opts) => {
-    if (opts?.type === 'email') {
-        return emailMismatch();
-    }
-    if (opts?.type === 'url') {
-        return urlMismatch();
-    }
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä arvo oikeassa muodossa.';
-        case 'sv':
-            return 'Ange värdet i rätt format.';
-        default:
-            return 'Enter a value in the correct format.';
-    }
-};
-const emailMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä sähköpostiosoite oikeassa muodossa (esim. nimi@helsinki.fi).';
-        case 'sv':
-            return 'Ange e-postadressen i rätt format (t.ex. namn@helsinki.fi).';
-        default:
-            return 'Enter the email address in the correct format (e.g. name@helsinki.fi).';
-    }
-};
-const urlMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä verkkosivun osoite oikeassa muodossa (esim. https://helsinki.fi).';
-        case 'sv':
-            return 'Ange webbadressen i rätt formatet (t.ex. https://helsinki.fi).';
-        default:
-            return 'Enter the web address in the correct format (e.g. https://helsinki.fi).';
-    }
-};
-const patternMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä arvo vaaditussa muodossa.';
-        case 'sv':
-            return 'Ange värdet i det angivna formatet.';
-        default:
-            return 'Match the requested format.';
-    }
-};
-const tooLong = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Lyhennä tekstiä.';
-        case 'sv':
-            return 'Förkorta texten.';
-        default:
-            return 'Shorten your text.';
-    }
-};
-const tooShort = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Pidennä tekstiä.';
-        case 'sv':
-            return 'Förläng texten.';
-        default:
-            return 'Lengthen your text.';
-    }
-};
-const rangeUnderflow = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä suurempi arvo.';
-        case 'sv':
-            return 'Ange ett större värde.';
-        default:
-            return 'Enter a larger value.';
-    }
-};
-const rangeOverflow = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä pienempi arvo.';
-        case 'sv':
-            return 'Ange ett mindre värde.';
-        default:
-            return 'Enter a smaller value.';
-    }
-};
-const stepMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä sallittu arvo.';
-        case 'sv':
-            return 'Ange ett tillåtet värde.';
-        default:
-            return 'Enter an allowed value.';
-    }
-};
-const badInput = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Anna kelvollinen arvo.';
-        case 'sv':
-            return 'Ange ett giltigt värde.';
-        default:
-            return 'Enter a valid value.';
-    }
-};
-const validityMessage = (flag, opts) => {
-    switch (flag) {
-        case 'valueMissing':
-            return valueMissing();
-        case 'typeMismatch':
-            return typeMismatch(opts);
-        case 'patternMismatch':
-            return patternMismatch();
-        case 'tooLong':
-            return tooLong();
-        case 'tooShort':
-            return tooShort();
-        case 'rangeUnderflow':
-            return rangeUnderflow();
-        case 'rangeOverflow':
-            return rangeOverflow();
-        case 'stepMismatch':
-            return stepMismatch();
-        case 'badInput':
-            return badInput();
-        default:
-            return '';
-    }
-};
-const getOptionalText = (text, optionalText) => {
-    let defaultText = '(optional)';
-    switch (store.getLanguage()) {
-        case 'fi':
-            defaultText = '(valinnainen)';
-            break;
-        case 'sv':
-            defaultText = '(valfritt)';
-            break;
-    }
-    return [text, optionalText || defaultText].join(' ');
-};
-const getRequiredText = (text) => [text, '*'].join(' ');
-const atLeastOneOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse vähintään yksi vaihtoehto.';
-        case 'sv':
-            return 'Välj minst ett alternativ.';
-        default:
-            return 'Select at least one option.';
-    }
-};
-const allOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse kaikki vaihtoehdot.';
-        case 'sv':
-            return 'Välj alla alternativ.';
-        default:
-            return 'Select all options.';
-    }
-};
-const removeSelection = (capitalizeFirstLetter = false) => {
-    let text = '';
-    switch (store.getLanguage()) {
-        case 'fi':
-            text = 'poista valinta';
-            break;
-        case 'sv':
-            text = 'ta bort val';
-            break;
-        default:
-            text = 'remove selection';
-            break;
-    }
-    return capitalizeFirstLetter ? text[0].toUpperCase() + text.substring(1) : text;
-};
-const weCouldNotLoadOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Emme voineet ladata vaihtoehtoja.';
-        case 'sv':
-            return 'Vi kunde inte ladda alternativen.';
-        default:
-            return 'We could not load options.';
-    }
-};
-const tryAgainOrIfTheProblemPersists = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Yritä uudelleen tai jos ongelma jatkuu, ota yhteyttä ylläpitoon.';
-        case 'sv':
-            return 'Försök igen eller om problemet kvarstår, kontakta supporten.';
-        default:
-            return 'Try again or if the problem persists, contact support.';
-    }
-};
-const loadingOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Ladataan vaihtoehtoja...';
-        case 'sv':
-            return 'Laddar alternativ...';
-        default:
-            return 'Loading options...';
-    }
-};
-const searchOrSelectAnOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kirjoita tai valitse...';
-        case 'sv':
-            return 'Sök eller välj...';
-        default:
-            return 'Search or select...';
-    }
-};
-const noResultsFound = (searchTerm) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return searchTerm ? `Ei tuloksia haulle "${searchTerm}".` : `Ei tuloksia.`;
-        case 'sv':
-            return searchTerm ? `Inga resultat för sökningen "${searchTerm}".` : `Inga resultat.`;
-        default:
-            return searchTerm ? `No results found for "${searchTerm}".` : `No results found.`;
-    }
-};
-const tryADifferentSearchTerm = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kokeile toista hakusanaa.';
-        case 'sv':
-            return 'Prova ett annat sökord.';
-        default:
-            return 'Try a different search term.';
-    }
-};
-const thereAreOptionsToBrowse = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Vaihtoehtoja on selattavissa.';
-        case 'sv':
-            return 'Det finns alternativ att bläddra i.';
-        default:
-            return 'There are options to browse.';
-    }
-};
-const characterOverage = (overage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return `${overage} merkkiä liian pitkä.`;
-        case 'sv':
-            return `${overage} tecken för mycket.`;
-        default:
-            return `${overage} characters too many.`;
-    }
-};
-const charactersRemaining = (remaining) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return `${remaining} merkkiä jäljellä.`;
-        case 'sv':
-            return `${remaining} tecken kvar.`;
-        default:
-            return `${remaining} characters remaining.`;
-    }
-};
-const itemsShortage = (shortage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            if (shortage === 1) {
-                return `${shortage} valinta liian vähän.`;
-            }
-            return `${shortage} valintaa liian vähän.`;
-        case 'sv':
-            return `${shortage} val för lite.`;
-        default:
-            if (shortage === 1) {
-                return `${shortage} item too few.`;
-            }
-            return `${shortage} items too few.`;
-    }
-};
-const itemsOverage = (overage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            if (overage === 1) {
-                return `${overage} valinta liikaa.`;
-            }
-            return `${overage} valintaa liikaa.`;
-        case 'sv':
-            return `${overage} val för många.`;
-        default:
-            if (overage === 1) {
-                return `${overage} item too many.`;
-            }
-            return `${overage} items too many.`;
-    }
-};
-const clearField = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Tyhjennä kenttä';
-        case 'sv':
-            return 'Rensa fält';
-        default:
-            return 'Clear field';
-    }
-};
-const showPassword = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Näytä salasana';
-        case 'sv':
-            return 'Visa lösenord';
-        default:
-            return 'Show password';
-    }
-};
-const hidePassword = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Piilota salasana';
-        case 'sv':
-            return 'Dölj lösenord';
-        default:
-            return 'Hide password';
-    }
-};
-const selectAnOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse vaihtoehto';
-        case 'sv':
-            return 'Välj alternativ';
-        default:
-            return 'Select an option';
-    }
-};
-const selections = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'valintaa';
-        case 'sv':
-            return 'val';
-        default:
-            return 'selections';
-    }
-};
-const multiselectable = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'monivalinta';
-        case 'sv':
-            return 'flerval';
-        default:
-            return 'multiselectable';
-    }
-};
-const ellipsis = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kolme pistettä';
-        case 'sv':
-            return 'Tre punkter';
-        default:
-            return 'Ellipsis';
-    }
-};
-
-exports.allOptions = allOptions;
-exports.atLeastOneOption = atLeastOneOption;
-exports.badInput = badInput;
-exports.characterOverage = characterOverage;
-exports.charactersRemaining = charactersRemaining;
-exports.clearField = clearField;
-exports.ellipsis = ellipsis;
-exports.getOptionalText = getOptionalText;
-exports.getRequiredText = getRequiredText;
-exports.hidePassword = hidePassword;
-exports.itemsOverage = itemsOverage;
-exports.itemsShortage = itemsShortage;
-exports.loadingOptions = loadingOptions;
-exports.multiselectable = multiselectable;
-exports.noResultsFound = noResultsFound;
-exports.rangeOverflow = rangeOverflow;
-exports.rangeUnderflow = rangeUnderflow;
-exports.removeSelection = removeSelection;
-exports.searchOrSelectAnOption = searchOrSelectAnOption;
-exports.selectAnOption = selectAnOption;
-exports.selections = selections;
-exports.showPassword = showPassword;
-exports.thereAreOptionsToBrowse = thereAreOptionsToBrowse;
-exports.tooLong = tooLong;
-exports.tryADifferentSearchTerm = tryADifferentSearchTerm;
-exports.tryAgainOrIfTheProblemPersists = tryAgainOrIfTheProblemPersists;
-exports.validityMessage = validityMessage;
-exports.valueMissing = valueMissing;
-exports.weCouldNotLoadOptions = weCouldNotLoadOptions;

package/dist/cjs/cx-B24n8vFf.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var index = require('./index-DNG8iA6h.js');
-
-const cx = (className) => `${className}__${index.Env.PACKAGE_VERSION}`;
-
-exports.cx = cx;