[{"data":1,"prerenderedAt":279},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-accessibility-in-design-systems-i18n-slugs":134,"language-blog-slug-en-accessibility-in-design-systems":141},{"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},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__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},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"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","B Corp logo",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":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","accessibility-in-design-systems",{"locale":139,"value":140},"nl","toegankelijkheid-in-design-systems",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":147,"subtitle":79,"isArchived":151,"headerIllustration":152,"date":157,"authors":158,"introTitle":148,"items":167,"pivots":207,"relatedBlogPosts":208,"tags":209,"onMountedScript":278,"onUnmountedScript":171},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"Accessibility in Design Systems","Design systems help with accessibility, but they’re not the full solution.",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1749642128-accessibility_blog_with_graphic.jpg",false,{"url":153,"alt":154,"width":155,"height":156},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1673856882-a11y-tools.svg",null,261,185,"2025-06-17T14:15:56.000+02:00",[159],{"name":160,"lastName":161,"slug":162,"image":163},"Sjoerd","Beentjes","sjoerd",{"url":164,"alt":154,"width":165,"height":166},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,[168,173,177,182,185,188,191,195,199,203],{"__typename":169,"id":170,"title":171,"body":172},"TextSectionRecord","R-hC_Q8FRqGeV-7bAFPZtQ","","\u003Cp>\u003Cspan style=\"font-weight: 400;\">On June 28, 2025, the \u003Cstrong>European Accessibility Act (EAA)\u003C\u002Fstrong> makes digital accessibility a legal requirement for any product or service used within the EU. The \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cstrong>WCAG 2.2\u003C\u002Fstrong> regulation \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">also affects companies outside Europe serving EU users.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">The upcoming regulations introduce new success criteria, increased focus on cognitive accessibility, and stricter Level AA standards. With the deadline of WCAG 2.2 approaching, companies have limited time to align with these updated requirements. Falling short of compliance after June 28, 2025, may lead to legal risks and affect your brand’s reputation. Starting now helps to plan effectively and prioritize key accessibility improvements.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":169,"id":174,"title":175,"body":176},"QZjpTdyHR5KFw-jv9c4u9g","Architecture-First Accessibility: Building Compliance into Your Design System","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Design systems offer a powerful approach to accessibility compliance by embedding accessible patterns directly into reusable components. When accessibility is built into components at the system level, it provides a strong foundation for products to meet WCAG compliance more efficiently. However, this alone isn’t enough to fully achieve accessibility  and it's important to understand both the capabilities and limitations of this approach.\u003Cbr \u002F>\u003Cbr \u002F>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cb>Component-Level Enforcement\u003C\u002Fb>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Component-Level Enforcement Each UI element should help ensure accessibility is built in by using consistent, reusable solutions from the design system. For instance:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cb>Semantic HTML enforcement:\u003C\u002Fb> Inputs should have labels. This could be the markup for your form field component, while you link all components together in the background:\u003Cbr \u002F>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":178,"id":179,"language":180,"body":181},"CodeBlockRecord","YngAGiFhQoKAwLBg-e5ROQ","html","\u003CFormField>\n  \u003CFormFieldLabel>\n    Label\n  \u003C\u002FFormFieldLabel>\n  \u003CFormFieldHelperText>\n    Helper text\n  \u003C\u002FFormFieldHelperText>\n  \u003CTextInput \u002F>\n\u003C\u002FFormField>",{"__typename":169,"id":183,"title":171,"body":184},"BmL8vOZpQTSt0wHerODcHg","\u003Cp>\u003Cstrong>HTML output:\u003C\u002Fstrong>\u003C\u002Fp>",{"__typename":178,"id":186,"language":180,"body":187},"BLxKmNXZSxCkJqz20s2pcw","\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":169,"id":189,"title":171,"body":190},"Jn5gIjCNSXCB4qx8yHXiIg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">As you can see, all fields have been linked properly without the implementor having to worry about that. This improves DX and UX at the same time, which is nice.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb>Programmatic validation:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Some aspects of accessibility can—and should—be baked into your system and validated automatically. For example image components require alt text props with TypeScript interfaces that enforce descriptive content, or color palette tokens are validated against WCAG contrast ratios at build time.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb>Standardized interaction patterns:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Complex widgets like dropdowns, modals, and date pickers implement consistent keyboard navigation, focus management, and ARIA patterns that have been tested against assistive technologies. Using ‘headless components’, like the ones from \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fheadlessui.com\u002F\">\u003Cspan style=\"font-weight: 400;\">HeadlessUI\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> or \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;\">, could help you with setting this up correctly, as they often have accessibility baked-in (be sure to always double-check that though).\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cb>Expose Internal Accessibility Tools\u003C\u002Fb>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">When dealing with edge cases, implementors benefit from access to the same lower-level utilities that power the design system’s own components. In a \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">Button\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> component, a live region could be used for announcing loading states. What if we expose the utilities used for this, so higher level components (like dynamic lists) can benefit from this too?\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":178,"id":192,"language":193,"body":194},"XBDebS6YSOqk_RPmZryV9g","TypeScript","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\n            addMessage(containerEl, message, assertiveness);\n        },\n    };\n};\n",{"__typename":169,"id":196,"title":197,"body":198},"O4oOt946Qi-zhHIUaoa-Fg","Limits and Realistic Expectations","\u003Cp>\u003Cspan style=\"font-weight: 400;\">A well-designed system can lay a strong foundation for accessibility, but on its own, it’s not enough. True accessibility requires human judgment and a broader understanding of context. Consider these examples:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Content and labeling\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> remain critical human responsibilities; the system can enforce required alt text props, but ensuring clarity, specificity, and meaningfulness can only be achieved by content creators and developers.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Dynamic interactions and state management\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> often require custom solutions informed by specific application logic and user flows, such as dynamic lists or tables that change content based on filters.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Component composition\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> matters; even if individual components are accessible, their combination can create confusing or exclusionary patterns for users.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This is why we say that our design systems enable accessibility - they don't guarantee it. Achieving accessible outcomes depends on collaboration across design, development, content, and QA teams.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":169,"id":200,"title":201,"body":202},"etphT8gwSL2_EDI90WUFMQ","Practical Steps to Get Ready","\u003Cp>\u003Cspan style=\"font-weight: 400;\">With the EAA deadline approaching, here's what we recommend for businesses:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Audit your current design system\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> against WCAG 2.2 AA criteria. Check color contrast ratios, form element associations, focus states, and keyboard navigation patterns. But don't stop there—test with actual users of assistive technologies to understand real-world usage patterns.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Create standardized patterns\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> for common accessibility needs like focus management, live regions for dynamic content, and error message associations. Document not just how to use these patterns, but when and why to use them.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Invest in comprehensive documentation\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> that includes accessibility guidance for each component, showing developers exactly how to implement accessible patterns. Include anti-patterns and common mistakes to avoid.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Build accessibility expertise\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> across your organization through training, regular reviews, and open communication channels for accessibility questions and feedback. Consider having advocates available to teams who can bridge the gap between design system capabilities and specific use cases.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cb>Integrate automated accessibility checks\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> into your development workflow. Use tools like \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;\"> or \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fpa11y.org\u002F\">\u003Cspan style=\"font-weight: 400;\">pa11y\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">  in your continuous integration (CI) pipeline to catch issues early and consistently. These checks help maintain a baseline of accessibility.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":169,"id":204,"title":205,"body":206},"JJZzzLa_Qv2TgPW3b774Iw","Ready for a second opinion on your website's accessibility?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Our \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Faccessibility-review\u002F\">Accessibility Review\u003C\u002Fa> helps you make your website usable for everyone, regardless of ability, device or situation. With expert analysis, hands-on improvements and clear guidance, we ensure your site meets legal standards and delivers a better experience for all users.\u003C\u002Fspan>\u003C\u002Fp>",[],[],[210,244],{"id":211,"title":212,"slug":213,"blogPosts":214},"HgWm8aCCRMWWS0eqggo5xg","Accessibility ","accessibility",[215,226,237],{"slug":216,"title":217,"date":218,"authors":219},"designing-css-for-non-latin-languages-on-the-web","Designing CSS\u002FHTML for Non-Latin Languages on the Web","2025-09-01T09:23:50.428+02:00",[220],{"name":221,"image":222},"Marleen",{"url":223,"alt":154,"width":224,"height":225},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339746-marleen-edit.jpeg",1431,1908,{"slug":227,"title":228,"date":229,"authors":230},"testing-accessibility-on-windows-with-virtualbox","Testing Accessibility on Windows with VirtualBox","2019-09-18T02:00:00.000+02:00",[231],{"name":232,"image":233},"Bas",{"url":234,"alt":154,"width":235,"height":236},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":238,"title":239,"date":240,"authors":241},"improving-accessibility-for-the-blind-8-guidelines","Improving accessibility for the blind: 8 guidelines","2016-12-27T01:00:00.000+01:00",[242],{"name":232,"image":243},{"url":234,"alt":154,"width":235,"height":236},{"id":245,"title":246,"slug":247,"blogPosts":248},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[249,260,271],{"slug":250,"title":251,"date":252,"authors":253},"design-system-from-scratch-from-the-shelf","Design System: from scratch or from the shelf?","2024-11-19T13:16:02.759+01:00",[254],{"name":255,"image":256},"Jasper",{"url":257,"alt":154,"width":258,"height":259},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"slug":261,"title":262,"date":263,"authors":264},"write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality","“Write components once, run everywhere” with Mitosis; a beautiful dream or reality?","2024-09-16T13:04:31.307+02:00",[265],{"name":266,"image":267},"Wessel",{"url":268,"alt":266,"width":269,"height":270},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,{"slug":272,"title":273,"date":274,"authors":275},"how-to-select-framework-design-system-components","How to select a framework for design system components","2022-12-12T01:00:00.000+01:00",[276],{"name":255,"image":277},{"url":257,"alt":154,"width":258,"height":259},"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",1776256139049]