@nldd/design-system 0.8.93 → 0.8.95

package/dist/components/content/token/token.template.js

@@ -9,7 +9,7 @@ export function tokenTemplate(component) {
 				<div class="token__dismiss-action">
 					<nldd-icon-button
 						size="sm"
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						icon="dismiss-small"
 						text=${component._dismissLabel}
 						accessible-label=${component._dismissLabel}
@@ -24,7 +24,7 @@ export function tokenTemplate(component) {
 				<div class="token__menu-action">
 					<nldd-icon-button
 						size="sm"
-						variant="neutral-tinted"
+						appearance="neutral-tinted"
 						icon="chevron-down-small"
 						text=${component._menuLabel}
 						accessible-label=${component._menuLabel}

package/dist/components/{decorate-lwt_OrAG.js → decorate-CO88j7Lc.js}

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/components/{dist-M6GKopqu.js → dist-BWEAw34D.js}

@@ -1,4 +1,4 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, W as EditorView, lt as EditorSelection, n as ExternalTokenizer, p as bracketMatchingHandle, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, W as EditorView, lt as EditorSelection, n as ExternalTokenizer, p as bracketMatchingHandle, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, y as foldNodeProp } from "./dist-CpW8MF-L.js";
 //#region node_modules/@lezer/xml/dist/index.js
 var StartTag = 1;
 var StartCloseTag = 2;

package/dist/components/{dist-OlffRM7-.js → dist-BWRYv3Mp.js}

@@ -1,4 +1,4 @@
-import { C as indentNodeProp, M as styleTags, N as tags, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
+import { C as indentNodeProp, M as styleTags, N as tags, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-CpW8MF-L.js";
 //#region node_modules/@lezer/yaml/dist/index.js
 var blockEnd = 63;
 var eof = 64;

package/dist/components/{dist-CSYXsT7W.js → dist-Bi4EHsFY.js}

@@ -1,5 +1,5 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, P as IterMode, R as NodeWeakMap, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
-import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-BUu-NW5O.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, P as IterMode, R as NodeWeakMap, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-CpW8MF-L.js";
+import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-DTOshgo1.js";
 //#region node_modules/@lezer/python/dist/index.js
 var printKeyword = 1;
 var indent = 194;

package/dist/components/{dist-B5ie2Bo9.js → dist-C3uWRipu.js}

@@ -1,4 +1,4 @@
-import { C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
+import { C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-CpW8MF-L.js";
 //#region node_modules/@lezer/rust/dist/index.js
 var closureParamDelim = 1;
 var tpOpen = 2;

package/dist/components/{dist-CoUVHSu-.js → dist-CH9m014O.js}

@@ -1,4 +1,4 @@
-import { C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
+import { C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-CpW8MF-L.js";
 //#region node_modules/@lezer/json/dist/index.js
 var jsonHighlighting = styleTags({
 	String: tags.string,

package/dist/components/{dist-Dn3c5gfb.js → dist-CpW8MF-L.js}

@@ -2376,7 +2376,7 @@ var EditorState = class EditorState {
 				to: range.to,
 				insert: text
 			},
-			range: EditorSelection.cursor(range.from + text.length)
+			range: EditorSelection.cursor(range.from + text.length, -1)
 		}));
 	}
 	/**
@@ -4665,8 +4665,15 @@ function trivialOrder(length) {
 var movedOver = "";
 function moveVisually(line, order, dir, start, forward) {
 	var _a;
-	let startIndex = start.head - line.from;
-	let spanI = BidiSpan.find(order, startIndex, (_a = start.bidiLevel) !== null && _a !== void 0 ? _a : -1, start.assoc);
+	if (!line.length) return null;
+	let startIndex = start.head - line.from, spanI;
+	if (start.head == line.from && start.assoc < 0) {
+		if (!forward) return null;
+		startIndex = order[spanI = 0].side(false, dir);
+	} else if (start.head == line.to && start.assoc > 0) {
+		if (forward) return null;
+		startIndex = order[spanI = order.length - 1].side(true, dir);
+	} else spanI = BidiSpan.find(order, startIndex, (_a = start.bidiLevel) !== null && _a !== void 0 ? _a : -1, start.assoc);
 	let span = order[spanI], spanEnd = span.side(forward, dir);
 	if (startIndex == spanEnd) {
 		let nextI = spanI += forward ? 1 : -1;
@@ -4679,7 +4686,10 @@ function moveVisually(line, order, dir, start, forward) {
 	if (nextIndex < span.from || nextIndex > span.to) nextIndex = spanEnd;
 	movedOver = line.text.slice(Math.min(startIndex, nextIndex), Math.max(startIndex, nextIndex));
 	let nextSpan = spanI == (forward ? order.length - 1 : 0) ? null : order[spanI + (forward ? 1 : -1)];
-	if (nextSpan && nextIndex == spanEnd && nextSpan.level + (forward ? 0 : 1) < span.level) return EditorSelection.cursor(nextSpan.side(!forward, dir) + line.from, nextSpan.forward(forward, dir) ? 1 : -1, nextSpan.level);
+	if (nextIndex == spanEnd) {
+		if (!nextSpan) return forward ? EditorSelection.cursor(line.to, 1) : EditorSelection.cursor(line.from, -1);
+		if (nextSpan.level + (forward ? 0 : 1) < span.level) return EditorSelection.cursor(nextSpan.side(!forward, dir) + line.from, nextSpan.forward(forward, dir) ? 1 : -1, nextSpan.level);
+	}
 	return EditorSelection.cursor(nextIndex + line.from, span.forward(forward, dir) ? -1 : 1, span.level);
 }
 function autoDirection(text, from, to) {
@@ -6699,8 +6709,6 @@ function moveToLineBoundary(view, start, forward, includeWrap) {
 		});
 		if (pos != null) return EditorSelection.cursor(pos, forward ? -1 : 1);
 	}
-	let line = view.state.doc.lineAt(start.head);
-	if (forward ? line.to == block.to : line.from == block.from) return view.visualLineSide(line, forward);
 	return EditorSelection.cursor(forward ? block.to : block.from, forward ? -1 : 1);
 }
 function moveByChar(view, start, forward, by) {
@@ -6713,7 +6721,7 @@ function moveByChar(view, start, forward, by) {
 			char = "\n";
 			line = view.state.doc.line(line.number + (forward ? 1 : -1));
 			spans = view.bidiSpans(line);
-			next = view.visualLineSide(line, !forward);
+			next = forward ? EditorSelection.cursor(line.from, -1) : EditorSelection.cursor(line.to, 1);
 		}
 		if (!check) {
 			if (!by) return next;
@@ -7312,7 +7320,7 @@ function selectionPoints(view) {
 function selectionFromPoints(points, base) {
 	if (points.length == 0) return null;
 	let anchor = points[0].pos, head = points.length == 2 ? points[1].pos : anchor;
-	return anchor > -1 && head > -1 ? EditorSelection.single(anchor + base, head + base) : null;
+	return anchor < 0 || head < 0 ? null : anchor == head ? EditorSelection.create([EditorSelection.cursor(head + base, -1)]) : EditorSelection.single(anchor + base, head + base);
 }
 function sameSelPos(selection, range) {
 	return range.head == selection.main.head && range.anchor == selection.main.anchor;
@@ -7406,12 +7414,14 @@ var InputState = class {
 				shiftKey: event.shiftKey
 			};
 			if (mods.shiftKey && browser.ios && !/^(off|none)$/.test(this.view.contentDOM.autocapitalize) && iosVirtualKeyboardOpen(this.view.win)) mods.shiftKey = false;
-			this.pendingIOSKey = {
+			let pending = this.pendingIOSKey = {
 				key: event.key,
 				keyCode: event.keyCode,
 				mods
 			};
-			setTimeout(() => this.flushIOSKey(), 50);
+			setTimeout(() => {
+				if (this.pendingIOSKey == pending) this.flushIOSKey();
+			}, 50);
 			return true;
 		}
 		if (event.keyCode != 229) this.view.observer.forceFlush();
@@ -7673,7 +7683,7 @@ function doPaste(view, input) {
 					from: line.from,
 					insert
 				},
-				range: EditorSelection.cursor(range.from + insert.length)
+				range: EditorSelection.cursor(range.from + insert.length, -1)
 			};
 		});
 	} else if (byLine) changes = state.changeByRange((range) => {
@@ -7684,7 +7694,7 @@ function doPaste(view, input) {
 				to: range.to,
 				insert: line.text
 			},
-			range: EditorSelection.cursor(range.from + line.length)
+			range: EditorSelection.cursor(range.from + line.length, -1)
 		};
 	});
 	else changes = state.replaceSelection(text);
@@ -8283,12 +8293,12 @@ var HeightMap = class HeightMap {
 			let next = nodes[--j];
 			if (next) after += next.size;
 		}
-		let brk = 0;
+		let brk = false;
 		if (nodes[i - 1] == null) {
-			brk = 1;
+			brk = true;
 			i--;
 		} else if (nodes[i] == null) {
-			brk = 1;
+			brk = true;
 			j++;
 		}
 		return new HeightMapBranch(HeightMap.of(nodes.slice(0, i)), brk, HeightMap.of(nodes.slice(j)));
@@ -8487,7 +8497,7 @@ var HeightMapGap = class HeightMapGap extends HeightMap {
 };
 var HeightMapBranch = class extends HeightMap {
 	constructor(left, brk, right) {
-		super(left.length + brk + right.length, left.height + right.height, brk | (left.outdated || right.outdated ? 2 : 0));
+		super(left.length + (brk ? 1 : 0) + right.length, left.height + right.height, (brk ? 1 : 0) | (left.outdated || right.outdated ? 2 : 0));
 		this.left = left;
 		this.right = right;
 		this.size = left.size + right.size;
@@ -8515,9 +8525,9 @@ var HeightMapBranch = class extends HeightMap {
 			if (to >= rightOffset) this.right.forEachLine(from, to, oracle, rightTop, rightOffset, f);
 		} else {
 			let mid = this.lineAt(rightOffset, QueryType.ByPos, oracle, top, offset);
-			if (from < mid.from) this.left.forEachLine(from, mid.from - 1, oracle, top, offset, f);
+			if (from < mid.from) this.left.forEachLine(from, Math.min(to, mid.from - 1), oracle, top, offset, f);
 			if (mid.to >= from && mid.from <= to) f(mid);
-			if (to > mid.to) this.right.forEachLine(mid.to + 1, to, oracle, rightTop, rightOffset, f);
+			if (to > mid.to) this.right.forEachLine(Math.max(from, mid.to + 1), to, oracle, rightTop, rightOffset, f);
 		}
 	}
 	replace(from, to, nodes) {
@@ -10642,15 +10652,11 @@ var EditorView = class EditorView {
 		return skipAtoms(this, start, moveByChar(this, start, forward, (initial) => byGroup(this, start.head, initial)));
 	}
 	/**
-	Get the cursor position visually at the start or end of a line.
-	Note that this may differ from the _logical_ position at its
-	start or end (which is simply at `line.from`/`line.to`) if text
-	at the start or end goes against the line's base text direction.
+	**\[DEPRECATED]** Get the cursor position visually at the start
+	or end of a line.
 	*/
 	visualLineSide(line, end) {
-		let order = this.bidiSpans(line), dir = this.textDirectionAt(line.from);
-		let span = order[end ? order.length - 1 : 0];
-		return EditorSelection.cursor(span.side(end, dir) + line.from, span.forward(!end, dir) ? 1 : -1);
+		return end ? EditorSelection.cursor(line.to, 1) : EditorSelection.cursor(line.from, -1);
 	}
 	/**
 	Move to the next line boundary in the given direction. If
@@ -10719,6 +10725,15 @@ var EditorView = class EditorView {
 		this.readMeasured();
 		let line = this.state.doc.lineAt(pos), order = this.bidiSpans(line);
 		let span = order[BidiSpan.find(order, pos - line.from, -1, side)];
+		if (line.length && (pos == line.from && side < 0 || pos == line.to && side > 0) && span.dir != this.textDirectionAt(line.from)) {
+			if (pos == line.to) {
+				pos = line.from + span.from;
+				side = 1;
+			} else {
+				pos = line.from + span.to;
+				side = -1;
+			}
+		}
 		return this.docView.coordsAt(pos, side, span.dir == Direction.RTL);
 	}
 	/**
@@ -14661,7 +14676,7 @@ function styleTags(spec) {
 var ruleNodeProp = new NodeProp({ combine(a, b) {
 	let cur, root, take;
 	while (a || b) {
-		if (!a || b && a.depth >= b.depth) {
+		if (!a || b && a.depth <= b.depth) {
 			take = b;
 			b = b.next;
 		} else {
@@ -14844,7 +14859,7 @@ and necessarily incomplete. A full ontology of syntactic
 constructs would fill a stack of books, and be impractical to
 write themes for. So try to make do with this set. If all else
 fails, [open an
-issue](https://github.com/codemirror/codemirror.next) to propose a
+issue](https://code.haverbeke.berlin/codemirror/dev/issues) to propose a
 new tag, or [define](#highlight.Tag^define) a local custom tag for
 your use case.
 

package/dist/components/{dist-RPaf2J9c.js → dist-CvL6_ezZ.js}

@@ -1,5 +1,5 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
-import { a as ifNotIn, r as completeFromList } from "./dist-BUu-NW5O.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, y as foldNodeProp } from "./dist-CpW8MF-L.js";
+import { a as ifNotIn, r as completeFromList } from "./dist-DTOshgo1.js";
 //#region node_modules/@codemirror/lang-sql/dist/index.js
 var whitespace = 36;
 var LineComment = 1;

package/dist/components/{dist-CGOykrJw.js → dist-DMHTTJRJ.js}

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, O as sublanguageProp, P as IterMode, R as NodeWeakMap, W as EditorView, _ as flatIndent, g as delimitedIndent, h as defineLanguageFacet, i as LocalTokenGroup, lt as EditorSelection, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
-import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-BUu-NW5O.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, O as sublanguageProp, P as IterMode, R as NodeWeakMap, W as EditorView, _ as flatIndent, g as delimitedIndent, h as defineLanguageFacet, i as LocalTokenGroup, lt as EditorSelection, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-CpW8MF-L.js";
+import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-DTOshgo1.js";
 //#region node_modules/@lezer/javascript/dist/index.js
 var noSemi = 316;
 var noSemiType = 317;

package/dist/components/{dist-BUu-NW5O.js → dist-DTOshgo1.js}

@@ -1,4 +1,4 @@
-import { A as syntaxTree, H as Decoration, K as ViewPlugin, Q as keymap, St as combineConfig, T as indentUnit, Tt as fromCodePoint, U as Direction, W as EditorView, Z as getTooltip, _t as StateField, at as Annotation, bt as codePointAt, dt as Facet, ft as MapMode, gt as StateEffect, ht as RangeValue, lt as EditorSelection, pt as Prec, q as WidgetType, rt as showTooltip, tt as logException, vt as Text, xt as codePointSize, yt as Transaction } from "./dist-Dn3c5gfb.js";
+import { A as syntaxTree, H as Decoration, K as ViewPlugin, Q as keymap, St as combineConfig, T as indentUnit, Tt as fromCodePoint, U as Direction, W as EditorView, Z as getTooltip, _t as StateField, at as Annotation, bt as codePointAt, dt as Facet, ft as MapMode, gt as StateEffect, ht as RangeValue, lt as EditorSelection, pt as Prec, q as WidgetType, rt as showTooltip, tt as logException, vt as Text, xt as codePointSize, yt as Transaction } from "./dist-CpW8MF-L.js";
 //#region node_modules/@codemirror/autocomplete/dist/index.js
 /**
 An instance of this is passed to completion source functions.

package/dist/components/{dist-Dxn9Up8K.js → dist-DV6Mp5N1.js}

@@ -1,7 +1,7 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, V as parseMixed, W as EditorView, lt as EditorSelection, n as ExternalTokenizer, p as bracketMatchingHandle, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
-import { n as cssLanguage, t as css } from "./dist-CQzaKTa8.js";
-import { a as tsxLanguage, i as jsxLanguage, n as javascript, o as typescriptLanguage, r as javascriptLanguage } from "./dist-CGOykrJw.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, V as parseMixed, W as EditorView, lt as EditorSelection, n as ExternalTokenizer, p as bracketMatchingHandle, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, y as foldNodeProp } from "./dist-CpW8MF-L.js";
+import { n as cssLanguage, t as css } from "./dist-PlhQXXtE.js";
+import { a as tsxLanguage, i as jsxLanguage, n as javascript, o as typescriptLanguage, r as javascriptLanguage } from "./dist-DMHTTJRJ.js";
 //#region node_modules/@lezer/html/dist/index.js
 var scriptText = 55;
 var StartCloseScriptTag = 1;

package/dist/components/{dist-CQzaKTa8.js → dist-PlhQXXtE.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags$1, P as IterMode, R as NodeWeakMap, i as LocalTokenGroup, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-Dn3c5gfb.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags$1, P as IterMode, R as NodeWeakMap, i as LocalTokenGroup, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-CpW8MF-L.js";
 //#region node_modules/@lezer/css/dist/index.js
 var descendantOp = 148;
 var Unit = 1;

package/dist/components/forms/form-actions/form-actions.d.ts

@@ -18,7 +18,7 @@
  *         <nldd-form-field>...</nldd-form-field>
  *         <nldd-form-actions>
  *             <nldd-button-group>
- *                 <nldd-button variant="primary" type="submit" text="Bewaar"></nldd-button>
+ *                 <nldd-button appearance="primary" type="submit" text="Bewaar"></nldd-button>
  *             </nldd-button-group>
  *         </nldd-form-actions>
  *     </nldd-form>

package/dist/components/forms/form-actions/form-actions.js

@@ -18,7 +18,7 @@
  *         <nldd-form-field>...</nldd-form-field>
  *         <nldd-form-actions>
  *             <nldd-button-group>
- *                 <nldd-button variant="primary" type="submit" text="Bewaar"></nldd-button>
+ *                 <nldd-button appearance="primary" type="submit" text="Bewaar"></nldd-button>
  *             </nldd-button-group>
  *         </nldd-form-actions>
  *     </nldd-form>

package/dist/components/{icon-DWNVcttg.js → icon-Typdp4av.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { t as __decorate } from "./decorate-lwt_OrAG.js";
+import { t as __decorate } from "./decorate-CO88j7Lc.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/dist/components/{icon-button-hO6k8W63.js → icon-button-9mo3oIyL.js}

@@ -1,8 +1,8 @@
 import { t as inheritedTextReset } from "./shadow-resets-aG-rgyNQ.js";
-import { n as linkRel, t as withTranslations } from "./with-translations-BAKFoEKy.js";
-import { t as __decorate } from "./decorate-lwt_OrAG.js";
+import { i as linkRel, r as translate, t as withTranslations } from "./with-translations-C8_0-9y8.js";
+import { t as __decorate } from "./decorate-CO88j7Lc.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
-import "./icon-DWNVcttg.js";
+import "./icon-Typdp4av.js";
 import { r as isTouchMode } from "./input-modality-DhTeUxKi.js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -432,7 +432,7 @@ var NLDDActivityIndicator = (_NLDDActivityIndicator = class NLDDActivityIndicato
 		};
 	}
 	_t(key) {
-		return this.translations[key] ?? nlddActivityIndicatorTranslations[key];
+		return translate(this.translations, nlddActivityIndicatorTranslations, key);
 	}
 	/** Accessible name announced while loading. */
 	get _accessibleName() {
@@ -590,7 +590,7 @@ var iconButtonStyles = css`
 		--_text-display: none;
 	}
 
-	:host([variant="neutral-base"]) {
+	:host([appearance="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-background-color);
 		--_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
@@ -602,7 +602,7 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
 	}
 
-	:host([variant="neutral-transparent"]) {
+	:host([appearance="neutral-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
 		--_highlight-border-color: transparent;
@@ -614,8 +614,8 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([variant="accent-filled"]),
-	:host([variant="primary"]) {
+	:host([appearance="accent-filled"]),
+	:host([appearance="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-background-color);
 		--_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
 		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
@@ -627,7 +627,7 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
 	}
 
-	:host([variant="accent-transparent"]) {
+	:host([appearance="accent-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
 		--_highlight-border-color: transparent;
@@ -639,8 +639,8 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([variant="critical-tinted"]),
-	:host([variant="destructive"]) {
+	:host([appearance="critical-tinted"]),
+	:host([appearance="destructive"]) {
 		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
 		--_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
 		--_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
@@ -652,7 +652,7 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
 	}
 
-	:host([variant="critical-transparent"]) {
+	:host([appearance="critical-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
 		--_highlight-border-color: transparent;
@@ -668,39 +668,41 @@ var iconButtonStyles = css`
 	   the full rationale. The filled label resolves the context var here on
 	   the host, with the tokens' white/black contrast flip as fallback. */
 
-	:host([variant="inherit-tinted"]) {
-		--_background-color: var(--semantics-buttons-inherit-tinted-background-color);
+	:host([appearance="inherit-tinted"]),
+	:host([expanded][appearance="inherit-tinted"]) {
+		--_background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
 		--_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
 		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-active-highlight-border-color);
+		--_is-hovered-background-color: var(--_background-color);
+		--_is-hovered-primary-content-color: var(--_primary-content-color);
+		--_is-hovered-highlight-border-color: var(--_highlight-border-color);
+		--_is-active-background-color: var(--_background-color);
+		--_is-active-primary-content-color: var(--_primary-content-color);
+		--_is-active-highlight-border-color: var(--_highlight-border-color);
 	}
 
-	:host([variant="inherit-filled"]) {
+	:host([appearance="inherit-filled"]),
+	:host([expanded][appearance="inherit-filled"]) {
 		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
 		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
 		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-active-highlight-border-color);
+		--_is-hovered-background-color: var(--_background-color);
+		--_is-hovered-primary-content-color: var(--_primary-content-color);
+		--_is-hovered-highlight-border-color: var(--_highlight-border-color);
+		--_is-active-background-color: var(--_background-color);
+		--_is-active-primary-content-color: var(--_primary-content-color);
+		--_is-active-highlight-border-color: var(--_highlight-border-color);
 	}
 
 	/* For inherit-filled the inner button keeps the inherited on-color:
 	   its currentColor background and the label's contrast flip resolve
 	   against it, and would otherwise self-reference the label. The label
 	   color moves to the content layer instead; see nldd-button. */
-	:host([variant="inherit-filled"]) .icon-button {
+	:host([appearance="inherit-filled"]) .icon-button {
 		color: inherit;
 	}
 
-	:host([variant="inherit-filled"]) .icon-button > * {
+	:host([appearance="inherit-filled"]) .icon-button > * {
 		color: var(--_primary-content-color);
 	}
 
@@ -718,7 +720,7 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="neutral-base"]) {
+	:host([expanded][appearance="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
 		--_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
@@ -730,7 +732,7 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="neutral-transparent"]) {
+	:host([expanded][appearance="neutral-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
 		--_highlight-border-color: transparent;
@@ -742,8 +744,8 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([expanded][variant="accent-filled"]),
-	:host([expanded][variant="primary"]) {
+	:host([expanded][appearance="accent-filled"]),
+	:host([expanded][appearance="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
 		--_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
 		--_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
@@ -755,7 +757,7 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="accent-transparent"]) {
+	:host([expanded][appearance="accent-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
 		--_highlight-border-color: transparent;
@@ -767,8 +769,8 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	:host([expanded][variant="critical-tinted"]),
-	:host([expanded][variant="destructive"]) {
+	:host([expanded][appearance="critical-tinted"]),
+	:host([expanded][appearance="destructive"]) {
 		--_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
 		--_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
 		--_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
@@ -780,7 +782,7 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
-	:host([expanded][variant="critical-transparent"]) {
+	:host([expanded][appearance="critical-transparent"]) {
 		--_background-color: transparent;
 		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
 		--_highlight-border-color: transparent;
@@ -792,34 +794,6 @@ var iconButtonStyles = css`
 		--_is-active-highlight-border-color: transparent;
 	}
 
-	/* The on-color variants keep their currentColor-derived content; expanded
-	   only deepens the background. Content is restated (not inherited from the
-	   resting block) because the default [expanded] block has equal
-	   specificity and later source order. See nldd-button for the rationale. */
-	:host([expanded][variant="inherit-tinted"]) {
-		--_background-color: var(--semantics-buttons-inherit-tinted-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-color);
-		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-highlight-border-color);
-	}
-
-	:host([expanded][variant="inherit-filled"]) {
-		--_background-color: var(--semantics-buttons-inherit-filled-is-expanded-background-color);
-		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-content-color));
-		--_highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-highlight-border-color);
-	}
-
 	:host([width="full"]) {
 		display: block;
 		width: 100%;
@@ -1423,6 +1397,7 @@ function template() {
 				<nldd-activity-indicator
 					timing="instant"
 					size=${loadingSize}
+					text=${this.loadingText || nothing}
 				></nldd-activity-indicator>
 			</div>
 		` : nothing;
@@ -1487,11 +1462,12 @@ var nlddIconButtonTranslations = { "components.icon-button.opens-in-new-tab-labe
 * Nederlandse Digitale Dienst Icon Button Component (Lit + TypeScript)
 *
 * @element nldd-icon-button
-* @attr {string} variant - Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces.
+* @attr {string} appearance - Visual style, color included: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit appearances derive their colors from currentColor, for buttons on colored surfaces.
 * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
 * @attr {boolean} hide-lg-text - In lg size, hides the text label and enlarges the icon by one step (28px)
-* @attr {boolean} no-highlight-border - Removes the per-variant highlight border (e.g. when a control group draws a single border instead).
+* @attr {boolean} no-highlight-border - Removes the per-appearance highlight border (e.g. when a control group draws a single border instead).
 * @attr {boolean} loading - Loading state (default: false). Shows an activity indicator over the visually hidden icon, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled).
+* @attr {string} loading-text - What the screen reader announces while `loading` is on, for a button that does more than load: "Aan het bewaren". Leave it out and the activity indicator says its translated "Laden".
 * @attr {boolean} disabled - Disabled state
 * @attr {boolean} no-tab - Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (an nldd-token in nldd-token-field, a button in a row of an nldd-list) that manages focus itself. Still mouse- and script-focusable.
 * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
@@ -1522,15 +1498,15 @@ var nlddIconButtonTranslations = { "components.icon-button.opens-in-new-tab-labe
 *
 * @fires click - When button is clicked (not fired when disabled)
 */
-var _NLDDIconButton;
-var NLDDIconButton = (_NLDDIconButton = class NLDDIconButton extends withTranslations(LitElement, nlddIconButtonTranslations) {
+var _NLDDIconButton = class NLDDIconButton extends withTranslations(LitElement, nlddIconButtonTranslations) {
 	constructor(..._args) {
 		super(..._args);
 		this._internals = this.attachInternals();
-		this.variant = "neutral-tinted";
+		this.appearance = "neutral-tinted";
 		this.size = "md";
 		this.hideLgText = false;
 		this.loading = false;
+		this.loadingText = "";
 		this.disabled = false;
 		this.noHighlightBorder = false;
 		this.type = "button";
@@ -1594,11 +1570,12 @@ var NLDDIconButton = (_NLDDIconButton = class NLDDIconButton extends withTransla
 	render() {
 		return template.call(this);
 	}
-}, _NLDDIconButton.styles = iconButtonStyles, _NLDDIconButton.formAssociated = true, _NLDDIconButton);
+};
+var NLDDIconButton = (_NLDDIconButton.styles = iconButtonStyles, _NLDDIconButton.formAssociated = true, _NLDDIconButton);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("neutral-tinted")
-})], NLDDIconButton.prototype, "variant", void 0);
+})], NLDDIconButton.prototype, "appearance", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("md")
@@ -1612,6 +1589,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDIconButton.prototype, "loading", void 0);
+__decorate([property({ attribute: "loading-text" })], NLDDIconButton.prototype, "loadingText", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true

package/dist/components/index.d.ts

@@ -117,4 +117,5 @@ export { NLDDStepIndicator, NLDDStepIndicatorItem } from './status-and-feedback/
 export { NLDDActivityIndicator } from './status-and-feedback/activity-indicator/activity-indicator.js';
 export { NLDDStatusBar } from './status-and-feedback/status-bar/status-bar.js';
 export { NLDDJustInTimeEducation } from './status-and-feedback/just-in-time-education/just-in-time-education.js';
+export { setTranslations } from '../utilities/translations.js';
 //# sourceMappingURL=index.d.ts.map