@nldd/design-system 0.8.91 → 0.8.92

package/dist/types/vue.d.ts

@@ -207,7 +207,7 @@ declare module 'vue' {
 		'button'?: NLDDAvatar['button'];
 		/** Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab" */
 		'target'?: NLDDAvatar['target'];
-		/** Link rel for href; defaults to 'noopener noreferrer' when target='_blank' */
+		/** Link rel for href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDAvatar['rel'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDAvatar['translations'];
@@ -236,9 +236,9 @@ declare module 'vue' {
 		'size'?: NLDDBadge['size'];
 		/** Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical' */
 		'color'?: NLDDBadge['color'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
 		'custom-color'?: NLDDBadge['customColor'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
 		'customColor'?: NLDDBadge['customColor'];
 		/** Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`. */
 		'pulse'?: NLDDBadge['pulse'];
@@ -382,7 +382,7 @@ declare module 'vue' {
 		'href'?: NLDDButton['href'];
 		/** Link target (e.g. '_blank'); only used when href is set. With '_blank' the button adds a visually hidden "opens in new tab" announcement for screen readers (WCAG 2.1 SC 3.2.2). */
 		'target'?: NLDDButton['target'];
-		/** Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank' */
+		/** Link rel attribute, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDButton['rel'];
 		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDButton['translations'];
@@ -428,7 +428,7 @@ declare module 'vue' {
 		'button'?: NLDDCard['button'];
 		/** Link target for href (e.g. '_blank'); adjusts rel automatically and adds an "Opent in nieuw tabblad" announcement for '_blank' */
 		'target'?: NLDDCard['target'];
-		/** Link rel for href; defaults to 'noopener noreferrer' with target='_blank' */
+		/** Link rel for href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDCard['rel'];
 		/** Override translation keys (e.g. the "Opent in nieuw tabblad" announcement) */
 		'translations'?: NLDDCard['translations'];
@@ -1242,9 +1242,9 @@ declare module 'vue' {
 		'size'?: NLDDIcon['size'];
 		/** 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. */
 		'color'?: NLDDIcon['color'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know. It wins over `color`. */
 		'custom-color'?: NLDDIcon['customColor'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know. It wins over `color`. */
 		'customColor'?: NLDDIcon['customColor'];
 		/** Draw the icon on a filled square. `color` and `custom-color` then paint the box and the glyph takes the contrasting color, and `size` measures the box: the glyph is four fifths of it, the corner radius a fifth. */
 		'box'?: NLDDIcon['box'];
@@ -1301,7 +1301,7 @@ declare module 'vue' {
 		'href'?: NLDDIconButton['href'];
 		/** Link target (e.g. '_blank'); only used when href is set. With '_blank' the "opens in new tab" announcement is folded into the aria-label for screen readers (WCAG 2.1 SC 3.2.2). */
 		'target'?: NLDDIconButton['target'];
-		/** Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank' */
+		/** Link rel attribute, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDIconButton['rel'];
 		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDIconButton['translations'];
@@ -1483,7 +1483,7 @@ declare module 'vue' {
 		'href'?: NLDDLink['href'];
 		/** Link target (e.g. '_blank'); adjusts rel automatically. With '_blank' the link adds a visually hidden "Opent in nieuw tabblad" announcement for screen readers (WCAG 2.1 SC 3.2.2). */
 		'target'?: NLDDLink['target'];
-		/** Link rel attribute; defaults to 'noopener noreferrer' with target='_blank' */
+		/** Link rel attribute; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDLink['rel'];
 		/** 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. */
 		'size'?: NLDDLink['size'];
@@ -1557,7 +1557,7 @@ declare module 'vue' {
 		'href'?: NLDDListItem['href'];
 		/** Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology. */
 		'target'?: NLDDListItem['target'];
-		/** Link rel forwarded to the `<a>` (e.g. 'noopener noreferrer'); only applies with `href` */
+		/** Link rel forwarded to the `<a>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDListItem['rel'];
 		/** Set by the parent `nldd-list` when its own `reorderable` is on (with `type="list"`); consumers do not set this. Serves as a CSS hook for drag handle visibility. */
 		'reorderable'?: NLDDListItem['reorderable'];
@@ -1577,7 +1577,7 @@ declare module 'vue' {
 		'href'?: NLDDListItemSegment['href'];
 		/** Link target forwarded to the `<a>`; only applies with `href` */
 		'target'?: NLDDListItemSegment['target'];
-		/** Link rel forwarded to the `<a>`; only applies with `href` */
+		/** Link rel forwarded to the `<a>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDListItemSegment['rel'];
 		/** Makes the segment a `role="checkbox"` control. Wins over `button`, loses to `href`. */
 		'checkbox'?: NLDDListItemSegment['checkbox'];
@@ -2673,7 +2673,7 @@ declare module 'vue' {
 		'href'?: NLDDStatusBar['href'];
 		/** Link target (e.g. '_blank'); only used with href */
 		'target'?: NLDDStatusBar['target'];
-		/** Link rel; defaults to 'noopener noreferrer' with target='_blank' */
+		/** Link rel, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDStatusBar['rel'];
 		/** Makes the whole bar a button; ignored when href is set */
 		'button'?: NLDDStatusBar['button'];
@@ -3683,7 +3683,7 @@ declare module 'vue' {
 		'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
 		/** A page header with a media area and a text panel (the main) that can stand in six positions. Every area is rectangular. With `main-width="full"` the media area sits as its own strip above or below the panel rather than behind it. On mobile the media always stacks above the full-width panel. Without media the main fills the whole area; with `main-background="base"` that area gets a border so it stays visible on the base surface. `main-background` gives the panel a surface color from the filled categories. Those carry a pure white or black content color along, so components with `color="inherit"` (title, rich-text) are guaranteed to keep their contrast. */
 		'nldd-hero': DefineComponent<NLDDHeroProps>;
-		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For a color the design system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color. */
+		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For a color the system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color. */
 		'nldd-icon': DefineComponent<NLDDIconProps>;
 		'nldd-icon-button': DefineComponent<NLDDIconButtonProps>;
 		/** A cell component for displaying icons in lists with configurable alignment and size. Set `icon` to render an `nldd-icon` by name, or slot custom content as an escape hatch for non-standard iconography. */
@@ -3774,7 +3774,7 @@ declare module 'vue' {
 		'nldd-simple-section': DefineComponent<NLDDSimpleSectionProps>;
 		/** Accessibility pattern that lets keyboard users skip past content. Wraps content in a default slot. Without href it focuses the first element after the skip link in the DOM (nextElementSibling). Make sure a focusable element follows the component, otherwise the skip link has no effect. */
 		'nldd-skip-link': DefineComponent<NLDDSkipLinkProps>;
-		/** Add explicit space between elements. Components in this design system have no margins of their own — all whitespace is set by a spacer. Use a single `size` attribute for whitespace that's the same at every viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override the size at specific breakpoints (mobile-first cascade is intentionally avoided — each breakpoint that needs a different value declares it explicitly): - `size` applies at every breakpoint that has no per-viewport override. - `sm-size` overrides at sm (max-width: 640px). - `md-size` overrides at md (641px–1007px). - `lg-size` overrides at lg (min-width: 1008px). Use `flexible` (in any of the four attributes) to fill the remaining space in a flex container. */
+		/** Add explicit space between elements. Components here have no margins of their own — all whitespace is set by a spacer. Use a single `size` attribute for whitespace that's the same at every viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override the size at specific breakpoints (mobile-first cascade is intentionally avoided — each breakpoint that needs a different value declares it explicitly): - `size` applies at every breakpoint that has no per-viewport override. - `sm-size` overrides at sm (max-width: 640px). - `md-size` overrides at md (641px–1007px). - `lg-size` overrides at lg (min-width: 1008px). Use `flexible` (in any of the four attributes) to fill the remaining space in a flex container. */
 		'nldd-spacer': DefineComponent<NLDDSpacerProps>;
 		/** A cell component that provides fixed horizontal spacing within list items. */
 		'nldd-spacer-cell': DefineComponent<NLDDSpacerCellProps>;

package/dist/utilities/form-associated-mixin.d.ts

@@ -11,6 +11,8 @@ export interface FormAssociatedElement {
     commitFormValue(): void;
     /** The native control whose constraints the host reports as its own. */
     validationTarget(): HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
+    /** Where an invalid submit points its message and puts the focus. */
+    validationAnchor(): HTMLElement | undefined;
     /** A reason of your own, on top of the native ones. Empty clears it. */
     setCustomValidity(message: string): void;
     commitValidity(): void;

package/dist/utilities/form-associated-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAW1D,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AAIxD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IACrC,+EAA+E;IAC/E,SAAS,IAAI,SAAS,CAAC;IACvB,qFAAqF;IACrF,SAAS,IAAI,SAAS,GAAG,SAAS,CAAC;IACnC,eAAe,IAAI,IAAI,CAAC;IACxB,wEAAwE;IACxE,gBAAgB,IAAI,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,IAAI,CAAC;IACtF,wEAAwE;IACxE,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,cAAc,IAAI,IAAI,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,GAwG/B,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CACjG"}
+{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAW1D,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AAIxD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IACrC,+EAA+E;IAC/E,SAAS,IAAI,SAAS,CAAC;IACvB,qFAAqF;IACrF,SAAS,IAAI,SAAS,GAAG,SAAS,CAAC;IACnC,eAAe,IAAI,IAAI,CAAC;IACxB,wEAAwE;IACxE,gBAAgB,IAAI,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,IAAI,CAAC;IACtF,qEAAqE;IACrE,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAAC;IAC5C,wEAAwE;IACxE,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,cAAc,IAAI,IAAI,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,GAuH/B,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CACjG"}

package/dist/utilities/form-associated-mixin.js

@@ -63,6 +63,20 @@ export function FormAssociated(Base) {
         validationTarget() {
             return this.shadowRoot?.querySelector('input, textarea, select') ?? null;
         }
+        /**
+         * Where an invalid submit points its message and puts the focus.
+         *
+         * The native control, where the user reads and fixes it. Not when that
+         * control is hidden, as the radio that only carries `required` is: a radio
+         * inside an element that is itself the radio is a control inside a control,
+         * and a hidden element cannot hold the message. Then it goes on this
+         * element. Override where neither is what the user should land on, such as
+         * a group that has no focus of its own.
+         */
+        validationAnchor() {
+            const target = this.validationTarget();
+            return target && !target.hidden ? target : undefined;
+        }
         /**
          * A reason the host is invalid that no attribute can express: a server that
          * refused the value, or an nldd-validation-list whose rule it fails. Kept
@@ -102,7 +116,7 @@ export function FormAssociated(Base) {
                 // native message is the browser's own wording for the same field.
                 message = custom;
             }
-            const anchor = (target ?? this);
+            const anchor = this.validationAnchor();
             if (Object.keys(flags).length === 0) {
                 this.internals.setValidity({});
                 return;

package/dist/utilities/form-associated-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-mixin.js","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,cAAc,GAAG;IACtB,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB;IAC/E,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc;CACZ,CAAC;AAuB3D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAAoC,IAAO;IACxE,MAAe,mBAAoB,SAAQ,IAAI;QAK9C,YAAY,GAAG,IAAW;YACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAHP,cAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YA2FpC,oBAAe,GAAG,EAAE,CAAC;YAvF5B,oEAAoE;YACpE,0DAA0D;YAC1D,MAAM,MAAM,GAAuB,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;YACjF,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;QAED,0EAA0E;QAC1E,SAAS;YACR,OAAO,IAAI,CAAC;QACb,CAAC;QAED;;gEAEwD;QACxD,SAAS;YACR,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,8DAA8D;QAC9D,eAAe;YACd,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YAChE,IAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;QAED;;;;;;;;;WASG;QACH,gBAAgB;YACf,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,yBAAyB,CAAC,IAAI,IAAI,CAAC;QAC1E,CAAC;QAED;;;;;;WAMG;QACH,iBAAiB,CAAC,OAAe;YAChC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;YAC/B,IAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;QAED;;;;;WAKG;QACH,cAAc;YACb,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACvC,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC;YACpC,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;gBACxB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;gBAC/B,OAAO;YACR,CAAC;YAED,MAAM,KAAK,GAAuB,EAAE,CAAC;YACrC,IAAI,OAAO,GAAG,EAAE,CAAC;YACjB,IAAI,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACtC,KAAK,MAAM,OAAO,IAAI,cAAc,EAAE,CAAC;oBACtC,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;wBAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;gBACrD,CAAC;gBACD,OAAO,GAAG,MAAM,CAAC,iBAAiB,CAAC;YACpC,CAAC;YACD,IAAI,MAAM,EAAE,CAAC;gBACZ,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;gBACzB,oEAAoE;gBACpE,kEAAkE;gBAClE,OAAO,GAAG,MAAM,CAAC;YAClB,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,MAAM,IAAI,IAAI,CAAgB,CAAC;YAC/C,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACrC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;gBAC/B,OAAO;YACR,CAAC;YACD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;QACpD,CAAC;QAID,oBAAoB,CAAC,QAAiB;YACrC,uEAAuE;YACvE,6DAA6D;YAC5D,IAAyC,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAChE,CAAC;;IAnGM,kCAAc,GAAG,IAAI,AAAP,CAAQ;IAsG9B,OAAO,mBAA0F,CAAC;AACnG,CAAC"}
+{"version":3,"file":"form-associated-mixin.js","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"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"}

package/dist/utilities/link-rel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The `rel` of a link that may open in a new tab.
+ *
+ * A link with `target="_blank"` gets `noopener noreferrer`: the page it opens
+ * gets no handle on this one through `window.opener`, and no referrer. A `rel`
+ * the consumer sets is added to, never replaced. `rel="external"` on a `_blank`
+ * link describes the link, and it is no reason to leave that door open.
+ *
+ * Returns an empty string when there is nothing to write, so a template can
+ * leave the attribute off with `|| nothing`.
+ */
+export declare function linkRel(rel: string | null | undefined, target: string | null | undefined): string;
+//# sourceMappingURL=link-rel.d.ts.map

package/dist/utilities/link-rel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-rel.d.ts","sourceRoot":"","sources":["../../src/utilities/link-rel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAOjG"}

package/dist/utilities/link-rel.js

@@ -0,0 +1,21 @@
+/**
+ * The `rel` of a link that may open in a new tab.
+ *
+ * A link with `target="_blank"` gets `noopener noreferrer`: the page it opens
+ * gets no handle on this one through `window.opener`, and no referrer. A `rel`
+ * the consumer sets is added to, never replaced. `rel="external"` on a `_blank`
+ * link describes the link, and it is no reason to leave that door open.
+ *
+ * Returns an empty string when there is nothing to write, so a template can
+ * leave the attribute off with `|| nothing`.
+ */
+export function linkRel(rel, target) {
+    const base = rel ?? '';
+    if (target !== '_blank')
+        return base.trim();
+    const parts = new Set(base.split(/\s+/).filter(Boolean));
+    parts.add('noopener');
+    parts.add('noreferrer');
+    return [...parts].join(' ');
+}
+//# sourceMappingURL=link-rel.js.map

package/dist/utilities/link-rel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-rel.js","sourceRoot":"","sources":["../../src/utilities/link-rel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,OAAO,CAAC,GAA8B,EAAE,MAAiC;IACxF,MAAM,IAAI,GAAG,GAAG,IAAI,EAAE,CAAC;IACvB,IAAI,MAAM,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IACtB,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IACxB,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC7B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.91",
-  "description": "Design System voor Nederlandse Digitale Dienst",
+  "version": "0.8.92",
+  "description": "Designsysteem voor de Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
   "module": "dist/components/components.js",
@@ -536,10 +536,10 @@
     "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/addon-themes": "^10.6.0",
-    "@storybook/addon-vitest": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
-    "@vitest/browser-playwright": "4.1.11",
-    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/browser-playwright": "5.0.0",
+    "@vitest/coverage-v8": "5.0.0",
+    "axe-core": "^4.13.0",
     "conventional-changelog": "^8.1.0",
     "conventional-changelog-conventionalcommits": "10.2.1",
     "eslint": "^10.8.0",
@@ -552,7 +552,7 @@
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.58.0",
     "vite": "8.3.0",
-    "vitest": "4.1.11",
+    "vitest": "5.0.0",
     "vue": "^3.5.40",
     "vue-tsc": "^3.3.7"
   },