[Component]: Breadcrumb Component (Work in progress)

package.json

@@ -34,5 +34,8 @@
     "conventional-changelog": "^5.1.0",
     "conventional-changelog-cli": "^4.1.0",
     "replace-in-file": "^7.1.0"
+  },
+  "dependencies": {
+    "jest-axe": "^8.0.0"
   }
 }

packages/docs/components/Breadcrumb.md

@@ -0,0 +1,82 @@
+---
+title: Breadcrumb
+---
+
+# Breadcrumb
+
+<div class="vp-doc">
+
+> The classic breadcrumb, in different colors, sizes, and states
+
+</div>
+
+<div class="vp-example">
+
+## Examples
+
+<example-breadcrumb />
+
+</div>
+<div class="vp-example">
+
+## Class props
+
+<inspector-breadcrumb-viewer />
+
+</div>
+
+<div class="vp-doc">
+
+## Breadcrumb component
+
+> The classic breadcrumb, in different colors, sizes, and states
+
+```html
+<o-breadcrumb></o-breadcrumb>
+```
+
+### Props
+
+| Prop name | Description                                       | Type             | Values                                                                                                                                       | Default                                                                                                                                                   |
+| --------- | ------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| align     | Position of the breadcrumb                        | string           | `left`, `center`, `right`                                                                                                                    | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;align: undefined<br>}</code>     |
+| override  | Override existing theme classes completely        | boolean          | -                                                                                                                                            |                                                                                                                                                           |
+| separator | The breadcrumb separator between breadcrumb items | string           | `has-arrow-separator`, `has-dot-separator`, `has-slash-separator`, `has-bullet-separator`, `has-succeeds-separator`, `has-chevron-separator` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;separator: undefined<br>}</code> |
+| size      | Size of the breadcrumb                            | string           | `small`, `medium`, `large`                                                                                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;size: undefined<br>}</code>      |
+| tag       | Tag of the breadcrumb                             | DynamicComponent | `div`, `section ...`                                                                                                                         | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;tag: "section"<br>}</code>       |
+
+### Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |
+
+</div>
+
+<div class="vp-doc">
+
+## Sass variables
+
+<div class="theme-orugabase">
+
+> Current theme ➜ _[Oruga Base](https://github.com/oruga-ui/theme-oruga)_
+
+<p>The theme does not have any custom variables for this component.</p>
+</div><div class="theme-orugafull">
+
+> Current theme ➜ _[Oruga Full](https://github.com/oruga-ui/theme-oruga)_
+
+<p>The theme does not have any custom variables for this component.</p>
+</div><div class="theme-bulma">
+
+> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_
+
+<p>The theme does not have any custom variables for this component.</p>
+</div><div class="theme-bootstrap">
+
+> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_
+
+<p>The theme does not have any custom variables for this component.</p>
+</div>
+
+</div>

packages/docs/components/BreadcrumbItem.md

@@ -0,0 +1,61 @@
+---
+title: Breadcrumb Item
+---
+
+# Breadcrumb Item
+
+<div class="vp-doc">
+
+> The classic breadrcumb item, in different colors, sizes, and states
+
+</div>
+
+<div class="vp-example">
+
+## Examples
+
+<example-breadcrumbitem />
+
+</div>
+<div class="vp-example">
+
+## Class props
+
+<inspector-breadcrumbitem-viewer />
+
+</div>
+
+<div class="vp-doc">
+
+## BreadcrumbItem component
+
+> The classic breadrcumb item, in different colors, sizes, and states
+
+```html
+<o-breadcrumb-item></o-breadcrumb-item>
+```
+
+### Props
+
+| Prop name     | Description                                                  | Type             | Values                                                      | Default                                                                                                                                                       |
+| ------------- | ------------------------------------------------------------ | ---------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| active        | breadcrumb item is active, works only when tag provided is a | boolean          | `true`, `false`                                             | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;active: undefined<br>}</code>        |
+| activeVariant |                                                              | string           | -                                                           | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;activeVariant: undefined<br>}</code> |
+| disabled      | breadcrumb item is disabled                                  | boolean          | `true`, `false`                                             | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;disabled: undefined<br>}</code>      |
+| iconBoth      |                                                              | boolean          | -                                                           | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                   |
+| iconLeft      | Icon name to show on the left                                | string           | -                                                           |                                                                                                                                                               |
+| iconPack      | Icon pack to use                                             | string           | `mdi`, `fa`, `fas and any other custom icon pack`           | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>      |
+| iconRight     | Icon name to show on the right                               | string           | -                                                           |                                                                                                                                                               |
+| tag           | breadcrumb item tag name                                     | DynamicComponent | `li`, `a`, `router-link`, `nuxt-link (or other nuxt alias)` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;tag: "a"<br>}</code>                 |
+
+### Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |
+
+</div>
+
+<div class="vp-doc">
+
+</div>