[Component]: Breadcrumb Component (Work in progress)

packages/docs/components/Autocomplete.md

@@ -116,10 +116,12 @@
 
 > Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_
 
+
 | SASS Variable                             | Default |
 | ----------------------------------------- | ------- |
 | $autocomplete-item-hover-background-color | #f5f5f5 |
 
+
 See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_autocomplete.scss)
 
 </div>

packages/docs/components/Breadcrumb.md

@@ -0,0 +1,73 @@
+# 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`, `centered`, `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-oruga">
+
+> Current theme ➜ _[Oruga](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,57 @@
+# 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      | Show the icon in both sides, left - right                    | 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>

packages/docs/components/Button.md

@@ -88,6 +88,7 @@
 | $button-outlined-background-color | transparent                                     |
 | $button-outlined-border-color     | var(--#{$prefix}grey-light)                     |
 
+
 See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_button.scss)
 
 </div>
@@ -109,7 +110,6 @@ See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-bulma/tree/main/
 | SASS Variable           | Default                       |
 | ----------------------- | ----------------------------- |
 | $btn-spacer             | 0.5rem                        |
-| $btn-height             | 2.35em                        |
 | $btn-border-color       | var(--#{$prefix}border-color) |
 | $btn-hover-border-color | var(--#{$prefix}border-color) |
 | $btn-hover-box-shadow   | $box-shadow-sm                |