@nldd/design-system 0.8.86 → 0.8.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +660 -142
- package/dist/components/actions/icon-button/icon-button.d.ts +2 -2
- package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.js +3 -3
- package/dist/components/actions/icon-button/icon-button.js.map +1 -1
- package/dist/components/components.js +1140 -243
- package/dist/components/content/avatar/avatar.d.ts +6 -6
- package/dist/components/content/avatar/avatar.d.ts.map +1 -1
- package/dist/components/content/avatar/avatar.js +9 -9
- package/dist/components/content/avatar/avatar.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +4 -0
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-gallery-status.d.ts.map +1 -1
- package/dist/components/content/icon/icon-gallery-status.js +3 -26
- package/dist/components/content/icon/icon-gallery-status.js.map +1 -1
- package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
- package/dist/components/content/icon/icon-registry.js +2 -0
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/icon/icon.d.ts +2 -2
- package/dist/components/content/icon/icon.d.ts.map +1 -1
- package/dist/components/content/icon/icon.js +3 -3
- package/dist/components/content/icon/icon.js.map +1 -1
- package/dist/components/content/icon/icon.styles.d.ts.map +1 -1
- package/dist/components/content/icon/icon.styles.js +8 -2
- package/dist/components/content/icon/icon.styles.js.map +1 -1
- package/dist/components/content/rich-text/rich-text.d.ts +7 -6
- package/dist/components/content/rich-text/rich-text.d.ts.map +1 -1
- package/dist/components/content/rich-text/rich-text.js +8 -7
- package/dist/components/content/rich-text/rich-text.js.map +1 -1
- package/dist/components/content/text/text.d.ts +2 -2
- package/dist/components/content/text/text.js +3 -3
- package/dist/components/content/title/title.d.ts +5 -5
- package/dist/components/content/title/title.d.ts.map +1 -1
- package/dist/components/content/title/title.js +6 -6
- package/dist/components/content/title/title.js.map +1 -1
- package/dist/components/content/tooltip/tooltip.d.ts +2 -2
- package/dist/components/content/tooltip/tooltip.d.ts.map +1 -1
- package/dist/components/content/tooltip/tooltip.js +4 -4
- package/dist/components/content/tooltip/tooltip.js.map +1 -1
- package/dist/components/{dist-C09E9-dJ.js → dist-B_Mnmrj4.js} +1 -1
- package/dist/components/{dist-CjaG8dOI.js → dist-ByH8hQze.js} +2 -2
- package/dist/components/{dist-BB7TxeMK.js → dist-CRwuSgMM.js} +2 -2
- package/dist/components/{dist-la_b3ZSq.js → dist-CSrO_mYe.js} +1 -1
- package/dist/components/{dist-762GHPyH.js → dist-CX3DK4i7.js} +3 -3
- package/dist/components/{dist-DZoFKUO-.js → dist-CbCO0WCd.js} +1 -1
- package/dist/components/{dist-B_3OW7pC.js → dist-CgDuh26K.js} +1 -1
- package/dist/components/{dist-DaavuU6W.js → dist-DXZ-cFAl.js} +2 -2
- package/dist/components/{dist-CRsR6ckU.js → dist-LX8LuMac.js} +1 -1
- package/dist/components/{dist-BJI4-6iQ.js → dist-eVFegyjM.js} +1 -1
- package/dist/components/{dist-C6gnorjP.js → dist-fIxe0l7k.js} +9 -1
- package/dist/components/{icon-Cd4BloIM.js → icon-C_zwJZ_g.js} +14 -4
- package/dist/components/{icon-button-CXN0yaVx.js → icon-button-CEz4MB9H.js} +10 -10
- package/dist/components/inputs/code-editor/code-editor.styles.js +2 -2
- package/dist/components/inputs/text-editor/text-editor.annotation-sentinels.d.ts +3 -5
- package/dist/components/inputs/text-editor/text-editor.annotation-sentinels.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.annotation-sentinels.js +30 -44
- package/dist/components/inputs/text-editor/text-editor.annotation-sentinels.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.annotations.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.annotations.js +31 -5
- package/dist/components/inputs/text-editor/text-editor.annotations.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.commands.d.ts +14 -2
- package/dist/components/inputs/text-editor/text-editor.commands.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.commands.js +115 -36
- package/dist/components/inputs/text-editor/text-editor.commands.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.cursor.d.ts +7 -0
- package/dist/components/inputs/text-editor/text-editor.cursor.d.ts.map +1 -0
- package/dist/components/inputs/text-editor/text-editor.cursor.js +207 -0
- package/dist/components/inputs/text-editor/text-editor.cursor.js.map +1 -0
- package/dist/components/inputs/text-editor/text-editor.d.ts +65 -13
- package/dist/components/inputs/text-editor/text-editor.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.emphasis.d.ts +32 -0
- package/dist/components/inputs/text-editor/text-editor.emphasis.d.ts.map +1 -0
- package/dist/components/inputs/text-editor/text-editor.emphasis.js +229 -0
- package/dist/components/inputs/text-editor/text-editor.emphasis.js.map +1 -0
- package/dist/components/inputs/text-editor/text-editor.js +177 -18
- package/dist/components/inputs/text-editor/text-editor.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.links.d.ts +8 -0
- package/dist/components/inputs/text-editor/text-editor.links.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.links.js +30 -4
- package/dist/components/inputs/text-editor/text-editor.links.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.markdown.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.markdown.js +52 -18
- package/dist/components/inputs/text-editor/text-editor.markdown.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.mentions.d.ts +78 -11
- package/dist/components/inputs/text-editor/text-editor.mentions.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.mentions.js +190 -41
- package/dist/components/inputs/text-editor/text-editor.mentions.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.ordered-list.d.ts +0 -2
- package/dist/components/inputs/text-editor/text-editor.ordered-list.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.ordered-list.js +21 -1
- package/dist/components/inputs/text-editor/text-editor.ordered-list.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.styles.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.styles.js +11 -10
- package/dist/components/inputs/text-editor/text-editor.styles.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.syntax.d.ts +9 -0
- package/dist/components/inputs/text-editor/text-editor.syntax.d.ts.map +1 -0
- package/dist/components/inputs/text-editor/text-editor.syntax.js +20 -0
- package/dist/components/inputs/text-editor/text-editor.syntax.js.map +1 -0
- package/dist/components/layout/page-sections/page-section-controls.d.ts +0 -70
- package/dist/components/layout/page-sections/page-section-controls.d.ts.map +1 -1
- package/dist/components/layout/page-sections/page-section-controls.js +0 -3
- package/dist/components/layout/page-sections/page-section-controls.js.map +1 -1
- package/dist/components/layout/sheet/sheet.d.ts +3 -7
- package/dist/components/layout/sheet/sheet.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.js +4 -18
- package/dist/components/layout/sheet/sheet.js.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.js +0 -4
- package/dist/components/layout/sheet/sheet.styles.js.map +1 -1
- package/dist/components/layout/sheet/sheet.template.js +2 -2
- package/dist/components/layout/sheet/sheet.template.js.map +1 -1
- package/dist/components/layout/window/window.d.ts +2 -4
- package/dist/components/layout/window/window.d.ts.map +1 -1
- package/dist/components/layout/window/window.js +4 -14
- package/dist/components/layout/window/window.js.map +1 -1
- package/dist/components/layout/window/window.template.d.ts.map +1 -1
- package/dist/components/layout/window/window.template.js +2 -2
- package/dist/components/layout/window/window.template.js.map +1 -1
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.d.ts +2 -2
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.js +3 -3
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.d.ts +2 -2
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.js +3 -3
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.d.ts +2 -2
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.js +3 -3
- package/dist/components/lists-and-tables/list/list.d.ts +4 -2
- package/dist/components/lists-and-tables/list/list.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.js +23 -5
- package/dist/components/lists-and-tables/list/list.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.js +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.js.map +1 -1
- package/dist/components/navigation/link/link.d.ts +2 -2
- package/dist/components/navigation/link/link.d.ts.map +1 -1
- package/dist/components/navigation/link/link.js +3 -2
- package/dist/components/navigation/link/link.js.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts +3 -3
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js +4 -4
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.d.ts +8 -0
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.js +14 -0
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +22 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.js +6 -2
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.d.ts +3 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js +5 -0
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.template.js +1 -0
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.template.js.map +1 -1
- package/dist/favicon.svg +8 -2
- package/dist/nldd.min.js +525 -496
- package/dist/types/vue.d.ts +31 -23
- package/package.json +1 -1
package/dist/types/vue.d.ts
CHANGED
|
@@ -149,7 +149,7 @@ declare module 'vue' {
|
|
|
149
149
|
'showText'?: NLDDActivityIndicator['showText'];
|
|
150
150
|
/** Label text. Falls back to the translated "Laden" when unset. */
|
|
151
151
|
'text'?: NLDDActivityIndicator['text'];
|
|
152
|
-
/** '
|
|
152
|
+
/** 'delay' (the default) waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays). */
|
|
153
153
|
'timing'?: NLDDActivityIndicator['timing'];
|
|
154
154
|
/** Mark the loader as finished while keeping the element mounted; clears aria-busy and hides the indicator. */
|
|
155
155
|
'complete'?: NLDDActivityIndicator['complete'];
|
|
@@ -169,9 +169,9 @@ declare module 'vue' {
|
|
|
169
169
|
type NLDDAvatarProps = {
|
|
170
170
|
/** `person` (circle, person icon) or `organization` (rounded, building icon); default `person` */
|
|
171
171
|
'type'?: NLDDAvatar['type'];
|
|
172
|
-
/** `full` (default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96).
|
|
172
|
+
/** `full` (the default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). The initials and the icon scale along */
|
|
173
173
|
'size'?: NLDDAvatar['size'];
|
|
174
|
-
/** `
|
|
174
|
+
/** `neutral` (the default, a neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance) */
|
|
175
175
|
'color'?: NLDDAvatar['color'];
|
|
176
176
|
/** Shrinks the visible shape to 5/6 of the host, centered, so the avatar aligns optically with an icon on the same grid (an icon glyph has built-in margin) */
|
|
177
177
|
'icon-aligned'?: NLDDAvatar['iconAligned'];
|
|
@@ -193,9 +193,9 @@ declare module 'vue' {
|
|
|
193
193
|
'accessibleLabel'?: NLDDAvatar['accessibleLabel'];
|
|
194
194
|
/** Hides the avatar from assistive software (use when the name already stands beside it as text) */
|
|
195
195
|
'decorative'?: NLDDAvatar['decorative'];
|
|
196
|
-
/** When the name appears as a tooltip on hover or focus: `
|
|
196
|
+
/** When the name appears as a tooltip on hover or focus: `delay` (the default, after 700ms), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
|
|
197
197
|
'tooltip-timing'?: NLDDAvatar['tooltipTiming'];
|
|
198
|
-
/** When the name appears as a tooltip on hover or focus: `
|
|
198
|
+
/** When the name appears as a tooltip on hover or focus: `delay` (the default, after 700ms), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
|
|
199
199
|
'tooltipTiming'?: NLDDAvatar['tooltipTiming'];
|
|
200
200
|
/** Makes the avatar a link to this URL; the shape itself becomes the link, so the hit area and the focus ring follow it */
|
|
201
201
|
'href'?: NLDDAvatar['href'];
|
|
@@ -1238,7 +1238,7 @@ declare module 'vue' {
|
|
|
1238
1238
|
type NLDDIconProps = {
|
|
1239
1239
|
/** The name of the icon to display */
|
|
1240
1240
|
'name'?: NLDDIcon['name'];
|
|
1241
|
-
/** `full` (default) fills the container
|
|
1241
|
+
/** `full` (the default) fills the container. `inherit` sizes the icon to the surrounding text (1em) and drops it onto that text's own line, for an icon set in a line of running text. Or a fixed spacer-aligned size in px (16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). */
|
|
1242
1242
|
'size'?: NLDDIcon['size'];
|
|
1243
1243
|
/** Functional (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or rijkskleur (`lintblauw`, `donkerblauw`, `hemelblauw`, `lichtblauw`, `paars`, `violet`, `robijnrood`, `roze`, `rood`, `oranje`, `donkergeel`, `geel`, `donkerbruin`, `bruin`, `donkergroen`, `groen`, `mosgroen`, `mintgroen`). Empty = inherit `color` from parent. */
|
|
1244
1244
|
'color'?: NLDDIcon['color'];
|
|
@@ -1293,9 +1293,9 @@ declare module 'vue' {
|
|
|
1293
1293
|
'accessible-label'?: NLDDIconButton['accessibleLabel'];
|
|
1294
1294
|
/** Accessible label for screen readers. Overrides text as aria-label and title tooltip. Use when the visible text alone lacks context for screen readers (e.g. text "Toon", accessible-label "Toon wachtwoord"). The text is still shown visually in lg size regardless. */
|
|
1295
1295
|
'accessibleLabel'?: NLDDIconButton['accessibleLabel'];
|
|
1296
|
-
/** Forwarded to the inner nldd-tooltip's `timing`: '
|
|
1296
|
+
/** Forwarded to the inner nldd-tooltip's `timing`: 'delay' (the default, a 700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
|
|
1297
1297
|
'tooltip-timing'?: NLDDIconButton['tooltipTiming'];
|
|
1298
|
-
/** Forwarded to the inner nldd-tooltip's `timing`: '
|
|
1298
|
+
/** Forwarded to the inner nldd-tooltip's `timing`: 'delay' (the default, a 700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
|
|
1299
1299
|
'tooltipTiming'?: NLDDIconButton['tooltipTiming'];
|
|
1300
1300
|
/** When set, renders an <a> element instead of <button> */
|
|
1301
1301
|
'href'?: NLDDIconButton['href'];
|
|
@@ -1320,7 +1320,7 @@ declare module 'vue' {
|
|
|
1320
1320
|
'verticalAlignment'?: NLDDIconCell['verticalAlignment'];
|
|
1321
1321
|
/** Size: '16' | '20' | '24' | '32' (default: '24') */
|
|
1322
1322
|
'size'?: NLDDIconCell['size'];
|
|
1323
|
-
/** Color variant of the icon (default: '
|
|
1323
|
+
/** Color variant of the icon (default: 'content') */
|
|
1324
1324
|
'color'?: NLDDIconCell['color'];
|
|
1325
1325
|
/** Icon name (renders `<nldd-icon>`). Takes precedence over the default slot. */
|
|
1326
1326
|
'icon'?: NLDDIconCell['icon'];
|
|
@@ -1419,6 +1419,10 @@ declare module 'vue' {
|
|
|
1419
1419
|
'heading-level'?: NLDDInlineDialog['headingLevel'];
|
|
1420
1420
|
/** Renders text as h1–h6; absent renders a p */
|
|
1421
1421
|
'headingLevel'?: NLDDInlineDialog['headingLevel'];
|
|
1422
|
+
/** Overrides the alignment of text, icon and actions. Unset (the default) derives it: content in the default slot means a task, which aligns left; a bare message stays centered. Left alignment also lays the actions out in a row instead of stacked full-width. */
|
|
1423
|
+
'horizontal-alignment'?: NLDDInlineDialog['horizontalAlignment'];
|
|
1424
|
+
/** Overrides the alignment of text, icon and actions. Unset (the default) derives it: content in the default slot means a task, which aligns left; a bare message stays centered. Left alignment also lays the actions out in a row instead of stacked full-width. */
|
|
1425
|
+
'horizontalAlignment'?: NLDDInlineDialog['horizontalAlignment'];
|
|
1422
1426
|
};
|
|
1423
1427
|
|
|
1424
1428
|
type NLDDJustInTimeEducationProps = {
|
|
@@ -1481,7 +1485,7 @@ declare module 'vue' {
|
|
|
1481
1485
|
'target'?: NLDDLink['target'];
|
|
1482
1486
|
/** Link rel attribute; defaults to 'noopener noreferrer' with target='_blank' */
|
|
1483
1487
|
'rel'?: NLDDLink['rel'];
|
|
1484
|
-
/** Text size: 'xs' | 'sm' | 'md' | 'lg'
|
|
1488
|
+
/** Text size: 'inherit' (the default) follows the surrounding text and lays the link out inline, so it wraps in running prose. 'xs' | 'sm' | 'md' | 'lg' pin a size and switch to inline-flex, which baseline-aligns a start or end icon with an explicit gap. */
|
|
1485
1489
|
'size'?: NLDDLink['size'];
|
|
1486
1490
|
/** Link text (alternative to the default slot) */
|
|
1487
1491
|
'text'?: NLDDLink['text'];
|
|
@@ -1747,6 +1751,10 @@ declare module 'vue' {
|
|
|
1747
1751
|
'supporting-text'?: NLDDModalDialog['supportingText'];
|
|
1748
1752
|
/** Forwarded to nldd-inline-dialog; supporting text */
|
|
1749
1753
|
'supportingText'?: NLDDModalDialog['supportingText'];
|
|
1754
|
+
/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
|
|
1755
|
+
'horizontal-alignment'?: NLDDModalDialog['horizontalAlignment'];
|
|
1756
|
+
/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
|
|
1757
|
+
'horizontalAlignment'?: NLDDModalDialog['horizontalAlignment'];
|
|
1750
1758
|
/** Accessible name for the dialog (aria-label); falls back to text */
|
|
1751
1759
|
'accessible-label'?: NLDDModalDialog['accessibleLabel'];
|
|
1752
1760
|
/** Accessible name for the dialog (aria-label); falls back to text */
|
|
@@ -2315,7 +2323,7 @@ declare module 'vue' {
|
|
|
2315
2323
|
'centered'?: NLDDRichText['centered'];
|
|
2316
2324
|
/** 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. */
|
|
2317
2325
|
'hyphens'?: NLDDRichText['hyphens'];
|
|
2318
|
-
/** '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.
|
|
2326
|
+
/** 'content' (the default) takes the system's own content colors, each element its own. 'inherit' lets all text follow the color of the surface instead (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. */
|
|
2319
2327
|
'color'?: NLDDRichText['color'];
|
|
2320
2328
|
/** Override translation keys; unset keys fall back to Dutch */
|
|
2321
2329
|
'translations'?: NLDDRichText['translations'];
|
|
@@ -2437,8 +2445,6 @@ declare module 'vue' {
|
|
|
2437
2445
|
'placement'?: NLDDSheet['placement'];
|
|
2438
2446
|
/** Custom height for bottom sheets (and for any sheet on sm viewports, where all placements collapse to bottom). Accepts: `'full'` (default — viewport minus top-inset, identical to omitting the attribute), `'fit-content'` (collapse to content size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`, `'50%'`). Always clamped to `100dvh - top-inset` so the sheet can't extend past the dismiss-tap area. No effect on side sheets at md+. */
|
|
2439
2447
|
'height'?: NLDDSheet['height'];
|
|
2440
|
-
/** Non-modal (no backdrop or focus lock); the sheet is modal by default */
|
|
2441
|
-
'modeless'?: NLDDSheet['modeless'];
|
|
2442
2448
|
/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
|
|
2443
2449
|
'accessible-label'?: NLDDSheet['accessibleLabel'];
|
|
2444
2450
|
/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
|
|
@@ -2874,7 +2880,7 @@ declare module 'vue' {
|
|
|
2874
2880
|
'line-height'?: NLDDText['lineHeight'];
|
|
2875
2881
|
/** Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug') */
|
|
2876
2882
|
'lineHeight'?: NLDDText['lineHeight'];
|
|
2877
|
-
/** Text color: '
|
|
2883
|
+
/** Text color: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit'. 'content' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface. */
|
|
2878
2884
|
'color'?: NLDDText['color'];
|
|
2879
2885
|
/** Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box. */
|
|
2880
2886
|
'horizontal-alignment'?: NLDDText['horizontalAlignment'];
|
|
@@ -2885,7 +2891,7 @@ declare module 'vue' {
|
|
|
2885
2891
|
type NLDDTextCellProps = {
|
|
2886
2892
|
/** Cell size: 'sm' | 'md' (default: 'md') */
|
|
2887
2893
|
'size'?: NLDDTextCell['size'];
|
|
2888
|
-
/** Text color variant: '
|
|
2894
|
+
/** Text color variant: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'. All variants other than those two apply to all three text fields so the cell reads as a coherent state. */
|
|
2889
2895
|
'color'?: NLDDTextCell['color'];
|
|
2890
2896
|
/** 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full' */
|
|
2891
2897
|
'width'?: NLDDTextCell['width'];
|
|
@@ -2966,6 +2972,8 @@ declare module 'vue' {
|
|
|
2966
2972
|
'invalid'?: NLDDTextEditor['invalid'];
|
|
2967
2973
|
/** Consumer-supplied */
|
|
2968
2974
|
'mentionSource'?: NLDDTextEditor['mentionSource'];
|
|
2975
|
+
/** Your own typeahead lists next to the */
|
|
2976
|
+
'typeaheads'?: NLDDTextEditor['typeaheads'];
|
|
2969
2977
|
/** Consumer-supplied annotations (W3C-style overlay). Property only (set via JS). Render only when `annotatable` is on. The text stays clean; these render as a light tint and a count badge, anchored by offset and mapped through edits. IMPORTANT: assign a NEW array to apply changes. Lit dirty-checks this property by identity, so mutating the existing array in place (`editor.annotations.push(next)`, `editor.annotations[0].end = 9`, …) does NOT trigger a re-render. Always replace it: `editor.annotations = [...editor.annotations, next]`. */
|
|
2970
2978
|
'annotations'?: NLDDTextEditor['annotations'];
|
|
2971
2979
|
/** Set by nldd-form-field. A consumer never writes this. */
|
|
@@ -2977,8 +2985,10 @@ declare module 'vue' {
|
|
|
2977
2985
|
'onChange'?: (event: CustomEvent) => void;
|
|
2978
2986
|
/** When the selection or content changes (detail: TextEditorState), for toolbar toggle state */
|
|
2979
2987
|
'onNlddTextEditorState'?: (event: CustomEvent) => void;
|
|
2980
|
-
/** When an @-mention is inserted (detail: MentionInsertedDetail with id,
|
|
2988
|
+
/** When an @-mention is inserted (detail: MentionInsertedDetail with id, text, from, to; clean offsets, like getSelection()) */
|
|
2981
2989
|
'onNlddTextEditorMention'?: (event: CustomEvent) => void;
|
|
2990
|
+
/** When a candidate from one of the `typeaheads` is chosen (detail: TypeaheadChosenDetail with trigger, candidate, from, to; clean offsets) */
|
|
2991
|
+
'onNlddTextEditorTypeahead'?: (event: CustomEvent) => void;
|
|
2982
2992
|
/** When an annotation's count badge is clicked (detail: { ids: string[], rect: DOMRect }); rect is the badge's viewport box so a consumer can anchor its own note UI to it */
|
|
2983
2993
|
'onNlddTextEditorAnnotationClick'?: (event: CustomEvent) => void;
|
|
2984
2994
|
};
|
|
@@ -3150,14 +3160,14 @@ declare module 'vue' {
|
|
|
3150
3160
|
type NLDDTitleProps = {
|
|
3151
3161
|
/** Visual size of the title: 1–6 (default: 3) */
|
|
3152
3162
|
'size'?: NLDDTitle['size'];
|
|
3153
|
-
/** '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.
|
|
3163
|
+
/** 'content' (the default) takes the system's own content colors. 'inherit' lets the title follow the text color of the surface instead (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity. */
|
|
3154
3164
|
'color'?: NLDDTitle['color'];
|
|
3155
3165
|
};
|
|
3156
3166
|
|
|
3157
3167
|
type NLDDTitleCellProps = {
|
|
3158
3168
|
/** Visual size of the title (default: 5) */
|
|
3159
3169
|
'size'?: NLDDTitleCell['size'];
|
|
3160
|
-
/** Text color variant (default: '
|
|
3170
|
+
/** Text color variant (default: 'content'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state. */
|
|
3161
3171
|
'color'?: NLDDTitleCell['color'];
|
|
3162
3172
|
/** 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full' */
|
|
3163
3173
|
'width'?: NLDDTitleCell['width'];
|
|
@@ -3405,7 +3415,7 @@ declare module 'vue' {
|
|
|
3405
3415
|
'open'?: NLDDTooltip['open'];
|
|
3406
3416
|
/** Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices) */
|
|
3407
3417
|
'placement'?: NLDDTooltip['placement'];
|
|
3408
|
-
/** When the tooltip appears on hover: 'instant' — right away, without a show delay. '
|
|
3418
|
+
/** When the tooltip appears on hover: 'instant' — right away, without a show delay. 'delay' (the 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. */
|
|
3409
3419
|
'timing'?: NLDDTooltip['timing'];
|
|
3410
3420
|
/** When a user presses Escape while `open=true`. The consumer owns the open lifecycle from there (we cannot clear `open` on our own), so this event is the consumer's chance to set `open` back to `false`. WCAG 1.4.13: a persistent hover or focus overlay has to be dismissible without moving focus. */
|
|
3411
3421
|
'onNlddTooltipDismiss'?: (event: CustomEvent) => void;
|
|
@@ -3562,8 +3572,6 @@ declare module 'vue' {
|
|
|
3562
3572
|
};
|
|
3563
3573
|
|
|
3564
3574
|
type NLDDWindowProps = {
|
|
3565
|
-
/** Modeless (no backdrop or focus trap); the window is modal by default */
|
|
3566
|
-
'modeless'?: NLDDWindow['modeless'];
|
|
3567
3575
|
/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
|
|
3568
3576
|
'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
|
|
3569
3577
|
/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
|
|
@@ -3798,7 +3806,7 @@ declare module 'vue' {
|
|
|
3798
3806
|
'nldd-text': DefineComponent<NLDDTextProps>;
|
|
3799
3807
|
/** A cell component for displaying text content in lists with configurable alignment, size and color. This is the most fundamental list cell component. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. Each text region (overline, main text, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<a>` or `<nldd-icon>` mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is. */
|
|
3800
3808
|
'nldd-text-cell': DefineComponent<NLDDTextCellProps>;
|
|
3801
|
-
/** A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant="simple"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant="input-field"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style "set" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An @-mention typeahead (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
|
|
3809
|
+
/** A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant="simple"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant="input-field"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleTaskList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style "set" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An inline toggle wraps the selected text (whitespace at its edges stays outside the markers), unwraps a run the caret is in, and with the caret at the very end of a run steps out of it. Bold that a typed space has broken (`**woord **`) keeps its styling while the caret is inside; the space moves outside the markers when the caret leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to, text) writes at the same clean offsets getSelection() reads. An @-mention typeahead (mentionSource) collapses to an atomic token, further typeahead lists on their own trigger (typeaheads) write what you tell them to, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
|
|
3802
3810
|
'nldd-text-editor': DefineComponent<NLDDTextEditorProps>;
|
|
3803
3811
|
'nldd-text-field': DefineComponent<NLDDTextFieldProps>;
|
|
3804
3812
|
/** A text field for a time. The value is always 24-hour `HH:mm`, which is how Dutch shows it too, so unlike nldd-date-field there is nothing to convert. Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. What you do in the picker is a preview until you leave it. The field shows the time right away but commits it on close. "Klaar" and Enter keep the choice, and so does a click outside once you have picked something. Cancel and Escape put the old time back. On an empty field the wheels open at `min`, or otherwise at the current time rounded to `step`, which does not fill in the field yet. */
|
|
@@ -3833,7 +3841,7 @@ declare module 'vue' {
|
|
|
3833
3841
|
'nldd-validation-item': DefineComponent<NLDDValidationItemProps>;
|
|
3834
3842
|
/** Nederlandse Digitale Dienst Validation List (Lit + TypeScript) Everything a value has to satisfy, in one list. A requirement you can state up front is an item with a rule, and it checks itself while you type. One only a server can decide is an item without a rule, and the app names it in `unmet` on the control. The list has two modes and `judging` is the switch. Before a verdict it shows its hints, which are the requirements of the field. After one it shows everything the value does not satisfy, and the hints are gone. It throws that switch itself the moment its control turns `invalid`, so when the field is judged is the consumer's decision, and the right moment is on submit. Hints are off by default. A phone number does not need its format spelled out before anyone has typed, while the rules for a password do. There are no checkmarks. The control already shows a validation icon of its own, and repeating that per line says the same thing three times. */
|
|
3835
3843
|
'nldd-validation-list': DefineComponent<NLDDValidationListProps>;
|
|
3836
|
-
/** A floating window based on the native <dialog> element
|
|
3844
|
+
/** A floating window based on the native <dialog> element, positionable through CSS values. Always modal. No header of its own: consumers use nldd-page with a sticky header inside for a title bar. */
|
|
3837
3845
|
'nldd-window': DefineComponent<NLDDWindowProps>;
|
|
3838
3846
|
}
|
|
3839
3847
|
}
|