feat: adding Badge, Breadcrumb, Checkbox et Radio components

src/components/Breadcrumb/_breadcrumb.scss

@@ -0,0 +1,27 @@
+@use "../../styles/tokens/typography" as *;
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--nds-spacing-xs);
+  @include text-base;
+
+  &__item {
+    text-decoration: none;
+    color: var(--nds-neutral);
+    transition: color 120ms ease;
+    &:hover {
+      color: var(--nds-text);
+    }
+    &:not(:first-child)::before {
+      content: "/";
+      color: var(--nds-disabled);
+      margin-right: var(--nds-spacing-xs);
+    }
+    &--current {
+      color: var(--nds-text);
+      font-weight: 600;
+      pointer-events: none;
+    }
+  }
+}

src/components/Breadcrumb/breadcrumb.astro

@@ -0,0 +1,11 @@
+---
+export interface Props {}
+---
+
+<nav class="breadcrumb" aria-label="Breadcrumb">
+  <slot />
+</nav>
+
+<style lang="scss">
+  @use "./_breadcrumb.scss";
+</style>

src/components/Breadcrumb/breadcrumbItem.astro

@@ -0,0 +1,19 @@
+---
+export interface Props {
+  href?: string;
+  current?: boolean;
+}
+const { href = "#", current = false } = Astro.props;
+---
+
+<a
+  href={href}
+  class={`breadcrumb__item ${current ? "breadcrumb__item--current" : ""}`}
+  aria-current={current ? "page" : undefined}
+>
+  <slot />
+</a>
+
+<style lang="scss">
+  @use "./_breadcrumb.scss";
+</style>