@nldd/design-system 0.8.59 → 0.8.61

package/dist/components/{index-CtsEx0-K.js → index-B0DIduK1.js}

@@ -374,7 +374,6 @@ const buttonStyles = css`
 	:host([width="full"]) {
 		display: block;
 		width: 100%;
-		flex-grow: 1;
 	}
 
 	:host([horizontal-alignment="left"]) .button {
@@ -588,6 +587,10 @@ const buttonStyles = css`
 		padding-inline-end: calc(var(--_inline-padding) + var(--_gap) + var(--_disclosure-icon-size));
 	}
 
+	:host([expandable]) .button__text-area {
+		padding-inline-end: 0;
+	}
+
 	.button__disclosure-icon {
 		display: block;
 		position: absolute;
@@ -877,6 +880,9 @@ const aliases = {
   // file-text
   "document": "file-text",
   "file": "file-text",
+  // file-text-stack
+  "documents": "file-text-stack",
+  "text-documents": "file-text-stack",
   // flag-filled
   "flagged": "flag-filled",
   // folder
@@ -994,6 +1000,7 @@ const aliases = {
   "login": "arrow-right-in-bucket",
   // square-arrow-right-top
   "external-link": "square-arrow-right-top",
+  "open-new-page": "square-arrow-right-top",
   // square-arrow-up
   "share": "square-arrow-up",
   "export": "square-arrow-up",
@@ -1074,9 +1081,11 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["arrow-down-in-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 3v10.586l4.293-4.293 1.414 1.414L12 17.414l-6.707-6.707 1.414-1.414L11 13.586V3zM5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3h2v3a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3z"/>\n</svg>'],
   ["arrow-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m12 4-8 8 8 8 1.41-1.42L7.828 13H21v-2H7.828l5.582-5.58z"/>\n</svg>'],
   ["arrow-left-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m20.41 17-5.7-5.7-1.42 1.4 3.3 3.3H4v2h12.59l-3.3 3.3 1.42 1.4zM20 6H7.41l3.3-3.3-1.42-1.4L3.6 7l5.7 5.7 1.42-1.4L7.4 8H20z"/>\n</svg>'],
+  ["arrow-left-to-line", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M6 20H4V4h2zM16.41 6.42 11.83 11H22v2H11.83l4.58 4.58L15 19l-7-7 7-7z"/>\n</svg>'],
   ["arrow-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m12 4 8 8-8 8-1.41-1.42L16.172 13H3v-2h13.172L10.59 5.42z"/>\n</svg>'],
   ["arrow-right-in-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3h-6v-2h6a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-6V3zm-3 9-5 5-1.41-1.42L11.17 13H3v-2h8.17L8.6 8.42 10 7z"/>\n</svg>'],
   ["arrow-right-out-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 5H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6v2H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h6zm9 7-5 5-1.41-1.42L17.17 13H9v-2h8.17L14.6 8.42 16 7z"/>\n</svg>'],
+  ["arrow-right-to-line", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m16 12-7 7-1.41-1.42L12.17 13H2v-2h10.17L7.6 6.42 9 5zm4 8h-2V4h2z"/>\n</svg>'],
   ["arrow-u-turn-backward", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M9.4 4.4 5.82 8H16a6 6 0 0 1 0 12h-4v-2h4a4 4 0 0 0 0-8H5.82l3.58 3.6L8 15 2 9l6-6z"/>\n</svg>'],
   ["arrow-u-turn-forward", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.6 4.4 18.18 8H8a6 6 0 0 0 0 12h4v-2H8a4 4 0 0 1 0-8h10.18l-3.58 3.6L16 15l6-6-6-6z"/>\n</svg>'],
   ["arrow-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m4 12 8-8 8 8-1.42 1.41L13 7.828V21h-2V7.828L5.42 13.41z"/>\n</svg>'],
@@ -1125,14 +1134,20 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["chevron-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 15.172 3.4 6.6 2 8l10 10L22 8l-1.4-1.4z"/>\n</svg>'],
   ["chevron-down-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 13.172 7.4 8.6 6 10l6 6 6-6-1.4-1.4z"/>\n</svg>'],
   ["chevron-down-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 14.172 5.4 7.6 4 9l8 8 8-8-1.4-1.4z"/>\n</svg>'],
-  ["chevron-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m8.828 11.7 8.572 8.6-1.4 1.4-10-10 10-10 1.4 1.4z"/>\n</svg>'],
+  ["chevron-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m8.83 12 8.57 8.6L16 22 6 12 16 2l1.4 1.4z"/>\n</svg>'],
   ["chevron-left-chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18.17 12 13.6 7.4 15 6l6 6-6 6-1.4-1.4zM5.83 12l4.57-4.6L9 6l-6 6 6 6 1.4-1.4z"/>\n</svg>'],
   ["chevron-left-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m10.828 12 4.572 4.6L14 18l-6-6 6-6 1.4 1.4z"/>\n</svg>'],
   ["chevron-left-forward-slash-chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15.04 4.53 10.9 20l-1.94-.52L13.1 4zM8.4 7.4 3.83 12l4.57 4.6L7 18l-6-6 6-6zM23 12l-6 6-1.4-1.4 4.57-4.6-4.57-4.6L17 6z"/>\n</svg>'],
   ["chevron-left-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m9.828 12 6.572 6.6L15 20l-8-8 8-8 1.4 1.4z"/>\n</svg>'],
-  ["chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15.172 11.7 6.6 3.1 8 1.7l10 10-10 10-1.4-1.4z"/>\n</svg>'],
+  ["chevron-left-to-line", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M7 22H5V2h2zM20.4 3.4 11.83 12l8.57 8.6L19 22 9 12 19 2z"/>\n</svg>'],
+  ["chevron-left-to-line-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M9 18H7V6h2zm9.4-10.6L13.83 12l4.57 4.6L17 18l-6-6 6-6z"/>\n</svg>'],
+  ["chevron-left-to-line-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M8 20H6V4h2zM19.4 5.4 12.83 12l6.57 6.6L18 20l-8-8 8-8z"/>\n</svg>'],
+  ["chevron-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15.17 12 6.6 3.4 8 2l10 10L8 22l-1.4-1.4z"/>\n</svg>'],
   ["chevron-right-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13.172 12 8.6 7.4 10 6l6 6-6 6-1.4-1.4z"/>\n</svg>'],
   ["chevron-right-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.172 12 7.6 5.4 9 4l8 8-8 8-1.4-1.4z"/>\n</svg>'],
+  ["chevron-right-to-line", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15 12 5 22l-1.4-1.4 8.57-8.6L3.6 3.4 5 2zm4 10h-2V2h2z"/>\n</svg>'],
+  ["chevron-right-to-line-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m13 12-6 6-1.4-1.4 4.57-4.6L5.6 7.4 7 6zm4 6h-2V6h2z"/>\n</svg>'],
+  ["chevron-right-to-line-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m14 12-8 8-1.4-1.4 6.57-6.6L4.6 5.4 6 4zm4 8h-2V4h2z"/>\n</svg>'],
   ["chevron-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 8.828 3.4 17.4 2 16 12 6l10 10-1.4 1.4z"/>\n</svg>'],
   ["chevron-up-chevron-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 5.828 7.4 10.4 6 9l6-6 6 6-1.4 1.4zm0 12.344L7.4 13.6 6 15l6 6 6-6-1.4-1.4z"/>\n</svg>'],
   ["chevron-up-extra-small", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 10.828 7.4 15.4 6 14l6-6 6 6-1.4 1.4z"/>\n</svg>'],
@@ -1177,6 +1192,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["file-text", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M7 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9h-3a2 2 0 0 1-2-2V4zm8 1.414L16.586 7H15zM4 5a3 3 0 0 1 3-3h7a1 1 0 0 1 .707.293l5 5A1 1 0 0 1 20 8v11a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3zm4 3h3v2H8zm0 4h8v2H8zm0 4h8v2H8z"/>\n</svg>'],
   ["file-text-batch-check-mark", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18 13a5 5 0 1 1 0 10 5 5 0 0 1 0-10m-.75 5.44-1.47-1.47-1.06 1.06 2.53 2.53 4.03-4.03-1.06-1.06z"/>\n	<path fill="currentColor" d="M13 2a1 1 0 0 1 .7.3l5 5a1 1 0 0 1 .3.7v4.08a6 6 0 0 0-2 0V9h-3a2 2 0 0 1-2-2V4H6a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h6.34a6 6 0 0 0 1.19 2H6a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm1 5h1.59L14 5.41z"/>\n	<path fill="currentColor" d="M12.34 16q-.34.95-.34 2H7v-2zM15 12.8q-.83.49-1.47 1.2H7v-2h8zM10 10H7V8h3z"/>\n</svg>'],
   ["file-text-pencil", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14 2a1 1 0 0 1 .7.3l1.68 1.67-3.35 3.35Q13 7.17 13 7V4H7a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5.34l2-2V19a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3z"/>\n	<path fill="currentColor" d="M17.17 4.59a2 2 0 0 1 2.83 0L21.42 6a2 2 0 0 1 0 2.83L12.25 18H8v-4.24zm-7.17 10V16h1.42l5.75-5.76-1.4-1.41zm7.17-7.18 1.42 1.42L20 7.4 18.6 6z"/>\n	<path fill="currentColor" d="M16 18h-2.34l2-2H16zm-4-9.65L10.35 10H8V8h4z"/>\n</svg>'],
+  ["file-text-stack", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5 19a1 1 0 0 0 1 1h12a2 2 0 0 1-2 2H6a3 3 0 0 1-3-3V7c0-1.1.9-2 2-2z"/>\n	<path fill="currentColor" d="M17 15h-7v-2h7zm0-3.5h-7v-2h7zM13 8h-3V6h3z"/>\n	<path fill="currentColor" d="M15.5 2c.69.07 1.39.39 1.88.88l2.74 2.74A3 3 0 0 1 21 7.74V16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM9 4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V7.5h-2.5a1 1 0 0 1-1-1V4z"/>\n</svg>'],
   ["flag", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" fill-rule="evenodd" d="m5 3.67 2.04-.34a8 8 0 0 1 3.84.3l2.24.74a8 8 0 0 0 3.84.3L21 4v11l-4.04.67a8 8 0 0 1-3.38-.16l-2.7-.88a8 8 0 0 0-3.84-.3L5 14.67V22H3V2h2zm5.25 1.86c-1.74-.59-3.5-.13-5.25.16v6.95l1.71-.29a10 10 0 0 1 4.8.38l2.24.74a6 6 0 0 0 2.88.23l2.37-.4V6.36l-1.71.29a10 10 0 0 1-4.8-.38z" clip-rule="evenodd"/>\n</svg>'],
   ["flag-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m5 3.67 2.04-.34c2.15-.36 4.07.37 6.08 1.04a8 8 0 0 0 3.84.3L21 4v11l-4.04.67a8 8 0 0 1-3.84-.3c-2-.67-3.93-1.4-6.08-1.04L5 14.67V22H3V2h2z"/>\n</svg>'],
   ["folder", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 17V6a3 3 0 0 1 3-3h3.76a3 3 0 0 1 2.12.88L13 6h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1V9a1 1 0 0 0-.9-1h-6.93l-2.7-2.7a1 1 0 0 0-.71-.3H5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1v2a3 3 0 0 1-3-3m17 1v2H5v-2z"/>\n</svg>'],
@@ -6913,6 +6929,10 @@ var __decorateClass$1f = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1e(target, key, result);
   return result;
 };
+const sizingConverter = {
+  toAttribute: (value) => value || null,
+  fromAttribute: (value) => value ?? ""
+};
 let NLDDToolbarItem = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -6935,13 +6955,13 @@ let NLDDToolbarItem = class extends LitElement {
 };
 NLDDToolbarItem.styles = toolbarItemStyles;
 __decorateClass$1f([
-  property({ type: String })
+  property({ reflect: true, converter: sizingConverter })
 ], NLDDToolbarItem.prototype, "width", 2);
 __decorateClass$1f([
-  property({ type: String, attribute: "min-width" })
+  property({ attribute: "min-width", reflect: true, converter: sizingConverter })
 ], NLDDToolbarItem.prototype, "minWidth", 2);
 __decorateClass$1f([
-  property({ type: String, attribute: "max-width" })
+  property({ attribute: "max-width", reflect: true, converter: sizingConverter })
 ], NLDDToolbarItem.prototype, "maxWidth", 2);
 __decorateClass$1f([
   property({ type: String })
@@ -7001,13 +7021,13 @@ __decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDToolbarTitle.prototype, "align", 2);
 __decorateClass$1f([
-  property({ type: String })
+  property({ reflect: true, converter: sizingConverter })
 ], NLDDToolbarTitle.prototype, "width", 2);
 __decorateClass$1f([
-  property({ type: String, attribute: "min-width" })
+  property({ attribute: "min-width", reflect: true, converter: sizingConverter })
 ], NLDDToolbarTitle.prototype, "minWidth", 2);
 __decorateClass$1f([
-  property({ type: String, attribute: "max-width" })
+  property({ attribute: "max-width", reflect: true, converter: sizingConverter })
 ], NLDDToolbarTitle.prototype, "maxWidth", 2);
 __decorateClass$1f([
   property({ type: String, reflect: true })
@@ -7393,7 +7413,7 @@ let NLDDToolbar = class extends LitElement {
         return {
           type: "title",
           element: el,
-          minWidth: el.getAttribute("min-width") ?? "200px",
+          minWidth: el.minWidth || "200px",
           id: id2
         };
       }
@@ -7402,9 +7422,10 @@ let NLDDToolbar = class extends LitElement {
         const label = el.getAttribute("label") ?? "";
         const priority = parseInt(el.getAttribute("priority") ?? "0", 10);
         const hasPriority = el.hasAttribute("priority");
-        const minWidth = el.getAttribute("min-width") ?? "";
-        const maxWidth = el.getAttribute("max-width") ?? "";
-        const width = el.getAttribute("width") ?? "";
+        const sizing = el;
+        const minWidth = sizing.minWidth || "";
+        const maxWidth = sizing.maxWidth || "";
+        const width = sizing.width || "";
         const isFluid = !!(minWidth || maxWidth || width);
         const overflowItems = Array.from(el.children).filter((child) => {
           const childTag = child.tagName.toLowerCase();
@@ -10802,17 +10823,17 @@ const GRAMMAR_LOADERS = {
   yaml: () => import("./prism-yaml-DO0f9pf6.js"),
   json: () => import("./prism-json-DIMpow89.js"),
   javascript: () => import("./prism-javascript-DeC_17Pw.js"),
-  typescript: () => import("./prism-typescript-DrsfPuKI.js").then((n) => n.p),
+  typescript: () => import("./prism-typescript-hCHH5aho.js").then((n) => n.p),
   css: () => import("./prism-css-B93tXdOU.js"),
   html: () => import("./prism-markup-DfJYPYHA.js"),
   xml: () => import("./prism-markup-DfJYPYHA.js"),
   bash: () => import("./prism-bash-vbqaw3JR.js"),
   markdown: () => import("./prism-markdown-D-uFBkiz.js"),
-  rust: () => import("./prism-rust-CSuFXPDt.js").then((n) => n.p),
+  rust: () => import("./prism-rust-Bp-z7VUz.js").then((n) => n.p),
   gherkin: () => import("./prism-gherkin-CMPYyXOQ.js"),
   toml: () => import("./prism-toml-Ubdq-a5x.js"),
   sql: () => import("./prism-sql-BGqCBMyJ.js"),
-  python: () => import("./prism-python-SgP2Rws4.js").then((n) => n.p)
+  python: () => import("./prism-python-Dtm_y95w.js").then((n) => n.p)
 };
 const grammarLoads = /* @__PURE__ */ new Map();
 function loadGrammar(language) {
@@ -18241,17 +18262,16 @@ NLDDSplitViewDivider = __decorateClass$M([
 ], NLDDSplitViewDivider);
 function barSplitViewTemplate(component) {
   const sorted = component._getSortedChildren();
-  const isSm = component._currentBreakpoint === "sm";
+  const blocks = sorted.map((el) => ({ slot: el.slot, isMain: el.slot === "main" }));
+  if (!blocks.some((block) => block.isMain)) blocks.push({ slot: "main", isMain: true });
   return html`
 		<div class="bar-split-view">
-			${sorted.map((el, index) => {
-    const isMain = el.slot === "main";
-    const isLast = index === sorted.length - 1;
-    const next = sorted[index + 1];
-    const showDivider = !isSm && !isLast && !el.hasAttribute("no-divider") && !next?.hasAttribute("no-divider");
+			${blocks.map((block, index) => {
+    const next = blocks[index + 1];
+    const showDivider = next ? block.isMain !== next.isMain : false;
     return html`
-					<div class=${classMap({ "bar-split-view__main": isMain, "bar-split-view__bar": !isMain })}>
-						<slot name=${el.slot}></slot>
+					<div class=${classMap({ "bar-split-view__main": block.isMain, "bar-split-view__bar": !block.isMain })}>
+						<slot name=${block.slot}></slot>
 					</div>
 					${showDivider ? html`
 						<div class="bar-split-view__divider">
@@ -18260,11 +18280,6 @@ function barSplitViewTemplate(component) {
 					` : nothing}
 				`;
   })}
-			${!sorted.some((el) => el.slot === "main") ? html`
-				<div class="bar-split-view__main">
-					<slot name="main"></slot>
-				</div>
-			` : nothing}
 		</div>
 	`;
 }
@@ -18292,7 +18307,7 @@ let NLDDBarSplitView = class extends LitElement {
     super.connectedCallback();
     this._currentBreakpoint = this._getBreakpoint(this.getBoundingClientRect().width);
     this._observer = new MutationObserver(() => this.requestUpdate());
-    this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ["above", "below", "only", "sm-order", "md-order", "lg-order", "no-divider"], subtree: false });
+    this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ["above", "below", "only", "sm-order", "md-order", "lg-order"], subtree: false });
     this._resizeObserver = new ResizeObserver(() => {
       const bp = this._getBreakpoint(this.getBoundingClientRect().width);
       if (bp !== this._currentBreakpoint) {
@@ -25188,6 +25203,18 @@ const listItemStyles = css`
 		cursor: var(--semantics-controls-link-cursor);
 	}
 
+	.list-item__new-tab-hint {
+		position: absolute;
+		margin: -1px;
+		border: 0;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		padding: 0;
+		white-space: nowrap;
+		clip-path: inset(50%);
+	}
+
 
 	/* # Indicator */
 
@@ -25367,12 +25394,14 @@ const areas = (showStart, showEnd) => html`
 		</slot>
 	</div>
 `;
-const template$a = (button, href, showStart, showEnd) => {
+const template$a = (button, href, target, rel, showStart, showEnd, newTabLabel) => {
   if (href) {
     return html`<div class="list-item">
 			<a class="list-item__action"
 				href=${href}
-			>${areas(showStart, showEnd)}</a>
+				target=${target ?? nothing}
+				rel=${rel ?? nothing}
+			>${areas(showStart, showEnd)}${newTabLabel ? html`<span class="list-item__new-tab-hint">${newTabLabel}</span>` : nothing}</a>
 		</div>`;
   }
   if (button) {
@@ -25387,16 +25416,57 @@ const template$a = (button, href, showStart, showEnd) => {
 	</div>`;
 };
 var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
 var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$n(target, key, result);
+  return result;
+};
+function withTranslations(Base, defaults) {
+  class TranslationsMixin extends Base {
+    constructor() {
+      super(...arguments);
+      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 };
+      }
+    }
+  }
+  __decorateClass$n([
+    property({ type: Object })
+  ], TranslationsMixin.prototype, "translations");
+  return TranslationsMixin;
+}
+const nlddListItemTranslations = {
+  "components.list-item.opens-in-new-tab-label": "Opent in nieuw tabblad"
+};
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-let NLDDListItem = class extends LitElement {
+let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTranslations) {
   constructor() {
     super(...arguments);
     this.size = "md";
@@ -25510,43 +25580,53 @@ let NLDDListItem = class extends LitElement {
     this._action?.focus(options);
   }
   render() {
+    const newTabLabel = this.href && this.target === "_blank" ? this._t("components.list-item.opens-in-new-tab-label") : void 0;
     return template$a(
       this.button,
       this.href,
+      this.target,
+      this.rel,
       this._showStart,
-      this._showEnd
+      this._showEnd,
+      newTabLabel
     );
   }
 };
 NLDDListItem.styles = [listItemStyles];
-__decorateClass$n([
+__decorateClass$m([
   property({ reflect: true })
 ], NLDDListItem.prototype, "size", 2);
-__decorateClass$n([
+__decorateClass$m([
   property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "selected", 2);
-__decorateClass$n([
+__decorateClass$m([
   property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "button", 2);
-__decorateClass$n([
+__decorateClass$m([
   property({ reflect: true })
 ], NLDDListItem.prototype, "href", 2);
-__decorateClass$n([
+__decorateClass$m([
+  property({ reflect: true })
+], NLDDListItem.prototype, "target", 2);
+__decorateClass$m([
+  property({ reflect: true })
+], NLDDListItem.prototype, "rel", 2);
+__decorateClass$m([
   property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "reorderable", 2);
-__decorateClass$n([
+__decorateClass$m([
   state()
 ], NLDDListItem.prototype, "_showStart", 2);
-__decorateClass$n([
+__decorateClass$m([
   state()
 ], NLDDListItem.prototype, "_showEnd", 2);
-__decorateClass$n([
+__decorateClass$m([
   state()
 ], NLDDListItem.prototype, "_parentType", 2);
-__decorateClass$n([
+__decorateClass$m([
   query(".list-item__action")
 ], NLDDListItem.prototype, "_action", 2);
-NLDDListItem = __decorateClass$n([
+NLDDListItem = __decorateClass$m([
   customElement("nldd-list-item")
 ], NLDDListItem);
 const listItem = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -25707,14 +25787,14 @@ const nlddTableTranslations = {
   "components.table.accessible-label": "Tabel",
   "components.table.empty-text": "Geen items"
 };
-var __defProp$m = Object.defineProperty;
+var __defProp$l = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
+var __decorateClass$l = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 const SM_MAX = parseInt(breakpoints.smMax, 10);
@@ -25857,37 +25937,37 @@ let NLDDTable = class extends LitElement {
   }
 };
 NLDDTable.styles = tableStyles;
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, reflect: true })
 ], NLDDTable.prototype, "background", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, reflect: true })
 ], NLDDTable.prototype, "columns", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, reflect: true, attribute: "sm-columns" })
 ], NLDDTable.prototype, "smColumns", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, reflect: true, attribute: "md-columns" })
 ], NLDDTable.prototype, "mdColumns", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, reflect: true, attribute: "lg-columns" })
 ], NLDDTable.prototype, "lgColumns", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, reflect: true, attribute: "accessible-label" })
 ], NLDDTable.prototype, "accessibleLabel", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: Boolean, reflect: true })
 ], NLDDTable.prototype, "selectable", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, attribute: "empty-text" })
 ], NLDDTable.prototype, "emptyText", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: String, attribute: "empty-supporting-text" })
 ], NLDDTable.prototype, "emptySupportingText", 2);
-__decorateClass$m([
+__decorateClass$l([
   property({ type: Object })
 ], NLDDTable.prototype, "translations", 2);
-NLDDTable = __decorateClass$m([
+NLDDTable = __decorateClass$l([
   customElement("nldd-table")
 ], NLDDTable);
 let NLDDTableRow = class extends LitElement {
@@ -25941,10 +26021,10 @@ let NLDDTableRow = class extends LitElement {
   }
 };
 NLDDTableRow.styles = tableRowStyles;
-__decorateClass$m([
+__decorateClass$l([
   property({ type: Boolean, reflect: true })
 ], NLDDTableRow.prototype, "selected", 2);
-NLDDTableRow = __decorateClass$m([
+NLDDTableRow = __decorateClass$l([
   customElement("nldd-table-row")
 ], NLDDTableRow);
 const cellStyles = css`
@@ -26039,14 +26119,14 @@ const cellStyles = css`
 	}
 `;
 const template$9 = () => html`<slot></slot>`;
-var __defProp$l = Object.defineProperty;
+var __defProp$k = Object.defineProperty;
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
+var __decorateClass$k = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 let NLDDCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -26095,25 +26175,25 @@ let NLDDCell = class extends VisibilityMixin(LitElement, "cells-container") {
   }
 };
 NLDDCell.styles = [cellStyles];
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true })
 ], NLDDCell.prototype, "width", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDCell.prototype, "minWidth", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDCell.prototype, "maxWidth", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDCell.prototype, "minHeight", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ reflect: true, attribute: "vertical-alignment" })
 ], NLDDCell.prototype, "verticalAlignment", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ reflect: true, attribute: "horizontal-alignment" })
 ], NLDDCell.prototype, "horizontalAlignment", 2);
-NLDDCell = __decorateClass$l([
+NLDDCell = __decorateClass$k([
   customElement("nldd-cell")
 ], NLDDCell);
 const titleCellStyles = css`
@@ -26340,14 +26420,14 @@ const template$8 = function() {
 		</p>
 	`;
 };
-var __defProp$k = Object.defineProperty;
+var __defProp$j = Object.defineProperty;
 var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
+var __decorateClass$j = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 let NLDDTitleCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -26427,58 +26507,58 @@ let NLDDTitleCell = class extends VisibilityMixin(LitElement, "cells-container")
   }
 };
 NLDDTitleCell.styles = [titleCellStyles];
-__decorateClass$k([
+__decorateClass$j([
   property({ type: Number, reflect: true })
 ], NLDDTitleCell.prototype, "size", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true })
 ], NLDDTitleCell.prototype, "color", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true })
 ], NLDDTitleCell.prototype, "width", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDTitleCell.prototype, "minWidth", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDTitleCell.prototype, "maxWidth", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDTitleCell.prototype, "minHeight", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "horizontal-alignment" })
 ], NLDDTitleCell.prototype, "horizontalAlignment", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "vertical-alignment" })
 ], NLDDTitleCell.prototype, "verticalAlignment", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String })
 ], NLDDTitleCell.prototype, "text", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String })
 ], NLDDTitleCell.prototype, "overline", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDTitleCell.prototype, "supportingText", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: Number, attribute: "heading-level" })
 ], NLDDTitleCell.prototype, "headingLevel", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String })
 ], NLDDTitleCell.prototype, "query", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, attribute: "query-mark-mode" })
 ], NLDDTitleCell.prototype, "queryMarkMode", 2);
-__decorateClass$k([
+__decorateClass$j([
   state()
 ], NLDDTitleCell.prototype, "_hasOverlineSlotted", 2);
-__decorateClass$k([
+__decorateClass$j([
   state()
 ], NLDDTitleCell.prototype, "_hasDefaultSlotted", 2);
-__decorateClass$k([
+__decorateClass$j([
   state()
 ], NLDDTitleCell.prototype, "_hasSupportingTextSlotted", 2);
-NLDDTitleCell = __decorateClass$k([
+NLDDTitleCell = __decorateClass$j([
   customElement("nldd-title-cell")
 ], NLDDTitleCell);
 const descriptionCellStyles = css`
@@ -26590,14 +26670,14 @@ const template$7 = () => html`
 	<slot name="title"></slot>
 	<slot name="description"></slot>
 `;
-var __defProp$j = Object.defineProperty;
+var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
+var __decorateClass$i = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -26645,22 +26725,22 @@ let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "cells-conta
   }
 };
 NLDDDescriptionCell.styles = [descriptionCellStyles];
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true })
 ], NLDDDescriptionCell.prototype, "width", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDDescriptionCell.prototype, "minWidth", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDDescriptionCell.prototype, "maxWidth", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDDescriptionCell.prototype, "minHeight", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ reflect: true, attribute: "vertical-alignment" })
 ], NLDDDescriptionCell.prototype, "verticalAlignment", 2);
-NLDDDescriptionCell = __decorateClass$j([
+NLDDDescriptionCell = __decorateClass$i([
   customElement("nldd-description-cell")
 ], NLDDDescriptionCell);
 const dragHandleCellStyles = css`
@@ -26772,14 +26852,14 @@ function template$6(size2, label) {
 const nlddDragHandleCellTranslations = {
   "components.drag-handle-cell.label-text": "Sleepgreep, druk spatie of enter om te verplaatsen"
 };
-var __defProp$i = Object.defineProperty;
+var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
+var __decorateClass$h = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let NLDDDragHandleCell = class extends LitElement {
@@ -26798,13 +26878,13 @@ let NLDDDragHandleCell = class extends LitElement {
   }
 };
 NLDDDragHandleCell.styles = dragHandleCellStyles;
-__decorateClass$i([
+__decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDDragHandleCell.prototype, "size", 2);
-__decorateClass$i([
+__decorateClass$h([
   property({ type: Object })
 ], NLDDDragHandleCell.prototype, "translations", 2);
-NLDDDragHandleCell = __decorateClass$i([
+NLDDDragHandleCell = __decorateClass$h([
   customElement("nldd-drag-handle-cell")
 ], NLDDDragHandleCell);
 const timelineTrackCellStyles = css`
@@ -26917,14 +26997,14 @@ function timelineTrackCellTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$h = Object.defineProperty;
+var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
+var __decorateClass$g = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let NLDDTimelineTrackCell = class extends LitElement {
@@ -26938,13 +27018,13 @@ let NLDDTimelineTrackCell = class extends LitElement {
   }
 };
 NLDDTimelineTrackCell.styles = timelineTrackCellStyles;
-__decorateClass$h([
+__decorateClass$g([
   property({ type: String, reflect: true })
 ], NLDDTimelineTrackCell.prototype, "step", 2);
-__decorateClass$h([
+__decorateClass$g([
   property({ type: String, reflect: true })
 ], NLDDTimelineTrackCell.prototype, "child", 2);
-NLDDTimelineTrackCell = __decorateClass$h([
+NLDDTimelineTrackCell = __decorateClass$g([
   customElement("nldd-timeline-track-cell")
 ], NLDDTimelineTrackCell);
 const separatorStyles = css`
@@ -27128,14 +27208,14 @@ const nlddBreadcrumbsTranslations = {
   "components.breadcrumbs.accessible-label": "Kruimelpad",
   "components.breadcrumbs.show-all-levels": "Toon alle niveaus"
 };
-var __defProp$g = Object.defineProperty;
+var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
+var __decorateClass$f = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 const _NLDDBreadcrumbsItem = class _NLDDBreadcrumbsItem extends LitElement {
@@ -27181,13 +27261,13 @@ const _NLDDBreadcrumbsItem = class _NLDDBreadcrumbsItem extends LitElement {
 };
 _NLDDBreadcrumbsItem.styles = breadcrumbsItemStyles;
 let NLDDBreadcrumbsItem = _NLDDBreadcrumbsItem;
-__decorateClass$g([
+__decorateClass$f([
   property({ type: String, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "href", 2);
-__decorateClass$g([
+__decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "current", 2);
-__decorateClass$g([
+__decorateClass$f([
   property({ type: String, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "text", 2);
 if (!customElements.get("nldd-breadcrumbs-item")) {
@@ -27253,19 +27333,19 @@ let NLDDBreadcrumbs = class extends LitElement {
   }
 };
 NLDDBreadcrumbs.styles = breadcrumbsStyles;
-__decorateClass$g([
+__decorateClass$f([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDBreadcrumbs.prototype, "accessibleLabel", 2);
-__decorateClass$g([
+__decorateClass$f([
   property({ type: Boolean, reflect: true, attribute: "no-collapse" })
 ], NLDDBreadcrumbs.prototype, "noCollapse", 2);
-__decorateClass$g([
+__decorateClass$f([
   property({ type: Object })
 ], NLDDBreadcrumbs.prototype, "translations", 2);
-__decorateClass$g([
+__decorateClass$f([
   state()
 ], NLDDBreadcrumbs.prototype, "_collapsed", 2);
-NLDDBreadcrumbs = __decorateClass$g([
+NLDDBreadcrumbs = __decorateClass$f([
   customElement("nldd-breadcrumbs")
 ], NLDDBreadcrumbs);
 const menuBarStyles = css`
@@ -27335,44 +27415,6 @@ function template$5(component) {
 		</nav>
 	`;
 }
-var __defProp$f = Object.defineProperty;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp$f(target, key, result);
-  return result;
-};
-function withTranslations(Base, defaults) {
-  class TranslationsMixin extends Base {
-    constructor() {
-      super(...arguments);
-      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 };
-      }
-    }
-  }
-  __decorateClass$f([
-    property({ type: Object })
-  ], TranslationsMixin.prototype, "translations");
-  return TranslationsMixin;
-}
 const nlddMenuBarTranslations = {
   "components.menu-bar.overflow-action": "Meer opties"
 };