Merge pull request #106 from markteekman/next

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -2,12 +2,28 @@ import { defineConfig } from 'astro/config'
 import mdx from '@astrojs/mdx'
 import tailwind from '@astrojs/tailwind'
 import compress from 'astro-compress'
-import icon from "astro-icon"
+import icon from 'astro-icon'
 
 // https://astro.build/config
 export default defineConfig({
   compressHTML: true,
-  integrations: [mdx(), icon(), tailwind({
-    applyBaseStyles: false,
-  }), compress()],
+  integrations: [
+    mdx(),
+    icon(),
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    compress(),
+  ],
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          logger: {
+            warn: () => {},
+          },
+        },
+      },
+    },
+  },
 })
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.netlify.app/",
   "scripts": {
@@ -18,7 +18,6 @@
     "@iconify-json/mdi": "^1.2.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "accessible-astro-components": "^2.4.0",
     "astro": "^4.16.16",
     "astro-compress": "^2.3.5",
     "astro-icon": "^1.1.4",
@@ -31,5 +30,8 @@
     "sass": "^1.81.0",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.15"
+  },
+  "dependencies": {
+    "accessible-astro-components": "^3.0.0"
   }
 }
diff --git a/src/assets/scss/base/_breakpoint.scss b/src/assets/scss/base/_breakpoint.scss
@@ -1,25 +1,26 @@
+@use 'sass:map';
+
 // | -------------------------------------------------------------
 // | Breakpoint
 // | -------------------------------------------------------------
 
 $breakpoints: (
-  "default": 0,
-  "small": 24em,
-  "medium": 48em,
-  "large": 75em
+  'default': 0,
+  'small': 24em,
+  'medium': 48em,
+  'large': 75em,
 ) !default;
 
 @mixin breakpoint($breakpoint) {
-  @if map-has-key($breakpoints, $breakpoint) {
-    @media (min-width: map-get($breakpoints, $breakpoint)) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media (min-width: map.get($breakpoints, $breakpoint)) {
       @content;
     }
   } @else if (type_of($breakpoint) == number) {
-    @media (min-width: $breakpoint+"px") {
+    @media (min-width: $breakpoint+'px') {
       @content;
     }
-  }
-  @else {
+  } @else {
     @error "Not a correct value, check _base-breakpoints for available values.";
   }
 }
diff --git a/src/assets/scss/base/_font.scss b/src/assets/scss/base/_font.scss
@@ -6,7 +6,10 @@
 
 @font-face {
   font-family: 'Open Sans';
-  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('/fonts/OpenSans-ExtraBold.woff2') format('woff2'),
+  src:
+    local('Open Sans ExtraBold'),
+    local('OpenSans-ExtraBold'),
+    url('/fonts/OpenSans-ExtraBold.woff2') format('woff2'),
     url('/fonts/OpenSans-ExtraBold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
@@ -15,7 +18,10 @@
 
 @font-face {
   font-family: 'Open Sans';
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/OpenSans-Bold.woff2') format('woff2'),
+  src:
+    local('Open Sans Bold'),
+    local('OpenSans-Bold'),
+    url('/fonts/OpenSans-Bold.woff2') format('woff2'),
     url('/fonts/OpenSans-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
@@ -24,7 +30,10 @@
 
 @font-face {
   font-family: 'Open Sans';
-  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/fonts/OpenSans-Italic.woff2') format('woff2'),
+  src:
+    local('Open Sans Italic'),
+    local('OpenSans-Italic'),
+    url('/fonts/OpenSans-Italic.woff2') format('woff2'),
     url('/fonts/OpenSans-Italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
@@ -33,7 +42,10 @@
 
 @font-face {
   font-family: 'Open Sans';
-  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.woff2') format('woff2'),
+  src:
+    local('Open Sans Regular'),
+    local('OpenSans-Regular'),
+    url('/fonts/OpenSans-Regular.woff2') format('woff2'),
     url('/fonts/OpenSans-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
@@ -134,11 +146,11 @@ body {
     @include breakpoint(medium) {
       font-size: 1.25rem;
       line-height: 1.875rem;
-      h6 {
-        font-size: 1rem;
-      }
     }
+  }
 
+  h6 {
+    font-size: 1rem;
     line-height: 1.5rem;
 
     @include breakpoint(medium) {

diff --git a/src/assets/scss/base/_root.scss b/src/assets/scss/base/_root.scss
@@ -2,9 +2,12 @@
 // | Root
 // | -------------------------------------------------------------
 
-@use "color" as *;
+@use 'color' as *;
 
 :root {
+  color-scheme: light dark;
+  interpolate-size: allow-keywords;
+
   @each $color, $shades in $colors {
     @each $shade, $value in $shades {
       --#{$color}-#{$shade}: #{$value};

diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
@@ -105,6 +105,18 @@ const {
           }
         }
       }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
     </style>
   </body>
 </html>
diff --git a/src/pages/accessible-components.astro b/src/pages/accessible-components.astro
@@ -11,6 +11,10 @@ import {
   Modal,
   Notification,
   Pagination,
+  Tabs,
+  TabsList,
+  TabsTab,
+  TabsPanel,
 } from 'accessible-astro-components'
 ---
 
@@ -20,7 +24,7 @@ import {
       <h1>Accessible Components</h1>
       <p class="text-2xl">
         This theme has a lot of extra a11y components provided by the <a
-          href="https://github.com/markteekman/accessible-astro-components#Pagination">Accessible Astro Component</a
+          href="https://github.com/markteekman/accessible-astro-components">Accessible Astro Component</a
         > NPM package to help you build accessible pages faster:
       </p>
     </div>
@@ -29,38 +33,79 @@ import {
     <div class="container">
       <div class="grid grid-cols-1 gap-32 md:grid-cols-2">
         <div class="space-content">
-          <h2>Accordion</h2>
+          <h2>Accordion (normal)</h2>
           <Accordion>
-            <AccordionItem header="First Item">
+            <AccordionItem title="First Item">
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
+                accusantium debitis <a href="#">sapiente obcaecati</a> magnam incidunt sit. Molestiae exercitationem quibusdam
+                quod veritatis laboriosam est tenetur.
+              </p>
+              <a href="#">Tab to me!</a>
+            </AccordionItem>
+            <AccordionItem title="Second Item">
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
+                accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
+                veritatis laboriosam est tenetur.
+              </p>
+            </AccordionItem>
+            <AccordionItem title="Third Item">
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
+                accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
+                veritatis laboriosam est tenetur.
+              </p>
+            </AccordionItem>
+            <AccordionItem title="Fourth Item">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
                 veritatis laboriosam est tenetur.
               </p>
+            </AccordionItem>
+            <AccordionItem title="Fifth Item">
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
+                accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
+                veritatis laboriosam est tenetur.
+              </p>
+            </AccordionItem>
+          </Accordion>
+        </div>
+        <div class="space-content">
+          <h2>Accordion (exclusive)</h2>
+          <Accordion>
+            <AccordionItem name="exclusive" title="First Item">
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
+                accusantium debitis <a href="#">sapiente obcaecati</a> magnam incidunt sit. Molestiae exercitationem quibusdam
+                quod veritatis laboriosam est tenetur.
+              </p>
               <a href="#">Tab to me!</a>
             </AccordionItem>
-            <AccordionItem header="Second Item">
+            <AccordionItem name="exclusive" title="Second Item">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
                 veritatis laboriosam est tenetur.
               </p>
             </AccordionItem>
-            <AccordionItem header="Third Item">
+            <AccordionItem name="exclusive" title="Third Item">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
                 veritatis laboriosam est tenetur.
               </p>
             </AccordionItem>
-            <AccordionItem header="Fourth Item">
+            <AccordionItem name="exclusive" title="Fourth Item">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
                 veritatis laboriosam est tenetur.
               </p>
             </AccordionItem>
-            <AccordionItem header="Fifth Item">
+            <AccordionItem name="exclusive" title="Fifth Item">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
@@ -101,7 +146,7 @@ import {
           <Modal triggerId="modal1-trigger" title="Modal 1">
             <p>Why hello, I be the <strong>first</strong> Modal.</p>
           </Modal>
-          <Modal triggerId="modal2-trigger" title="Modal 2" closeText="Cancel">
+          <Modal triggerId="modal2-trigger" title="Modal 2" closeText="Close Modal">
             <p>
               Ah yes, and I be the <strong>second</strong> Modal. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Sed, a! Ratione eaque temporibus alias tempora pariatur dolorem.
@@ -145,6 +190,62 @@ import {
           <p>This component can be viewed by shift+tabbing until they show up.</p>
         </div>
       </div>
+      <div class="my-32"></div>
+      <div class="space-content">
+        <h2>Tabs</h2>
+        <Tabs>
+          <TabsList>
+            <TabsTab id="tab-1" controls="panel-1" selected>First Panel</TabsTab>
+            <TabsTab id="tab-2" controls="panel-2">Second Panel</TabsTab>
+            <TabsTab id="tab-3" controls="panel-3">Third Panel</TabsTab>
+          </TabsList>
+
+          <TabsPanel id="panel-1" labelledby="tab-1" selected>
+            <h3>First Panel</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
+              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
+              veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet
+              quidem earum at nobis enim.
+            </p>
+            <a href="#">Tab to me!</a>
+          </TabsPanel>
+          <TabsPanel id="panel-2" labelledby="tab-2">
+            <h3>Second Panel</h3>
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <Media
+                class="rounded-lg"
+                src="https://images.unsplash.com/photo-1636819488537-a9b1ffb315ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
+              />
+              <Media
+                class="rounded-lg"
+                src="https://images.unsplash.com/photo-1636819488537-a9b1ffb315ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
+              />
+            </div>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
+              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
+              veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet
+              quidem earum at nobis enim.
+            </p>
+            <a href="#">Tab to me!</a>
+          </TabsPanel>
+          <TabsPanel id="panel-3" labelledby="tab-3">
+            <h3>Third Panel</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, nulla! Sapiente saepe voluptate nemo in
+              id aperiam tempore quo unde, ipsum similique explicabo non maiores qui voluptates dolore obcaecati. Atque
+              voluptates similique ad ipsam nostrum quibusdam doloremque cum porro, aperiam beatae voluptas dolore et
+              neque voluptate alias nesciunt blanditiis totam voluptatem necessitatibus. Similique aliquid molestiae
+              iusto nam nobis ut aspernatur blanditiis provident iste corporis minima, quidem autem nulla doloremque
+              eaque a obcaecati! Nisi quod quam repellendus facilis? Libero voluptas doloribus maxime, suscipit odio
+              veritatis optio nulla officia quos cum at ea hic numquam perferendis molestiae! Aperiam quia veritatis
+              earum tempora.
+            </p>
+            <a href="#">Tab to me!</a>
+          </TabsPanel>
+        </Tabs>
+      </div>
     </div>
   </section>
 </DefaultLayout>