1(globalThis.webpackChunk_nl_design_system_website = globalThis.webpackChunk_nl_design_system_website || []).push([ 2 [6985], 3 { 4 1866(e, n, t) { 5 'use strict'; 6 t.d(n, { b: () => p, e: () => h }); 7 var s = t(30758), 8 a = t(24456), 9 i = t(12086), 10 r = t(29181), 11 o = t(66153), 12 l = t(46847), 13 d = t(14881), 14 c = t(29857), 15 g = t(6360), 16 m = t(13526), 17 u = t(86070); 18 const h = ({ title: e, sc: n, children: t, tags: o }) => { 19 const l = (0, s.useId)(), 20 c = [...o]; 21 if (n) { 22 c.push(n); 23 const e = i.pI.get(n); 24 e?.conformance && c.push(`Niveau ${e.conformance}`); 25 } 26 return (0, u.jsx)('div', { 27 role: 'listitem', 28 'data-tags': o.join(','), 29 className: (0, m.A)( 30 'ma-new-checklist__item', 31 o.map((e) => `ma-new-checklist__item--${e}`), 32 ), 33 children: (0, u.jsx)(d.K, { 34 label: (0, u.jsx)('span', { className: 'ma-new-checklist__title', id: l, children: e }), 35 children: (0, u.jsxs)('div', { 36 className: 'ma-new-checklist__content ma-flow', 37 children: [ 38 t && (0, u.jsx)('div', { className: 'ma-flow', children: t }), 39 (0, u.jsx)(r._Q, { 40 className: 'ma-new-checklist__badge-list', 41 children: c.map((e, n) => { 42 let t = (0, u.jsx)(g.KE, { children: e }, n); 43 if (/^[0-9]+\.[0-9]+\.[0-9]+$/.test(e)) { 44 const s = i.pI.get(e); 45 t = (0, u.jsx)(a.N, { href: `/wcag/${e}`, 'aria-label': `WCAG Succescriterium ${s.sc} ${s.nl.title}`, style: { lineHeight: 1 }, children: (0, u.jsx)(g.KE, { children: `WCAG ${e}` }) }, n); 46 } 47 return t; 48 }), 49 }), 50 ], 51 }), 52 }), 53 }); 54 }, 55 p = ({ children: e, headingLevel: n }) => { 56 const t = s.useRef(null), 57 [a, i] = (0, s.useState)([]), 58 [g, m] = (0, s.useState)([]), 59 [h, p] = (0, s.useState)([]), 60 [b, f] = (0, s.useState)(0), 61 [j, x] = (0, s.useState)(0), 62 w = (e) => h.includes(e), 63 A = (0, s.useId)(); 64 return ( 65 s.useEffect(() => { 66 const e = t.current; 67 if (!e) return; 68 const n = new Set(), 69 s = Array.from(e.querySelectorAll('[data-tags]')); 70 (s.forEach((e) => { 71 e.dataset.tags?.split(',')?.forEach((e) => e && n.add(e)); 72 }), 73 i(s), 74 m([...n]), 75 f(s.length), 76 p([...n])); 77 }, []), 78 s.useEffect(() => { 79 const e = h, 80 n = [], 81 t = []; 82 (a.forEach((s) => { 83 (s.dataset.tags?.split(',') || []).some((n) => e.includes(n)) ? n.push(s) : t.push(s); 84 }), 85 n.forEach((e) => (e.hidden = !1)), 86 t.forEach((e) => (e.hidden = !0)), 87 x(n.length)); 88 }, [h]), 89 (0, u.jsxs)('div', { 90 children: [ 91 (0, u.jsxs)('div', { 92 className: 'ma-filter-block', 93 children: [ 94 (0, u.jsxs)(r.LB, { 95 'aria-describedby': 'filter-results', 96 'aria-labelledby': A, 97 children: [ 98 (0, u.jsx)(c.DZ, { level: n, id: A, children: 'Filter acceptatiecriteria voor:' }), 99 Array.from(g).map((e) => 100 (0, u.jsxs)( 101 r.zB, 102 { 103 type: 'checkbox', 104 children: [ 105 (0, u.jsx)(r.Sc, { 106 checked: w(e), 107 id: e, 108 onChange: () => 109 ((e, n) => { 110 const t = ('boolean' == typeof n ? n : !w(e)) ? [...h, e] : h.filter((n) => n !== e); 111 p(t); 112 })(e), 113 }), 114 (0, u.jsx)(r.lR, { htmlFor: e, children: e }), 115 ], 116 }, 117 e, 118 ), 119 ), 120 ], 121 }), 122 (0, u.jsx)('div', { 123 children: (0, u.jsxs)(u.Fragment, { 124 children: [ 125 (0, u.jsxs)(o.f, { role: 'status', children: [j, ' van de ', b, ' items zijn nu zichtbaar.'] }), 126 j < b 127 ? (0, u.jsx)(l.$, { 128 purpose: 'secondary', 129 onClick: () => { 130 p(g); 131 }, 132 children: 'Toon alles', 133 }) 134 : (0, u.jsx)(u.Fragment, {}), 135 ], 136 }), 137 }), 138 ], 139 }), 140 (0, u.jsx)(d.n, { className: 'ma-new-checklist', role: 'list', ref: t, children: e }), 141 ], 142 }) 143 ); 144 }; 145 }, 146 3387(e, n, t) { 147 'use strict'; 148 t.d(n, { s: () => l }); 149 var s = t(29181), 150 a = t(13526), 151 i = t(84471), 152 r = t(86070); 153 const o = { 'Heading 1': 'Heading', 'Heading 2': 'Heading', 'Heading 3': 'Heading', 'Heading 4': 'Heading', 'Heading 5': 'Heading', 'Heading 6': 'Heading' }, 154 l = ({ name: e, relayStep: n, description: t }) => { 155 const l = (0, i.fX)(n), 156 d = o[e] ?? e; 157 return (0, r.jsxs)(s.WK, { children: [(0, r.jsxs)('svg', { width: '960', height: '540', viewBox: '0 0 960 540', xmlns: 'http://www.w3.org/2000/svg', className: (0, a.A)('ma-component-illustration', `ma-component-illustration--${l}`), fill: 'none', children: [(0, r.jsxs)('g', { fill: 'var(--ma-component-illustration-background-color, white)', children: [(0, r.jsx)('rect', { width: '960', height: '540' }), (0, r.jsx)('rect', { width: '960', height: '540' })] }), (0, r.jsxs)('g', { fill: 'var(--ma-component-illustration-grid-color, #eee)', children: [(0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(69)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(151)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(233)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(315)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(397)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(479)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(561)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(643)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(725)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(807)' }), (0, r.jsx)('rect', { width: '2', height: '540', transform: 'translate(889)' }), (0, r.jsx)('rect', { width: '960', height: '2', transform: 'translate(0 64)' }), (0, r.jsx)('rect', { width: '960', height: '2', transform: 'translate(0 146)' }), (0, r.jsx)('rect', { width: '960', height: '2', transform: 'translate(0 228)' }), (0, r.jsx)('rect', { width: '960', height: '2', transform: 'translate(0 310)' }), (0, r.jsx)('rect', { width: '960', height: '2', transform: 'translate(0 392)' }), (0, r.jsx)('rect', { width: '960', height: '2', transform: 'translate(0 474)' })] }), (0, r.jsx)('use', { href: `/svg/componenten_overzicht_${(0, i.fX)(d)}.svg#component-illustration` })] }), (0, r.jsx)(s.$P, { className: 'ma-component-illustration__caption', children: t })] }); 158 }; 159 }, 160 3446(e, n, t) { 161 'use strict'; 162 t.d(n, { r: () => g }); 163 var s = t(29181), 164 a = t(74172), 165 i = t(15089), 166 r = t(28377), 167 o = t(33648), 168 l = t(83386), 169 d = t(86070); 170 const c = { figma: (0, d.jsx)(a.A, {}), github: (0, d.jsx)(i.A, {}), npm: (0, d.jsx)(r.A, {}), storybook: (0, d.jsx)(o.A, {}) }, 171 g = ({ brand: e }) => (0, d.jsx)(s.In, { children: c[e] || (0, d.jsx)(l.A, {}) }); 172 }, 173 12086(e, n, t) { 174 'use strict'; 175 t.d(n, { NO: () => i, pI: () => r }); 176 const s = [ 177 { sc: '1.1.1', title: 'Non-text Content', url: 'https://www.w3.org/TR/WCAG21/#non-text-content', conformance: 'A', nldesignsystem: !0, nl: { title: 'Niet-tekstuele content' } }, 178 { sc: '1.2.1', title: 'Audio-only and Video-only (Prerecorded)', url: 'https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded', conformance: 'A', nldesignsystem: !0, nl: { title: 'Louter-geluid en louter-videobeeld (vooraf opgenomen)' } }, 179 { sc: '1.2.2', title: 'Captions (Prerecorded)', url: 'https://www.w3.org/TR/WCAG21/#captions-prerecorded', conformance: 'A', nldesignsystem: !0, nl: { title: 'Ondertitels voor doven en sle
179chthorenden (vooraf opgenomen)' } }, 180 { sc: '1.2.3', title: 'Audio Description or Media Alternative (Prerecorded)', url: 'https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded', conformance: 'A', nldesignsystem: !0, nl: { title: 'Audiodescriptie of media-alternatief (vooraf opgenomen)' } }, 181 { sc: '1.2.4', title: 'Captions (Live)', url: 'https://www.w3.org/TR/WCAG21/#captions-live', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Ondertitels voor doven en slechthorenden (live)' } }, 182 { sc: '1.2.5', title: 'Audio Description (Prerecorded)', url: 'https://www.w3.org/TR/WCAG21/#audio-description-prerecorded', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Audiodescriptie (vooraf opgenomen)' } }, 183 { sc: '1.2.6', title: 'Sign Language (Prerecorded)', url: 'https://www.w3.org/TR/WCAG21/#sign-language-prerecorded', conformance: 'AAA', nl: { title: 'Gebarentaal (vooraf opgenomen)' } }, 184 { sc: '1.2.7', title: 'Extended Audio Description (Prerecorded)', url: 'https://www.w3.org/TR/WCAG21/#extended-audio-description-prerecorded', conformance: 'AAA', nl: { title: 'Verlengde audiodescriptie (vooraf opgenomen)' } }, 185 { sc: '1.2.8', title: 'Media Alternative (Prerecorded)', url: 'https://www.w3.org/TR/WCAG21/#media-alternative-prerecorded', conformance: 'AAA', nl: { title: 'Media-alternatief (vooraf opgenomen)' } }, 186 { sc: '1.2.9', title: 'Audio-only (Live)', url: 'https://www.w3.org/TR/WCAG21/#audio-only-live', conformance: 'AAA', nl: { title: 'Louter-geluid (live)' } }, 187 { sc: '1.3.1', title: 'Info and Relationships', url: 'https://www.w3.org/TR/WCAG21/#info-and-relationships', conformance: 'A', nldesignsystem: !0, nl: { title: 'Info en relaties' } }, 188 { sc: '1.3.2', title: 'Meaningful Sequence', url: 'https://www.w3.org/TR/WCAG21/#meaningful-sequence', conformance: 'A', nldesignsystem: !0, nl: { title: 'Betekenisvolle volgorde' } }, 189 { sc: '1.3.3', title: 'Sensory Characteristics', url: 'https://www.w3.org/TR/WCAG21/#sensory-characteristics', conformance: 'A', nldesignsystem: !0, nl: { title: 'Zintuiglijke eigenschappen' } }, 190 { sc: '1.3.4', title: 'Orientation', url: 'https://www.w3.org/TR/WCAG21/#orientation', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Weergavestand' } }, 191 { sc: '1.3.5', title: 'Identify Input Purpose', url: 'https://www.w3.org/TR/WCAG21/#identify-input-purpose', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Identificeer het doel van de input' } }, 192 { sc: '1.3.6', title: 'Identify Purpose', url: 'https://www.w3.org/TR/WCAG21/#identify-purpose', conformance: 'AAA', nl: { title: 'Identificeer het doel' } }, 193 { sc: '1.4.1', title: 'Use of Color', url: 'https://www.w3.org/TR/WCAG21/#use-of-color', conformance: 'A', nldesignsystem: !0, nl: { title: 'Gebruik van kleur' } }, 194 { sc: '1.4.2', title: 'Audio Control', url: 'https://www.w3.org/TR/WCAG21/#audio-control', conformance: 'A', nldesignsystem: !0, nl: { title: 'Geluidsbediening' } }, 195 { sc: '1.4.3', title: 'Contrast (Minimum)', url: 'https://www.w3.org/TR/WCAG21/#contrast-minimum', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Contrast (minimum)' } }, 196 { sc: '1.4.4', title: 'Resize text', url: 'https://www.w3.org/TR/WCAG21/#resize-text', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Herschalen van tekst' } }, 197 { sc: '1.4.5', title: 'Images of Text', url: 'https://www.w3.org/TR/WCAG21/#images-of-text', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Afbeeldingen van tekst' } }, 198 { sc: '1.4.6', title: 'Contrast (Enhanced)', url: 'https://www.w3.org/TR/WCAG21/#contrast-enhanced', conformance: 'AAA', nl: { title: 'Contrast (versterkt)' } }, 199 { sc: '1.4.7', title: 'Low or No Background Audio', url: 'https://www.w3.org/TR/WCAG21/#low-or-no-background-audio', conformance: 'AAA', nl: { title: 'Weinig of geen achtergrondgeluid' } }, 200 { sc: '1.4.8', title: 'Visual Presentation', url: 'https://www.w3.org/TR/WCAG21/#visual-presentation', conformance: 'AAA', nl: { title: 'Visuele weergave' } }, 201 { sc: '1.4.9', title: 'Images of Text (No Exception)', url: 'https://www.w3.org/TR/WCAG21/#images-of-text-no-exception', conformance: 'AAA', nl: { title: 'Afbeeldingen van tekst (geen uitzondering)' } },
202 { sc: '1.4.10', title: 'Reflow', url: 'https://www.w3.org/TR/WCAG21/#reflow', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Reflow' } }, 203 { sc: '1.4.11', title: 'Non-text Contrast', url: 'https://www.w3.org/TR/WCAG21/#non-text-contrast', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Contrast van niet-tekstuele content' } }, 204 { sc: '1.4.12', title: 'Text Spacing', url: 'https://www.w3.org/TR/WCAG21/#text-spacing', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Tekstafstand' } }, 205 { sc: '1.4.13', title: 'Content on Hover or Focus', url: 'https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Content bij hover of focus' } }, 206 { sc: '2.1.1', title: 'Keyboard', url: 'https://www.w3.org/TR/WCAG21/#keyboard', conformance: 'A', nldesignsystem: !0, nl: { title: 'Toetsenbord' } }, 207 { sc: '2.1.2', title: 'No Keyboard Trap', url: 'https://www.w3.org/TR/WCAG21/#no-keyboard-trap', conformance: 'A', nldesignsystem: !0, nl: { title: 'Geen toetsenbordval' } }, 208 { sc: '2.1.3', title: 'Keyboard (No Exception)', url: 'https://www.w3.org/TR/WCAG21/#keyboard-no-exception', conformance: 'AAA', nl: { title: 'Toetsenbord (geen uitzondering)' } }, 209 { sc: '2.1.4', title: 'Character Key Shortcuts', url: 'https://www.w3.org/TR/WCAG21/#character-key-shortcuts', conformance: 'A', nldesignsystem: !0, nl: { title: 'Enkel teken sneltoetsen' } }, 210 { sc: '2.2.1', title: 'Timing Adjustable', url: 'https://www.w3.org/TR/WCAG21/#timing-adjustable', conformance: 'A', nldesignsystem: !0, nl: { title: 'Timing aanpasbaar' } }, 211 { sc: '2.2.2', title: 'Pause, Stop, Hide', url: 'https://www.w3.org/TR/WCAG21/#pause-stop-hide', conformance: 'A', nldesignsystem: !0, nl: { title: 'Pauzeren, stoppen, verbergen' } }, 212 { sc: '2.2.3', title: 'No Timing', url: 'https://www.w3.org/TR/WCAG21/#no-timing', conformance: 'AAA', nl: { title: 'Geen timing' } }, 213 { sc: '2.2.4', title: 'Interruptions', url: 'https://www.w3.org/TR/WCAG21/#interruptions', conformance: 'AAA', nl: { title: 'Onderbrekingen' } }, 214 { sc: '2.2.5', title: 'Re-authenticating', url: 'https://www.w3.org/TR/WCAG21/#re-authenticating', conformance: 'AAA', nl: { title: 'Herauthentisering' } }, 215 { sc: '2.2.6', title: 'Timeouts', url: 'https://www.w3.org/TR/WCAG21/#timeouts', conformance: 'AAA', nl: { title: 'Time-outs' } }, 216 { sc: '2.3.1', title: 'Three Flashes or Below Threshold', url: 'https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold', conformance: 'A', nldesignsystem: !0, nl: { title: 'Drie flitsen of beneden drempelwaarde' } }, 217 { sc: '2.3.2', title: 'Three Flashes', url: 'https://www.w3.org/TR/WCAG21/#three-flashes', conformance: 'AAA', nl: { title: 'Drie flitsen' } }, 218 { sc: '2.3.3', title: 'Animation from Interactions', url: 'https://www.w3.org/TR/WCAG21/#animation-from-interactions', conformance: 'AAA', nl: { title: 'Animatie uit interacties' } }, 219 { sc: '2.4.1', title: 'Bypass Blocks', url: 'https://www.w3.org/TR/WCAG21/#bypass-blocks', conformance: 'A', nldesignsystem: !0, nl: { title: 'Blokken omzeilen' } }, 220 { sc: '2.4.2', title: 'Page Titled', url: 'https://www.w3.org/TR/WCAG21/#page-titled', conformance: 'A', nldesignsystem: !0, nl: { title: 'Paginatitel' } }, 221 { sc: '2.4.3', title: 'Focus Order', url: 'https://www.w3.org/TR/WCAG21/#focus-order', conformance: 'A', nldesignsystem: !0, nl: { title: 'Focus volgorde' } }, 222 { sc: '2.4.4', title: 'Link Purpose (In Context)', url: 'https://www.w3.org/TR/WCAG21/#link-purpose-in-context', conformance: 'A', nldesignsystem: !0, nl: { title: 'Linkdoel (in context)' } }, 223 { sc: '2.4.5', title: 'Multiple Ways', url: 'https://www.w3.org/TR/WCAG21/#multiple-ways', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Meerdere manieren' } }, 224 { sc: '2.4.6', title: 'Headings and Labels', url: 'https://www.w3.org/TR/WCAG21/#headings-and-labels', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Koppen en labels' } }, 225 { sc: '2.4.7', title: 'Focus Visible', url: 'https://www.w3.org/TR/WCAG21/#focus-visible', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Focus zichtbaar' } }, 226 { sc: '2.4.8', title: 'Location', url: 'https://www.w3.org/TR/WCAG21/#location', conformance: 'AAA', nl: { title: 'Locatie' } }, 227 { sc: '2.4.9', title: 'Link Purpose (Link Only)', url: 'https://www.w3.org/TR/WCAG21/#link-purpose-link-only', conformance: 'AAA', nl: { title: 'Linkdoel (alleen link)' } }, 228 { sc: '2.4.10', title: 'Section Headings', url: 'https://www.w3.org/TR/WCAG21/#section-headings', conformance: 'AAA', nldesignsystem: !0, nl: { title: 'Paragraafkoppen' } }, 229 { sc: '2.5.1', title: 'Pointer Gestures', url: 'https://www.w3.org/TR/WCAG21/#pointer-gestures', conformance: 'A', nldesignsystem: !0, nl: { title: 'Aanwijzergebaren' } }, 230 { sc: '2.5.2', title: 'Pointer Cancellation', url: 'https://www.w3.org/TR/WCAG21/#pointer-cancellation', conformance: 'A', nldesignsystem: !0, nl: { title: 'Aanwijzerannulering' } }, 231 { sc: '2.5.3', title: 'Label in Name', url: 'https://www.w3.org/TR/WCAG21/#label-in-name', conformance: 'A', nldesignsystem: !0, nl: { title: 'Label in naam' } }, 232 { sc: '2.5.4', title: 'Motion Actuation', url: 'https://www.w3.org/TR/WCAG21/#motion-actuation', conformance: 'A', nldesignsystem: !0, nl: { title: 'Bewegingsactivering' } }, 233 { sc: '2.5.5', title: 'Target Size', url: 'https://www.w3.org/TR/WCAG21/#target-size', conformance: 'AAA', nl: { title: 'Grootte van het aanwijsgebied (uitgebreid)' } }, 234 { sc: '2.5.6', title: 'Concurrent Input Mechanisms', url: 'https://www.w3.org/TR/WCAG21/#concurrent-input-mechanisms', conformance: 'AAA', nl: { title: 'Input gelijktijdige invoermechanismen' } }, 235 { sc: '3.1.1', title: 'Language of Page', url: 'https://www.w3.org/TR/WCAG21/#language-of-page', conformance: 'A', nldesignsystem: !0, nl: { title: 'Taal van de pagina' } }, 236 { sc: '3.1.2', title: 'Language of Parts', url: 'https://www.w3.org/TR/WCAG21/#language-of-parts', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Taal van onderdelen' } }, 237 { sc: '3.1.3', title: 'Unusual Words', url: 'https://www.w3.org/TR/WCAG21/#unusual-words', conformance: 'AAA', nl: { title: 'Ongebruikelijke woorden' } }, 238 { sc: '3.1.4', title: 'Abbreviations', url: 'https://www.w3.org/TR/WCAG21/#abbreviations', conformance: 'AAA', nl: { title: 'Afkortingen' } }, 239 { sc: '3.1.5', title: 'Reading Level', url: 'https://www.w3.org/TR/WCAG21/#reading-level', conformance: 'AAA', nl: { title: 'Leesniveau' } }, 240 { sc: '3.1.6', title: 'Pronunciation', url: 'https://www.w3.org/TR/WCAG21/#pronunciation', conformance: 'AAA', nl: { title: 'Uitspraak' } }, 241 { sc: '3.2.1', title: 'On Focus', url: 'https://www.w3.org/TR/WCAG21/#on-focus', conformance: 'A', nldesignsystem: !0, nl: { title: 'Bij focus' } }, 242 { sc: '3.2.2', title: 'On Input', url: 'https://www.w3.org/TR/WCAG21/#on-input', conformance: 'A', nldesignsystem: !0, nl: { title: 'Bij input' } }, 243 { sc: '3.2.3', title: 'Consistent Navigation', url: 'https://www.w3.org/TR/WCAG21/#consistent-navigation', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Consistente navigatie' } }, 244 { sc: '3.2.4', title: 'Consistent Identification', url: 'https://www.w3.org/TR/WCAG21/#consistent-identification', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Consistente identificatie' } }, 245 { sc: '3.2.5', title: 'Change on Request', url: 'https://www.w3.org/TR/WCAG21/#change-on-request', conformance: 'AAA', nl: { title: 'Verandering op verzoek' } }, 246 { sc: '3.3.1', title: 'Error Identification', url: 'https://www.w3.org/TR/WCAG21/#error-identification', conformance: 'A', nldesignsystem: !0, nl: { title: 'Foutidentificatie' } }, 247 { sc: '3.3.2', title: 'Labels or Instructions', url: 'https://www.w3.org/TR/WCAG21/#labels-or-instructions', conformance: 'A', nldesignsystem: !0, nl: { title: 'Labels of instructies' } }, 248 { sc: '3.3.3', title: 'Error Suggestion', url: 'https://www.w3.org/TR/WCAG21/#error-suggestion', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Foutsuggestie' } }, 249 { sc: '3.3.4', title: 'Error Prevention (Legal, Financial, Data)', url: 'https://www.w3.org/TR/WCAG21/#error-prevention-legal-financial-data', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Foutpreventie (wettelijk, financieel, gegevens)' } }, 250 { sc: '3.3.5', title: 'Help', url: 'https://www.w3.org/TR/WCAG21/#help', conformance: 'AAA', nl: { title: 'Hulp' } }, 251 { sc: '3.3.6', title: 'Error Prevention (All)', url: 'https://www.w3.org/TR/WCAG21/#error-prevention-all', conformance: 'AAA', nl: { title: 'Foutpreventie (alle)' } },
252 { sc: '4.1.1', title: 'Parsing', url: 'https://www.w3.org/TR/WCAG21/#parsing', conformance: 'A', nldesignsystem: !0, nl: { title: 'Parsen' } }, 253 { sc: '4.1.2', title: 'Name, Role, Value', url: 'https://www.w3.org/TR/WCAG21/#name-role-value', conformance: 'A', nldesignsystem: !0, nl: { title: 'Naam, rol, waarde' } }, 254 { sc: '4.1.3', title: 'Status Messages', url: 'https://www.w3.org/TR/WCAG21/#status-messages', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Statusberichten' } }, 255 ].map((e) => ({ ...e, fragment: new URL(e.url).hash.replace(/^#/, '') })), 256 a = (new Map(s.map((e) => [e.sc, e])), [{ sc: '4.1.1', title: 'Parsing', url: 'https://www.w3.org/TR/WCAG21/#parsing', conformance: 'A', nldesignsystem: !0, nl: { title: 'Parsen' }, since: 'WCAG22' }]), 257 i = [...s.map((e) => ({ ...e, url: e.url.replace(/WCAG21/i, 'WCAG22') })), { sc: '2.4.11', title: 'Focus Not Obscured (Minimum)', url: 'https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum', conformance: 'AA', nl: { title: 'Focus niet bedekt (minimum)' }, since: 'WCAG22' }, { sc: '2.4.12', title: 'Focus Not Obscured (Enhanced)', url: 'https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced', conformance: 'AAA', nl: { title: 'Focus niet bedekt (uitgebreid)' }, since: 'WCAG22' }, { sc: '2.4.13', title: 'Focus Appearance', url: 'https://www.w3.org/TR/WCAG22/#focus-appearance', conformance: 'AAA', nldesignsystem: !0, nl: { title: 'Focusweergave' }, since: 'WCAG22' }, { sc: '2.5.7', title: 'Dragging Movements', url: 'https://www.w3.org/TR/WCAG22/#dragging-movements', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Sleepbewegingen' }, since: 'WCAG22' }, { sc: '2.5.8', title: 'Target Size (minimum)', url: 'https://www.w3.org/TR/WCAG22/#target-size-minimum', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Grootte van het aanwijsgebied (minimum)' }, since: 'WCAG22' }, { sc: '3.2.6', title: 'Consistent Help', url: 'https://www.w3.org/TR/WCAG22/#consistent-help', conformance: 'A', nldesignsystem: !0, nl: { title: 'Consistente hulp' }, since: 'WCAG22' }, { sc: '3.3.7', title: 'Redundant Entry', url: 'https://www.w3.org/TR/WCAG22/#redundant-entry', conformance: 'A', nldesignsystem: !0, nl: { title: 'Overbodige invoer' }, since: 'WCAG22' }, { sc: '3.3.8', title: 'Accessible Authentication (Minimum)', url: 'https://www.w3.org/TR/WCAG22/#accessible-authentication-minimum', conformance: 'AA', nldesignsystem: !0, nl: { title: 'Toegankelijke authenticatie (minimum)' }, since: 'WCAG22' }, { sc: '3.3.9', title: 'Accessible Authentication (Enhanced)', url: 'https://www.w3.org/TR/WCAG22/#accessible-authentication-enhanced', conformance: 'AAA', nl: { title: 'Toegankelijke authenticatie (uitgebreid)' }, since: 'WCAG22' }].map((e) => ({ ...e, fragment: new URL(e.url).hash.replace(/^#/, '') })).filter(({ sc: e }) => !a.find((n) => n.sc === e)), 258 r = new Map(i.map((e) => [e.sc, e])); 259 }, 260 13839(e, n, t) { 261 'use strict'; 262 t.d(n, { Ay: () => o, RM: () => i }); 263 var s = t(86070), 264 a = t(18439); 265 const i = []; 266 function r(e) { 267 const n = { p: 'p', ...(0, a.R)(), ...e.components }; 268 return (0, s.jsx)(n.p, { children: 'Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.' }); 269 } 270 function o(e = {}) { 271 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 272 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(r, { ...e }) }) : r(e); 273 } 274 }, 275 14881(e, n, t) { 276 'use strict'; 277 t.d(n, { K: () => d, n: () => l }); 278 var s = t(13526), 279 a = t(30758), 280 i = t(96345), 281 r = t(37168), 282 o = t(86070); 283 const l = (0, a.forwardRef)(({ as: e, className: n, children: t, ...a }, i) => { 284 const r = e || 'div', 285 l = (0, s.A)('ma-utrecht-accordion', 'utrecht-accordion', n); 286 return (0, o.jsx)(r, { ref: i, className: l, ...a, children: t }); 287 }), 288 d = ({ className: e, classNamePanel: n, label: t, heading: a, headingLevel: l, headingApperance: d, ...c }) => { 289 const g = (0, s.A)('utrecht-accordion__section', e), 290 m = (0, s.A)('utrecht-accordion__panel', n); 291 return (0, o.jsxs)('details', { className: g, ...c, children: [(0, o.jsx)('summary', { className: 'utrecht-accordion__header', children: (0, o.jsxs)('span', { className: 'nl-button nl-button--subtle', children: [(0, o.jsx)('span', { className: 'nl-button__icon-start', children: (0, o.jsx)(i.A, {}) }), (0, o.jsxs)('span', { className: 'nl-button__label', children: [a && (0, o.jsx)(r.D, { level: l, appearance: d, children: a }), t] })] }) }), (0, o.jsx)('div', { className: m, children: c.children })] }); 292 }; 293 }, 294 19707(e, n, t) { 295 'use strict'; 296 t.d(n, { Z: () => s.Z }); 297 var s = t(50172); 298 }, 299 24456(e, n, t) { 300 'use strict'; 301 t.d(n, { F: () => r, N: () => o }); 302 var s = t(13526), 303 a = t(84471), 304 i = t(86070); 305 const r = ({ children: e, ...n }) => { 306 const { to: t, href: s, ...r } = n; 307 let o = t || s; 308 const l = new URL(o, 'https://nldesignsystem.nl'); 309 return ('https://nldesignsystem.nl' === l.origin ? (l.pathname.endsWith('/') || (0, a.QQ)(l.pathname) || (l.pathname = `${l.pathname}/`), (o = l.toString().replace('https://nldesignsystem.nl', ''))) : ((r.target = '_blank'), (r.rel = 'noopener noreferrer')), (0, i.jsx)('a', { href: o, ...r, children: e })); 310 }, 311 o = ({ className: e, boxContent: n, ...t }) => (0, i.jsx)(r, { className: (0, s.$)('utrecht-link', 'utrecht-link--html-a', { 'utrecht-link--box-content': n }, e), ...t }); 312 }, 313 24703(e, n, t) { 314 'use strict'; 315 t.d(n, { o: () => c }); 316 var s = t(18439), 317 a = t(46447), 318 i = t(86070); 319 const r = (e, n) => { 320 const t = new URL(n, new URL(e, 'resolve://pathname/')); 321 if ('resolve:' === t.protocol) { 322 const { pathname: t, search: s, hash: a } = new URL(n, new URL(e, 'http://example.com/')); 323 return t + s + a; 324 } 325 return t.toString(); 326 }, 327 o = { 1: {}, 2: { h1: a.fV, h2: a._B, h3: a.f_, h4: a.mM, h5: a.TT }, 3: { h1: a._B, h2: a.f_, h3: a.mM, h4: a.TT, h5: a.TT }, 4: { h1: a.f_, h2: a.mM, h3: a.TT, h4: a.TT, h5: a.TT }, 5: { h1: a.mM, h2: a.TT, h3: a.TT, h4: a.TT, h5: a.TT }, 6: { h1: a.TT, h2: a.TT, h3: a.TT, h4: a.TT, h5: a.TT } }, 328 l = (e) => ({ img: ({ src: n, ...t }) => (0, i.jsx)('img', { ...t, src: r(e, n), className: 'utrecht-img utrecht-img--fit' }) }), 329 d = (e, n) => { 330 if (e) { 331 const e = { ...o[n - 1] }; 332 return ((e.h1 = () => null), e); 333 } 334 return o[n]; 335 }, 336 c = ({ children: e, omitH1: n = !1, headingLevel: t = 1, baseUrl: a = '', components: r = {} }) => (0, i.jsx)(s.x, { components: { ...d(n, t), ...l(a), ...r }, children: e }); 337 }, 338 24908(e, n, t) { 339 'use strict'; 340 t.d(n, { Ay: () => r }); 341 var s = t(86070), 342 a = t(18439); 343 function i(e) { 344 const n = { a: 'a', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 345 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'Componenten en elementen die niet interactief zijn, komen niet voor in de normale toetsenbord-focusvolgorde van de pagina.' }), '\n', (0, s.jsx)(n.p, { children: 'Een uitzondering geldt voor situaties waarbij een interactief component, zoals een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.' }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/formulieren/toetsenbord/', children: 'Toetsenbordtoegankelijkheid' }) }), '\n'] })] }); 346 } 347 function r(e = {}) { 348 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 349 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 350 } 351 }, 352 26165(e, n, t) { 353 'use strict'; 354 t.d(n, { AC: () => d, Fu: () => r, Wu: () => o, Zp: () => l }); 355 var s = t(46447), 356 a = t(13526), 357 i = t(86070); 358 const r = ({ background: e, children: n, className: t, ...s }) => (0, i.jsx)('div', { className: (0, a.A)('ma-card__illustration', e && `ma-card__illustration--${e}`, t), ...s, children: n }), 359 o = (e) => (0, i.jsx)('div', { className: 'ma-card__content', ...e }), 360 l = ({ href: e, appearance: n, className: t, component: r = 'div', background: o, children: l }) => { 361 const d = (e) => ('article' === r ? (0, i.jsx)('article', { ...e }) : 'section' === r ? (0, i.jsx)('section', { ...e }) : (0, i.jsx)('div', { ...e })), 362 c = (0, i.jsx)(d, { className: (0, a.A)('ma-cardgroup__card', o && 'ma-cardgroup__card--light-purple', `ma-cardgroup__card--${n}`, t), children: l }); 363 return e ? (0, i.jsx)(s.N_, { href: e, boxContent: !0, className: 'ma-cardgroup__link', children: c }) : c; 364 }, 365 d = ({ appearance: e = 'large', children: n, className: t }) => (0, i.jsx)('div', { className: (0, a.A)('ma-cardgroup', `ma-cardgroup--${e}`, t), children: n }); 366 }, 367 26877(e, n, t) { 368 'use strict'; 369 t.d(n, { VK: () => x, $9: () => A, mu: () => w, Fc: () => k, K_: () => v }); 370 var s = t(29181), 371 a = t(29857), 372 i = t(66153), 373 r = t(13526), 374 o = t(3446),
375 l = t(26165), 376 d = t(19707), 377 c = t(86070); 378 const g = ({ checked: e, unchecked: n }) => { 379 const t = (e / (e + n)) * 250; 380 return (0, c.jsxs)('svg', { viewBox: '0 0 100 100', xmlns: 'http://www.w3.org/2000/svg', className: 'ma-component-progress', 'aria-hidden': 'true', children: [(0, c.jsx)('circle', { className: 'ma-component-progress__background', cx: '50', cy: '50', r: '40', fill: 'none', stroke: 'none', strokeWidth: '20' }), (0, c.jsx)('circle', { className: 'ma-component-progress__progress', cx: '50', cy: '50', r: '40', fill: 'none', stroke: 'currentColor', strokeWidth: '20', strokeDasharray: t })] }); 381 }; 382 var m = t(87856), 383 u = t(46276), 384 h = t(58876), 385 p = t(84471); 386 const b = JSON.parse('{"Notification Banner":[{"name":"Alert","slug":"alert"},{"name":"Note","slug":"note"}],"Note":[{"name":"Alert","slug":"alert"},{"name":"Blockquote","slug":"blockquote"},{"name":"Notification Banner","slug":"notification-banner"},{"name":"Pull Quote","slug":"pull-quote"}],"Modal Dialog":[{"name":"Alert Dialog","slug":"alert-dialog"},{"name":"Drawer","slug":"drawer"},{"name":"Dialog","slug":"dialog"}],"Drawer":[{"name":"Modal Dialog","slug":"modal-dialog"},{"name":"Dialog","slug":"dialog"}],"Dialog":[{"name":"Alert Dialog","slug":"alert-dialog"},{"name":"Drawer","slug":"drawer"},{"name":"Modal Dialog","slug":"modal-dialog"}],"Alert Dialog":[{"name":"Alert","slug":"alert"},{"name":"Modal Dialog","slug":"modal-dialog"},{"name":"Dialog","slug":"dialog"}],"Alert":[{"name":"Alert Dialog","slug":"alert-dialog"},{"name":"Invalid Form Alert","slug":null},{"name":"Notification Banner","slug":"notification-banner"},{"name":"Note","slug":"note"}],"Unordered List":[{"name":"Ordered List","slug":"ordered-list"},{"name":"Rich Text Content","slug":"rich-text-content"},{"name":"Link List","slug":"link-list"},{"name":"Task List","slug":"task-list"}],"Ordered List":[{"name":"Rich Text Content","slug":"rich-text-content"},{"name":"Unordered List","slug":"unordered-list"}],"Link":[{"name":"Link List","slug":"link-list"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Button":[{"name":"Action Group","slug":"action-group"},{"name":"Login Link","slug":"login-link"}],"Mark":[{"name":"Strong","slug":"strong"}],"Code Block":[{"name":"Code","slug":"code"}],"Number Badge":[{"name":"Data Badge","slug":"data-badge"},{"name":"Dot Badge","slug":"dot-badge"},{"name":"Status Badge","slug":"status-badge"}],"Heading":[{"name":"Heading 1","slug":"heading-1"},{"name":"Heading 2","slug":"heading-2"},{"name":"Heading 3","slug":"heading-3"},{"name":"Heading 4","slug":"heading-4"},{"name":"Heading 5","slug":"heading-5"},{"name":"Heading 6","slug":"heading-6"},{"name":"Heading Group","slug":"heading-group"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Data Badge":[{"name":"Dot Badge","slug":"dot-badge"},{"name":"Number Badge","slug":"number-badge"},{"name":"Status Badge","slug":"status-badge"}],"Color Sample":[],"Code":[{"name":"Code Block","slug":"code-block"}],"Paragraph":[{"name":"Lead Paragraph","slug":"paragraph"},{"name":"Rich Text Content","slug":"rich-text-content"},{"name":"Strong","slug":"strong"}],"Form Field Error Message":[{"name":"Invalid Form Alert","slug":null}],"File":[{"name":"File Input","slug":"file-input"}
386],"Page Footer":[{"name":"Root","slug":null},{"name":"Body","slug":null},{"name":"Page Layout","slug":null},{"name":"Page Header","slug":"page-header"},{"name":"Page Body","slug":null}],"Page Header":[{"name":"Root","slug":null},{"name":"Body","slug":null},{"name":"Page Layout","slug":null},{"name":"Page Body","slug":null},{"name":"Page Footer","slug":"page-footer"},{"name":"Navigation Bar","slug":"navigation-bar"}],"Text Input":[{"name":"Checkbox Group","slug":"checkbox-group"},{"name":"Date Input","slug":"date-input"},{"name":"File Input","slug":"file-input"},{"name":"Number Input","slug":"number-input"},{"name":"Password Input","slug":"password-input"},{"name":"Radio Group","slug":"radio-group"},{"name":"Text Area","slug":"text-area"},{"name":"Text Input Group","slug":null}],"Date Input":[{"name":"Calendar","slug":"calendar"},{"name":"Date Input Group","slug":"date-input-group"},{"name":"Date Picker","slug":"date-picker"}],"Description List":[{"name":"Data Summary","slug":"data-summary"},{"name":"Form Summary","slug":"form-summary"},{"name":"Table","slug":"table"}],"Fieldset":[{"name":"Date Input Group","slug":"date-input-group"},{"name":"Text Input Group","slug":null},{"name":"Radio Group","slug":"radio-group"},{"name":"Checkbox Group","slug":"checkbox-group"}],"Dot Badge":[{"name":"Data Badge","slug":"data-badge"},{"name":"Number Badge","slug":"number-badge"},{"name":"Status Badge","slug":"status-badge"}],"Figure":[{"name":"Image","slug":"image"},{"name":"Video","slug":"video"}],"File Input":[{"name":"Form Field","slug":"form-field"},{"name":"File","slug":"file"}],"Password Input":[{"name":"Checkbox Group","slug":"checkbox-group"},{"name":"Date Input","slug":"date-input"},{"name":"File Input","slug":"file-input"},{"name":"Number Input","slug":"number-input"},{"name":"Radio Group","slug":"radio-group"},{"name":"Text Area","slug":"text-area"},{"name":"Text Input","slug":"text-input"},{"name":"Text Input Group","slug":null}],"Status Badge":[{"name":"Data Badge","slug":"data-badge"},{"name":"Dot Badge","slug":"dot-badge"},{"name":"Number Badge","slug":"number-badge"}],"Form Field Description":[{"name":"Form Field","slug":"form-field"},{"name":"Form Field Label","slug":"form-field-label"},{"name":"Form Field Label Suffix","slug":"form-field-label-suffix"},{"name":"Form Field Error Message","slug":"form-field-error-message"}],"Breadcrumb Navigation":[],"Form Field Label":[{"name":"Form Field","slug":"form-field"},{"name":"Form Field Description","slug":"form-field-description"},{"name":"Form Field Label Suffix","slug":"form-field-label-suffix"},{"name":"Legend","slug":null}],"Table":[{"name":"Description List","slug":"description-list"},{"name":"Form Summary","slug":"form-summary"}],"Login Link":[{"name":"Button","slug":"button"}],"Link List":[{"name":"Link","slug":"link"},{"name":"Unordered List","slug":"unordered-list"}],"Select":[{"name":"Select Combobox","slug":"select-combobox"},{"name":"Radio Group","slug":"radio-group"}],"Image":[{"name":"Figure","slug":"figure"}],"Form Summary":[{"name":"Data Summary","slug":"data-summary"},{"name":"Description List","slug":"description-list"},{"name":"Table","slug":"table"}],"Card as Link":[{"name":"Case Card","slug":"case-card"}],"Text Area":[{"name":"Form Field","slug":"form-field"},{"name":"Form Field Description","slug":"form-field-description"},{"name":"Form Field Error Message","slug":"form-field-error-message"},{"name":"Form Field Label","slug":"form-field-label"},{"name":"Text Input","slug":"text-input"}],"Radio Button":[{"name":"Radio Group","slug":"radio-group"},{"name":"Checkbox","slug":"checkbox"},{"name":"Switch","slug":"switch"}],"Checkbox":[{"name":"Checkbox Group","slug":"checkbox-group"},{"name":"Radio Button","slug":"radio-button"},{"name":"Switch","slug":"switch"}],"Action Group":[{"name":"Button","slug":"button"}],"Side Navigation":[{"name":"Navigation Bar","slug":"navigation-bar"}],"Icon":[],"Accordion":[{"name":"Details","slug":null},{"name":"Tabs","slug":"tabs"}],"Skip Link":[],"Blockquote":[{"name":"Rich Text Content","slug":"rich-text-content"},{"name":"Pull Quote","slug":"pull-quote"}],"Heading Group":[{"name":"Heading","slug":"heading"},{"name":"Rich Text Content","slug":"rich-text-content"},{"name":"Subheading","slug":null},{"name":"Pre-heading","slug":null}],"Form Field":[{"name":"Checkbox Group","slug":"checkbox-group"},{"name":"Date Input","slug":"date-input"},{"name":"File Input","slug":"file-input"},{"name":"Number Input","slug":"number-input"},{"name":"Password Input","slug":"password-input"},{"name":"Radio Group","slug":"radio-group"},{"name":"Range","slug":"range"},{"name":"Text Area","slug":"text-area"},{"name":"Text Input","slug":"text-input"},{"name":"Text Input Group","slug":null}],"Separator":[],"Heading 6":[{"name":"Heading","slug":"heading"},{"name":"Heading 1","slug":"heading-1"},{"name":"Heading 2","slug":"heading-2"},{"name":"Heading 3","slug":"heading-3"},{"name":"Heading 4","slug":"heading-4"},{"name":"Heading 5","slug":"heading-5"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Heading 5":[{"name":"Heading","slug":"heading"},{"name":"Heading 1","slug":"heading-1"},{"name":"Heading 2","slug":"heading-2"},{"name":"Heading 3","slug":"heading-3"},{"name":"Heading 4","slug":"heading-4"},{"name":"Heading 6","slug":"heading-6"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Heading 4":[{"name":"Heading","slug":"heading"},{"name":"Heading 1","slug":"heading-1"},{"name":"Heading 2","slug":"heading-2"},{"name":"Heading 3","slug":"heading-3"},{"name":"Heading 5","slug":"heading-5"},{"name":"Heading 6","slug":"heading-6"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Heading 3":[{"name":"Heading","slug":"heading"},{"name":"Heading 1","slug":"heading-1"},{"name":"Heading 2","slug":"heading-2"},{"name":"Heading 4","slug":"heading-4"},{"name":"Heading 5","slug":"heading-5"},{"name":"Heading 6","slug":"heading-6"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Heading 2":[{"name":"Heading","slug":"heading"},{"name":"Heading 1","slug":"heading-1"},{"name":"Heading 3","slug":"heading-3"},{"name":"Heading 4","slug":"heading-4"},{"name":"Heading 5","slug":"heading-5"},{"name":"Heading 6","slug":"heading-6"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Heading 1":[{"name":"Heading","slug":"heading"},{"name":"Heading 2","slug":"heading-2"},{"name":"Heading 3","slug":"heading-3"},{"name":"Heading 4","slug":"heading-4"},{"name":"Heading 5","slug":"heading-5"},{"name":"Heading 6","slug":"heading-6"},{"name":"Rich Text Content","slug":"rich-text-content"}
386],"Form Field Label Suffix":[{"name":"Form Field","slug":"form-field"},{"name":"Form Field Label","slug":"form-field-label"},{"name":"Form Field Description","slug":"form-field-description"}],"Progress List":[{"name":"Form Navigation","slug":"form-navigation"}],"Task Navigation":[{"name":"Topic Navigation","slug":null}],"Language Navigation":[],"Avatar":[{"name":"Figure","slug":"figure"}],"Calendar":[{"name":"Date Input","slug":"date-input"},{"name":"Date Input Group","slug":"date-input-group"},{"name":"Date Picker","slug":"date-picker"}],"Contact Timeline":[],"Switch":[{"name":"Checkbox","slug":"checkbox"},{"name":"Radio Button","slug":"radio-button"}],"Tabs":[{"name":"Accordion","slug":"accordion"}],"Navigation Bar":[{"name":"Side Navigation","slug":"side-navigation"}],"Select Combobox":[{"name":"Select","slug":"select"},{"name":"Search Input","slug":null}],"Case Card":[{"name":"Card as link","slug":"card-as-link"}],"Page Number Navigation":[],"Rich Text Content":[{"name":"Blockquote","slug":"blockquote"},{"name":"Heading","slug":"heading"},{"name":"Heading 1","slug":"heading-1"},{"name":"Heading 2","slug":"heading-2"},{"name":"Heading 3","slug":"heading-3"},{"name":"Heading 4","slug":"heading-4"},{"name":"Heading 5","slug":"heading-5"},{"name":"Heading 6","slug":"heading-6"},{"name":"Lead Paragraph","slug":"paragraph"},{"name":"Link","slug":"link"},{"name":"Ordered List","slug":"ordered-list"},{"name":"Paragraph","slug":"paragraph"},{"name":"Pre-heading","slug":"pre-heading"},{"name":"Strong","slug":"strong"},{"name":"Unordered List","slug":"unordered-list"}],"Range":[{"name":"Number Input","slug":"number-input"}],"Toggletip":[],"Logo":[],"Spinner":[{"name":"Progress Bar","slug":"progress-bar"}],"Checkbox Group":[{"name":"Checkbox","slug":"checkbox"},{"name":"Fieldset","slug":"fieldset"},{"name":"Radio Group","slug":"radio-group"}],"Date Input Group":[{"name":"Calendar","slug":"calendar"},{"name":"Date Input","slug":"date-input"},{"name":"Date Picker","slug":"date-picker"},{"name":"Input Group","slug":"input-group"}],"Date Picker":[{"name":"Calendar","slug":"calendar"},{"name":"Date Input","slug":"date-input"},{"name":"Date Input Group","slug":"date-input-group"}],"Radio Group":[{"name":"Radio Button","slug":"radio-button"},{"name":"Fieldset","slug":"fieldset"},{"name":"Checkbox Group","slug":"checkbox-group"},{"name":"Select","slug":"select"}],"Task List":[{"name":"Unordered List","slug":"unordered-list"}],"Progress Bar":[{"name":"Spinner","slug":"spinner"}],"Input Group":[{"name":"Date Input Group","slug":"date-input-group"},{"name":"Form Field Partial","slug":null},{"name":"Form Field","slug":"form-field"},{"name":"Text Input","slug":"text-input"}],"Form Navigation":[{"name":"Progress List","slug":"progress-list"}],"YouTube Video":[{"name":"Video","slug":"video"}],"Data Summary":[{"name":"Description List","slug":"description-list"},{"name":"Form Summary","slug":"form-summary"}],"Video":[{"name":"Youtube Video","slug":"youtube-video"},{"name":"Figure","slug":"figure"}],"Strong":[{"name":"Paragraph","slug":"paragraph"},{"name":"Rich Text Content","slug":"rich-text-content"}],"Pull Quote":[{"name":"Blockquote","slug":"blockquote"}]}'); 387 var f = t(14881), 388 j = t(3387); 389 const x = ({ component: e, headingLevel: n }) => { 390 const t = e && e.projects.filter((e) => p.f4.includes(e.id)), 391 a = t && p.f4.map((e) => t.find((n) => n.id === e)).filter(Boolean); 392 return e && (0, c.jsx)(f.n, { children: a.map((t) => (0, c.jsx)(f.K, { className: (0, r.A)('ma-definition-of-done', t && `ma-definition-of-done--${(0, p.fX)(t.title)}`), heading: t ? `${t.title} - ${t.progress.value} van ${t.progress.max}` : '', headingLevel: n, headingApperance: 'level-5', children: (0, c.jsxs)(c.Fragment, { children: [(0, c.jsx)(h._, { children: t.tasks.map(({ checked: e, name: t, id: s }) => (0, c.jsx)(h.Z, { headingLevel: n + 1, checked: e, heading: t, description: (0, p.qZ)(s) }, s)) }), (0, c.jsx)(s.fz, { children: (0, c.jsxs)(s.N_, { href: `${t.url}?filterQuery=${e.title}`, children: [t.title, ' projectbord op GitHub'] }) })] }) }, t.title)) }); 393 }, 394 w = ({ component: e, headingLevel: n }) => { 395 const t = e && e.projects.filter((e) => !p.f4.includes(e.id)); 396 return e && t.length 397 ? (0, c.jsx)(l.AC, { 398 appearance: 'large', 399 className: 'ma-implementation-card-group', 400 children: t 401 .sort((e, n) => { 402 const t = e.progress.max - e.progress.value, 403 s = n.progress.max - n.progress.value; 404 return t === s ? e.title.localeCompare(n.title) : t - s; 405 }) 406 .map((e) => { 407 const t = e.tasks.find(({ name: e }) => 'Naam' === e), 408 r = t?.value, 409 m = (0, p.Pv)(e), 410 u = new Map([ 411 ['Figma URL', { brand: 'figma', desciption: `${r} in Figma` }], 412 ['Theme Storybook URL', { brand: 'storybook', desciption: `${r} voor visuele regressie tests` }], 413 ]), 414 h = e.tasks.filter(({ name: e, value: n }) => u.has(e) && URL.canParse(n) && 'https:' === new URL(n).protocol); 415 return globalThis.isAstro 416 ? (0, c.jsx)( 417 d.Z, 418 { 419 heading: e.title.replace(/^Community/i, ''), 420 headingLevel: n, 421 description: (0, c.jsxs)('div', { 422 className: 'ma-flow', 423 children: [ 424 (0, c.jsxs)(i.f, { children: [(0, c.jsx)(g, { checked: e.progress.value, unchecked: e.progress.max - e.progress.value }), e.progress.value, ' van ', e.progress.max, ' stappen gedocumenteerd op het', ' ', (0, c.jsxs)(s.N_, { href: e.url, children: [e.title, ' projectbord'] })] }), 425 (0, c.jsxs)('div', { 426 children: [ 427 (h.length > 0 || m.length > 0) && (0, c.jsx)(a.DZ, { level: Math.min(n + 1, 6), children: 'Snel aan de slag' }), 428 h.length > 0 && 429 (0, c.jsx)(s.dk, { 430 links: h 431 .filter((e) =>
431 !!u.get(e.name)) 432 .map((e) => { 433 const n = u.get(e.name); 434 return { children: n.desciption, icon: (0, c.jsx)(o.r, { brand: n.brand }), href: e.value }; 435 }), 436 }), 437 ], 438 }), 439 m.length > 0 && m.map(({ frameworkName: e, tasks: t }) => (0, c.jsxs)('section', { children: [(0, c.jsxs)(a.DZ, { level: Math.min(n + 2, 6), children: [r, ' in ', e] }), (0, c.jsx)(s.dk, { links: t.map((e) => ({ children: e.description, icon: (0, c.jsx)(o.r, { brand: e.brand }), href: e.value })) })] }, e)), 440 ], 441 }), 442 }, 443 e.title, 444 ) 445 : (0, c.jsx)( 446 l.Zp, 447 { 448 className: 'ma-implementation-card', 449 children: (0, c.jsxs)(l.Wu, { 450 children: [ 451 (0, c.jsx)(s.DZ, { level: n, children: e.title.replace(/^Community/i, '') }), 452 (0, c.jsxs)(s.fz, { children: [(0, c.jsx)(g, { checked: e.progress.value, unchecked: e.progress.max - e.progress.value }), e.progress.value, ' van ', e.progress.max, ' stappen gedocumenteerd op het', ' ', (0, c.jsxs)(s.N_, { href: e.url, children: [e.title, ' projectbord'] })] }), 453 (h.length > 0 || m.length > 0) && (0, c.jsx)(s.DZ, { level: n + 1, children: 'Snel aan de slag' }), 454 h.length > 0 && 455 (0, c.jsx)(c.Fragment, { 456 children: (0, c.jsx)(s.dk, { 457 links: h 458 .filter((e) => !!u.get(e.name)) 459 .map((e) => { 460 const n = u.get(e.name); 461 return { children: n.desciption, icon: (0, c.jsx)(o.r, { brand: n.brand }), href: e.value }; 462 }), 463 }), 464 }), 465 m.length > 0 && (0, c.jsx)(c.Fragment, { children: m.map(({ frameworkName: e, tasks: t }) => (0, c.jsxs)(c.Fragment, { children: [(0, c.jsxs)(s.DZ, { level: n + 2, children: [r, ' in ', e] }), (0, c.jsx)(s.dk, { links: t.map((e) => ({ children: e.description, icon: (0, c.jsx)(o.r, { brand: e.brand }), href: e.value })) })] })) }), 466 ], 467 }), 468 }, 469 e.title, 470 ); 471 }), 472 }) 473 : (0, c.jsx)(s.fz, { children: 'Er zijn nog geen implementaties' }); 474 }, 475 A = ({ component: e, headingLevel: n }) => { 476 const t = e?.projects.find((e) => 'HELP_WANTED' === e.id), 477 a = t?.tasks.find((e) => 'PVTF_lADOBGdlVM4AdX8lzgcig7o' === e.id)?.value; 478 return e && (0, c.jsxs)(c.Fragment, { children: [(0, c.jsx)(s.DZ, { id: 'help-component-verbeteren', level: n, children: 'Help om deze component te verbeteren' }), (0, c.jsxs)(s.fz, { children: ['We vinden het belangrijk dat de component ', e.title, ' goed te gebruiken is door iedereen. Help je mee?'] }), (0, c.jsxs)(s.Xy, { children: [a ? (0, c.jsxs)(s.Er, { children: ['Vul de ', (0, c.jsx)(s.N_, { href: a, children: 'GitHub Discussion' }), ' aan met de eisen en wensen voor jouw project of organisatie.'] }) : (0, c.jsxs)(s.Er, { children: [(0, c.jsxs)(s.N_, { href: 'https://github.com/orgs/nl-design-system/discussions/categories/component-suggestions', children: ['Start een GitHub Discussion voor ', e.title] }), ' ', 'en voeg de eisen en wensen voor jouw project of organisatie toe.'] }), (0, c.jsxs)(s.Er, { children: ['Draag bij aan de voortgang van ', e.title, ' door te zorgen dat deze aan meer checkpoints van de', ' ', (0, c.jsx)(s.N_, { href: '#definition-of-done', children: 'Definition of Done' }), ' voldoet. Deze houden we bij in de projectborden bij de ', (0, c.jsx)(s.N_, { href: e.backlog, children: 'publieke GitHub Backlog' }), '.', ' '] })] })] }); 479 }, 480 k = ({ component: e, headingLevel: n, description: t }) => { 481 const a = e && p.bo[e.relayStep]; 482 return globalThis.isAstro ? null : e && (0, c.jsxs)(c.Fragment, { children: [(0, c.jsx)(u.p, { level: n, suffix: a && (0, c.jsx)(m.D, { state: a }), children: e.title }), (0, c.jsx)(s.fz, { lead: !0, children: t }), ['Help Wanted', 'Community'].includes(a) && (0, c.jsx)(j.s, { relayStep: a, description: `Schets van de ${e.title} component`, name: e.title })] }); 483 }, 484 v = ({ component: e }) => { 485 const n = (e && b[e.title]) || []; 486 return n.length > 0 && (0, c.jsxs)(s.fz, { children: ['Gerelateerde componenten:', ' ', n.map((e, t) => (0, c.jsxs)(c.Fragment, { children: [e.slug ? (0, c.jsx)(s.N_, { href: `/${e.slug}/`, children: e.name }) : e.name, t < n.length - 1 ? ', ' : '.'] }))] }); 487 }; 488 }, 489 29857(e, n, t) { 490 'use strict'; 491 t.d(n, { DZ: () => i, _B: () => r }); 492 var s = t(37168), 493 a = t(86070); 494 const i = (e) => (0, a.jsx)(s.D, { ...e }), 495 r = (e) => (0, a.jsx)(s.D, { ...e, level: 3 }); 496 }, 497 33201(e, n, t) { 498 'use strict'; 499 t.d(n, { Ay: () => r }); 500 var s = t(86070), 501 a = t(18439); 502 function i(e) { 503 const n = { a: 'a', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 504 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'Niet-interactieve componenten en elementen zijn standaard niet bereikbaar en bedienbaar met het toetsenbord.' }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/formulieren/toetsenbord/', children: 'Toetsenbordtoegankelijkheid' }) }), '\n'] })] }); 505 } 506 function r(e = {}) { 507 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 508 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 509 } 510 }, 511 37166(e, n, t) { 512 'use strict'; 513 t.d(n, { Ay: () => r }); 514 var s = t(86070), 515 a = t(18439); 516 function i(e) { 517 const n = { a: 'a', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 518 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: '4,5:1 contrast voor normale tekst.' }), '\n', (0, s.jsx)(n.li, { children: '3:1 contrast voor grotere letters (vanaf 24 pixels).' }), '\n', (0, s.jsx)(n.li, { children: '3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).' }), '\n'] }), '\n', (0, s.jsxs)(n.p, { children: ['Hogere verhoudingen mogen natuurlijk altijd. Met de ', (0, s.jsx)(n.a, { href: '/contrast/', children: 'Contrast checker' }), ' kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.'] }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/stijl/kleuren/contrast-tekst/', children: 'Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond' }) }), '\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/formulieren/visueel-ontwerp/tekst-goed-zichtbaar/', children: 'Geef tekst voldoende kleurcontrast' }) }), '\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/content/tekstopmaak/kleurgebruik-in-tekst/', children: 'Gebruik van kleur in tekst' }) }), '\n'] })] }); 519 } 520 function r(e = {}) { 521 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 522 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 523 } 524 }, 525 37674(e, n, t) { 526 'use strict'; 527 t.d(n, { Ay: () => o, RM: () => i }); 528 var s = t(86070), 529 a = t(18439); 530 const i = []; 531 function r(e) { 532 const n = { p: 'p', ...(0, a.R)(), ...e.components }; 533 return (0, s.jsx)(n.p, { children: 'Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.' }); 534 } 535 function o(e = {}) { 536 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 537 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(r, { ...e }) }) : r(e); 538 } 539 }, 540 37888(e, n, t) { 541 'use strict'; 542 t.d(n, { Ay: () => r }); 543 var s = t(86070), 544 a = t(18439); 545 function i(e) { 546 const n = { a: 'a', code: 'code', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 547 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsxs)(n.p, { children: ['Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een ', (0, s.jsx)(n.code, { children: 'lang' }), '-attribuut met de juiste taalcode.'] }), '\n', (0, s.jsx)(n.p, { children: 'Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.' }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/content/tekstopmaak/taal/', children: 'De juiste taal instellen' }) }), '\n'] })] }); 548 } 549 function r(e = {}) { 550 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 551 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 552 } 553 }, 554 45009(e, n, t) { 555 'use strict'; 556 t.d(n, { P: () => s.Pt, d: () => s.dk }); 557 var s = t(29181); 558 }, 559 46276(e, n, t) { 560 'use strict'; 561 t.d(n, { p: () => i }); 562 var s = t(13526), 563 a = t(86070); 564 const i = ({ children: e, className: n, level: t = 1, suffix: i, ...r }) => (0, a.jsxs)('hgroup', { className: (0, s.A)('nlds-inline-heading-group', `utrecht-heading-${t}`, n), ...r, children: [(0, a.jsx)('h1', { className: 'nlds-inline-heading-group__heading', children: e }), i && (0, a.jsxs)('p', { className: 'nlds-inline-heading-group__suffix', children: [i ? ' ' : '', i] })] }); 565 }, 566 46847(e, n, t) { 567 'use strict'; 568 t.d(n, { $: () => s.$n }); 569 var s = t(50805); 570 }, 571 48068(e, n, t) { 572 'use strict'; 573 t.d(n, { B: () => C }); 574 var s = t(96547), 575 a = t(38295), 576 i = t(84471), 577 r = t(46447), 578 o = t(30758), 579 l = t(4603), 580 d = t(29181), 581 c = t(86070); 582 function g({ children: e, content: n }) { 583 const [t, s] = (0, o.useState)(!1); 584 return ( 585 (0, o.useEffect)(() => { 586 'clipboard' in navigator && s(!0); 587 }, []), 588 (0, c.jsx)(c.Fragment, { 589 children: 590 t && 591 (0, c.jsxs)(r.$n, { 592 type: 'button', 593 appearance: 'secondary-action-button', 594 onClick: async function () { 595 try { 596 await navigator.clipboard.writeText(n); 597 } catch (e) { 598 console.error(e); 599 } 600 }, 601 children: [e, (0, c.jsx)(d.In, { children: (0, c.jsx)(l.A, {}) })], 602 }), 603 }) 604 ); 605 } 606 var m = t(43864), 607 u = t(35193), 608 h = t(82999), 609 p = t(13088), 610 b = t(91525), 611 f = t(24214), 612 j = t(92081), 613 x = t(1375), 614 w = t(73563), 615 A = t(23436), 616 k = t(79532); 617 const v = { boxShadow: m.A, color: u.A, cursor: h.A, dimension: p.A, fontFamily: b.A, fontFamilies: b.A, fontSize: f.A, fontSizes: f.A, fontWeight: j.A, fontWeights: j.A, lineHeight: x.A, lineHeights: x.A, number: w.A, other: A.A, textDecoration: k.A }, 618 y = ({ type: e }) => { 619 const n = Object.hasOwn(v, e) ? e : 'other'; 620 return (0, c.jsx)(d.In, { children: (0, o.createElement)(v[n]) }); 621 }; 622 var T = t(76223); 623 function C({ tokens: e }) { 624 const n = (0, i.kD)(e), 625 t = (0, T.sj)(e, (e) => (((e) => null !== e && 'object' == typeof e && Object.hasOwn(e, '$type') && 'string' == typeof e.$type)(e) ? { $type: e.$type, $value: '' } : void 0)), 626 o = (0, i.GT)(n), 627 l = o.map((e) => (0, i.B_)(e) + ': ;').join('\n'), 628 d = JSON.stringify(t, null, 2); 629 return (0, c.jsxs)('div', { 630 className: 'ma-flow', 631 children: [ 632 (0, c.jsxs)(r.XI, { 633 children: [ 634 (0, c.jsx)(r.A0, { children: (0, c.jsxs)(r.Hj, { children: [(0, c.jsx)(r.M_, { children: 'name' }), (0, c.jsx)(r.M_, { children: 'type' })] }) }), 635 (0, c.jsx)(r.BF, { 636 children: o.map((n) => { 637 const t = (0, i.o_)(n), 638 o = (0, i.eQ)(e, n).$type; 639 return (0, c.jsxs)(r.Hj, { children: [(0, c.jsx)(r.nA, { children: (0, c.jsx)(s.C, { children: (0, c.jsx)(r.kf, { children: t }) }) }), (0, c.jsx)(r.nA, { children: (0, c.jsxs)(a.K, { children: [(0, c.jsx)(y, { type: o }), ' ', o] }) })] }, t); 640 }), 641 }), 642 ], 643 }), 644 (0, c.jsxs)(r.e2, { children: [(0, c.jsx)(g, { content: d, children: 'Kopieer als JSON' }), (0, c.jsx)(g, { content: l, children: 'Kopieer als CSS' })] }), 645 ], 646 }); 647 } 648 }, 649 53971(e, n, t) { 650 'use strict'; 651 t.d(n, { Ay: () => r }); 652 var s = t(86070), 653 a = t(18439); 654 function i(e) { 655 const n = { a: 'a', code: 'code', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 656 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.' }), '\n', (0, s.jsxs)(n.p, { children: ['Zorg ervoor dat de component meegroeit met de tekst. Definieer hoogte en de breedte niet in ', (0, s.jsx)(n.code, { children: 'px' }), ', maar gebruik een relatieve waarde als ', (0, s.jsx)(n.code, { children: 'em' }), ' of ', (0, s.jsx)(n.code, { children: 'rem' }), '.'] }), '\n', (0, s.jsxs)(n.p, { children: ['Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld ', (0, s.jsx)(n.code, { children: 'overflow-wrap: break-word; hyphens: auto;' }), ' eventueel in combinatie met ', (0, s.jsx)(n.code, { children: 'text-wrap-style: balance' }), '. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op ', (0, s.jsx)(n.code, { children: ':root' }), ' niveau.'] }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/stijl/typografie/voorkeur/', children: 'Let op voorkeursinstellingen voor typografie' }) }), '\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/stijl/typografie/lettergrootte/', children: 'Zorg ervoor dat letters groot genoeg zijn' }) }), '\n'] })] }); 657 } 658 function r(e = {}) { 659 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 660 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 661 } 662 }, 663 54672(e, n, t) { 664 'use strict'; 665 t.d(n, { Ay: () => r }); 666 var s = t(86070), 667 a = t(18439); 668 function i(e) { 669 const n = { a: 'a', code: 'code', li: 'li', p: 'p', pre: 'pre', ul: 'ul', ...(0, a.R)(), ...e.components }; 670 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: "Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf." }), '\n', (0, s.jsx)(n.p, { children: 'Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.' }), '\n', (0, s.jsxs)(n.p, { children: ['Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld ', (0, s.jsx)(n.code, { children: 'overflow-wrap: break-word; hyphens: auto;' }), ' eventueel in combinatie met ', (0, s.jsx)(n.code, { children: 'text-wrap-style: balance' }), '. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op ', (0, s.jsx)(n.code, { children: ':root' }), ' niveau.'] }), '\n', (0, s.jsx)(n.p, { children: 'Je moet de afstand kunnen vergroten naar deze waardes:' }), '\n', (0, s
670.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: 'Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.' }), '\n', (0, s.jsx)(n.li, { children: "Afstand tussen alinea's naar ten minste 2 keer de lettergrootte." }), '\n', (0, s.jsx)(n.li, { children: 'Letterafstand (spati\xebren van letters) naar ten minste 0,12 keer de lettergrootte.' }), '\n', (0, s.jsx)(n.li, { children: 'Spati\xebren van woorden naar ten minste 0,16 keer de lettergrootte.' }), '\n'] }), '\n', (0, s.jsxs)(n.p, { children: ['Dit is te testen met een extensie zoals Stylus of User CSS, een ', (0, s.jsx)(n.a, { href: 'https://html5accessibility.com/tests/tsbookmarklet.html', children: 'bookmarklet' }), ' of door in de inspector van de browser de volgende code toe te voegen aan de ', (0, s.jsx)(n.code, { children: 'head' }), ' van de pagina:'] }), '\n', (0, s.jsx)(n.pre, { children: (0, s.jsx)(n.code, { className: 'language-css', children: '<style>\nbody * {\n line-height: 1.5 !important;\n letter-spacing: 0.12em !important;\n word-spacing: 0.16em !important;\n}\nbody p {\n margin-bottom: 2em !important;\n}\n</style>\n' }) }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/stijl/typografie/voorkeur/', children: 'Let op voorkeursinstellingen voor typografie' }) }), '\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/stijl/typografie/lettergrootte/', children: 'Zorg ervoor dat letters groot genoeg zijn' }) }), '\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/stijl/typografie/regelafstand/', children: 'Zorg voor een comfortabele regelafstand' }) }), '\n'] })] }); 671 } 672 function r(e = {}) { 673 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 674 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 675 } 676 }, 677 56323(e, n, t) { 678 'use strict'; 679 t.d(n, { e: () => o }); 680 var s = t(24703), 681 a = t(30758), 682 i = t(84471), 683 r = t(86070); 684 const o = ({ component: e }) => { 685 if (globalThis.isAstro) return null; 686 const { title: n } = e, 687 o = (0, i.fX)(n), 688 l = a.lazy(() => t(82839)(`./${o}-docs/docs/aliases.md`).catch(() => ({ default: () => null }))); 689 return (0, r.jsx)(a.Suspense, { fallback: null, children: (0, r.jsx)(s.o, { omitH1: !0, headingLevel: 1, children: (0, r.jsx)(l, {}) }) }); 690 }; 691 }, 692 61629(e, n, t) { 693 'use strict'; 694 t.d(n, { Ay: () => r }); 695 var s = t(86070), 696 a = t(18439); 697 function i(e) { 698 const n = { a: 'a', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 699 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'Componenten en elementen die niet interactief zijn, zijn niet bereikbaar en bedienbaar met het toetsenbord.' }), '\n', (0, s.jsx)(n.p, { children: 'Een uitzondering geldt voor situaties waarbij een interactief element zoals een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.' }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/formulieren/toetsenbord/', children: 'Toetsenbordtoegankelijkheid' }) }), '\n'] })] }); 700 } 701 function r(e = {}) { 702 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 703 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 704 } 705 }, 706 61962(e, n, t) { 707 'use strict'; 708 t.d(n, { Ay: () => r }); 709 var s = t(86070), 710 a = t(18439); 711 function i(e) { 712 const n = { a: 'a', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 713 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'Niet-interactieve componenten en elementen komen standaard niet voor in de toetsenbord-focusvolgorde van de pagina.' }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/formulieren/toetsenbord/', children: 'Toetsenbordtoegankelijkheid' }) }), '\n'] })] }); 714 } 715 function r(e = {}) { 716 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 717 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 718 } 719 }, 720 66153(e, n, t) { 721 'use strict'; 722 t.d(n, { f: () => s.f }); 723 var s = t(56561); 724 }, 725 78134(e, n, t) { 726 'use strict'; 727 t.d(n, { Ay: () => o, RM: () => i }); 728 var s = t(86070), 729 a = t(18439); 730 const i = []; 731 function r(e) { 732 const n = { p: 'p', ...(0, a.R)(), ...e.components }; 733 return (0, s.jsx)(n.p, { children: 'Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk \xe9n gebruiksvriendelijk in te zetten.' }); 734 } 735 function o(e = {}) { 736 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 737 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(r, { ...e }) }) : r(e); 738 } 739 }, 740 82839(e, n, t) { 741 var s = { './button-docs/docs/aliases.md': [64163, 64163], './code-block-docs/docs/aliases.md': [47318, 47318], './code-docs/docs/aliases.md': [50566, 50566], './color-sample-docs/docs/aliases.md': [72965, 72965], './data-badge-docs/docs/aliases.md': [79971, 79971], './heading-1-docs/docs/aliases.md': [24053, 24053], './heading-2-docs/docs/aliases.md': [80713, 80713], './heading-3-docs/docs/aliases.md': [69461, 69461], './heading-4-docs/docs/aliases.md': [8289, 8289], './heading-docs/docs/aliases.md': [43020, 43020], './link-docs/docs/aliases.md': [71164, 71164], './mark-docs/docs/aliases.md': [92698, 92698], './number-badge-docs/docs/aliases.md': [36630, 36630], './paragraph-docs/docs/aliases.md': [42388, 42388], './skip-link-docs/docs/aliases.md': [7236, 7236] }; 742 function a(e) { 743 if (!t.o(s, e)) 744 return Promise.resolve().then(() => { 745 var n = new Error("Cannot find module '" + e + "'");
746 throw ((n.code = 'MODULE_NOT_FOUND'), n); 747 }); 748 var n = s[e], 749 a = n[0]; 750 return t.e(n[1]).then(() => t(a)); 751 } 752 ((a.keys = () => Object.keys(s)), (a.id = 82839), (e.exports = a)); 753 }, 754 84471(e, n, t) { 755 'use strict'; 756 t.d(n, { bo: () => a, KF: () => m, mJ: () => p, VZ: () => v, cR: () => k, Pv: () => b, qZ: () => r, kD: () => w, QQ: () => T, B2: () => u, Pc: () => l, f4: () => o, GT: () => A, fX: () => i, eQ: () => x, B_: () => j, o_: () => f }); 757 const s = JSON.parse('{"sP":{"//":"Update @types/node to match the highest node version here","node":">=24 <=25","pnpm":"^11.4.0"}}'), 758 a = { UNKNOWN: 'Todo', HELP_WANTED: 'Help Wanted', COMMUNITY: 'Community', CANDIDATE: 'Candidate', HALL_OF_FAME: 'Hall of fame' }, 759 i = (e) => e?.toLowerCase().replace(/\s+/gi, '-'), 760 r = (e) => ({ PVTSSF_lADOBGdlVM4AdX8lzgasA5I: 'Naam bepaald op basis van NL Design System naamgeving.', PVTSSF_lADOBGdlVM4AdX8lzgTC4tM: 'Doel van component is in \xe9\xe9n zin beschreven.', PVTSSF_lADOBGdlVM4AdX8lzgasBXs: 'Afbeelding gemaakt om de component visueel duidelijk te maken.', PVTSSF_lADOBGdlVM4AdX8lzgTDAP0: 'Staat in de publieke backlog van NL Design System.', 'PVTSSF_lADOBGdlVM4AdX8lzgTC-Ug': 'Bewijs verzameld dat de component algemeen bruikbaar is.', PVTSSF_lADOBGdlVM4AdX8lzgasBms: 'Aangemaakt als een GitHub Discussion.', PVTSSF_lADOBGdlVM4AdX8lzgTC95M: 'Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.', 'PVTSSF_lADOBGdlVM4AdX8lzgTC-BI': 'Naam en doel van benodigde varianten beschreven.', 'PVTSSF_lADOBGdlVM4AdX8lzgTC-1c': 'Nut van component is onderbouwd door gebruikersonderzoek.', PVTSSF_lADOBGdlVM4AdX8lzgTC_5o: 'Kernteam verwacht dat dit component tot Hall of Fame kan komen.', PVTSSF_lADOBGdlVM4AdX8lzgTC_W0: 'Vindbaar op de NL Design System website.' })[e], 761 o = Object.keys({ HELP_WANTED: 'UNKNOWN', COMMUNITY: 'HELP_WANTED', CANDIDATE: 'COMMUNITY', HALL_OF_FAME: 'CANDIDATE' }), 762 l = (e) => e.toLowerCase().replace(/(\s|-)+/, ''), 763 d = ['CSS', 'HTML', 'Web Component', 'React', 'Vue', 'Angular', 'Twig']; 764 function c(e) { 765 return Array.from(new Set(e)); 766 } 767 const g = (e) => [...e].sort((e, n) => d.indexOf(e) - d.indexOf(n)), 768 m = (e) => { 769 const n = e.flatMap(({ projects: e }) => e).flatMap((e) => h(e)); 770 return g(c(n)); 771 }, 772 u = (e, n) => p(e).includes(n), 773 h = (e) => { 774 const n = / URL \(([^)]+)\)/; 775 return g(c(e.tasks.filter(({ name: e, value: t }) => '' !== t && n.test(e)).map(({ name: e }) => n.exec(e)?.[1]))); 776 }, 777 p = (e) => g(c(e.projects.flatMap((e) => h(e)))), 778 b = (e) => { 779 const n = h(e), 780 t = ((e) => { 781 const n = e.tasks.find(({ name: e }) => 'Naam' === e); 782 return n?.value || ''; 783 })(e); 784 return n.map((n) => { 785 const s = e.tasks 786 .filter(({ name: e, value: t }) => '' !== t && e.includes(n)) 787 .map(({ name: s, id: a, value: i }) => { 788 const r = /^(.+) URL/.exec(s)[1], 789 o = 'Storybook' === r ? `${t} (${n}) in Storybook van ${e.title}` : `${t} (${n}) op ${r}`; 790 return { brand: r.toLowerCase(), name: s, id: a, value: i, description: o }; 791 }); 792 return { frameworkName: n, tasks: s }; 793 }); 794 }, 795 f = (e) => e.join('.'), 796 j = (e) => '--' + e.join('-'), 797 x = (e, n) => n.reduce((e, n) => e?.[n], e); 798 function w(e, n = []) { 799 return Object.hasOwn(e, '$type') ? [n] : Object.keys(e).flatMap((t) => ('object' == typeof e[t] && null !== e[t] ? w(e[t], [...n, t]) : [])); 800 } 801 function A(e) { 802 const n = new Map(); 803 function t(e) { 804 return (n.has(e) || n.set(e, f(e)), n.get(e)); 805 } 806 return e.sort((e, n) => e.length - n.length || t(e).localeCompare(t(n))); 807 } 808 const k = () => { 809 const e = s.sP?.pnpm; 810 if (!e) throw new Error('No pnpm version found in package.json#engines.pnpm'); 811 return e.replace(/^[\^~>=<]+/, ''); 812 }, 813 v = () => { 814 const e = s.sP?.node; 815 if (!e) throw new Error('No node version found in package.json#engines.node'); 816 const n = e.match(/^[>
816]=?\s*(\d+(?:\.\d+)*(?:\.\d+)?)/); 817 return n ? n[1] : e.replace(/^[\^~>=<]+/, ''); 818 }, 819 y = new Set(['ics', 'json', 'pdf']), 820 T = (e) => { 821 const n = e.split('/').pop() ?? '', 822 t = n.split('.').pop()?.toLowerCase(); 823 return void 0 !== t && y.has(t); 824 }; 825 }, 826 87856(e, n, t) { 827 'use strict'; 828 t.d(n, { D: () => o }); 829 var s = t(46447), 830 a = t(13526), 831 i = t(84471), 832 r = t(86070); 833 const o = ({ state: e }) => { 834 const n = (0, i.fX)(e); 835 return (0, r.jsx)(s.KE, { className: (0, a.A)('ma-estafette-badge', n && `ma-estafette-badge--${n}`), children: e }); 836 }; 837 }, 838 91541(e, n, t) { 839 'use strict'; 840 (t.r(n), t.d(n, { assets: () => H, component: () => I, contentTitle: () => _, default: () => O, description: () => z, frontMatter: () => W, issueNumber: () => P, metadata: () => s, title: () => B, toc: () => M })); 841 const s = JSON.parse('{"id":"componenten/number-badge/index","title":"Number Badge","description":"Toont een klein label dat de aandacht trekt en informeert over een aantal.","source":"@site/docs/componenten/number-badge/index.mdx","sourceDirName":"componenten/number-badge","slug":"/number-badge","permalink":"/number-badge","draft":false,"unlisted":false,"editUrl":"https://github.com/nl-design-system/documentatie/tree/main/docs/componenten/number-badge/index.mdx","tags":[],"version":"current","frontMatter":{"title":"Number Badge","hide_title":true,"hide_table_of_contents":false,"sidebar_label":"Number Badge","pagination_label":"Number Badge","description":"Toont een klein label dat de aandacht trekt en informeert over een aantal.","issue_number":7,"slug":"/number-badge","keywords":["aantal","badge","count badge","counter badge","cijfer","chip","counter","label","number","number badge","number label","number marker","notification badge","notification label","pill","stamp","tag"]},"sidebar":"componenten","previous":{"title":"Notification Banner","permalink":"/notification-banner"},"next":{"title":"Number Input","permalink":"/number-input"}}'); 842 var a = t(86070), 843 i = t(18439), 844 r = t(79447); 845 t(30758); 846 var o = t(13839), 847 l = t(37674), 848 d = t(78134); 849 function c(e) { 850 const n = { a: 'a', code: 'code', p: 'p', pre: 'pre', ...(0, i.R)(), ...e.components }; 851 return (0, a.jsxs)(a.Fragment, { children: [(0, a.jsxs)(n.p, { children: ['Visueel heeft de Number Badge een betekenis die duidelijk is. Deze betekenis moet ook duidelijk zijn voor gebruikers van ', (0, a.jsx)(n.a, { href: '/woordenlijst/#screenreader', children: 'screenreaders' }), ". Het volstaat daarom meestal niet als de Number Badge alleen een cijfer toevoegt aan bijvoorbeeld een tekst 'Inbox'. De visuele layout maakt namelijk duidelijk dat het om nieuwe berichten gaat."] }), '\n', (0, a.jsx)(n.p, { children: 'Geeft dan extra tekstuele context, bijvoorbeeld met een visueel verborgen tekst:' }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-html', children: '<a href="/inbox">\n Inbox\n <data class="utrecht-number-badge" value="4">4</data>\n <span class="screenreader-only">nieuwe berichten</span>\n</a>\n' }) })] }); 852 } 853 var g = t(54672), 854 m = t(37166), 855 u = t(53971), 856 h = t(91708), 857 p = t(37888), 858 b = t(61629), 859 f = t(33201), 860 j = t(61962), 861 x = t(24908); 862 const w = [ 863 { title: 'De tekst van de Number Badge heeft voldoende contrast tegen de achtergrond.', sc: '1.4.3', status: '', component: m.Ay, tags: ['designer', 'contentmaker'] }, 864 { title: 'Gebruik geen afbeeldingen van tekst voor de Number Badge.', sc: '1.4.5', status: '', component: h.Ay, tags: ['designer', 'contentmaker'] }, 865 { title: 'De Number Badge is niet bereikbaar en bedienbaar met het toetsenbord.', sc: '2.1.1', status: '', component: b.Ay, tags: ['developer'] }, 866 { title: 'De Number Badge komt niet voor in de normale focusvolgorde van de pagina.', sc: '2.4.3', status: '', component: x.Ay, tags: ['developer'] }, 867 { title: 'Als een tekst en/of het aria-label in de Number Badge in een andere taal is dan de taal van de pagina, dan heeft de Number Badge een lang-attribuut met de juiste taalcode.', sc: '3.1.2', status: '', component: p.Ay, tags: ['developer', 'contentmaker'] }, 868 ], 869 A = [ 870 { 871 title: 'Geef de informatie uit de Number Badge ook door aan screenreaders', 872 sc: '1.3.1', 873 status: '', 874 component: function (e = {}) { 875 const { wrapper: n } = { ...(0, i.R)(), ...e.components }; 876 return n ? (0, a.jsx)(n, { ...e, children: (0, a.jsx)(c, { ...e }) }) : c(e); 877 }, 878 tags: ['developer'], 879 }, 880 { title: 'Als je de tekst van de Number Badge vergroot tot 200% blijft de tekst in zijn geheel zichtbaar', sc: '1.4.4', status: '', component: u.Ay, tags: ['developer'] }, 881 { title: 'Als je de tekstafstand van de Number Badge vergroot blijft de tekst in zijn geheel zichtbaar', sc: '1.4.12', status: '', component: g.Ay, tags: ['developer'] }, 882 { title: 'De Number Badge is standaard niet bereikbaar en bedienbaar met het toetsenbord.', sc: '2.1.1', status: '', component: f.Ay, tags: ['developer'] }, 883 { title: 'De Number Badge komt standaard niet voor in de focusvolgorde van de pagina.', sc: '2.4.3', status: '', component: j.Ay, tags: ['developer'] }, 884 ]; 885 var k = t(26165), 886 v = t(45009), 887 y = t(29857), 888 T = t(3446), 889 C = t(56323), 890 N = t(26877), 891 R = t(1866), 892 G = t(48068), 893 S = t(24703); 894 function D(e) { 895 const n = { a: 'a', code: 'code', h1: 'h1', h2: 'h2', h3: 'h3', header: 'header', p: 'p', pre: 'pre', ...(0, i.R)(), ...e.components }; 896 return (0, a.jsxs)(a.Fragment, { children: [(0, a.jsx)(n.header, { children: (0, a.jsx)(n.h1, { id: 'gebruik-number-badge', children: 'Gebruik Number Badge' }) }), '\n', (0, a.jsx)(n.h2, { id: 'css', children: 'CSS' }), '\n', (0, a.jsx)(n.p, { children: 'De CSS van deze component is gepubliceerd in een npm package:' }), '\n', (0, a.jsx)(n.p, { children: (0, a.jsx)(n.a, { href: 'https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-css', children: '@nl-design-system-candidate/number-badge-css' }) }), '\n', (0, a.jsxs)(n.p, { children: ['Gebruik de ', (0, a.jsx)(n.code, { children: 'nl-number-badge' }), ' class name op een ', (0, a.jsx)(n.code, { children: 'span' }), ' element:'] }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-html', children: '<span class="nl-number-badge">42</span>\n' }) }), '\n', (0, a.jsx)(n.p, { children: 'Je kunt de CSS zo in je project installeren:' }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-sh', children: 'npm install --save-dev @nl-design-system-candidate/number-badge-css\n' }) }), '\n', (0, a.jsx)(n.p, { children: 'Als je een CDN gebruikt, dan kun je de CSS zo importeren:' }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-html', children: '<link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/number-badge-css@1/dist/number-badge.css"\n/>\n' }) }), '\n', (0, a.jsxs)(n.p, { children: ['Gebruik je geen CDN, dan kun je de CSS uit ', (0, a.jsx)(n.code, { children: 'node_modules/' }), ' importeren:'] }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-html', children: '<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/number-badge-css/dist/number-badge.css" />\n' }) }), '\n', (0, a.jsx)(n.p, { children: 'Als je CSS imports gebruikt vanuit JavaScript:' }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-js', children: 'import "@nl-design-system-candidate/number-badge-css/number-badge.css";\n' }) }), '\n', (0, a.jsx)(n.h3, { id: 'number-badge-als-data-component', children: 'Number badge als data component' }), '\n', (0, a.jsxs)(n.p, { children: ['Je kunt er ook voor kiezen om number badge op een ', (0, a.jsx)(n.code, { children: 'data' }), ' element te gebruiken:'] }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-html', children: '<data class="nl-number-badge" value="42">42</data>\n' }) }), '\n', (0, a.jsx)(n.h3, { id: 'number-badge-met-een-toegankelijk-label', children: 'Number badge met een toegankelijk label' }), '\n', (0, a.jsx)(n.p, { children: 'Om te zorgen dat de betekenis van een number badge dui
896delijk is wanneer de pagina wordt voorgelezeg kun je ook een onzichtbaar label toevoegen:' }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-html', children: '<data value="42" class="nl-number-badge">\n <span hidden aria-hidden="true" class="nl-number-badge__visible-label">42</span>\n <span class="nl-number-badge__hidden-label">42 ongelezen berichten</span>\n</data>\n' }) }), '\n', (0, a.jsx)(n.h2, { id: 'react', children: 'React' }), '\n', (0, a.jsx)(n.p, { children: 'De React component is gepubliceerd in een npm package:' }), '\n', (0, a.jsx)(n.p, { children: (0, a.jsx)(n.a, { href: 'https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-react', children: '@nl-design-system-candidate/number-badge-react' }) }), '\n', (0, a.jsx)(n.p, { children: 'Je kunt de npm package zo installeren:' }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-sh', children: 'npm install --save-dev @nl-design-system-candidate/number-badge-react\n' }) }), '\n', (0, a.jsx)(n.p, { children: 'Je kunt de React component zo gebruiken:' }), '\n', (0, a.jsx)(n.pre, { children: (0, a.jsx)(n.code, { className: 'language-jsx', children: 'import { NumberBadge } from "@nl-design-system-candidate/number-badge-react";\n\nexport const MyComponent = () => <NumberBadge value="42" />;\n' }) })] }); 897 } 898 function F(e = {}) { 899 const { wrapper: n } = { ...(0, i.R)(), ...e.components }; 900 return n ? (0, a.jsx)(n, { ...e, children: (0, a.jsx)(D, { ...e }) }) : D(e); 901 } 902 const L = JSON.parse('{"nl":{"number-badge":{"background-color":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<color>","nl.nldesignsystem.figma-implementation":true},"$type":"color"},"border-color":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<color>","nl.nldesignsystem.figma-implementation":true},"$type":"color"},"border-radius":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<length-percentage>","nl.nldesignsystem.figma-implementation":true},"$type":"dimension"},"border-width":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<length>","nl.nldesignsystem.figma-implementation":true},"$type":"dimension"},"color":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<color>","nl.nldesignsystem.figma-implementation":true},"$type":"color"},"font-family":{"$extensions":{"nl.nldesignsystem.css-property-syntax":["<family-name>","<generic-name>"],"nl.nldesignsystem.figma-implementation":true},"$type":"fontFamilies"},"font-size":{"$extensions":{"nl.nldesignsystem.css-property-syntax":["<length>","<percentage>"],"nl.nldesignsystem.figma-implementation":true},"$type":"fontSizes"},"font-weight":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<number>","nl.nldesignsystem.figma-implementation":true},"$type":"fontWeights"},"min-block-size":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<length>","nl.nldesignsystem.figma-implementation":true},"$type":"dimension"},"min-inline-size":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<length>","nl.nldesignsystem.figma-implementation":true},"$type":"dimension"},"padding-block":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<length>","nl.nldesignsystem.figma-implementation":true},"$type":"dimension"},"padding-inline":{"$extensions":{"nl.nldesignsystem.css-property-syntax":"<length>","nl.nldesignsystem.figma-implementation":true},"$type":"dimension"}}}}'), 903 W = { title: 'Number Badge', hide_title: !0, hide_table_of_contents: !1, sidebar_label: 'Number Badge', pagination_label: 'Number Badge', description: 'Toont een klein label dat de aandacht trekt en informeert over een aantal.', issue_number: 7, slug: '/number-badge', keywords: ['aantal', 'badge', 'count badge', 'counter badge', 'cijfer', 'chip', 'counter', 'label', 'number', 'number badge', 'number label', 'number marker', 'notification badge', 'notification label', 'pill', 'stamp', 'tag'] }, 904 _ = void 0, 905 H = {}, 906 B = 'Number Badge', 907 z = 'Toont een klein label dat de aandacht trekt en informeert over een aantal.', 908 P = 7, 909 I = r.find((e) => e.number === P), 910 M = [{ value: 'Checklist voor toegankelijkheid', id: 'checklist-voor-toegankelijkheid', level: 2 }, ...d.RM, { value: 'Acceptatiecriteria bij gebruik', id: 'acceptatiecriteria-bij-gebruik', level: 3 }, ...l.RM, { value: 'Acceptatiecriteria van de component', id: 'acceptatiecriteria-van-de-component', level: 3 }, ...o.RM, { value: 'CSS', id: 'css', level: 2 }, { value: 'Number badge als data component', id: 'number-badge-als-data-component', level: 3 }, { value: 'Number badge met een toegankelijk label', id: 'number-badge-met-een-toegankelijk-label', level: 3 }, { value: 'React', id: 'react', level: 2 }, { value: 'Design tokens', id: 'design-tokens', level: 2 }, { value: 'Definition of Done', id: 'definition-of-done', level: 2 }, { value: 'Community implementaties', id: 'community-implementaties', level: 2 }]; 911 function $(e) { 912 const n = { h2: 'h2', h3: 'h3', ...(0, i.R)(), ...e.components }; 913 return (0, a.jsxs)(a.Fragment, { children: ['\n', '\n', '\n', '\n', '\n', '\n', (0, a.jsx)(N.Fc, { component: I, headingLevel: 1, description: z }), '\n', (0, a.jsx)(C.e, { component: I }), '\n', (0, a.jsx)(k.Zp, { className: 'ma-implementation-card', children: (0, a.jsxs)(k.Wu, { children: [(0, a.jsx)(y.DZ, { level: 2, appearance: 'level-4', children: 'Figma' }), (0, a.jsxs)(v.d, { children: [(0, a.jsxs)(v.P, { href: 'https://www.figma.com/design/FqAr99wvrlHxTJYAHkFRQN/NL-Design-System---Bibliotheek?node-id=2-4', children: [(0, a.jsx)(T.r, { brand: 'figma' }), 'Figma - Start bibliotheek'] }), (0, a.jsxs)(v.P, { href: 'https://www.figma.com/design/0J3EiRpZH3LJ0cx396XLNC/NL-Design-System---Bibliotheek---Voorbeeld?node-id=2-4', children: [(0, a.jsx)(T.r, { brand: 'figma' }), 'Figma - Voorbeeld bibliotheek'] })] }), (0, a.jsx)(y.DZ, { level: 2, appearance: 'level-4', children: 'Storybook' }), (0, a.jsxs)(v.d, { children: [(0, a.jsxs)(v.P, { href: 'https://nl-design-system.github.io/candidate/?path=/docs/css-number-badge--documentatie', children: [(0, a.jsx)(T.r, { brand: 'storybook' }), 'Storybook - CSS'] }), (0, a.jsxs)(v.P, { href: 'https://nl-design-system.github.io/candidate/?path=/docs/number-badge--documentatie', children: [(0, a.jsx)(T.r, { brand: 'storybook' }), 'Storybook - React'] })] }), (0, a.jsx)(y.DZ, { level: 2, appearance: 'level-4', children: 'npm' }), (0, a.jsxs)(v.d, { children: [(0, a.jsxs)(v.P, { href: 'https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-css', children: [(0, a.jsx)(T.r, { brand: 'npm' }), ' @nl-design-system-candidate/number-badge-css'] }), (0, a.jsxs)(v.P, { href: 'https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-react', children: [(0, a.jsx)(T.r, { brand: 'npm' }), ' @nl-design-system-candidate/number-badge-react'] }), (0, a.jsxs)(v.P, { href: 'https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-tokens', children: [(0, a.jsx)(T.r, { brand: 'npm' }), ' @nl-design-system-candidate/number-badge-tokens'] })] })] }) }), '\n', (0, a.jsx)(n.h2, { id: 'checklist-voor-toegankelijkheid', children: 'Checklist voor toegankelijkheid' }), '\n', (0, a.jsx)(d.Ay, {}), '\n', (0, a.jsx)(n.h3, { id: 'acceptatiecriteria-bij-gebruik', children: 'Acceptatiecriteria bij gebruik' }), '\n', (0, a.jsx)(l.Ay, {}), '\n', (0, a.jsx)(R.b, { headingLevel: '4', children: w.map(({ component: e, ...n }) => (0, a.jsx)(R.e, { ...n, children: (0, a.jsx)(e, {}) })) }), '\n', (0, a.jsx)(n.h3, { id: 'acceptatiecriteria-van-de-component', children: 'Acceptatiecriteria van de component' }), '\n', (0, a.jsx)(o.Ay, {}), '\n', (0, a.jsx)(R.b, { headingLevel: '4', children: A.map(({ component: e, ...n }) => (0, a.jsx)(R.e, { ...n, children: (0, a.jsx)(e, {}) })) }), '\n', (0, a.jsx)(S.o, { omitH1: !0, headingLevel: 3, children: (0, a.jsx)(F, {}) }), '\n', (0, a.jsx)(n.h2, { id: 'design-tokens', children: 'Design tokens' }), '\n', (0, a.jsx)(G.B, { tokens: L }), '\n', (0, a.jsx)(n.h2, { id: 'definition-of-done', children: 'Definition of Done' }), '\n', (0, a.jsx)(N.VK, { component: I, headingLevel: 3 }), '\n', (0, a.jsx)(N.$9, { component: I, headingLevel: 2 }), '\n', (0, a.jsx)(n.h2, { id: 'community-implementaties', children: 'Community implementaties' }), '\n', (0, a.jsx)(N.mu, { component: I, headingLevel: 3 }
913), '\n', (0, a.jsx)(N.K_, { component: I })] }); 914 } 915 function O(e = {}) { 916 const { wrapper: n } = { ...(0, i.R)(), ...e.components }; 917 return n ? (0, a.jsx)(n, { ...e, children: (0, a.jsx)($, { ...e }) }) : $(e); 918 } 919 }, 920 91708(e, n, t) { 921 'use strict'; 922 t.d(n, { Ay: () => r }); 923 var s = t(86070), 924 a = t(18439); 925 function i(e) { 926 const n = { a: 'a', li: 'li', p: 'p', ul: 'ul', ...(0, a.R)(), ...e.components }; 927 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'Het label bestaat uit gewone tekst, niet uit een afbeelding van tekst. Tenzij het om een logo gaat, zoals een DigiD-logo.' }), '\n', (0, s.jsx)(n.p, { children: 'NL Design System richtlijnen:' }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/formulieren/buttons/afbeelding-als-button/', children: 'Afbeeldingen als buttons' }) }), '\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/richtlijnen/content/afbeeldingen/tekst-in-afbeelding/', children: 'Tekst in een afbeelding' }) }), '\n'] })] }); 928 } 929 function r(e = {}) { 930 const { wrapper: n } = { ...(0, a.R)(), ...e.components }; 931 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(i, { ...e }) }) : i(e); 932 } 933 }, 934 }, 935]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.