Update dependency @nldd/design-system to ^0.8.69 #124

Merged

robbertbos merged 1 commit from renovate/nldd into main

2026-07-19 21:26:08 +00:00

robbertbos commented

2026-07-19 02:02:05 +00:00

Owner

This PR contains the following updates:

Package	Change	Age	Confidence
@nldd/design-system	`^0.8.65` → `^0.8.69`

Release Notes

MinBZK/storybook (@nldd/design-system)

`v0.8.69`

Compare Source

feat: nldd-avatar, content-color token cleanup (breaking), and component fixes (#139) (482a04f), closes #139
ci(release): stop releasing on ci/chore/test, keep releasing what ships (#142) (25b7645), closes #142
ci(review): always post the review as a sticky PR comment (#143) (d5aa290), closes #143
ci(review): enable track_progress so the review comment can actually be posted (#144) (38b8483), closes #144

Highlights

New nldd-avatar. A person or organisation avatar: an image, auto-fitting initials (derived from name or given explicitly), or a type icon (person = circle with a person icon, organization = rounded with a building icon). Sizes on the nldd-icon scale and fills its container by default. color="inherit" fills with the surrounding content colour, and icon-aligned shrinks the disc to an icon's optical size so it lines up when it replaces an icon.
New icon. file-text-batch-check-plus (new-text-document).
nldd-activity-indicator follows its context's content colour. The default spinner now tracks the shared --context-content-color channel (so a loader inside a selected list row matches the row's text), falling back to currentColor everywhere else.
nldd-button, nldd-icon-button and nldd-split-button open a slotted overlay. Drop an nldd-menu or nldd-popover in the popup slot and the button anchors and toggles it automatically, with no id/anchor wiring.
nldd-rich-text opt-in hyphenation. The hyphens attribute enables automatic word breaking for running text (p, li, dd), tuned for long Dutch compounds in narrow columns.
nldd-text-editor badges and colours bare URLs. A plainly pasted URL (GFM autolink) now gets the same open-in-new-tab badge and link colour as a Markdown link, including www. (→ https) and email (→ mailto).
nldd-menu header and footer slots. Root-only header / footer slots hold free content (an account identity header, a short note, a link) outside role="menu" — reached with Tab, skipped by arrow navigation. role="menu" now lives statically on the item list.
Content-colour token names standardised (breaking). The buttons and categories content tokens now follow the global content-color / content-secondary-color word order, and the cross-component --context-cell-content-* channel is renamed to --context-content-*.

Added

Icon — file-text-batch-check-plus, with the new-text-document alias.
nldd-rich-text — hyphens attribute for opt-in automatic hyphenation on running text (requires a correct lang); plus an always-on overflow-wrap: break-word safety net on paragraphs and list items.
nldd-button / nldd-icon-button — a popup slot that auto-wires a nested nldd-menu or nldd-popover (anchors it, toggles on click, syncs expanded / aria-haspopup), mirroring nldd-split-button, which now also accepts a slotted nldd-popover.
nldd-text-editor — a bare / autolinked URL (plain https, www., or an email) now gets the open-in-new-tab badge and the link colour, matching Markdown links; scheme-less forms are normalised (www. → https, email → mailto). The Markdown link's own address stays the dimmed grey.
nldd-menu — root-only header / footer slots for free content above/below the items, outside role="menu" (so they may hold non-menuitem content such as an nldd-byline, buttons or links; reached with Tab, skipped by arrow navigation). The regions are unpadded (control spacing with your own content, e.g. nldd-container); role="menu" is now static on the item list, with the empty-state and drill-in back button as siblings outside it.
nldd-inline-dialog — a variant="loading" that shows an nldd-activity-indicator (a role="status" spinner announcing "Laden") in place of the icon, for an empty state that is still loading. Sized to the icon (md/lg), shown instantly, and it overrides an explicit icon.
nldd-avatar (content) — new component for a person or organisation. Fallback chain image → initials → type icon; type (person / organization) drives shape and fallback icon; size on the nldd-icon scale (empty = fill the container, with initials and icon scaling to the box via container queries); color (default / inherit, where inherit fills with the --context-content-color channel or currentColor and uses the contrast colour for the text); icon-aligned shrinks the disc to 5/6 for optical alignment with an icon; wide initials always scale to fit; a dead src falls back automatically; role="img" with the name as label, or decorative.
nldd-page-footer — a width attribute mirroring a page section: full removes the body max-width, or a CSS length overrides it.

Changed

nldd-activity-indicator — the default circle and arc now colour from var(--context-content-color, currentColor) instead of currentColor alone. Behaviour is unchanged wherever the channel is unset.
nldd-popover — now syncs its open state to a control trigger via the trigger's expanded / popup-type IDL props (so the trigger's inner button ARIA and disclosure chevron reflect the popover), falling back to aria-* attributes for plain element anchors. It also bails on its own anchor-click toggle when driven via anchorElement, so it can be nested and driven from a button.
nldd-byline — renders its avatars with nldd-avatar (both the avatar-src path and slotted nldd-avatar), so a byline without an image shows initials; a slotted <img> still works.
--semantics-buttons-neutral-tinted-divider-color — slightly lighter in dark mode (neutral-450 → neutral-350).

Breaking

Semantics content-colour tokens renamed (no aliases): --semantics-buttons-*-primary-content-color and the categories equivalents become --semantics-*-content-color (drop primary); --semantics-*-secondary-content-color become --semantics-*-content-secondary-color (qualifier after content). Update any consumer CSS that references them.
--context-cell-content-* renamed to --context-content-* (whole family: color, secondary-color, accent-color, success-color, warning-color, critical-color). Update any consumer CSS that sets or reads these context custom properties.
nldd-button / nldd-icon-button overlay slot renamed menu → popup — the slot now accepts an nldd-menu or an nldd-popover. Change <nldd-menu slot="menu"> to slot="popup". (nldd-token / nldd-token-field keep their own menu-only slot="menu".)

Fixed

nldd-toolbar — an align="center" title now stays centred when it is the only visible element, including when a slot="start" / slot="end" item is display:none (e.g. a back button hidden on wide viewports). It previously jumped to the left. Centre-only routing is measured from real rendering, so a hidden item no longer strands the title.
nldd-toolbar — an align="center" title also stays centred when only one side (start or end) has items; it previously shifted by one gap toward the empty side, because the balancing spacer subtracted a gap that only exists when that side is non-empty.
nldd-menu — a group that is the first item no longer draws a stray top divider when a header slot is present (the header's light-DOM element made the group lose :first-child).
nldd-sheet — a drag that begins inside the sheet (selecting text in an input, dragging a control) and ends on the backdrop no longer dismisses it; only a genuine backdrop click, where the press and the release are both on the backdrop, closes.
nldd-page-footer — when the footer is empty and only the Rijksoverheid lintje shows, it now keeps space above the lintje so a preceding tinted page section no longer butts right up against it.

`v0.8.68`

Compare Source

ci(review): let the review post inline comments and see the full diff (#141) (819f241), closes #141

`v0.8.67`

Compare Source

ci(review): fetch full history so the review can compute the PR diff (#140) (a076e03), closes #140

`v0.8.66`

Compare Source

Text-editor improvements, icon set, toolbar & token-field commit-on-blur (#138) (ca77ddb), closes #138

Highlights

nldd-text-editor Markdown refinements. Indent and outdent are symmetric (one outdent exactly reverses one indent), and ordered lists inside a blockquote are renumbered in sequence like any list.
nldd-token-field keeps undelimited input. A value typed without pressing Enter or comma is no longer dropped — it commits as a token on blur (with allow-custom).
nldd-app-view document scroll mode. The layout can hand page scrolling to the document (root) instead of an inner pane (nested), so iOS rubber-band and the collapsing Safari toolbar behave natively.
New icons. heading-1…heading-6, paragraph-sign, lifebuoy, network-structure, stack-text, wheat (harvest) and person-circle-badge-plus (new-account).

Added

Icons — heading-1…heading-6, paragraph-sign, lifebuoy, network-structure, stack-text, wheat and person-circle-badge-plus, with harvest and new-account aliases.

Changed

nldd-token-field — free-typed text now commits as a token on blur (with allow-custom), so a value typed without pressing Enter or comma is no longer dropped when focus leaves the field.
nldd-toolbar — the title can size to fit-content with an action slot beside it.
nldd-app-view — derives a document-level scroll mode (root vs nested) so the document can own iOS rubber-band and Safari-toolbar scrolling instead of an inner pane.
Icons renamed (old names kept as aliases, so nothing breaks): centralized-network → centralized-structure, table-cells → rectangle-split-2x3.

Breaking

clipboard-rectangle icon renamed to clipboard-square — the paste icon is reshaped from a rectangle to a square, and the old name is not kept as an alias, so icon="clipboard-rectangle" no longer resolves. Switch to clipboard-square; the paste alias already points to it.

Fixed

nldd-text-editor — indent and outdent are symmetric (one outdent exactly reverses one indent), and ordered lists inside a blockquote are renumbered in sequence like any list (so a quoted > 4. isn't left as a misleading stray number that renders as 1).

Configuration

📅 Schedule: (in timezone Europe/Amsterdam)

Branch creation
- "before 6am on sunday"
Automerge
- At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate.

This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [@nldd/design-system](https://github.com/MinBZK/storybook) | [`^0.8.65` → `^0.8.69`](https://renovatebot.com/diffs/npm/@nldd%2fdesign-system/0.8.65/0.8.69) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@nldd%2fdesign-system/0.8.69?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@nldd%2fdesign-system/0.8.65/0.8.69?slim=true) | --- ### Release Notes <details> <summary>MinBZK/storybook (@nldd/design-system)</summary> ### [`v0.8.69`](https://github.com/MinBZK/storybook/blob/HEAD/CHANGELOG.md#small0869-2026-07-16-small) [Compare Source](https://github.com/MinBZK/storybook/compare/v0.8.68...v0.8.69) - feat: nldd-avatar, content-color token cleanup (breaking), and component fixes ([#139](https://github.com/MinBZK/storybook/issues/139)) ([482a04f](https://github.com/MinBZK/storybook/commit/482a04f)), closes [#139](https://github.com/MinBZK/storybook/issues/139) - ci(release): stop releasing on ci/chore/test, keep releasing what ships ([#142](https://github.com/MinBZK/storybook/issues/142)) ([25b7645](https://github.com/MinBZK/storybook/commit/25b7645)), closes [#142](https://github.com/MinBZK/storybook/issues/142) - ci(review): always post the review as a sticky PR comment ([#143](https://github.com/MinBZK/storybook/issues/143)) ([d5aa290](https://github.com/MinBZK/storybook/commit/d5aa290)), closes [#143](https://github.com/MinBZK/storybook/issues/143) - ci(review): enable track\_progress so the review comment can actually be posted ([#144](https://github.com/MinBZK/storybook/issues/144)) ([38b8483](https://github.com/MinBZK/storybook/commit/38b8483)), closes [#144](https://github.com/MinBZK/storybook/issues/144) ##### Highlights - **New `nldd-avatar`.** A person or organisation avatar: an image, auto-fitting initials (derived from `name` or given explicitly), or a type icon (`person` = circle with a person icon, `organization` = rounded with a building icon). Sizes on the `nldd-icon` scale and fills its container by default. `color="inherit"` fills with the surrounding content colour, and `icon-aligned` shrinks the disc to an icon's optical size so it lines up when it replaces an icon. - **New icon.** `file-text-batch-check-plus` (`new-text-document`). - **`nldd-activity-indicator` follows its context's content colour.** The default spinner now tracks the shared `--context-content-color` channel (so a loader inside a selected list row matches the row's text), falling back to `currentColor` everywhere else. - **`nldd-button`, `nldd-icon-button` and `nldd-split-button` open a slotted overlay.** Drop an `nldd-menu` or `nldd-popover` in the `popup` slot and the button anchors and toggles it automatically, with no `id`/`anchor` wiring. - **`nldd-rich-text` opt-in hyphenation.** The `hyphens` attribute enables automatic word breaking for running text (p, li, dd), tuned for long Dutch compounds in narrow columns. - **`nldd-text-editor` badges and colours bare URLs.** A plainly pasted URL (GFM autolink) now gets the same open-in-new-tab badge and link colour as a Markdown link, including `www.` (→ https) and email (→ mailto). - **`nldd-menu` header and footer slots.** Root-only `header` / `footer` slots hold free content (an account identity header, a short note, a link) outside `role="menu"` — reached with Tab, skipped by arrow navigation. `role="menu"` now lives statically on the item list. - **Content-colour token names standardised** (breaking). The buttons and categories content tokens now follow the global `content-color` / `content-secondary-color` word order, and the cross-component `--context-cell-content-*` channel is renamed to `--context-content-*`. ##### Added - **Icon** — `file-text-batch-check-plus`, with the `new-text-document` alias. - **`nldd-rich-text`** — `hyphens` attribute for opt-in automatic hyphenation on running text (requires a correct `lang`); plus an always-on `overflow-wrap: break-word` safety net on paragraphs and list items. - **`nldd-button` / `nldd-icon-button`** — a `popup` slot that auto-wires a nested `nldd-menu` or `nldd-popover` (anchors it, toggles on click, syncs `expanded` / `aria-haspopup`), mirroring `nldd-split-button`, which now also accepts a slotted `nldd-popover`. - **`nldd-text-editor`** — a bare / autolinked URL (plain https, `www.`, or an email) now gets the open-in-new-tab badge and the link colour, matching Markdown links; scheme-less forms are normalised (`www.` → https, email → mailto). The Markdown link's own address stays the dimmed grey. - **`nldd-menu`** — root-only `header` / `footer` slots for free content above/below the items, outside `role="menu"` (so they may hold non-menuitem content such as an `nldd-byline`, buttons or links; reached with Tab, skipped by arrow navigation). The regions are unpadded (control spacing with your own content, e.g. `nldd-container`); `role="menu"` is now static on the item list, with the empty-state and drill-in back button as siblings outside it. - **`nldd-inline-dialog`** — a `variant="loading"` that shows an `nldd-activity-indicator` (a `role="status"` spinner announcing "Laden") in place of the icon, for an empty state that is still loading. Sized to the icon (md/lg), shown instantly, and it overrides an explicit `icon`. - **`nldd-avatar`** (content) — new component for a person or organisation. Fallback chain image → initials → type icon; `type` (`person` / `organization`) drives shape and fallback icon; `size` on the `nldd-icon` scale (empty = fill the container, with initials and icon scaling to the box via container queries); `color` (`default` / `inherit`, where inherit fills with the `--context-content-color` channel or `currentColor` and uses the contrast colour for the text); `icon-aligned` shrinks the disc to 5/6 for optical alignment with an icon; wide initials always scale to fit; a dead `src` falls back automatically; `role="img"` with the name as label, or `decorative`. - **`nldd-page-footer`** — a `width` attribute mirroring a page section: `full` removes the body max-width, or a CSS length overrides it. ##### Changed - **`nldd-activity-indicator`** — the default circle and arc now colour from `var(--context-content-color, currentColor)` instead of `currentColor` alone. Behaviour is unchanged wherever the channel is unset. - **`nldd-popover`** — now syncs its open state to a control trigger via the trigger's `expanded` / `popup-type` IDL props (so the trigger's inner button ARIA and disclosure chevron reflect the popover), falling back to `aria-*` attributes for plain element anchors. It also bails on its own anchor-click toggle when driven via `anchorElement`, so it can be nested and driven from a button. - **`nldd-byline`** — renders its avatars with `nldd-avatar` (both the `avatar-src` path and slotted `nldd-avatar`), so a byline without an image shows initials; a slotted `<img>` still works. - **`--semantics-buttons-neutral-tinted-divider-color`** — slightly lighter in dark mode (`neutral-450` → `neutral-350`). ##### Breaking - **Semantics content-colour tokens renamed** (no aliases): `--semantics-buttons-*-primary-content-color` and the `categories` equivalents become `--semantics-*-content-color` (drop `primary`); `--semantics-*-secondary-content-color` become `--semantics-*-content-secondary-color` (qualifier after `content`). Update any consumer CSS that references them. - **`--context-cell-content-*` renamed to `--context-content-*`** (whole family: `color`, `secondary-color`, `accent-color`, `success-color`, `warning-color`, `critical-color`). Update any consumer CSS that sets or reads these context custom properties. - **`nldd-button` / `nldd-icon-button` overlay slot renamed `menu` → `popup`** — the slot now accepts an `nldd-menu` or an `nldd-popover`. Change `<nldd-menu slot="menu">` to `slot="popup"`. (`nldd-token` / `nldd-token-field` keep their own menu-only `slot="menu"`.) ##### Fixed - **`nldd-toolbar`** — an `align="center"` title now stays centred when it is the only visible element, including when a `slot="start"` / `slot="end"` item is `display:none` (e.g. a back button hidden on wide viewports). It previously jumped to the left. Centre-only routing is measured from real rendering, so a hidden item no longer strands the title. - **`nldd-toolbar`** — an `align="center"` title also stays centred when only one side (start or end) has items; it previously shifted by one gap toward the empty side, because the balancing spacer subtracted a gap that only exists when that side is non-empty. - **`nldd-menu`** — a group that is the first item no longer draws a stray top divider when a `header` slot is present (the header's light-DOM element made the group lose `:first-child`). - **`nldd-sheet`** — a drag that begins inside the sheet (selecting text in an input, dragging a control) and ends on the backdrop no longer dismisses it; only a genuine backdrop click, where the press and the release are both on the backdrop, closes. - **`nldd-page-footer`** — when the footer is empty and only the Rijksoverheid lintje shows, it now keeps space above the lintje so a preceding tinted page section no longer butts right up against it. ### [`v0.8.68`](https://github.com/MinBZK/storybook/blob/HEAD/CHANGELOG.md#small0868-2026-07-16-small) [Compare Source](https://github.com/MinBZK/storybook/compare/v0.8.67...v0.8.68) - ci(review): let the review post inline comments and see the full diff ([#141](https://github.com/MinBZK/storybook/issues/141)) ([819f241](https://github.com/MinBZK/storybook/commit/819f241)), closes [#141](https://github.com/MinBZK/storybook/issues/141) ### [`v0.8.67`](https://github.com/MinBZK/storybook/blob/HEAD/CHANGELOG.md#small0867-2026-07-15-small) [Compare Source](https://github.com/MinBZK/storybook/compare/v0.8.66...v0.8.67) - ci(review): fetch full history so the review can compute the PR diff ([#140](https://github.com/MinBZK/storybook/issues/140)) ([a076e03](https://github.com/MinBZK/storybook/commit/a076e03)), closes [#140](https://github.com/MinBZK/storybook/issues/140) ### [`v0.8.66`](https://github.com/MinBZK/storybook/blob/HEAD/CHANGELOG.md#small0866-2026-07-13-small) [Compare Source](https://github.com/MinBZK/storybook/compare/v0.8.65...v0.8.66) - Text-editor improvements, icon set, toolbar & token-field commit-on-blur ([#138](https://github.com/MinBZK/storybook/issues/138)) ([ca77ddb](https://github.com/MinBZK/storybook/commit/ca77ddb)), closes [#138](https://github.com/MinBZK/storybook/issues/138) ##### Highlights - **`nldd-text-editor` Markdown refinements.** Indent and outdent are symmetric (one outdent exactly reverses one indent), and ordered lists inside a blockquote are renumbered in sequence like any list. - **`nldd-token-field` keeps undelimited input.** A value typed without pressing `Enter` or comma is no longer dropped — it commits as a token on blur (with `allow-custom`). - **`nldd-app-view` document scroll mode.** The layout can hand page scrolling to the document (root) instead of an inner pane (nested), so iOS rubber-band and the collapsing Safari toolbar behave natively. - **New icons.** `heading-1`…`heading-6`, `paragraph-sign`, `lifebuoy`, `network-structure`, `stack-text`, `wheat` (`harvest`) and `person-circle-badge-plus` (`new-account`). ##### Added - **Icons** — `heading-1`…`heading-6`, `paragraph-sign`, `lifebuoy`, `network-structure`, `stack-text`, `wheat` and `person-circle-badge-plus`, with `harvest` and `new-account` aliases. ##### Changed - **`nldd-token-field`** — free-typed text now commits as a token on blur (with `allow-custom`), so a value typed without pressing `Enter` or comma is no longer dropped when focus leaves the field. - **`nldd-toolbar`** — the title can size to `fit-content` with an action slot beside it. - **`nldd-app-view`** — derives a document-level scroll mode (root vs nested) so the document can own iOS rubber-band and Safari-toolbar scrolling instead of an inner pane. - **Icons renamed** (old names kept as aliases, so nothing breaks): `centralized-network` → `centralized-structure`, `table-cells` → `rectangle-split-2x3`. ##### Breaking - **`clipboard-rectangle` icon renamed to `clipboard-square`** — the `paste` icon is reshaped from a rectangle to a square, and the old name is *not* kept as an alias, so `icon="clipboard-rectangle"` no longer resolves. Switch to `clipboard-square`; the `paste` alias already points to it. ##### Fixed - **`nldd-text-editor`** — indent and outdent are symmetric (one outdent exactly reverses one indent), and ordered lists inside a blockquote are renumbered in sequence like any list (so a quoted `> 4.` isn't left as a misleading stray number that renders as 1). </details> --- ### Configuration 📅 **Schedule**: (in timezone Europe/Amsterdam) - Branch creation - "before 6am on sunday" - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://github.com/renovatebot/renovate).

robbertbos added 1 commit

2026-07-19 02:02:05 +00:00