Update dependency @nldd/design-system to ^0.8.77 #212
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "renovate/nldd"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
This PR contains the following updates:
^0.8.70→^0.8.77Release Notes
MinBZK/storybook (@nldd/design-system)
v0.8.77Compare Source
Fixed
nldd-popover— a popover that loses itscentered(or edge) override at runtime no longer keeps the centering transform. The override branch clearedtransformonly while it was still being taken, so a responsive popover switching from centered to anchored on a breakpoint change kepttranslate(-50%, …)on top of Floating UI's coordinates and landed half its width off its anchor, partly off screen. Floating UI positions purely throughleft/top, so the transform is now cleared whenever no override applies.v0.8.76Compare Source
Fixed
nldd-menu— a button that opens a menu now carriesaria-haspopupfrom the first render instead of from its first open.aria-haspopupdescribes the trigger ("this button opens a menu"), not a state, and deferring it left a screen reader tabbing a row of identical "more" buttons hearing plain "button" — precisely when the type matters, since nothing has been opened yet. Becausepopup-typealso decides whetheraria-expandedis rendered at all, a button withoutexpandablehad neither attribute until first use.nldd-popoveralready worked this way; the two now agree. Settingpopup-typeyourself still wins, so no markup has to change.v0.8.75Compare Source
Highlights
minandmaxallow. "Vandaag" moved out of the heading to the bottom left, which is what makes room for a month written out in full. The calendar innldd-date-fieldopens under the input as well, instead of running off to the right of it (#156).publiccode.ymlfor the catalogue on developer.overheid.nl. The contributing guide grew from a page of changelog conventions into an actual guide (#149).* { margin: 0; padding: 0; border: 0 }in a consuming app silently beat every normal:hostdeclaration (CSS Scoping cascade order, #160), stripping padding, dividers, and spacing from components that styled their shadow host. Banner, container, menu groups and dividers, table rows, cells, and interactive list rows now keep their layout under any reset, including Tailwind Preflight. Styling remains a CSS-variables affair — direct element styling such asnldd-banner { padding: … }was never a supported API and now consistently has no effect.viewfinder-line(aliasscan) is the existingviewfinderwith a scan line through it, for scanning a document or a code.displayandpaintbrushlanded in the same batch.Added
viewfinder-line(aliasscan),display,paintbrush.nldd-card— abackgroundattribute:base(default) ortinted, for a card that has to lift off a base surface. Customize with--components-card-tinted-*.@nldd/design-system/styles/system-font— the same stylesheet as/styles, without the@font-facerules. Both family stacks end in a system font, so they fall through on their own; nothing needs overriding. For products that may not use the Rijksoverheid house fonts (seeNOTICES.md).@nldd/design-system/styles/variables— only the CSS custom properties, for a build that composes the stylesheets itself.@nldd/design-system/breakpoints— the breakpoints formatchMediaand layout logic, previously behind/tokens.Changed
nldd-date-picker— the heading read "September 2026" with a chevron, promising both, and opened a list of years only (#156). Month and year are now each their own button with their own menu, so a month on the other side of the year is two clicks instead of up to six on an arrow. "Vandaag" moves out of the heading to the bottom left, where the stacked layout already had it; that is what makes room for a month written out in full. The heading no longer wraps between month and year. The month and year buttons stand as tall as the paging controls beside them (32px, 44px stacked) instead of bare 22px text, which also satisfies the WCAG 2.5.8 target size. Both menus offer only whatminandmaxallow, and a part with a single reachable value drops its chevron and its menu rather than opening to confirm what you already see.nldd-date-picker— the day numbers carry medium weight. Weight was doing no work in the calendar (today is a ring, selected is a fill), so it was free to separate the dates from the chrome around them: the weekday headers and the week numbers now recede together (#156).nldd-title— a slotted heading is capped at a 40ch measure and balances its lines, so a title on a wide section no longer runs the full width with a lonely last word.nldd-list-item— a row that opens with an icon now starts its divider at the first text or title cell, so the line aligns with the words instead of the icon. Consumers no longer need adivider-startmarker for this; an explicit marker still wins, and putting one on the icon cell restores the full-width line.bodythe document font and content color as soon as annldd-app-viewis on the page. Apps no longer need their ownbody { font: … }. The rule sits in@layer reset, so any consumer rule beats it without effort; a page without an app-view is untouched.Breaking
@nldd/design-system/tokensis gone. It only ever re-exportedbreakpoints, so import from@nldd/design-system/breakpointsinstead. Same values, same names.--primitives-font-family-*-fallbackvariables are gone. Nothing read them, so overriding one to drop RijksSans changed nothing while looking like the switch you were after. To use a different font, override--primitives-font-family-sans-serifand--primitives-font-family-monospace— or import/styles/system-fontand skip the@font-facerules entirely.Fixed
nldd-date-field— the calendar hangs off the trigger, which sits at the end of the field, and opened rightward from there: on a 192px field it ran 302px past the field's right edge and barely overlapped the input it belonged to. It now opens leftward, landing under the input; against the left edge of the screen Floating UI falls back to the old direction on its own (#156).nldd-rich-text— a markdown renderer emits a fenced code block as<pre><code>, and the tinted chip meant for inline code painted once per rendered line, so a three-line block showed three separate boxes (#158). The frame now sits on thepre, where the block is, and thecodeinside hands the chip back. It carries the same inset ring asnldd-boxandnldd-code-viewer, so the block stays readable on a tinted surface instead of dissolving into it.nldd-rich-text— aprehad nooverflow-x, so a single long code line escaped the element and stretched every ancestor with it. In a narrow card that read as rich-text ignoring the card width. Long lines now scroll inside the block, as a table already did.nldd-date-picker— activating a paging arrow or "Vandaag" pulled focus into the day grid, so paging twice meant finding the arrow again. Focus now stays on the control that was activated; only the roving tabindex moves along, so tabbing into the grid still lands on the equivalent day.nldd-date-fieldandnldd-password-field— the embedded button's focus ring carries a 6px halo meant to land exactly on the field's border, but the field'soverflow: hiddenclipped it at the padding box, leaving the border to cut through the ring. The clip is gone: nothing in either field can escape without it (the input clips its own text, and the autofill background is overridden inside the input), so the ring now paints over the field the way it does over any other neighbour.nldd-popover— after any mouse interaction, tabbing through the popover showed no focus rings. The popover intercepted every Tab and moved focus itself (a Safari workaround), but a script-moved focus only inherits the ring state of the element it left, where a browser-moved one gets a ring unconditionally — so one ringless start poisoned every stop after it. The popover now intercepts only the hop off the container (the one Safari cannot make) and the boundary that closes it; every Tab in between is the browser's. That entry hop also serves a click on the popover's dead chrome: Tab then starts at the top of the popover instead of resuming from wherever focus happened to be.nldd-tooltip— activating the trigger now dismisses the tooltip. It sat in the top layer above the popover that very click had opened, because manual popovers paint over auto ones that enter later.nldd-collection— the previous/next arrows inlayout="horizontal-scroll"stepped by a fixed distance, so from the end of the strip (never a whole number of items) every item stayed clipped. The arrows now snap to the nearest item edge.nldd-collection— reaching an end with the keyboard disabled the arrow you were standing on, and a disabled control cannot hold focus, so focus fell to the body and the next Tab restarted at the top of the page. Focus now moves to the sibling arrow.nldd-container—layout="lanes"andlayout="columns"ignoredsm-gap,md-gapandlg-gapand always used the basegap. Every layout now reads one resolved gap, so the per-breakpoint values apply to multicol too.nldd-banner— the visual frame (background, inset border, corner radius, padding, grid) moved from the host to a wrapper inside the shadow root, out of reach of document CSS. Use--components-banner-*to customize.nldd-container— the padding and the query container moved to a wrapper inside the shadow root (host >.container>.container__inner), out of reach of document CSS; size queries still measure the same padded interior width.nldd-menu-groupandnldd-menu-divider— dividers, spacing, and padding moved to elements inside the shadow root, out of reach of document CSS; theirflow-roothosts keep that spacing interior, so menus keep their grouping and rhythm under a reset.nldd-table-row, the cell family, and interactivenldd-list-itemrows — row dividers, row padding (--context-cell-padding-block), and the widened inset of interactive rows shield their host declarations, since subgrid participation and negative margins cannot move into the shadow tree.v0.8.74Compare Source
v0.8.73Compare Source
Highlights
microphone,speakerand its volume steps,photo-camera,video-camera,photo-on-photo-angledfor a gallery,photo-stack), maps and wayfinding (map,map-pinand its badge variants,map-pin-ovalfor your current location,signpostfor directions), a fuller file and folder family (file-badge-*,file-on-file,folder-open,folder-badge-plus),arrow-clockwisefor refresh, a pair of expand and collapse arrows,clipboard-pencilfor a form,hand-thumbs-upandhand-thumbs-downfor a like and a dislike,person-badge-minus,link-badge-lockfor a secure link,slider-horizontal-3for local settings,text-format-size, andsquare-grid-2x2with a pencil variant. The full list is under Added.file,file-textand its badge and pencil variants,file-text-on-file-text,folder), the stack icons (rectangle-stack,rectangle-stack-text,rectangle-stack-chevron-left-forward-slash-chevron-right) andhouse-apartment-buildinggot new artwork, so the set draws with one pen again now that it has grown.Added
apartment-building-2(aliasesbuildingsandoffices),arrow-clockwise(aliasesrefreshandreload),arrow-down-left-arrow-up-right(aliasesexpandandfull-screen),arrow-up-right-arrow-down-left(aliasescollapseandexit-full-screen),clipboard-pencil(aliasform),file-badge-arrow-down(aliasdownload-document),file-badge-arrow-up(aliasupload-document),file-badge-minus(aliasremove-document),file-badge-plus(aliasnew-document),file-on-file(aliasdocuments),folder-badge-plus(aliasnew-folder),folder-open,hand-thumbs-up(aliaslike),hand-thumbs-down(aliasdislike),link-badge-lock(aliasessecure-linkandsecure-url),map,map-pin(aliaslocation),map-pin-badge-plus(aliasadd-location),map-pin-badge-minus(aliasremove-location),map-pin-oval(aliascurrent-location),microphone(aliasmicrophone-on),microphone-slash(aliasmicrophone-off),person-badge-minus(aliasremove-user),photo-camera(aliascamera),photo-on-photo-angled(aliasgallery),photo-stack(aliasesimage-stackandimages),signpost(aliasdirections),slider-horizontal-3(aliaslocal-settings),speaker,speaker-slash(aliasmute),speaker-volume-low(aliaslow-volume),speaker-volume-medium(aliasmedium-volume),speaker-volume-high(aliashigh-volume),square-grid-2x2,square-grid-2x2-pencil,text-format-sizeandvideo-camera.Changed
refreshandreloadaliases point at the newarrow-clockwise. They sat onarrow-2-counter-clockwise, which keepssync— two arrows chasing each other read as synchronization, one clockwise arrow as a refresh.file-text-pencilgains theedit-text-documentalias, next tonew-text-documentandadd-text-documenton its check-plus sibling.closealiases:closefordismiss, andclose-circle,close-circle-filled,close-smallandclose-extra-smallfor their variants.rectangle-stackis redrawn and gains thelibraryalias, next to the existingstack.stack-codeis now the alias ofrectangle-stack-chevron-left-forward-slash-chevron-right. The icon is renamed (and redrawn) after the shape-first pattern ofchevron-left-forward-slash-chevron-right; the old name keeps working as its functional alias.documentsalias points atfile-on-file. It sat on the icon now calledfile-text-on-file-text, which keepstext-documents— the plain pair is the generic plural, the waydocumentalready sat on plainfile.Breaking
-stackis reserved for 3 or more and these draw 2:file-text-stackis nowfile-text-on-file-text(with new artwork),folder-stackis nowfolder-on-folder, andtag-stackis nowtag-on-tag. The old names are gone. The aliasestext-documents,directories,tagsandlabelsmoved along and keep working.stack-textis nowrectangle-stack-text(with new artwork), naming the shape it draws the wayrectangle-stackalready does.house-and-appartment-buildingis nowhouse-apartment-building(with new artwork) — the spelling fixed to matchapartment-building, and the "and" dropped from the compound.square-and-arrow-downis nowsquare-arrow-down, dropping the "and" the waysquare-arrow-upandsquare-arrow-right-topalready read. The aliasessaveandimportmoved along and keep working.media-prefix:backward,forwardand their-filled,-end,-end-filled,-frameand-frame-filledvariants are nowmedia-backward,media-forwardand so on (12 renames). The bare names were ambiguous — "forward" reads as navigation more often than as media transport — and the iconforwardwas unreachable outright, shadowed by the aliasforward→chevron-right(aliases win on resolution). That alias stays, as the counterpart ofback→chevron-left.play,pause,stopandplay-pausekeep their names: they collide with nothing and are clear as they are.v0.8.72Compare Source
Fixed
nldd-list-itemreserves a divider's worth of space below itself, and the lines ofnldd-timeline-track-cellstopped at the cell's edge — leaving a hairline gap between one row's track and the next. The lines that run on downward now bridge that band.v0.8.71Compare Source
Highlights
nldd-step-indicatorfor a process of several steps. A row of markers carrying a number (or a check mark once a step is done), a label below each and a track in between.currenton the parent derives every step's status (past,current,future); a step can override it. A finished step is filled with a check mark, the current one is an accent outline on a light accent field around its number, and what is still to come is a quiet grey field. Withhreforbuttona step becomes a control, so you can page back — also in a flow without a URL per step. Below the sm breakpoint (measured on the container) it collapses to one line of text plus a segmented bar, with the full list of steps still in the DOM for assistive technology. Horizontal only: steps below one another are a list ofnldd-timeline-track-cell.nldd-list type="tree"makes the list arole="tree"oftreeitemrows; a branch's child rows go in that row'schildrenslot, which the item renders as arole="group"and hides whileexpandedis off. The nesting is the hierarchy, so level, position and set size are derived rather than authored. Disclosure works two ways: a chevron of its own (nldd-list-item-action[disclosure]) or the row itself as the control (buttonplusexpanded), where annldd-icon-cellmarkeddisclosureturns along. Indentation stays the consumer's: repeat a spacer-cell per level. A tree brings its own keyboard, see below.nldd-timeline-track-cellis now the vertical counterpart of the step indicator. Withvariant="step"the marker carries a number or icon and you have a step list below one another; by default it stays the bare track for a timeline of events.type="tree"is a composite widget, so it no longer waits forarrow-navigation: up and down move between the rows in the order they appear on screen (the rows of an open branch included), Home and End jump to the ends, Right opens a closed branch and steps into an open one, Left closes an open branch and steps out of a leaf, and Enter and Space open and close from the row itself. Opening and closing runs through the row's own disclosure control, soexpandedkeeps being written in one place — your handler; a row that is a link is never activated that way. The tree is one tab stop: focus lands on the row (that is wheretreeitemsits, so the row gets announced rather than a button inside it), wearing the system's own focus ring around the row rather than the browser's outline around the whole open branch, and Tab then walks the controls of that row, a chevron beside a checkbox included. Deliberately between two patterns: a row with several controls is strictly atreegrid, and we keep the tree semantics while borrowing Tab-within-the-row from the grid.bug,square,square-1(aliasprimary),triangle-square-circle(aliascategories),book-badge-plus(aliasnew-book),tag-stack(aliasestagsandlabels, for a set of labels wheretagis one) andperson-text-rectangle(aliascontact-card), plus the aliasesadd-text-documentforfile-text-badge-check-plus,announcementformegaphoneandcompanyforapartment-building. The aliascategoryfortagis gone: a label is not a category, and beside the newcategories(triangle-square-circle) the two read as the same thing. Usetagorlabel.--semantics-surfaces-border-widthand the corner radius--semantics-surfaces-corner-radius(10px). Cards, boxes, boxed lists, tables, the code viewer and the sidebar box all follow from that one place, andnldd-cardloses its drop shadow to become an ordinary base surface. In dark mode the card used to be a lighter field that happened to stand out; now the border carries it in both schemes.Breaking
nldd-list-item— thestartandendslots are gone. Put the cells that sat there (avatars, spacers, icons) in the row itself, in the same place. The divider spans the full content width by default; if you used the slots to start it later or stop it earlier (after an avatar, say), mark the cell where it should begin or end withdivider-startordivider-end. Withoutdivider-startit starts at the front, withoutdivider-endit runs to the end. Thechildrenslot for nested rows stays. The hover and selection fill of an interactive row is now genuinely clickable across the full painted width.nldd-list-item-action— a segmented action: an action covering part of the row, as opposed to the row-wide actionnldd-list-itemrenders itself withhreforbutton. Segmented actions now own a fixed inline padding and are at least as wide as the row's control size (md 44px, sm 32px), so the hit area is a square at minimum. Remove spacer cells you added inside one for room or hit area — the action handles that itself now, and leaving them in doubles the space. Icon-only actions (a chevron in a tree) get slightly wider. An action at a row edge shifts 8px towards that edge, so its outer edge lands exactly where a row-wide action's hit area begins and its contents sit on the same grid as the text of an ordinary row. It shifts, it does not grow: the width stays the control size. If you reserve the chevron zone on leaf rows in a tree, watch rows without an indent spacer in front — there a branch row's action shifts along and the zone sits 8px further out. An action mid-row is unaffected.nldd-timeline-track-cell— the attributes have new names.stepisstatus(same values, the same vocabulary asnldd-step-indicator-item),childisposition(it is about the place in the sequence, not a DOM relation), and the size is no longer picked in pixels but throughvariant:dot(default, a bare track) orstep(a 24px marker with a number or icon in it).--primitives-font-family-serifand-serif-fallbackpointed atRijksoverheidSerif, a font the system does not ship and no component used. If you referenced them, set your own stack.--components-box-corner-radius,--components-list-corner-radiusand--components-sidebar-section-sidebar-box-corner-radius. Every surface now takes its radius from--semantics-surfaces-corner-radius; that is the only place to round them off, or square them off. New alongside it is--semantics-surfaces-border-width, so border and divider move together in thickness as well. Both sit at family level, because base and tinted share them (the border colours stay per variant).rectangle-chevron-left-forward-slash-chevron-rightis nowchevron-left-forward-slash-chevron-right-rectangle, so the shape it sits in comes last, the way the other names read. Andsquare-corner-4is nowviewfinder— four loose corners describe the drawing, not what it does. Their aliasescode-blockandfit-to-vieware unchanged and remain the names to reach for.categoryis gone. It pointed attag, and next to the newcategoriesalias (which points attriangle-square-circle) the pair suggested two views of one thing while they are different concepts.icon="category"no longer resolves; usetagorlabel.nldd-radio-button-field._commitFormValue()iscommitFormValue(). The method was meant fornldd-radio-button-group(which calls it on the siblings it unchecks) but was public; it now comes from the shared mixin and therefore drops the underscore.accessible-labelled-byis nowaccessible-labeled-byonnldd-segmented-control,nldd-radio-button-groupandnldd-toggle-button-group; the property isaccessibleLabeledBy. The system writes US English, also where the HTML spec does not: the forwardedaria-labelledbykeeps its own spelling, because that one belongs to the spec.-label.-label-textsaid it twice, since the type already says it is a label. Renamed:list.items-label-text→list.items-accessible-label,list.navigation-label-text→list.navigation-accessible-label,list.search-placeholder-text→list.search-placeholder-label,drag-handle-cell.label-text→drag-handle-cell.accessible-label,progress-bar.label-textandprogress-circle.label-text→accessible-label, theirloading-text→loading-label,activity-indicator.loading-text→loading-label,badge.notification-text→notification-label,token-field.removable-hint→removable-lowercase-label, andopens-in-new-tab-text→opens-in-new-tab-labelonnldd-list-item,nldd-card,nldd-link,nldd-avatar,nldd-buttonandnldd-icon-button.pagination.accessibility-labelis nowpagination.accessible-label, as everywhere else. The texts themselves are unchanged; if you override a key throughtranslations, update the name.components.list.reorder-cancelled-textandcomponents.document-tab-bar.reorder-cancelled-textare nowreorder-canceled-text. Update the key if you override it throughtranslations; the Dutch default text is unchanged.border-widthis now named that way.--semantics-input-fields-border-thickness,--components-checkbox-border-thickness,--components-radio-button-border-thickness,--components-radio-button-is-selected-inner-shape-border-thickness,--components-switch-border-thickness,--components-switch-thumb-border-thicknessand--components-keyboard-shortcut-border-thicknessend in-border-width. The value comes from--primitives-border-width-*and goes into aborder-width, so renaming it halfway only bought a word to remember. A line that is not a border keepsthickness:--semantics-dividers-thicknessfeeds aheight, and--semantics-dividers-widthwould read as how wide a divider is.--context-list-item-min-sizeis now--context-list-item-size. Only relevant if you hooked into it yourself.Added
nldd-step-indicatorandnldd-step-indicator-item(status & feedback) — new. On the parent:current(1-based),accessible-labelandtranslations. On a step:text,icon,status(overrides what the parent derives),hreforbutton.nldd-list—type="tree", plus thechildrenslot andexpandedonnldd-list-itemfor branch rows.disclosureon annldd-icon-cellturns the chevron along withexpanded.divider-startanddivider-endon cells — let the row divider begin or end at a cell (after the avatar, say). Several markers together span from the first start to the last end.nldd-timeline-track-cell—variant(dot/step),minorfor a row that belongs under the one above it (a smaller marker in the same lane, so the track runs straight and nothing indents),textandiconfor what the marker carries, anddirection="up"for a timeline with the newest at the top.nldd-avatar—href,target,rel,buttonandaccessible-label: the disc itself becomes the control, so hit area and focus ring follow the round shape instead of a square overlay, and the initials get no underline. The name comes fromaccessible-label, or else fromname;hrefwins overbutton, as withnldd-card.nldd-button—max-width: caps the button at a CSS length, also alongsidewidth="full"(follow the container, but no wider than this). A label that doesn't fit is truncated with an ellipsis, because a cap the content ignores isn't a cap.nldd-window—no-light-dismiss: a click beside the window no longer closes it, while Escape and the dismiss button keep working. For windows where dismissing by accident costs work, such as a wizard or a filled-in form.nldd-icon—size="full"names the existing behaviour (fill whatever sizes you) andsize="inherit"makes the icon follow the surrounding text (1em), for an icon set in a sentence. Reach for the latter rather than your ownnldd-icon { width: 1em }rule: such a rule wins over the component and also shrinks the icons a cell or button was already sizing correctly.nldd-date-picker—width:fullor a CSS length, next to the intrinsic seven-cell width.nldd-menu— theanchorElementproperty positions the menu against an element without turning it into a toggle. For a menu you open yourself (a type-ahead under a text field), where theanchorattribute would swallow the click on the anchor.Changed
nldd-cardhas no drop shadow and is an ordinary base surface. Field, border and corner radius come from the same--semantics-surfaces-base-*family as a boxednldd-listornldd-table.--components-card-box-shadowisnone; set it back if you want the shadow.nldd-list-itemhas a 1px bottom margin and the divider hangs in it, so a hover or selection fill runs to the row's own edge. That retires the internal context variable--context-list-item-boundary-inset, which existed only so a slottednldd-list-item-actioncould withhold the same pixel. A list grows 1px per row; if you measure row positions yourself, count the margin in. While dragging, the divider of the lifted row and of its drag clone is hidden.overflow: hiddenthat rounded them off against it could go — a focus ring inside a box now paints outward like every other control instead of being cut off 4px away. The row fill follows suit and rounds off a step more tightly (6px), concentric with the 10px frame around it. Content and dividers do not move; no action needed.nldd-icon-cellwithdisclosureandnldd-list-itemrotates it withexpanded, the same affordancenldd-list-item-action[disclosure]already gave. Until now a tree had to choose: a chevron that turns (only the chevron clickable) or a fully clickable row (a chevron that never moves).nldd-checkbox-fieldandnldd-radio-button-fieldare form-associated. They submitvalueundername, exactly likenldd-checkboxandnldd-radio-button; previously the inner control sat unreachable in the field's shadow root and the value never made it into the form.nldd-radio-button-groupkeeps exactly one value in the form while thechangeevent is still propagating, so a consumer serialising in its own listener (htmx,new FormData(form)) never sees two. Both supportform.reset()and reflectname.FormAssociatedmixin.formAssociated, theElementInternals,formDisabledCallbackand the moment of committing sat in eighteen files, each with its own_syncFormValue. A component now supplies only what is its own:formValue(), andformState()where the value alone cannot rebuild the control. The timing rule lives in one place: the value is committed on every render and has to be committed again from the handler itself withcommitFormValue(), because a render is a task later than the event. Nothing changes on the outside, except thatinternals,formValue()andcommitFormValue()now exist on each of those components.nldd-tablehands its row padding to the cells, through the same--context-cell-padding-blockthe list uses. The inline padding stays on the row, so the full-bleed divider does not move.nldd-code-viewerand the sidebar box follow the surface tokens. Both took a hard-coded 1px border, and the viewer its owncorner-radius-lg; border width and corner radius now come from--semantics-surfaces-border-widthand--semantics-surfaces-corner-radius, so they move along with every other surface instead of drifting on their own.nldd-boxtakes its border width from a token. The 1px was hard-coded in thebox-shadow; there is now--components-box-border-width(defaulting to--semantics-surfaces-border-width), and the border is painted from one composed variable, as innldd-card.nldd-collectiondecides its gap on container width, not only on the viewport, and grid children getmin-width: 0. One long unbreakable string in a card used to stretch its whole column, and every consumer had to catch that themselves.nldd-avatar: the initials are a step smaller and lighter, and optically centred. Capitals do not use the space below the baseline, so centring on the em box left them sitting visibly high.nldd-form-field: more room above help and error text, equal to the space between label and control.JetBrains Monostood the genericmonospacealone, which on many systems is Courier New: thinner, narrower and with a smaller x-height, so code looked entirely different while the web font had not loaded (or never arrived).ui-monospace,Menlo,ConsolasandDejaVu Sans Mononow come first.nldd-top-navigation-bar: wordmark, title space and focus ring. The wordmark text wraps within the logo instead of running on as a sentence, the website title next to the menu bar gets the same padding on its right as the menu items (so the hover state no longer bumps into it), and the focus ring of the logo link sits around the ribbon instead of the whole block.Fixed
nldd-menu,nldd-menu-item,nldd-menu-divider,nldd-menu-group,nldd-breadcrumbs-item,nldd-button-bar-divider,nldd-page-footer-legal-barand-legal-bar-itemdid not appear inskills/nldd/reference.md: their documentation sits above their own class rather than at the top of the file, and the generator only read the first block. It now reads every block that names its element with@element.nldd-form-fieldslid over a sticky header. The field's header deliberately sits above its own input (z-index: 1), but without a stacking context of its own that z-index competed in the page's nearest context and beat the sticky title bar the field scrolls under. The field now isolates itself.nldd-formlet hidden fields take up space. The gap hung asmargin-topon every following child, so an<input type="hidden">(formset bookkeeping, framework plumbing) pushed the first visible field down. The gap now hangs below the preceding child, and hidden children render no box.nldd-buttonin a flex or grid parent had an invisible full-width box. The host stretched with the column while the button inside stayed content-sized, so the element was several times wider than what you see — surprising when you inspect it, and it swallows clicks that look like they land beside the button. The host now has a definite width and only stretches withwidth="full".nldd-cardlost the halo around its focus ring. The ring was drawn on the card itself, combining the card's own box-shadow token with the ring's in one declaration — and that token isnone, which cannot sit in a comma-separated shadow list, so the whole declaration was dropped. The outline still showed, the white halo that separates it from the background did not. The ring now sits in its own layer beside the card, where the card's overflow can't clip it either.nldd-cardwithhrefshowed the hand cursor. The overlay link now follows--semantics-controls-link-cursor, likenldd-linkand annldd-list-itemwithhref.nldd-collectionused the small gap at large widths when it sat inside a container-query ancestor (a card, a page, a window, a sheet). The viewport rule was right, its container-query twin read the sm token.nldd-windowemittedclosefor aclosefrom its own contents. A nested overlay (the popover of a date field, say) fires a composed, bubblingclosethat reaches the window's own listener: consumers tore the window down while it stayed open, and the real close was then swallowed.nldd-sheetalready guarded against this; the window now does too.nldd-toggle-button-groupbriefly had two values in the form. Deselecting the other buttons waited for their next render, so a consumer serialising the form in its ownchangelistener (htmx,new FormData(form)) saw both the old and the new value. The group now commits the deselected buttons from the handler itself, asnldd-radio-button-groupalready did.arrow-navigationon atype="tree"list walked only the top-level rows, so ArrowDown jumped over a branch's children to the next branch. It now follows the rows in the order they appear on screen.nldd-app-viewderived the scroll mode from the outermost horizontal split view and left it unset when there was none, so those apps fell back to nested scrolling — and on iOS that costs the rubber-band and the collapsing browser toolbar. A bare-page app is a single column at every width, so it now scrolls the document. Set--context-scroll-modeon thenldd-app-viewitself if you want it otherwise.tabindex="-1", and a shadow host with a tabindex is a focus scope of its own: Chromium walks straight past such a scope when tabbing backwards if the host itself isn't tabbable. So once you had tabbed out of the tree from a nested row, the whole list was skipped on the way back, while forward navigation still found it. Rows that are not current now carry no tabindex at all.nldd-menuscrolls the highlighted item into view. During keyboard navigation the consumer sometimes keeps focus (the combo box leaves it in the input), so the browser does not scroll along. The menu now scrolls the minimum: nothing when the item is already visible, one row when stepping past an edge, and all the way back on wrap-around.nldd-sheetandnldd-windowreport closing through every route, and ignore closes that are not theirs. The publiccloseevent came only fromhide(), but Escape on amodelessoverlay closes through the browser's CloseWatcher, which thecancelhandler cannot reliably stop — a modeless sheet closed silently. In the other direction, a nested component (a date field's popover, say) dispatches itsclosewithcomposedandbubbles, and that reached the same listener: the sheet emitted its ownclosewhile it stayed open, and consumers tore down content on an event that was not theirs. Both now emit from whichever route actually closed, once per open cycle, and only from their own dialog.nldd-windowandnldd-modal-dialogno longer close on a drag that ends on the backdrop. Selecting text or dragging a control inside the overlay and releasing outside counted as a backdrop click. Light dismiss now requires the press and the release to both land on the backdrop, the guardnldd-sheetalready had.nldd-sheetandnldd-windowtake no space in the flow. Both render aposition: fixeddialog, so the host only added an empty box. As a block it was a flex item like any other, and inside annldd-split-view-paneit collected the pane's::slottedflex-grow and ate the height its siblings needed. Both aredisplay: contentsnow, matchingnldd-modal-dialogandnldd-tooltip.nldd-popovermoves focus itself on Tab. Safari does not tab into the contents of a top-layer element: with the popover focused it skipped the whole thing and landed on whatever followed in the document, leaving the popover open behind you. Tab and Shift+Tab now walk the popover's own focusables.nldd-popoverabsorbs the first tap outside itself on a small screen. There it renders as a bottom sheet with a dimmed backdrop, but a popover backdrop is paint and not a barrier, so one tap dismissed the sheet and activated whatever sat under the dimming.nldd-popover: Tab got stuck inside a popover holding a roving-tabindex widget (a calendar grid, a toolbar). The focus scan counted everytabindex="-1"element as focusable, so with a calendar inside it saw 41 day buttons.nldd-toolbarhangs its overflow menu in its own shadow root. Ondocument.bodythe menu went inert (visible but untouchable) as soon as the toolbar sat inside a modal dialog, since everything outside that dialog is inert then. The menu is a popover, so it escapes clipping through the top layer anyway. Each toolbar also gets its own menu id (two toolbars on a page shared one), and a single remaining fluid child now fills the row instead of stopping at half.nldd-page-footeraligns the legal bar to the right when there are no start items. Without them the end area was the only flex child andspace-betweenput it at the start.nldd-side-by-side-split-viewandnldd-stacked-split-viewfollow the scroll mode. Two of the five split views never took part in the root-scroll distribution, so on a narrow screen they kept clipping at viewport height while the layers inside them had already handed their scrolling to the document. Nothing scrolled at all.nldd-just-in-time-educationno longer shows the browser's own focus ring around the whole box, text and arrow included. The container takes focus on open so Escape and the dismiss button are reachable, and it now carries the design system's ring, with an offset, and only when the coach mark was opened from the keyboard.-webkit-user-selectalongside the standard property).Configuration
📅 Schedule: (in timezone Europe/Amsterdam)
🚦 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.
This PR has been generated by Mend Renovate.
7ac306db053cc2ef6d57Update dependency @nldd/design-system to ^0.8.75to Update dependency @nldd/design-system to ^0.8.77Held back from the bundled bump round (#218) on purpose - this one needs a code change and two design calls, so it should not ride along with routine bumps.
Blocker: 0.8.75 removed the four
--primitives-font-family-*-fallbacktokens.frontend/src/styles/tokens.css:46-47points the family chain at them deliberately, because we may not use RijksSans (licensing note is in that file). Without those tokens thevar()reference is invalid at computed-value time, so--primitives-font-family-sans-serifand the downstream--primitives-font-family-bodyboth compute to the empty string, which drops thebody { font: ...; font-family: ... }rule inbase.cssentirely.Measured on the built bundle in Chromium:
font-familysystem-ui, sans-serifTimesfont-sizeline-heightTypecheck, eslint, vitest, e2e and the build all pass on 0.8.77, so no gate we run catches this.
Fix options: set a literal stack (
--primitives-font-family-sans-serif: system-ui, sans-serif;) and drop the serif line (--primitives-font-family-serifno longer exists in 0.8.77), or import@nldd/design-system/styles/system-font, which 0.8.75 added for exactly this case - though that entry still names RijksSans first in the stack, so an explicit override is the safer route for the licensing constraint.Two visual changes to decide on as well:
--components-card-box-shadowdefault went level-1 ->nonein 0.8.71.CardShell.vuerelies on that default for the resting state, so cards lose their resting shadow and are carried by the border alone. Hover, focus-visible and dragging overrides still work.:hostinto a shadow wrapper.RetentionIntroBannercarries a compensating padding rule that now stacks on top of the inner padding (double-padded, and the tinted frame shrinks 12px per side), while the seven banners without that rule silently gain the correct interior padding.Checked and clear: all 34 icon names we use survive the 21 icon renames in 0.8.71/0.8.73, and
vue-tscdoes not newly fail - every prop union we touch is unchanged or widened.Replaced by #219, which takes 0.8.77 rebased on current main together with the two code changes the upgrade needs (the font-chain fix in tokens.css and the removal of RetentionIntroBanner's compensating padding rule). Full risk analysis is in that PR's description.
Pull request closed