@nldd/design-system 0.8.83 → 0.8.85

package/dist/components/content/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.ts"],"names":[],"mappings":"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"}

package/dist/components/content/icon/icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA4FtB,CAAC"}
+{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAwHtB,CAAC"}

package/dist/components/content/icon/icon.styles.js

@@ -15,6 +15,7 @@ export const iconStyles = css `
 		--_size: 100%;
 		--_color: inherit;
 		--_custom-color: inherit;
+		--_glyph-scale: 1;
 
 		display: inline-flex;
 		width: var(--_size);
@@ -89,7 +90,34 @@ export const iconStyles = css `
 
 	svg {
 		display: block;
-		width: 100%;
+		width: calc(100% * var(--_glyph-scale));
+	}
+
+
+	/* # Box
+	 *
+	 * The colour question turns around: [color] and [custom-color] paint the
+	 * box, and the glyph takes whatever contrasts with it. That flip is the
+	 * reason this is a component option and not a box a consumer builds; the
+	 * pair is the part a consumer cannot check by eye.
+	 *
+	 * [size] measures the box, so the same size renders a smaller glyph with
+	 * [box] than without. Four fifths of the box, and a radius of a fifth,
+	 * both written as a ratio so a change lands everywhere at once. */
+
+	:host([box]) {
+		--_glyph-scale: calc(4 / 5);
+
+		border-radius: calc(var(--_size) / 5);
+		background-color: currentColor;
+		height: var(--_size);
+		justify-content: center;
+	}
+
+	/* Resolved against the host's currentColor, which the rule above painted the
+	   box with, and only then assigned to the glyph. Same route as nldd-badge. */
+	:host([box]) svg {
+		color: var(--semantics-content-contrast-color);
 	}
 `;
 //# sourceMappingURL=icon.styles.js.map

package/dist/components/content/icon/icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4F5B,CAAC"}
+{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwH5B,CAAC"}

package/dist/components/content/image/image.d.ts

@@ -50,7 +50,7 @@
  * @attr {object} translations - Override translation keys (e.g. the message
  *   shown when the image fails to load); unset keys fall back to Dutch.
  *
- * @slot - Custom `<img>` or `<picture>` (overrides the src-based default).
+ * @slot - Custom `<img>`, `<picture>` or inline `<svg>` (overrides the src-based default). An inline svg keeps its own colors and scales by its viewBox, so a drawing gets the same box, ratio and caption as a photo.
  *   The internal `error` listener is attached only to the built-in `<img>`, so
  *   slotted content does not trigger the error-state overlay automatically.
  *   Consumers slotting their own image are responsible for handling its

package/dist/components/content/image/image.js

@@ -50,7 +50,7 @@
  * @attr {object} translations - Override translation keys (e.g. the message
  *   shown when the image fails to load); unset keys fall back to Dutch.
  *
- * @slot - Custom `<img>` or `<picture>` (overrides the src-based default).
+ * @slot - Custom `<img>`, `<picture>` or inline `<svg>` (overrides the src-based default). An inline svg keeps its own colors and scales by its viewBox, so a drawing gets the same box, ratio and caption as a photo.
  *   The internal `error` listener is attached only to the built-in `<img>`, so
  *   slotted content does not trigger the error-state overlay automatically.
  *   Consumers slotting their own image are responsible for handling its

package/dist/components/content/image/image.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAmZvB,CAAC"}
+{"version":3,"file":"image.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBA8ZvB,CAAC"}

package/dist/components/content/image/image.styles.js

@@ -115,6 +115,17 @@ export const imageStyles = css `
 		object-position: var(--_object-position) !important;
 	}
 
+	/* An inline <svg> is a drawing rather than a file, and it arrives through the
+	   same slot. It sizes like <picture>: width and height apply to it, object-fit
+	   does not, so its own viewBox does the fitting. */
+	::slotted(svg) {
+		${slottedReset}
+		display: block !important;
+		width: 100% !important;
+		height: 100% !important;
+		max-width: 100% !important;
+	}
+
 	/* <picture> is a wrapper that picks the right <source>; layout properties
 	   like width/height DO apply to it directly even though object-fit doesn't.
 	   Size it so the slotted picture fills the media wrapper, then let the

package/dist/components/content/image/image.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiFlB,YAAY;;;;;;;;;;;;;;IAcZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Rf,CAAC"}
+{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiFlB,YAAY;;;;;;;;;;;;;IAaZ,YAAY;;;;;;;;;;;;IAYZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Rf,CAAC"}

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -1,41 +1,41 @@
 /**
  * Nederlandse Digitale Dienst Keyboard Shortcut Component (Lit + TypeScript)
  *
- * Toont een toetsencombinatie (zoals Cmd+K of Ctrl+Shift+P) in één gecombineerde
- * container met semantische <kbd>-elementen per toets.
+ * Shows a key combination (such as Cmd+K or Ctrl+Shift+P) in one combined
+ * container with a semantic <kbd> element per key.
  *
- * Op touch-only devices (geen hover-capable input) wordt de shortcut standaard
- * verborgen omdat hij niet aanroepbaar is. Gebruik het `always-visible` attribuut
- * wanneer de shortcut puur informatief is en altijd zichtbaar moet blijven.
+ * On touch-only devices (no hover-capable input) the shortcut is hidden by
+ * default, because it cannot be invoked there. Use the `always-visible`
+ * attribute when the shortcut is purely informative and should stay visible.
  *
- * Voor cross-platform shortcuts kunnen `mac-keys`, `windows-keys` en `linux-keys`
- * worden gezet — het component picks de juiste op basis van de gedetecteerde OS,
- * met `keys` als fallback voor onbekende platforms.
+ * For cross-platform shortcuts you can set `mac-keys`, `windows-keys` and
+ * `linux-keys`. The component picks the right one from the detected OS, with
+ * `keys` as the fallback for unknown platforms.
  *
  * @element nldd-keyboard-shortcut
- * @attr {string} keys - Toetsen gescheiden door '+' (bijv. 'Cmd+K' of 'Ctrl+Shift+P').
- *   Gebruik '+++' voor een letterlijke '+' toets: 'Ctrl+++' wordt 'Ctrl' + '+'.
- *   Voor complexere scenario's (bijv. combo met meerdere '+' keys) kun je in plaats
- *   van het keys-attribuut de default slot gebruiken met eigen <kbd> elementen.
- * @attr {string} mac-keys - Optionele override voor macOS (incl. iPhone/iPad/iPod).
- * @attr {string} windows-keys - Optionele override voor Windows.
- * @attr {string} linux-keys - Optionele override voor Linux/ChromeOS.
- * @attr {string} size - Grootte: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' neemt de
- *   font-size over van de container; bij de box-variant schalen de keycaps dan mee in em.
- * @attr {string} variant - 'box' (default) toont elke toets als keycap met vulling en
- *   highlight-rand; 'simple' toont de toetsen als platte tekst met scheidingstekens —
- *   lichter, voor inline gebruik zoals in een menu-item.
- * @attr {boolean} always-visible - Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn.
- * @attr {string} color - 'neutral' (default) gebruikt de eigen component-kleuren. 'inherit'
- *   laat de toetsen en scheidingstekens de omringende tekstkleur (currentColor) volgen, met
- *   een doorschijnende contrast-vulling en highlight-rand — handig op een gevulde vlakkleur
- *   of een gemarkeerde rij.
- * @attr {'mac'|'windows'|'linux'|'other'} debug-os - Ontwikkelhulp: overschrijft de
- *   OS-detectie voor deze instantie, zodat je in Storybook of documentatie meerdere
- *   platform-varianten naast elkaar kunt tonen. Niet bedoeld voor productiegebruik;
- *   laat het leeg (default) zodat de echte OS-detectie geldt.
+ * @attr {string} keys - Keys separated by '+' (e.g. 'Cmd+K' or 'Ctrl+Shift+P').
+ *   Use '+++' for a literal '+' key: 'Ctrl+++' becomes 'Ctrl' + '+'. For more
+ *   complex cases (a combo with several '+' keys, for instance) use the default
+ *   slot with your own <kbd> elements instead of the keys attribute.
+ * @attr {string} mac-keys - Optional override for macOS (iPhone/iPad/iPod included).
+ * @attr {string} windows-keys - Optional override for Windows.
+ * @attr {string} linux-keys - Optional override for Linux/ChromeOS.
+ * @attr {string} size - Size: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' takes the
+ *   font-size from the container; in the box variant the keycaps then scale along in em.
+ * @attr {string} variant - 'box' (default) shows each key as a keycap with a fill and a
+ *   highlight edge. 'simple' shows the keys as plain text with separators: lighter, for
+ *   inline use such as in a menu item.
+ * @attr {boolean} always-visible - Show on touch-only devices too, where shortcuts cannot be invoked.
+ * @attr {string} color - 'neutral' (default) uses the component colors of its own. 'inherit'
+ *   lets the keys and separators follow the surrounding text color (currentColor), with a
+ *   translucent contrast fill and highlight edge. Useful on a filled surface color or a
+ *   highlighted row.
+ * @attr {'mac'|'windows'|'linux'|'other'} debug-os - Development aid: overrides the OS
+ *   detection for this instance, so you can show several platform variants side by side in
+ *   Storybook or documentation. Not meant for production use; leave it empty (default) so
+ *   the real OS detection applies.
  *
- * @slot - Optionele custom <kbd>-elementen. Wordt genegeerd als keys is opgegeven.
+ * @slot - Optional custom <kbd> elements. Ignored when keys is set.
  */
 import { LitElement } from 'lit';
 import { type OS } from '../../../utilities/os.js';

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js

@@ -1,41 +1,41 @@
 /**
  * Nederlandse Digitale Dienst Keyboard Shortcut Component (Lit + TypeScript)
  *
- * Toont een toetsencombinatie (zoals Cmd+K of Ctrl+Shift+P) in één gecombineerde
- * container met semantische <kbd>-elementen per toets.
+ * Shows a key combination (such as Cmd+K or Ctrl+Shift+P) in one combined
+ * container with a semantic <kbd> element per key.
  *
- * Op touch-only devices (geen hover-capable input) wordt de shortcut standaard
- * verborgen omdat hij niet aanroepbaar is. Gebruik het `always-visible` attribuut
- * wanneer de shortcut puur informatief is en altijd zichtbaar moet blijven.
+ * On touch-only devices (no hover-capable input) the shortcut is hidden by
+ * default, because it cannot be invoked there. Use the `always-visible`
+ * attribute when the shortcut is purely informative and should stay visible.
  *
- * Voor cross-platform shortcuts kunnen `mac-keys`, `windows-keys` en `linux-keys`
- * worden gezet — het component picks de juiste op basis van de gedetecteerde OS,
- * met `keys` als fallback voor onbekende platforms.
+ * For cross-platform shortcuts you can set `mac-keys`, `windows-keys` and
+ * `linux-keys`. The component picks the right one from the detected OS, with
+ * `keys` as the fallback for unknown platforms.
  *
  * @element nldd-keyboard-shortcut
- * @attr {string} keys - Toetsen gescheiden door '+' (bijv. 'Cmd+K' of 'Ctrl+Shift+P').
- *   Gebruik '+++' voor een letterlijke '+' toets: 'Ctrl+++' wordt 'Ctrl' + '+'.
- *   Voor complexere scenario's (bijv. combo met meerdere '+' keys) kun je in plaats
- *   van het keys-attribuut de default slot gebruiken met eigen <kbd> elementen.
- * @attr {string} mac-keys - Optionele override voor macOS (incl. iPhone/iPad/iPod).
- * @attr {string} windows-keys - Optionele override voor Windows.
- * @attr {string} linux-keys - Optionele override voor Linux/ChromeOS.
- * @attr {string} size - Grootte: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' neemt de
- *   font-size over van de container; bij de box-variant schalen de keycaps dan mee in em.
- * @attr {string} variant - 'box' (default) toont elke toets als keycap met vulling en
- *   highlight-rand; 'simple' toont de toetsen als platte tekst met scheidingstekens —
- *   lichter, voor inline gebruik zoals in een menu-item.
- * @attr {boolean} always-visible - Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn.
- * @attr {string} color - 'neutral' (default) gebruikt de eigen component-kleuren. 'inherit'
- *   laat de toetsen en scheidingstekens de omringende tekstkleur (currentColor) volgen, met
- *   een doorschijnende contrast-vulling en highlight-rand — handig op een gevulde vlakkleur
- *   of een gemarkeerde rij.
- * @attr {'mac'|'windows'|'linux'|'other'} debug-os - Ontwikkelhulp: overschrijft de
- *   OS-detectie voor deze instantie, zodat je in Storybook of documentatie meerdere
- *   platform-varianten naast elkaar kunt tonen. Niet bedoeld voor productiegebruik;
- *   laat het leeg (default) zodat de echte OS-detectie geldt.
+ * @attr {string} keys - Keys separated by '+' (e.g. 'Cmd+K' or 'Ctrl+Shift+P').
+ *   Use '+++' for a literal '+' key: 'Ctrl+++' becomes 'Ctrl' + '+'. For more
+ *   complex cases (a combo with several '+' keys, for instance) use the default
+ *   slot with your own <kbd> elements instead of the keys attribute.
+ * @attr {string} mac-keys - Optional override for macOS (iPhone/iPad/iPod included).
+ * @attr {string} windows-keys - Optional override for Windows.
+ * @attr {string} linux-keys - Optional override for Linux/ChromeOS.
+ * @attr {string} size - Size: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' takes the
+ *   font-size from the container; in the box variant the keycaps then scale along in em.
+ * @attr {string} variant - 'box' (default) shows each key as a keycap with a fill and a
+ *   highlight edge. 'simple' shows the keys as plain text with separators: lighter, for
+ *   inline use such as in a menu item.
+ * @attr {boolean} always-visible - Show on touch-only devices too, where shortcuts cannot be invoked.
+ * @attr {string} color - 'neutral' (default) uses the component colors of its own. 'inherit'
+ *   lets the keys and separators follow the surrounding text color (currentColor), with a
+ *   translucent contrast fill and highlight edge. Useful on a filled surface color or a
+ *   highlighted row.
+ * @attr {'mac'|'windows'|'linux'|'other'} debug-os - Development aid: overrides the OS
+ *   detection for this instance, so you can show several platform variants side by side in
+ *   Storybook or documentation. Not meant for production use; leave it empty (default) so
+ *   the real OS detection applies.
  *
- * @slot - Optionele custom <kbd>-elementen. Wordt genegeerd als keys is opgegeven.
+ * @slot - Optional custom <kbd> elements. Ignored when keys is set.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/components/content/rich-text/rich-text.d.ts

@@ -5,31 +5,31 @@
  * typography. Uses no shadow DOM so styles apply to all nested elements.
  * Import nldd-rich-text.css globally in your application.
  *
- * ## Breedtezones
- * Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen,
- * lijsten, blockquote, div/section) leest op de `main`-maat; media en
- * tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent;
- * al het overige — codeblokken en élke component — krijgt de volledige
- * `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is
- * maar niet geforceerd wordt. Per kind te overschrijven met
- * `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en
- * full als bleed naar rechts; met `centered` zijn ze symmetrisch.
+ * ## Width zones
+ * Children are placed in three zones: text (headings, paragraphs, lists,
+ * blockquote, div/section) reads at the `main` size; media and tables (img,
+ * figure, video, iframe, table) get the `wide` accent; everything else, code
+ * blocks and every component, gets the full `full` span with
+ * `justify-self: start`, so the room is available without being forced.
+ * Overridable per child with `data-width="main" | "wide" | "full"`. In the
+ * left-aligned layout, wide and full read as a bleed to the right; with
+ * `centered` they are symmetrical.
  *
  * @element nldd-rich-text
  *
  * @attr {string} spacing - Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose'
  * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
- * @attr {boolean} hyphens - Opt-in automatische woordafbreking voor doorlopende
- *   tekst (p, li, dd). Vereist een correcte `lang` op de pagina (bijv.
- *   `lang="nl"` op `<html>`): zonder taalinfo breekt de browser niet af. Een
- *   `overflow-wrap: break-word`-vangnet op p/li staat altijd aan, los van dit
- *   attribuut, zodat lange URLs en samenstellingen ook zonder woordenboek
- *   netjes breken in plaats van te overlopen.
- * @attr {string} color - 'inherit' laat alle tekst de kleur van de ondergrond
- *   volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven
- *   onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde
- *   kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen
- *   en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren.
+ * @attr {boolean} hyphens - Opt-in automatic hyphenation for running text (p,
+ *   li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for
+ *   instance): without language information the browser does not hyphenate. An
+ *   `overflow-wrap: break-word` safety net on p/li is always on, independent of
+ *   this attribute, so long URLs and compounds break neatly instead of
+ *   overflowing even without a dictionary.
+ * @attr {string} color - 'inherit' lets all text follow the color of the
+ *   surface (for colored areas such as the filled categories). Links stay
+ *   underlined as an affordance; secondary text (figcaption) gets the same
+ *   color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr
+ *   keep their own surfaces. Empty = the default content colors.
  * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
  */
 import { LitElement } from 'lit';

package/dist/components/content/rich-text/rich-text.js

@@ -11,31 +11,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * typography. Uses no shadow DOM so styles apply to all nested elements.
  * Import nldd-rich-text.css globally in your application.
  *
- * ## Breedtezones
- * Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen,
- * lijsten, blockquote, div/section) leest op de `main`-maat; media en
- * tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent;
- * al het overige — codeblokken en élke component — krijgt de volledige
- * `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is
- * maar niet geforceerd wordt. Per kind te overschrijven met
- * `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en
- * full als bleed naar rechts; met `centered` zijn ze symmetrisch.
+ * ## Width zones
+ * Children are placed in three zones: text (headings, paragraphs, lists,
+ * blockquote, div/section) reads at the `main` size; media and tables (img,
+ * figure, video, iframe, table) get the `wide` accent; everything else, code
+ * blocks and every component, gets the full `full` span with
+ * `justify-self: start`, so the room is available without being forced.
+ * Overridable per child with `data-width="main" | "wide" | "full"`. In the
+ * left-aligned layout, wide and full read as a bleed to the right; with
+ * `centered` they are symmetrical.
  *
  * @element nldd-rich-text
  *
  * @attr {string} spacing - Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose'
  * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
- * @attr {boolean} hyphens - Opt-in automatische woordafbreking voor doorlopende
- *   tekst (p, li, dd). Vereist een correcte `lang` op de pagina (bijv.
- *   `lang="nl"` op `<html>`): zonder taalinfo breekt de browser niet af. Een
- *   `overflow-wrap: break-word`-vangnet op p/li staat altijd aan, los van dit
- *   attribuut, zodat lange URLs en samenstellingen ook zonder woordenboek
- *   netjes breken in plaats van te overlopen.
- * @attr {string} color - 'inherit' laat alle tekst de kleur van de ondergrond
- *   volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven
- *   onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde
- *   kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen
- *   en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren.
+ * @attr {boolean} hyphens - Opt-in automatic hyphenation for running text (p,
+ *   li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for
+ *   instance): without language information the browser does not hyphenate. An
+ *   `overflow-wrap: break-word` safety net on p/li is always on, independent of
+ *   this attribute, so long URLs and compounds break neatly instead of
+ *   overflowing even without a dictionary.
+ * @attr {string} color - 'inherit' lets all text follow the color of the
+ *   surface (for colored areas such as the filled categories). Links stay
+ *   underlined as an affordance; secondary text (figcaption) gets the same
+ *   color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr
+ *   keep their own surfaces. Empty = the default content colors.
  * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
  */
 import { LitElement } from 'lit';

package/dist/components/content/text/text.d.ts

@@ -17,6 +17,12 @@
  * content, so text inside a row travels with that row as it is hovered or
  * selected. Standalone that channel is unset and the semantic color answers.
  *
+ * A line stops at `--semantics-text-max-width`, 40em, so it holds the same
+ * number of characters at every size and a wide column does not turn one
+ * sentence into a ruler. Override that variable, or `max-width` on the element,
+ * where a line is meant to run the full width: a label in a table cell, a value
+ * beside its own heading.
+ *
  * @element nldd-text
  * @attr {string} size - Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
  * @attr {string} weight - Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale.

package/dist/components/content/text/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/text/text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC5C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACtD,KAAK,KAAK,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AACjG,KAAK,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAGlB,MAAM,EAAE,MAAM,CAAa;IAO3B,UAAU,EAAE,UAAU,CAAU;IAGhC,KAAK,EAAE,KAAK,CAAa;IAOzB,mBAAmB,EAAE,mBAAmB,CAAU;IAEzC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/text/text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC5C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACtD,KAAK,KAAK,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AACjG,KAAK,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAGlB,MAAM,EAAE,MAAM,CAAa;IAO3B,UAAU,EAAE,UAAU,CAAU;IAGhC,KAAK,EAAE,KAAK,CAAa;IAOzB,mBAAmB,EAAE,mBAAmB,CAAU;IAEzC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/components/content/text/text.js

@@ -17,6 +17,12 @@
  * content, so text inside a row travels with that row as it is hovered or
  * selected. Standalone that channel is unset and the semantic color answers.
  *
+ * A line stops at `--semantics-text-max-width`, 40em, so it holds the same
+ * number of characters at every size and a wide column does not turn one
+ * sentence into a ruler. Override that variable, or `max-width` on the element,
+ * where a line is meant to run the full width: a label in a table cell, a value
+ * beside its own heading.
+ *
  * @element nldd-text
  * @attr {string} size - Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
  * @attr {string} weight - Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale.

package/dist/components/content/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../../src/components/content/text/text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AASvC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAIN,SAAI,GAAS,IAAI,CAAC;QAGlB,WAAM,GAAW,SAAS,CAAC;QAO3B,eAAU,GAAe,MAAM,CAAC;QAGhC,UAAK,GAAU,SAAS,CAAC;QAOzB,wBAAmB,GAAwB,MAAM,CAAC;IAKnD,CAAC;IAHS,MAAM;QACd,OAAO,QAAQ,EAAE,CAAC;IACnB,CAAC;;AA3Be,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAO,IAAI,CAAC,EAAE,CAAC;sCACpD;AAGlB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,SAAS,CAAC,EAAE,CAAC;wCAClD;AAO3B;IALC,QAAQ,CAAC;QACT,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,aAAa;QACxB,SAAS,EAAE,iBAAiB,CAAa,MAAM,CAAC;KAChD,CAAC;4CAC8B;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAQ,SAAS,CAAC,EAAE,CAAC;uCACnD;AAOzB;IALC,QAAQ,CAAC;QACT,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,sBAAsB;QACjC,SAAS,EAAE,iBAAiB,CAAsB,MAAM,CAAC;KACzD,CAAC;qDACgD;AAxBtC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA6BpB"}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../../src/components/content/text/text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AASvC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAIN,SAAI,GAAS,IAAI,CAAC;QAGlB,WAAM,GAAW,SAAS,CAAC;QAO3B,eAAU,GAAe,MAAM,CAAC;QAGhC,UAAK,GAAU,SAAS,CAAC;QAOzB,wBAAmB,GAAwB,MAAM,CAAC;IAKnD,CAAC;IAHS,MAAM;QACd,OAAO,QAAQ,EAAE,CAAC;IACnB,CAAC;;AA3Be,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAO,IAAI,CAAC,EAAE,CAAC;sCACpD;AAGlB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,SAAS,CAAC,EAAE,CAAC;wCAClD;AAO3B;IALC,QAAQ,CAAC;QACT,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,aAAa;QACxB,SAAS,EAAE,iBAAiB,CAAa,MAAM,CAAC;KAChD,CAAC;4CAC8B;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAQ,SAAS,CAAC,EAAE,CAAC;uCACnD;AAOzB;IALC,QAAQ,CAAC;QACT,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,sBAAsB;QACjC,SAAS,EAAE,iBAAiB,CAAsB,MAAM,CAAC;KACzD,CAAC;qDACgD;AAxBtC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA6BpB"}

package/dist/components/content/text/text.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/text/text.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAiHtB,CAAC"}
+{"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/text/text.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAmHtB,CAAC"}

package/dist/components/content/text/text.styles.js

@@ -8,10 +8,12 @@ export const textStyles = css `
 		--_font-size: var(--primitives-font-size-100);
 		--_font-weight: var(--primitives-font-weight-body-regular);
 		--_line-height: var(--primitives-line-height-snug);
+		--_max-width: var(--semantics-text-max-width);
 		--_color: var(--context-content-color, var(--semantics-content-color));
 		--_text-align: left;
 
 		display: block;
+		max-width: var(--_max-width);
 		color: var(--_color);
 		text-align: var(--_text-align);
 		font: var(--_font-weight) var(--_font-size) / var(--_line-height) var(--primitives-font-family-body);

package/dist/components/content/text/text.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../../src/components/content/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiH5B,CAAC"}
+{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../../src/components/content/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmH5B,CAAC"}

package/dist/components/content/title/title.d.ts

@@ -7,10 +7,10 @@
  * @element nldd-title
  *
  * @attr {number} size - Visual size of the title: 1–6 (default: 3)
- * @attr {string} color - 'inherit' lets the title take the text color of the
- *   ondergrond volgen (voor gekleurde vlakken zoals de filled-categories);
- *   overline en subtitle krijgen dezelfde kleur op verlaagde dekking.
- *   Leeg = standaard contentkleuren.
+ * @attr {string} color - 'inherit' lets the title follow the text color of the
+ *   surface (for colored areas such as the filled categories); overline and
+ *   subtitle get the same color at a lowered opacity. Empty = the default
+ *   content colors.
  *
  * @slot overline - Optional overline above the title
  * @slot - Title text (use h1–h6 for semantics)

package/dist/components/content/title/title.js

@@ -13,10 +13,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @element nldd-title
  *
  * @attr {number} size - Visual size of the title: 1–6 (default: 3)
- * @attr {string} color - 'inherit' lets the title take the text color of the
- *   ondergrond volgen (voor gekleurde vlakken zoals de filled-categories);
- *   overline en subtitle krijgen dezelfde kleur op verlaagde dekking.
- *   Leeg = standaard contentkleuren.
+ * @attr {string} color - 'inherit' lets the title follow the text color of the
+ *   surface (for colored areas such as the filled categories); overline and
+ *   subtitle get the same color at a lowered opacity. Empty = the default
+ *   content colors.
  *
  * @slot overline - Optional overline above the title
  * @slot - Title text (use h1–h6 for semantics)

package/dist/components/content/tooltip/tooltip.d.ts

@@ -6,7 +6,7 @@
  *
  * @element nldd-tooltip
  * @attr {string} text - Tooltip text
- * @attr {boolean} open - Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behaviour.
+ * @attr {boolean} open - Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behavior.
  * @attr {string} placement - Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices)
  * @attr {string} timing - When the tooltip appears on hover: 'instant' — right away, without a show delay. 'default' — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant.
  *

package/dist/components/content/tooltip/tooltip.js

@@ -6,7 +6,7 @@
  *
  * @element nldd-tooltip
  * @attr {string} text - Tooltip text
- * @attr {boolean} open - Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behaviour.
+ * @attr {boolean} open - Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behavior.
  * @attr {string} placement - Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices)
  * @attr {string} timing - When the tooltip appears on hover: 'instant' — right away, without a show delay. 'default' — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant.
  *

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.147.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-TpIL8G4G.js → dist-762GHPyH.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, at 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-Ccw7ZfsU.js";
-import { n as cssLanguage, t as css } from "./dist-afrAoubg.js";
-import { a as tsxLanguage, i as jsxLanguage, n as javascript, o as typescriptLanguage, r as javascriptLanguage } from "./dist-C0PiB1dr.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, V as parseMixed, W as EditorView, at 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-C6gnorjP.js";
+import { n as cssLanguage, t as css } from "./dist-C09E9-dJ.js";
+import { a as tsxLanguage, i as jsxLanguage, n as javascript, o as typescriptLanguage, r as javascriptLanguage } from "./dist-CjaG8dOI.js";
 //#region node_modules/@lezer/html/dist/index.js
 var scriptText = 55;
 var StartCloseScriptTag = 1;

package/dist/components/{dist-OBifyiJS.js → dist-BB7TxeMK.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-Ccw7ZfsU.js";
-import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-C400RcFU.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-C6gnorjP.js";
+import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-B_3OW7pC.js";
 //#region node_modules/@lezer/python/dist/index.js
 var printKeyword = 1;
 var indent = 194;

package/dist/components/{dist-CJR_Rwhh.js → dist-BJI4-6iQ.js}

@@ -1,4 +1,4 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, W as EditorView, at 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-Ccw7ZfsU.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, W as EditorView, at 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-C6gnorjP.js";
 //#region node_modules/@lezer/xml/dist/index.js
 var StartTag = 1;
 var StartCloseTag = 2;

package/dist/components/{dist-C400RcFU.js → dist-B_3OW7pC.js}

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