Merge pull request #100 from incluud/next

Next

Author: markteekman

Breadcrumbs.astro

@@ -18,15 +18,16 @@ interface Props {
   children: BreadcrumbsItem | BreadcrumbsItem[]
   /**
    * Accessible label for the breadcrumb navigation
+   * @default 'Breadcrumbs'
    */
-  ariaLabel: string
+  ariaLabel?: string
 }
 
 const { class: classNames, ariaLabel = 'Breadcrumbs' } = Astro.props
 ---
 
 <nav class:list={['breadcrumbs', classNames]} aria-label={ariaLabel}>
-  <ol>
+  <ol class="list">
     <slot />
   </ol>
 </nav>

BreadcrumbsItem.astro

@@ -79,6 +79,10 @@ const {
     align-items: center;
   }
 
+  .item :global(.separator svg) {
+    margin-block-start: 3px;
+  }
+
   .item :global(svg) {
     inline-size: 1rem;
     block-size: 1rem;

Card.astro

@@ -35,7 +35,7 @@ const {
   url = '#',
   img = 'https://fakeimg.pl/640x360',
   title = 'Default title',
-  footer = 'Meta info like author, date, etc.',
+  footer = '',
   class: className,
   tagName = 'h3',
   ...rest
@@ -54,15 +54,9 @@ const Tag = tagName
         <a href={url}>{title}</a>
       </Tag>
     </div>
-    <div class="meta">
-      <slot name="meta" />
-    </div>
-    <p>
-      <slot>Default description.</slot>
-    </p>
-    <small>
-      {footer}
-    </small>
+    <div class="meta"><slot name="meta" /></div>
+    <p class="description"><slot /></p>
+    {footer && <small class="footer">{footer}</small>}
   </div>
 </article>
 
@@ -98,6 +92,7 @@ const Tag = tagName
 
   :where(.image) {
     block-size: 250px;
+    overflow: clip;
   }
 
   :where(.image img) {
@@ -148,18 +143,23 @@ const Tag = tagName
   .meta :global(span) {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     gap: 0.5rem;
   }
 
   .meta:empty {
     display: none;
   }
 
-  p {
+  .description {
     font-size: 1rem;
   }
 
-  small {
+  .description:empty {
+    display: none;
+  }
+
+  .footer {
     margin-block-start: auto;
     padding-block-start: 1rem;
   }

Notification.astro

@@ -87,9 +87,9 @@ const {
     color: light-dark(hsl(350 94% 19%), hsl(0 0% 100%));
   }
 
-  :where(.notification [data-icon]) {
+  :where(.notification) :global([data-icon]) {
     flex-shrink: 0;
-    inline-size: 2.5rem;
+    inline-size: 1.5rem;
     block-size: auto;
   }
 </style>

README.md

@@ -78,10 +78,10 @@ import { Accordion, AccordionItem } from 'accessible-astro-components'
 
 ## Accessible Astro projects
 
-- [Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): A fully accessible boilerplate for kickstarting Astro projects, with Tailwind CSS support.
-- [Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): A library of reusable, accessible components designed for Astro, build in TypeScript.
-- [Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): A user-friendly dashboard interface with a login screen, built with accessibility in mind.
-- [Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects, built with Astro's Starlight theme.
+- [Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): Fully accessible starter for kickstarting Astro projects, with Tailwind.
+- [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.
 
 Check out our [roadmap](https://github.com/orgs/incluud/projects/4) to see what's coming next!
 

TabsPanel.astro

@@ -42,6 +42,7 @@ const { id, labelledby, selected = false, class: className } = Astro.props
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
+    gap: 1rem;
     border: 2px solid;
     border-color: light-dark(hsl(0 0% 10%), hsl(0 0% 90%));
     border-end-start-radius: 0.5rem;

TabsTab.astro

@@ -49,7 +49,7 @@ const { id, controls, selected = false, class: className } = Astro.props
     border-radius: 0.5rem;
     background-color: transparent;
     padding-inline: 1rem;
-    padding-block: 0.75rem;
+    padding-block: 1.5rem;
     color: inherit;
     font-weight: 700;
     font-size: 1.125rem;