@nldd/design-system 0.8.93 → 0.8.95

package/dist/utilities/translations.js

@@ -0,0 +1,80 @@
+/**
+ * The translation layer shared by every component.
+ *
+ * A component looks a text up in this order: its own `translations` property,
+ * then what the app set for the whole package with `setTranslations()`, then
+ * its Dutch default. The package-wide layer is what reaches a component that
+ * another component builds in its shadow root, such as the activity indicator
+ * in a loading button or the calendar in a date field: nobody outside can set
+ * `translations` on those, but they all read this layer.
+ *
+ * Keys are language, not content. A text that differs per instance, such as
+ * "Aan het bewaren" on one button and "Aan het laden" on another, belongs in an
+ * attribute on that element.
+ */
+var _a;
+// On globalThis under a registered symbol: the package entry is a bundle and
+// the per-component entries are separate modules, so an app that imports both
+// loads this file twice. Both copies have to read the same layer.
+const STORE_KEY = Symbol.for('nldd.translations');
+const store = ((_a = globalThis)[STORE_KEY] ?? (_a[STORE_KEY] = { translations: {} }));
+/**
+ * Sets the texts for the whole package, replacing what was set before. Keys you
+ * leave out fall back to Dutch. To start from the shipped English and change a
+ * few texts, spread them: `setTranslations({ ...enUS, 'key': 'Mine' })`.
+ *
+ * Call it before the components render. Calling it again re-renders the
+ * components on the page, so a language switch at runtime works too. Call it
+ * when the language changes, not on every render: each call walks the page.
+ * A component inside a closed shadow root is out of its reach and keeps its old
+ * texts until it renders again; ask it to with `requestUpdate()`.
+ */
+export function setTranslations(translations) {
+    store.translations = { ...translations };
+    if (import.meta.env?.DEV)
+        warnUnknownKeys(store.translations);
+    if (typeof document !== 'undefined')
+        rerender(document);
+}
+/** What the app set with `setTranslations()`, for tests and debugging. */
+export function getTranslations() {
+    return store.translations;
+}
+/**
+ * Looks a key up through the three layers and fills in `{placeholders}`. Every
+ * component's `_t()` goes through here, so none of them skips the package-wide
+ * layer.
+ */
+export function translate(own, defaults, key, vars) {
+    const name = key;
+    let text = own?.[key] ?? store.translations[name] ?? defaults[key] ?? name;
+    if (vars) {
+        for (const [k, v] of Object.entries(vars)) {
+            text = text.split(`{${k}}`).join(String(v));
+        }
+    }
+    return text;
+}
+/** Asks every nldd component on the page, also inside shadow roots, to render again. */
+function rerender(root) {
+    for (const el of Array.from(root.querySelectorAll('*'))) {
+        if (el.tagName.startsWith('NLDD-'))
+            el.requestUpdate?.();
+        if (el.shadowRoot)
+            rerender(el.shadowRoot);
+    }
+}
+/**
+ * A key no component knows does nothing, silently. That is what happens to an
+ * override after a key is renamed, so in DEV it says so. The full key list is
+ * loaded only here, so production bundles do not carry it.
+ */
+function warnUnknownKeys(translations) {
+    import('../translations/nl.generated.js').then(({ nl }) => {
+        const unknown = Object.keys(translations).filter((key) => !(key in nl));
+        if (unknown.length) {
+            console.warn(`setTranslations: no component knows ${unknown.length === 1 ? 'this key, so it does' : 'these keys, so they do'} nothing: ${unknown.join(', ')}`);
+        }
+    }).catch(() => { });
+}
+//# sourceMappingURL=translations.js.map

package/dist/utilities/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sourceRoot":"","sources":["../../src/utilities/translations.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;;AAQH,6EAA6E;AAC7E,8EAA8E;AAC9E,kEAAkE;AAClE,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAClD,MAAM,KAAK,GAAU,OAAE,UAAsC,EAAC,SAAS,SAAT,SAAS,IAAM,EAAE,YAAY,EAAE,EAAE,EAAE,EAAU,CAAC;AAE5G;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAAC,YAA0B;IACzD,KAAK,CAAC,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACzC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG;QAAE,eAAe,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9D,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAED,0EAA0E;AAC1E,MAAM,UAAU,eAAe;IAC9B,OAAO,KAAK,CAAC,YAAY,CAAC;AAC3B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACxB,GAA2B,EAC3B,QAAW,EACX,GAAY,EACZ,IAAsC;IAEtC,MAAM,IAAI,GAAG,GAAa,CAAC;IAC3B,IAAI,IAAI,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC;IAC3E,IAAI,IAAI,EAAE,CAAC;QACV,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3C,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,CAAC;IACF,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC;AAED,wFAAwF;AACxF,SAAS,QAAQ,CAAC,IAAqC;IACtD,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QACzD,IAAI,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;YAAG,EAA+C,CAAC,aAAa,EAAE,EAAE,CAAC;QACvG,IAAI,EAAE,CAAC,UAAU;YAAE,QAAQ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;AACF,CAAC;AAED;;;;GAIG;AACH,SAAS,eAAe,CAAC,YAA0B;IAClD,MAAM,CAAC,iCAAiC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;QACzD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;QACxE,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,uCAAuC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,wBAAwB,aAAa,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChK,CAAC;IACF,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;AACpB,CAAC"}

package/dist/utilities/with-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-translations.d.ts","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChE,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,GAAG,OAAO,UAAU,EACjD,QAAQ,EAAE,CAAC,GA4B4B,WAAW,CAAC,UAAU,GAAG;IAC/D,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACzB,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;CACjE,CAAC,GAAG,OAAO,UAAU,CACtB"}
+{"version":3,"file":"with-translations.d.ts","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChE,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,GAAG,OAAO,UAAU,EACjD,QAAQ,EAAE,CAAC,GAY4B,WAAW,CAAC,UAAU,GAAG;IAC/D,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACzB,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;CACjE,CAAC,GAAG,OAAO,UAAU,CACtB"}

package/dist/utilities/with-translations.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
+import { translate } from './translations.js';
 /**
  * Mixin that adds i18n support to a LitElement component.
  *
@@ -29,24 +30,10 @@ export function withTranslations(Base, defaults) {
         constructor() {
             super(...arguments);
             this.translations = {};
-            /** @internal */
-            this._mergedTranslations = { ...defaults };
         }
         /** @internal */
         _t(key, vars) {
-            let str = this._mergedTranslations[key] ?? String(key);
-            if (vars) {
-                for (const [k, v] of Object.entries(vars)) {
-                    str = str.split(`{${k}}`).join(String(v));
-                }
-            }
-            return str;
-        }
-        willUpdate(changed) {
-            super.willUpdate(changed);
-            if (changed.has('translations')) {
-                this._mergedTranslations = { ...defaults, ...this.translations };
-            }
+            return translate(this.translations, defaults, key, vars);
         }
     }
     __decorate([

package/dist/utilities/with-translations.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-translations.js","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,gBAAgB,CAC/B,IAAiD,EACjD,QAAW;IAEX,MAAM,iBAAkB,SAAQ,IAAI;QAApC;;YAEC,iBAAY,GAAe,EAAE,CAAC;YAE9B,gBAAgB;YAChB,wBAAmB,GAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;QAmB1C,CAAC;QAjBA,gBAAgB;QAChB,EAAE,CAAC,GAAY,EAAE,IAAsC;YACtD,IAAI,GAAG,GAAW,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC;YAC/D,IAAI,IAAI,EAAE,CAAC;gBACV,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;oBAC3C,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3C,CAAC;YACF,CAAC;YACD,OAAO,GAAG,CAAC;QACZ,CAAC;QAEQ,UAAU,CAAC,OAAuB;YAC1C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,IAAI,OAAO,CAAC,GAAG,CAAC,cAA4B,CAAC,EAAE,CAAC;gBAC/C,IAAI,CAAC,mBAAmB,GAAG,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YAClE,CAAC;QACF,CAAC;KACD;IAtBA;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACG;IAwB/B,OAAO,iBAGe,CAAC;AACxB,CAAC"}
+{"version":3,"file":"with-translations.js","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,gBAAgB,CAC/B,IAAiD,EACjD,QAAW;IAEX,MAAM,iBAAkB,SAAQ,IAAI;QAApC;;YAEC,iBAAY,GAAe,EAAE,CAAC;QAM/B,CAAC;QAJA,gBAAgB;QAChB,EAAE,CAAC,GAAY,EAAE,IAAsC;YACtD,OAAO,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QAC1D,CAAC;KACD;IANA;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACG;IAQ/B,OAAO,iBAGe,CAAC;AACxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.93",
+  "version": "0.8.95",
   "description": "Designsysteem voor de Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -455,12 +455,37 @@
     "./styles/variables": "./dist/css/variables.css",
     "./styles/tokens": "./dist/css/tokens.css",
     "./styles/fouc": "./dist/css/fouc.css",
+    "./fonts/*": "./dist/fonts/*",
     "./favicon.svg": "./dist/favicon.svg",
     "./touch-icon.png": "./dist/touch-icon.png",
     "./breakpoints": {
       "types": "./dist/assets/styles/breakpoints.d.ts",
       "default": "./dist/assets/styles/breakpoints.js"
     },
+    "./translations": {
+      "types": "./dist/utilities/translations.d.ts",
+      "default": "./dist/utilities/translations.js"
+    },
+    "./translations/nl": {
+      "types": "./dist/translations/nl.generated.d.ts",
+      "default": "./dist/translations/nl.generated.js"
+    },
+    "./translations/en-US": {
+      "types": "./dist/translations/en-US.d.ts",
+      "default": "./dist/translations/en-US.js"
+    },
+    "./translations/fy": {
+      "types": "./dist/translations/fy.d.ts",
+      "default": "./dist/translations/fy.js"
+    },
+    "./translations/pap-AW": {
+      "types": "./dist/translations/pap-AW.d.ts",
+      "default": "./dist/translations/pap-AW.js"
+    },
+    "./translations/pap-CW": {
+      "types": "./dist/translations/pap-CW.d.ts",
+      "default": "./dist/translations/pap-CW.js"
+    },
     "./vue": {
       "types": "./dist/types/vue.d.ts"
     }
@@ -497,7 +522,7 @@
     "validate:host-styles": "node scripts/validate-host-styles.js",
     "validate:component-api": "node scripts/validate-component-api.js",
     "validate:skill-markup": "node scripts/validate-skill-markup.js",
-    "build:components": "npm run clean:components && npm run build:icons && npm run build:components:modules && npm run build:components:bundle && npm run build:components:standalone && npm run build:exports && npm run generate:cem",
+    "build:components": "npm run clean:components && npm run build:icons && npm run generate:translations && npm run build:components:modules && npm run build:components:bundle && npm run build:components:standalone && npm run build:exports && npm run generate:cem",
     "build:icons": "node scripts/generate-icon-registry.js && node scripts/generate-logo.js",
     "build:components:modules": "tsc -p tsconfig.build.json",
     "build:components:bundle": "vite build",
@@ -525,7 +550,8 @@
     "pretypecheck": "npm run build:icons",
     "typecheck": "tsc --noEmit",
     "test:vue-types": "vue-tsc --noEmit -p type-tests/vue/tsconfig.json",
-    "build:components:standalone": "vite build --config vite.bundle.config.ts"
+    "build:components:standalone": "vite build --config vite.bundle.config.ts",
+    "generate:translations": "node scripts/generate-translations.js"
   },
   "devDependencies": {
     "@commitlint/cli": "^21.2.1",
@@ -539,8 +565,8 @@
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/addon-themes": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
-    "@vitest/browser-playwright": "5.0.0",
-    "@vitest/coverage-v8": "5.0.0",
+    "@vitest/browser-playwright": "5.0.3",
+    "@vitest/coverage-v8": "5.0.3",
     "axe-core": "^4.13.0",
     "conventional-changelog": "^8.1.0",
     "conventional-changelog-conventionalcommits": "10.2.1",
@@ -553,8 +579,8 @@
     "storybook": "^10.6.0",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.58.0",
-    "vite": "8.3.0",
-    "vitest": "5.0.0",
+    "vite": "8.3.1",
+    "vitest": "5.0.3",
     "vue": "^3.5.40",
     "vue-tsc": "^3.3.7"
   },

package/dist/components/with-translations-BAKFoEKy.js

@@ -1,69 +0,0 @@
-import { t as __decorate } from "./decorate-lwt_OrAG.js";
-import { property } from "lit/decorators.js";
-//#region src/utilities/link-rel.ts
-/**
-* The `rel` of a link that may open in a new tab.
-*
-* A link with `target="_blank"` gets `noopener noreferrer`: the page it opens
-* gets no handle on this one through `window.opener`, and no referrer. A `rel`
-* the consumer sets is added to, never replaced. `rel="external"` on a `_blank`
-* link describes the link, and it is no reason to leave that door open.
-*
-* Returns an empty string when there is nothing to write, so a template can
-* leave the attribute off with `|| nothing`.
-*/
-function linkRel(rel, target) {
-	const base = rel ?? "";
-	if (target !== "_blank") return base.trim();
-	const parts = new Set(base.split(/\s+/).filter(Boolean));
-	parts.add("noopener");
-	parts.add("noreferrer");
-	return [...parts].join(" ");
-}
-//#endregion
-//#region src/utilities/with-translations.ts
-/**
-* Mixin that adds i18n support to a LitElement component.
-*
-* Provides a `translations` property for overriding defaults,
-* a merged translations object, and a `_t()` method for lookups.
-*
-* @example
-* ```ts
-* import { withTranslations } from '../../../utilities/with-translations.js';
-* import { myDefaults } from './my-component.i18n.js';
-* import type { MyTranslations } from './my-component.i18n.js';
-*
-* class MyComponent extends withTranslations<MyTranslations>(LitElement, myDefaults) {
-*   render() {
-*     return html`${this._t('my-key')}`;
-*   }
-* }
-* ```
-*/
-function withTranslations(Base, defaults) {
-	class TranslationsMixin extends Base {
-		constructor(..._args) {
-			super(..._args);
-			this.translations = {};
-			this._mergedTranslations = { ...defaults };
-		}
-		/** @internal */
-		_t(key, vars) {
-			let str = this._mergedTranslations[key] ?? String(key);
-			if (vars) for (const [k, v] of Object.entries(vars)) str = str.split(`{${k}}`).join(String(v));
-			return str;
-		}
-		willUpdate(changed) {
-			super.willUpdate(changed);
-			if (changed.has("translations")) this._mergedTranslations = {
-				...defaults,
-				...this.translations
-			};
-		}
-	}
-	__decorate([property({ type: Object })], TranslationsMixin.prototype, "translations", void 0);
-	return TranslationsMixin;
-}
-//#endregion
-export { linkRel as n, withTranslations as t };