Merge pull request #111 from incluud/next

Next

Author: markteekman

README.md

@@ -81,6 +81,7 @@ import { Accordion, AccordionItem } from 'accessible-astro-components'
 - [Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): Library of reusable, accessible components build for Astro.
 - [Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): User-friendly dashboard interface with a login screen and widgets.
 - [Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects.
+- [Color Contrast Checker](https://github.com/incluud/color-contrast-checker): WCAG-compliant color contrast checker with design system token generation.
 
 Check out our [roadmap](https://github.com/orgs/incluud/projects/4) to see what's coming next!
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-components",
   "description": "A set of Accessible, easy to use, Front-end UI Components for Astro.",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "author": "Incluud",
   "license": "MIT",
   "homepage": "https://accessible-astro.incluud.dev/components/overview/",

src/components/accordion/AccordionItem.astro

@@ -212,6 +212,10 @@ const Tag = tagName
     }
   }
 
+  :where(.icon-chevron) {
+    flex-shrink: 0;
+  }
+
   :where(.icon-chevron svg) {
     @media (prefers-reduced-motion: no-preference) {
       transition: transform var(--transition-duration) var(--transition-easing);

src/components/avatar/Avatar.astro

@@ -166,13 +166,13 @@ const sizeValue = getSizeValue(size)
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
+  }
 
-    &:has(.initials-container):not(:has(.content)),
-    &:has(.icon-container):not(:has(.content)) {
-      aspect-ratio: 1;
-      inline-size: var(--size);
-      block-size: var(--size);
-    }
+  :where(.avatar:has(.initials-container):not(:has(.content))),
+  :where(.avatar:has(.icon-container):not(:has(.content))) {
+    aspect-ratio: 1;
+    inline-size: var(--size);
+    block-size: var(--size);
   }
 
   :where(.initials-container),
@@ -187,20 +187,16 @@ const sizeValue = getSizeValue(size)
   }
 
   /* Shape styles */
-  .shape-round {
-    .initials-container,
-    .icon-container,
-    .image {
-      border-radius: 50%;
-    }
+  :where(.avatar.shape-round .initials-container),
+  :where(.avatar.shape-round .icon-container),
+  :where(.avatar.shape-round .image) {
+    border-radius: 50%;
   }
 
-  .shape-square {
-    .initials-container,
-    .icon-container,
-    .image {
-      border-radius: 0.25rem;
-    }
+  :where(.avatar.shape-square .initials-container),
+  :where(.avatar.shape-square .icon-container),
+  :where(.avatar.shape-square .image) {
+    border-radius: 0.25rem;
   }
 
   /* Default type */

src/components/badge/Badge.astro

@@ -152,6 +152,7 @@ const sizeClass = `size-${size}`
 
     display: inline-flex;
     position: relative;
+    justify-content: center;
     align-items: center;
     border: 2px solid;
     border-radius: 0.5rem;
@@ -237,8 +238,6 @@ const sizeClass = `size-${size}`
 
   /* Circular badge styles */
   :where(.circular) {
-    justify-content: center;
-    align-items: center;
     border-radius: 50%;
     padding: 0;
     aspect-ratio: 1 / 1;

src/components/card/Card.astro

@@ -144,8 +144,10 @@ const Tag = tagName
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
+  }
 
-    @media (prefers-reduced-motion: no-preference) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.image img) {
       transition: transform var(--transition-duration) var(--transition-easing);
     }
   }

src/components/modal/Modal.astro

@@ -242,8 +242,10 @@ const {
     opacity: 0;
     backdrop-filter: blur(5px);
     background-color: rgba(0 0 0 / 0.5);
+  }
 
-    @media (prefers-reduced-motion: no-preference) {
+  @media (prefers-reduced-motion: no-preference) {
+    .modal::backdrop {
       transition-behavior: allow-discrete;
       transition-duration: 0.3s;
       transition-property: display, opacity, overlay;
@@ -278,8 +280,10 @@ const {
     border-radius: 0.5rem;
     background-color: transparent;
     padding: 0.5rem;
+  }
 
-    @media (prefers-reduced-motion: no-preference) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.modal-close button) {
       transition: box-shadow var(--transition-duration) var(--transition-easing);
     }
   }
@@ -293,35 +297,36 @@ const {
     position: relative;
     aspect-ratio: 1;
     block-size: 20px;
+  }
 
-    svg {
-      position: absolute;
-      margin: auto;
-      inset: 0;
+  :where(.modal-close-icon svg) {
+    position: absolute;
+    margin: auto;
+    inset: 0;
+  }
 
-      &:first-of-type {
-        transform: rotate(45deg);
-      }
+  :where(.modal-close-icon svg:first-of-type) {
+    transform: rotate(45deg);
+  }
 
-      &:last-of-type {
-        transform: rotate(-45deg);
+  :where(.modal-close-icon svg:last-of-type) {
+    transform: rotate(-45deg);
+  }
 
-        @media (prefers-reduced-motion: no-preference) {
-          transition: transform var(--transition-duration) var(--transition-easing);
-        }
-      }
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.modal-close-icon svg:last-of-type) {
+      transition: transform var(--transition-duration) var(--transition-easing);
     }
   }
 
-  :where(.modal-close button:hover) .modal-close-icon,
-  :where(.modal-close button:focus-visible) .modal-close-icon {
-    svg:first-of-type {
-      transform: rotate(0deg);
-    }
+  :where(.modal-close button:hover) .modal-close-icon svg:first-of-type,
+  :where(.modal-close button:focus-visible) .modal-close-icon svg:first-of-type {
+    transform: rotate(0deg);
+  }
 
-    svg:last-of-type {
-      transform: rotate(180deg);
-    }
+  :where(.modal-close button:hover) .modal-close-icon svg:last-of-type,
+  :where(.modal-close button:focus-visible) .modal-close-icon svg:last-of-type {
+    transform: rotate(180deg);
   }
 
   :global(body:has(dialog[open])) {

src/components/notification/Notification.astro

@@ -102,7 +102,10 @@ const {
 
   :where(.notification) :global(svg) {
     flex-shrink: 0;
+    /* Fallback for browsers without Cascade Layers */
     inline-size: 1.5rem;
+    inline-size: revert-layer;
     block-size: auto;
+    block-size: revert-layer;
   }
 </style>

src/types/index.d.ts

@@ -68,7 +68,7 @@ export const AvatarGroup: AvatarGroup
  * Badge component
  *
  * @param _props - Record<string, any>
- * @param _props.size - Size of the badge ('small' | 'medium' | 'large') - default: 'medium'
+ * @param _props.size - Size of the badge ('sm' | 'md' | 'lg') - default: 'md'
  * @param _props.type - Type/color variant ('info' | 'success' | 'warning' | 'error' | 'default') - default: 'default'
  * @param _props.isButton - Whether to render as a button element - default: false
  * @param _props.animateOnHover - Whether to animate the icon on hover (only works with isButton) - default: false