[{"data":1,"prerenderedAt":274},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-toegankelijkheid-in-design-systems-i18n-slugs":132,"language-blog-slug-nl-toegankelijkheid-in-design-systems":139},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","accessibility-in-design-systems",{"locale":137,"value":138},"nl","toegankelijkheid-in-design-systems",{"page":140},{"slug":138,"i18nSlugs":141,"social":144,"title":145,"subtitle":79,"isArchived":149,"headerIllustration":150,"date":154,"authors":155,"introTitle":146,"items":164,"pivots":204,"relatedBlogPosts":205,"tags":206,"onMountedScript":273,"onUnmountedScript":168},[142,143],{"locale":134,"value":135},{"locale":137,"value":138},{"title":145,"description":146,"image":147},"Toegankelijkheid in Design Systems","Ontwerpsystemen helpen bij toegankelijkheid, maar zijn niet de volledige oplossing.",{"url":148},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1749642128-accessibility_blog_with_graphic.jpg",false,{"url":151,"alt":104,"width":152,"height":153},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1673856882-a11y-tools.svg",261,185,"2025-06-17T14:15:56.000+02:00",[156],{"name":157,"lastName":158,"slug":159,"image":160},"Sjoerd","Beentjes","sjoerd",{"url":161,"alt":104,"width":162,"height":163},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,[165,170,174,179,182,185,188,192,196,200],{"__typename":166,"id":167,"title":168,"body":169},"TextSectionRecord","N-4tekRWRlyMrY5JXXdnPA","","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Op 28 juni 2025 wordt digitale toegankelijkheid een wettelijke verplichting binnen de EU. Dat komt door de \u003C\u002Fspan>\u003Cstrong>European Accessibility Act (EAA)\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">. Ook als je bedrijf buiten Europa zit maar wel diensten levert aan EU-gebruikers, moet je eraan geloven: de \u003C\u002Fspan>\u003Cstrong>WCAG 2.2\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">-regels gelden dan ook voor jou.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">De nieuwe regels brengen extra succescriteria met zich mee, meer aandacht voor cognitieve toegankelijkheid en strengere eisen op WCAG AA-niveau. En de tijd tikt: als je na 28 juni 2025 niet voldoet, loop je het risico op juridische gevolgen en reputatieschade. Door nu al te starten kun je gericht plannen en gefaseerd verbeteren.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":166,"id":171,"title":172,"body":173},"SwYnqOGLTJOgImGkcTqx1A","Bouw toegankelijkheid direct in je design system","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Een goed design system helpt enorm om aan de toegankelijkheidseisen te voldoen. Door toegankelijke patronen direct in herbruikbare componenten te stoppen, leg je de basis voor een WCAG-conform product. Maar let op: dit is vaak niet genoeg. Het is belangrijk om te snappen wat je hiermee wél en niet oplost.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cb>Ingebouwd op componentniveau\u003C\u002Fb>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Elke UI-component moet bijdragen aan toegankelijkheid. Door herbruikbare oplossingen in je design system te standaardiseren, verklein je de kans op fouten. Een paar voorbeelden:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb>Semantische HTML genereren:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Formuliervelden moeten een label hebben. Je kunt dat standaard in je component opnemen, zodat het automatisch goed gaat:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":175,"id":176,"language":177,"body":178},"CodeBlockRecord","c_WhUGgzRzOfaS_d65cTbg","html","\u003CFormField>\n  \u003CFormFieldLabel>\n    Label\n  \u003C\u002FFormFieldLabel>\n  \u003CFormFieldHelperText>\n    Helper text\n  \u003C\u002FFormFieldHelperText>\n  \u003CTextInput \u002F>\n\u003C\u002FFormField>",{"__typename":166,"id":180,"title":168,"body":181},"RsKUWO00QueoPJSGy3-pXw","\u003Cp>\u003Cstrong>De HTML die dat oplevert:\u003C\u002Fstrong>\u003C\u002Fp>",{"__typename":175,"id":183,"language":177,"body":184},"G5_5HhcWTU6VUJMix4-RSA","\u003Cdiv class=\"form-field\">\n  \u003Clabel \n    class=\"form-field-label\" \n    id=\":r2r:\" \n    for=\":r2q:\"\n  >\n    Label\n  \u003C\u002Flabel>\n  \u003Cp \n    class=\"form-field-helper-text\" \n    id=\":r2s:\"\n  >\n    Helper text\n  \u003C\u002Fp>\n  \u003Cinput \n    class=\"text-inpu\" \n    id=\":r2q:\" \n    aria-describedby=\":r2s:\"\n  >\n\u003C\u002Fdiv>",{"__typename":166,"id":186,"title":168,"body":187},"SxRptJFuQ2qW7SVJ_O8JcQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Zoals je ziet: alles is netjes gekoppeld, zonder dat de ontwikkelaar daar iets voor hoeft te doen. Beter voor de gebruiker én prettiger om mee te werken.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb>Automatische validatie:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Sommige dingen kun je al in je systeem bouwen en automatisch laten checken. Bijvoorbeeld: afbeeldingscomponenten die verplicht alt-teksten nodig hebben (afgedwongen via TypeScript), of kleurtokens die tijdens de build gecheckt worden op voldoende contrast volgens WCAG.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb>Gestandaardiseerde interactiepatronen:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Complexe elementen zoals dropdowns, modals of date pickers moeten goed werken met toetsenbordbediening, focusbeheer en ARIA-attributen. Je kunt hiervoor ‘headless components’ gebruiken, zoals van \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fheadlessui.com\u002F\">\u003Cspan style=\"font-weight: 400;\">HeadlessUI\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> of \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Freact-spectrum.adobe.com\u002Freact-aria\u002Findex.html\">\u003Cspan style=\"font-weight: 400;\">React Aria\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">. Die hebben vaak al goede toegankelijkheidsfeatures ingebouwd (maar test het wel altijd even zelf na).\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cb>Interne tools delen\u003C\u002Fb>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Soms heb je als ontwikkelaar net wat meer nodig. Wat als je de tools die intern in je design system worden gebruikt, ook beschikbaar maakt voor anderen?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bijvoorbeeld: in je \u003Ccode>Button\u003C\u002Fcode> component zit een live region om loading states aan te kondigen. Waarom diezelfde utility niet aanbieden vanuit je library, zodat ook andere componenten (zoals dynamische lijsten) hier gebruik van kunnen maken?\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":175,"id":189,"language":190,"body":191},"IJlh0ZwES-uU9xBg1mekqQ","None","import { addMessage, getContainerEl } from '@design-system\u002Fshared';\n\nexport const useLiveRegion = () => {\n  return {\n    announce(message: string, assertiveness: 'assertive' | 'polite' = 'polite') {\n      const containerEl = getContainerEl();\n      addMessage(containerEl, message, assertiveness);\n    },\n  };\n};",{"__typename":166,"id":193,"title":194,"body":195},"AE2SYiZCSI--Va5uZZWqeg","Grenzen en verwachtingen","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Een goed design system legt een sterke basis, maar toegankelijkheid hangt niet alleen van techniek af. Menselijk inzicht en context zijn minstens zo belangrijk. Een paar voorbeelden:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Inhoud en labels\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> blijven mensenwerk. Je systeem kan dwingen dat er alt-tekst staat, maar of die ook duidelijk en relevant is, bepaal je zelf.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Dynamische interacties\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> zoals filters of tabellen met live-updates vragen vaak om maatwerk.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Hoe componenten samen gebruikt worden \u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">doet ertoe. Los zijn ze misschien toegankelijk, maar samen kunnen ze alsnog verwarrend zijn voor gebruikers.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Daarom zeggen we: \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">design systems maken toegankelijkheid mogelijk, maar garanderen het niet\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">. Toegankelijkheid bereik je alleen als ontwerp, development, content en QA goed samenwerken.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":166,"id":197,"title":198,"body":199},"co1bfjmvQBeIqG6uBjbRdA","Wat kun je nu al doen?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Met de EAA-deadline in zicht, hier onze aanbevelingen:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Audit je design system\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> op WCAG 2.2 AA-niveau: check kleurcontrasten, koppelingen tussen formuliervelden en labels, focus-states, toetsenbordbediening. Maar test ook met echte gebruikers die hulpmiddelen zoals screenreaders gebruiken.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Standaardiseer patronen\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> voor veelvoorkomende dingen: focusbeheer, live regions, foutmeldingen. Leg niet alleen uit \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">hoe\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> je ze gebruikt, maar ook \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">wanneer\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> en \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">waarom\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Documenteer je componenten goed\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">, inclusief toegankelijkheidsrichtlijnen. Laat ook zien wat je níet moet doen (anti-patterns).\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Verzamel kennis in je organisatie\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: organiseer trainingen, doe regelmatige reviews en zorg dat teams makkelijk vragen kunnen stellen over toegankelijkheid. Het helpt als er experts of accessibility experts zijn binnen je team.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cb>Integreer automatische toegankelijkheidschecks\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> in je CI-pipeline. Tools zoals \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdequelabs\u002Faxe-core\">\u003Cspan style=\"font-weight: 400;\">axe-core\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGoogleChrome\u002Flighthouse-ci\">\u003Cspan style=\"font-weight: 400;\">Lighthouse CI\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> of \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fpa11y.org\u002F\">\u003Cspan style=\"font-weight: 400;\">pa11y\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> helpen je om problemen vroegtijdig te detecteren en consistent te blijven. Deze checks zorgen ervoor dat je product een basisniveau van toegankelijkheid behoudt terwijl het groeit. Maar zie ze vooral als het startpunt – niet als het einddoel.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":166,"id":201,"title":202,"body":203},"JUVjmR0YT7eNN9x2T2oL2A","Benieuwd hoe jouw site ervoor staat?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Onze \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Faccessibility-review\u002F\">Accessibility Review\u003C\u002Fa> helpt je site bruikbaar te maken voor iedereen—ongeacht beperking, apparaat of situatie. Met een grondige analyse, praktische aanpassingen en duidelijke uitleg zorgen we ervoor dat je voldoet aan de regels én een betere ervaring biedt aan je gebruikers.\u003C\u002Fspan>\u003C\u002Fp>",[],[],[207,239],{"id":208,"title":209,"slug":210,"blogPosts":211},"HgWm8aCCRMWWS0eqggo5xg","Accessibility","accessibility",[212,223,234],{"slug":213,"title":214,"date":215,"authors":216},"designing-css-for-non-latin-languages-on-the-web","CSS\u002FHTML voor niet-Latijnse talen op het web","2025-09-01T09:23:50.428+02:00",[217],{"name":218,"image":219},"Marleen",{"url":220,"alt":104,"width":221,"height":222},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339746-marleen-edit.jpeg",1431,1908,{"slug":224,"title":225,"date":226,"authors":227},"toegankelijkheid-testen-windows-virtualbox","Toegankelijkheid testen op Windows met VirtualBox","2019-09-18T02:00:00.000+02:00",[228],{"name":229,"image":230},"Bas",{"url":231,"alt":104,"width":232,"height":233},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":104,"title":168,"date":235,"authors":236},"2016-12-27T01:00:00.000+01:00",[237],{"name":229,"image":238},{"url":231,"alt":104,"width":232,"height":233},{"id":240,"title":241,"slug":242,"blogPosts":243},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[244,255,266],{"slug":245,"title":246,"date":247,"authors":248},"design-system-op-maat-of-kant-en-klaar","Design System: op maat of kant-en-klaar?","2024-11-19T13:16:02.759+01:00",[249],{"name":250,"image":251},"Jasper",{"url":252,"alt":104,"width":253,"height":254},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"slug":256,"title":257,"date":258,"authors":259},"schrijf-code-eenmalig-en-gebruik-het-overal-met-mitosis-een-mooie-droom-of-werkelijkheid","“Schrijf code eenmalig en gebruik het overal” met Mitosis; een mooie droom of werkelijkheid?","2024-09-16T13:04:31.307+02:00",[260],{"name":261,"image":262},"Wessel",{"url":263,"alt":261,"width":264,"height":265},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,{"slug":267,"title":268,"date":269,"authors":270},"kiezen-framework-design-system-componenten","Hoe kies je een framework voor design system componenten","2022-12-12T01:00:00.000+01:00",[271],{"name":250,"image":272},{"url":252,"alt":104,"width":253,"height":254},"const css = `\n        :host {\n          --slide-width: 80%;\n          --background-inset: 1%;\n          padding-top: 15%;\n          z-index: 10;\n        }\n        .example__frame {\n          display: flex;\n          overflow-x: scroll;\n          scroll-snap-type: x mandatory;\n          scroll-behavior: smooth;\n          box-sizing: border-box;\n          margin-bottom: 1rem;\n          padding: 0 5%;\n        }\n        .example__slide {\n          display: block;\n          scroll-snap-align: center;\n          flex-shrink: 0;\n          width: var(--slide-width);\n          margin-bottom: calc((100% - var(--slide-width))\u002F2);\n          transition: background-color .25s;\n          background-clip: content-box;\n          line-height: 0;\n          padding: var(--background-inset);\n          z-index: 0;\n          background-color: transparent;\n          border-radius: 4px;\n          overflow: hidden;\n        }\n        .example__slide img {\n          margin: calc(var(--background-inset) * -1);\n          margin-bottom: calc(var(--background-inset-bottom) * -1);\n          width: calc(100% + var(--background-inset) * 2);\n          height: auto;\n        }\n        .example__slide.active {\n          background-color: blue;\n        }\n      `;\n\nconst moveKeyframes = `\n        @keyframes move {\n          0% {\n            transform: translateX(130%);\n          }\n          100% {\n            transform: translateX(-110%);\n          }\n        }\n      `;\n\nconst highlightKeyframes = `\n        @keyframes highlight {\n          0% {\n            background-color: transparent;\n          }\n          50% {\n\n          background-color: blue;\n          }\n          100% {\n            background-color: transparent;\n          }\n        }\n      `;\n\nclass ExampleKvppleqg extends HTMLElement {\n  constructor(styles = \"\") {\n    super();\n\n    const shadowRoot = this.attachShadow({\n      mode: \"open\",\n    });\n\n    shadowRoot.innerHTML = `\n            \u003Cstyle>${css}${styles}\u003C\u002Fstyle>\n            \u003Cslot name=\"unsupported\">\u003C\u002Fslot>\n            \u003Cslot hidden>\u003C\u002Fslot>\n            \u003Cdiv class=\"example__frame\">\n              \u003C!-- will copy slot content here -->\n            \u003C\u002Fdiv>\n          `;\n  }\n\n  connectedCallback() {\n    this.unsupported = this.shadowRoot.querySelector(\"slot[name=unsupported]\");\n    this.enhance();\n  }\n\n  enhance() {\n    const slotContent = this.shadowRoot\n      .querySelector(\"slot:not([name])\")\n      .assignedNodes();\n    const frame = this.shadowRoot.querySelector(\".example__frame\");\n\n    slotContent.forEach((content) => {\n      content.removeAttribute?.(\"hidden\", \"\");\n      frame.append(content);\n    });\n    this.hideUnsupported();\n    console.log(`${this.localName} enhanced`);\n  }\n\n  hideUnsupported() {\n    this.unsupported.setAttribute(\"hidden\", \"\");\n  }\n\n  showUnsupported() {\n    this.unsupported.removeAttribute(\"hidden\");\n  }\n\n  disconnectedCallback() {}\n}\n\nclass ExampleIntersectionObserverKvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super();\n    this.observer = ('IntersectionObserver' in window)\n      ? new IntersectionObserver(this.handleIntersect, {\n        root: this.shadowRoot.querySelector(\".example__frame\"),\n        threshold: 1,\n      })\n      : undefined;\n  }\n  connectedCallback() {\n    if (this.observer) {\n      super.connectedCallback();\n      for (const slide of this.shadowRoot.querySelectorAll(\".example__slide\")) {\n        this.observer.observe(slide);\n      }\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.observer?.disconnect();\n  }\n  handleIntersect(entries) {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add(\"active\");\n      } else {\n        entry.target.classList.remove(\"active\");\n      }\n    });\n  }\n}\n\nif (!customElements.get(\"example-intersection-observer-kvppleqg\")) {\n  customElements.define(\n    \"example-intersection-observer-kvppleqg\",\n    ExampleIntersectionObserverKvppleqg,\n  );\n}\n\nclass ExampleHighlightAnimationKvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super(`\n            .example__frame {\n              overflow-x: hidden;\n              scroll-snap-type: none;\n            }\n            .example__slide {\n              scroll-snap-align: none;\n              animation-name: move, highlight;\n              animation-duration: 5s;\n              animation-iteration-count: infinite;\n              animation-timing-function: ease-in-out;\n              animation-direction: alternate;\n            }\n            ${moveKeyframes}\n            ${highlightKeyframes}\n          `);\n  }\n}\n\nif (!customElements.get(\"example-highlight-animation-kvppleqg\")) {\n  customElements.define(\n    \"example-highlight-animation-kvppleqg\",\n    ExampleHighlightAnimationKvppleqg,\n  );\n}\n\nclass ExampleScrollAnimationKvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super(`\n            .example__slide {\n              animation-name: highlight;\n              animation-timeline: view(x);\n            }\n            ${highlightKeyframes}\n          `);\n  }\n  connectedCallback() {\n    if (window.CSS.supports('animation-timeline', 'view(x)')) {\n      super.connectedCallback();\n    }\n  }\n}\n\nif (!customElements.get(\"example-scroll-animation-kvppleqg\")) {\n  customElements.define(\n    \"example-scroll-animation-kvppleqg\",\n    ExampleScrollAnimationKvppleqg,\n  );\n}\n\nclass ExampleScrollAnimation2Kvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super(`\n            .example__slide {\n              --slide-width: 80%;\n              --animation-margin: calc(100% - var(--slide-width));\n              animation-name: highlight;\n              \u002F* animation starts ands ends 20% from left and right edge *\u002F\n              animation-timeline: view(x var(--animation-margin));\n            }\n\n            .example__slide:first-child:not(:last-child) {\n              \u002F* animation starts and ends at the left edge *\u002F\n              animation-timeline: view(x 0 var(--animation-margin));\n            }\n\n            ${highlightKeyframes}\n          `);\n  }\n  \n  connectedCallback() {\n    if (window.CSS.supports('animation-timeline', 'view(x)')) {\n      super.connectedCallback();\n    }\n  }\n}\n\nif (!customElements.get(\"example-scroll-animation-2-kvppleqg\")) {\n  customElements.define(\n    \"example-scroll-animation-2-kvppleqg\",\n    ExampleScrollAnimation2Kvppleqg,\n  );\n}\n",1776256147574]