feat: Added new component six-breadcrumbs

docs/components/component.tags.mts

@@ -1 +1 @@
-export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
+export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];

docs/components/six-breadcrumbs-item.md

@@ -0,0 +1,78 @@
+# Breadcrumbs Item
+
+
+Breadcrumb items are intended for use with the six-breadcrumbs component. For usage details, see the [six-breadcrumbs documentation](six-breadcrumbs.html).
+
+<docs-demo-six-breadcrumbs-item-0></docs-demo-six-breadcrumbs-item-0>
+
+```html
+<six-breadcrumbs>
+  <six-breadcrumbs-item>A</six-breadcrumbs-item>
+  <six-breadcrumbs-item>B</six-breadcrumbs-item>
+  <six-breadcrumbs-item>C</six-breadcrumbs-item>
+</six-breadcrumbs>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+Breadcrumb items are used inside breadcrumbs to represent different links.
+
+## Properties
+
+| Property   | Attribute   | Description                                                                                            | Type                                                      | Default     |
+| ---------- | ----------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
+| `href`     | `href`      | When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. | `string \| undefined`                                     | `undefined` |
+| `readonly` | `read-only` | Set to true to readonly the breadcrumb item.                                                           | `boolean`                                                 | `false`     |
+| `size`     | `size`      | The breadcrumbs item size.                                                                             | `"large" \| "medium" \| "small"`                          | `'medium'`  |
+| `target`   | `target`    | Tells the browser where to open the link. Only used when `href` is set.                                | `"_blank" \| "_parent" \| "_self" \| "_top" \| undefined` | `undefined` |
+
+
+## Slots
+
+| Slot          | Description                                                                                                                                                                                         |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|               | The breadcrumb item’s label.                                                                                                                                                                        |
+| `"prefix"`    | An optional prefix, usually an icon or icon button.                                                                                                                                                 |
+| `"separator"` | The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead. |
+| `"suffix"`    | An optional suffix, usually an icon or icon button.                                                                                                                                                 |
+
+
+## Shadow Parts
+
+| Part          | Description                      |
+| ------------- | -------------------------------- |
+| `"base"`      | The component's base wrapper.    |
+| `"button"`    | The button that renders the item |
+| `"separator"` | The separator                    |
+
+
+## CSS Custom Properties
+
+| Name                | Description                            |
+| ------------------- | -------------------------------------- |
+| `--last-item-color` | The color of the last breadcrumbs item |
+| `--separator-color` | The color of the separator             |
+
+
+## Dependencies
+
+### Depends on
+
+- [six-button](six-button.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-breadcrumbs-item --> six-button
+  six-button --> six-spinner
+  style six-breadcrumbs-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group

docs/components/six-breadcrumbs.md

@@ -0,0 +1,179 @@
+# Breadcrumbs
+
+
+Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy. Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the user’s position in the navigation.
+
+<docs-demo-six-breadcrumbs-0></docs-demo-six-breadcrumbs-0>
+
+```html
+<six-breadcrumbs>
+  <six-breadcrumbs-item>A</six-breadcrumbs-item>
+  <six-breadcrumbs-item>B</six-breadcrumbs-item>
+  <six-breadcrumbs-item>C</six-breadcrumbs-item>
+</six-breadcrumbs>
+```
+
+
+## Custom Separators
+
+Use the separator slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
+
+<docs-demo-six-breadcrumbs-1></docs-demo-six-breadcrumbs-1>
+
+```html
+<six-breadcrumbs>
+  <six-icon slot="separator" size="small">arrow_forward</six-icon>
+  <six-breadcrumbs-item>A</six-breadcrumbs-item>
+  <six-breadcrumbs-item>B</six-breadcrumbs-item>
+  <six-breadcrumbs-item>Current</six-breadcrumbs-item>
+</six-breadcrumbs>
+```
+
+
+Using `separator-icon` attribute
+
+<docs-demo-six-breadcrumbs-2></docs-demo-six-breadcrumbs-2>
+
+```html
+<six-breadcrumbs separator-icon="arrow_forward">
+  <six-breadcrumbs-item>A</six-breadcrumbs-item>
+  <six-breadcrumbs-item>B</six-breadcrumbs-item>
+  <six-breadcrumbs-item>Current</six-breadcrumbs-item>
+</six-breadcrumbs>
+```
+
+
+## Prefixes
+
+Use the prefix slot to add content before any breadcrumb item.
+
+<docs-demo-six-breadcrumbs-3></docs-demo-six-breadcrumbs-3>
+
+```html
+<six-breadcrumbs>
+  <six-icon slot="separator" size="small">arrow_forward</six-icon>
+  <six-breadcrumbs-item>
+    <six-icon slot="prefix" size="small">house</six-icon>
+    Home
+  </six-breadcrumbs-item>
+  <six-breadcrumbs-item>Page</six-breadcrumbs-item>
+  <six-breadcrumbs-item>Current</six-breadcrumbs-item>
+</six-breadcrumbs>
+```
+
+
+## Suffixes
+
+Use the suffix slot to add content after any breadcrumb item.
+
+<docs-demo-six-breadcrumbs-4></docs-demo-six-breadcrumbs-4>
+
+```html
+<six-breadcrumbs>
+  <six-icon slot="separator" size="small">arrow_forward</six-icon>
+  <six-breadcrumbs-item>Home</six-breadcrumbs-item>
+  <six-breadcrumbs-item>Page</six-breadcrumbs-item>
+  <six-breadcrumbs-item>
+    <six-icon slot="suffix" size="small">lock</six-icon>
+    Current
+  </six-breadcrumbs-item>
+</six-breadcrumbs>
+```
+
+
+## Styling
+
+Use CSS custom properties to customize the appearance of breadcrumb items.
+
+<docs-demo-six-breadcrumbs-5></docs-demo-six-breadcrumbs-5>
+
+```html
+<div class="parent">
+  <six-breadcrumbs>
+    <six-icon slot="separator" size="small">arrow_forward</six-icon>
+    <six-breadcrumbs-item>Home</six-breadcrumbs-item>
+    <six-breadcrumbs-item>Page</six-breadcrumbs-item>
+    <six-breadcrumbs-item>Current</six-breadcrumbs-item>
+  </six-breadcrumbs>
+</div>
+```
+
+
+## Dynamically Add/Remove Items
+
+Items can be dynamically added and removed.
+
+<docs-demo-six-breadcrumbs-6></docs-demo-six-breadcrumbs-6>
+
+```html
+<six-button type="secondary" id="remove-button">Remove</six-button>
+<six-button type="secondary" id="add-button">Add</six-button>
+
+<six-breadcrumbs id="dynamic-breadcrumbs">
+  <six-breadcrumbs-item>Item 0</six-breadcrumbs-item>
+  <six-breadcrumbs-item>Item 1</six-breadcrumbs-item>
+</six-breadcrumbs>
+
+<script type="module">
+  let counter = 2;
+  const breadcrumbs = document.getElementById('dynamic-breadcrumbs');
+
+  document.getElementById('remove-button').addEventListener('click', () => {
+    breadcrumbs.lastElementChild?.remove();
+  });
+
+  document.getElementById('add-button').addEventListener('click', () => {
+    const item = document.createElement('six-breadcrumbs-item');
+    item.textContent = `Item ${counter++}`;
+    breadcrumbs.append(item);
+  });
+</script>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+
+## Properties
+
+| Property        | Attribute        | Description                                                     | Type     | Default |
+| --------------- | ---------------- | --------------------------------------------------------------- | -------- | ------- |
+| `separatorIcon` | `separator-icon` | Defines an icon as a separator without having to place a slot * | `string` | `''`    |
+
+
+## Slots
+
+| Slot          | Description                                                              |
+| ------------- | ------------------------------------------------------------------------ |
+|               | One or more breadcrumb items to display.                                 |
+| `"separator"` | The separator to use between breadcrumb items. Works best with six-icon. |
+
+
+## Shadow Parts
+
+| Part     | Description                   |
+| -------- | ----------------------------- |
+| `"base"` | The component's base wrapper. |
+
+
+## Dependencies
+
+### Depends on
+
+- [six-icon](six-icon.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-breadcrumbs --> six-icon
+  style six-breadcrumbs fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group

docs/components/six-button.md

@@ -345,6 +345,7 @@ Type: `Promise<void>`
 
 ### Used by
 
+ - [six-breadcrumbs-item](six-breadcrumbs-item.html)
  - [six-header-menu-button](six-header-menu-button.html)
  - [six-select](six-select.html)
 
@@ -356,6 +357,7 @@ Type: `Promise<void>`
 ```mermaid
 graph TD;
   six-button --> six-spinner
+  six-breadcrumbs-item --> six-button
   six-header-menu-button --> six-button
   six-select --> six-button
   style six-button fill:#f9f,stroke:#333,stroke-width:4px

docs/components/six-icon.md

@@ -271,6 +271,7 @@ Enter an icon label and press enter to display an icon:
 ### Used by
 
  - [six-avatar](six-avatar.html)
+ - [six-breadcrumbs](six-breadcrumbs.html)
  - [six-date](six-date.html)
  - [six-datepicker](six-datepicker.html)
  - [six-details](six-details.html)
@@ -294,6 +295,7 @@ Enter an icon label and press enter to display an icon:
 ```mermaid
 graph TD;
   six-avatar --> six-icon
+  six-breadcrumbs --> six-icon
   six-date --> six-icon
   six-datepicker --> six-icon
   six-details --> six-icon

docs/examples/docs-demo-six-breadcrumbs-0.vue

@@ -0,0 +1,20 @@
+<template>
+<div>
+
+        <six-breadcrumbs>
+          <six-breadcrumbs-item>A</six-breadcrumbs-item>
+          <six-breadcrumbs-item>B</six-breadcrumbs-item>
+          <six-breadcrumbs-item>C</six-breadcrumbs-item>
+        </six-breadcrumbs>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-breadcrumbs-0',
+  mounted() {  }
+}
+</script>

docs/examples/docs-demo-six-breadcrumbs-1.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+
+        <six-breadcrumbs>
+          <six-icon slot="separator" size="small">arrow_forward</six-icon>
+          <six-breadcrumbs-item>A</six-breadcrumbs-item>
+          <six-breadcrumbs-item>B</six-breadcrumbs-item>
+          <six-breadcrumbs-item>Current</six-breadcrumbs-item>
+        </six-breadcrumbs>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-breadcrumbs-1',
+  mounted() {  }
+}
+</script>

docs/examples/docs-demo-six-breadcrumbs-2.vue

@@ -0,0 +1,20 @@
+<template>
+<div>
+
+        <six-breadcrumbs separator-icon="arrow_forward">
+          <six-breadcrumbs-item>A</six-breadcrumbs-item>
+          <six-breadcrumbs-item>B</six-breadcrumbs-item>
+          <six-breadcrumbs-item>Current</six-breadcrumbs-item>
+        </six-breadcrumbs>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-breadcrumbs-2',
+  mounted() {  }
+}
+</script>

docs/examples/docs-demo-six-breadcrumbs-3.vue

@@ -0,0 +1,24 @@
+<template>
+<div>
+
+        <six-breadcrumbs>
+          <six-icon slot="separator" size="small">arrow_forward</six-icon>
+          <six-breadcrumbs-item>
+            <six-icon slot="prefix" size="small">house</six-icon>
+            Home
+          </six-breadcrumbs-item>
+          <six-breadcrumbs-item>Page</six-breadcrumbs-item>
+          <six-breadcrumbs-item>Current</six-breadcrumbs-item>
+        </six-breadcrumbs>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-breadcrumbs-3',
+  mounted() {  }
+}
+</script>