globuswebcomponents 1.5.9 → 1.6.1

package/dist/collection/components/gb-breadcrumb-button-base/gb-breadcrumb-button-base.css

@@ -2671,6 +2671,17 @@
   align-items: flex-start;
 }
 
+.icon_svg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon_svg svg{
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .breadcrumb_button_base_div.button_primary.icon,
 .breadcrumb_button_base_div.button_gray.icon {
   padding: 0.25rem;
@@ -2687,35 +2698,153 @@
   border-radius: var(--rounded-xs);
 }
 
-.breadcrumb_button_base_div.text.icon:hover .icon path {
-  width: 1.25rem;
-  height: 1.25rem;
+/* Default Icon Styles */
+.breadcrumb_button_base_div.text.icon .icon_svg path[stroke]{
+  stroke: var(--color-icon-subtle, #697586);
 }
 
-.breadcrumb_button_base_div.text.icon:hover .icon path {
-  fill: var(--color-icon, #4b5565);
+.breadcrumb_button_base_div.text.icon .icon_svg path[fill]{
+  fill: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.text.icon.current .icon_svg path[stroke]{
+  stroke: var(--color-icon-selected, #075DB2);
 }
 
-.breadcrumb_button_base_div.text.icon:active .icon path {
+.breadcrumb_button_base_div.text.icon.current .icon_svg path[fill]{
+  fill: var(--color-icon-selected, #075DB2);
+}
+
+.breadcrumb_button_base_div.button_primary.icon .icon_svg path[stroke]{
+  stroke: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.button_primary.icon .icon_svg path[fill]{
   fill: var(--color-icon-subtle, #697586);
 }
 
-.breadcrumb_button_base_div.text.icon.current .icon path {
-  fill: var(--color-icon-selected, #075db2);
+.breadcrumb_button_base_div.button_primary.icon.current .icon_svg path[stroke]{
+  stroke: var(--color-icon-selected, #075DB2);
 }
 
-.breadcrumb_button_base_div.text.icon.current:hover .icon path {
-  fill: var(--color-icon-information, #064e94);
+.breadcrumb_button_base_div.button_primary.icon.current .icon_svg path[fill]{
+  fill: var(--color-icon-selected, #075DB2);
 }
 
-.breadcrumb_button_base_div.text.icon.current:active .icon path {
-  fill: var(--color-icon-selected, #075db2);
+.breadcrumb_button_base_div.button_gray.icon .icon_svg path[stroke]{
+  stroke: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.button_gray.icon .icon_svg path[fill]{
+  fill: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.button_gray.icon.current .icon_svg path[stroke]{
+  stroke: var(--color-icon, #4B5565);
+}
+
+.breadcrumb_button_base_div.button_gray.icon.current .icon_svg path[fill]{
+  fill: var(--color-icon, #4B5565);
+}
+
+/* Hover Icon Styles */
+.breadcrumb_button_base_div.text.icon:hover .icon_svg path[stroke]{
+  stroke: var(--color-icon, #4B5565);
+}
+
+.breadcrumb_button_base_div.text.icon:hover .icon_svg path[fill]{
+  fill: var(--color-icon, #4B5565);
+}
+
+.breadcrumb_button_base_div.text.icon.current:hover .icon_svg path[stroke]{
+  stroke: var(--color-icon-information, #064E94);
+}
+
+.breadcrumb_button_base_div.text.icon.current:hover .icon_svg path[fill]{
+  fill: var(--color-icon-information, #064E94);
+}
+
+.breadcrumb_button_base_div.button_primary.icon:hover .icon_svg path[stroke]{
+  stroke: var(--color-icon-selected, #075DB2);
 }
 
-.breadcrumb_button_base_div.button_primary.icon .icon path {
+.breadcrumb_button_base_div.button_primary.icon:hover .icon_svg path[fill]{
+  fill: var(--color-icon-selected, #075DB2);
+}
+
+.breadcrumb_button_base_div.button_primary.icon.current:hover .icon_svg path[stroke]{
+  stroke: var(--color-icon-information, #064E94);
+}
+
+.breadcrumb_button_base_div.button_primary.icon.current:hover .icon_svg path[fill]{
+  fill: var(--color-icon-information, #064E94);
+}
+
+.breadcrumb_button_base_div.button_gray.icon:hover .icon_svg path[stroke]{
+  stroke: var(--color-icon, #4B5565);
+}
+
+.breadcrumb_button_base_div.button_gray.icon:hover .icon_svg path[fill]{
+  fill: var(--color-icon, #4B5565);
+}
+
+.breadcrumb_button_base_div.button_gray.icon.current:hover .icon_svg path[stroke]{
+  stroke: var(--color-icon-bold, #202939);
+}
+
+.breadcrumb_button_base_div.button_gray.icon.current:hover .icon_svg path[fill]{
+  fill: var(--color-icon-bold, #202939);
+}
+
+/* Active Icon Styles */
+.breadcrumb_button_base_div.text.icon:active .icon_svg path[stroke]{
+  stroke: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.text.icon:active .icon_svg path[fill]{
   fill: var(--color-icon-subtle, #697586);
 }
 
+.breadcrumb_button_base_div.text.icon.current:active .icon_svg path[stroke]{
+  stroke: var(--color-icon-selected, #075DB2);
+}
+
+.breadcrumb_button_base_div.text.icon.current:active .icon_svg path[fill]{
+  fill: var(--color-icon-selected, #075DB2);
+}
+
+.breadcrumb_button_base_div.button_primary.icon:active .icon_svg path[stroke]{
+  stroke: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.button_primary.icon:active .icon_svg path[fill]{
+  fill: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.button_primary.icon.current:active .icon_svg path[stroke]{
+  stroke: var(--color-icon-selected, #075DB2);
+}
+
+.breadcrumb_button_base_div.button_primary.icon.current:active .icon_svg path[fill]{
+  fill: var(--color-icon-selected, #075DB2);
+}
+
+.breadcrumb_button_base_div.button_gray.icon .icon_svg path[stroke]{
+  stroke: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.button_gray.icon .icon_svg path[fill]{
+  fill: var(--color-icon-subtle, #697586);
+}
+
+.breadcrumb_button_base_div.button_gray.icon.current:active .icon_svg path[stroke]{
+  stroke: var(--color-icon, #4B5565);
+}
+
+.breadcrumb_button_base_div.button_gray.icon.current:active .icon_svg path[fill]{
+  fill: var(--color-icon, #4B5565);
+}
+
 .breadcrumb_button_base_div.text {
   width: fit-content;
 }

package/dist/collection/components/gb-breadcrumb-button-base/gb-breadcrumb-button-base.js

@@ -1,12 +1,30 @@
-import { h } from "@stencil/core";
+import { getAssetPath, h } from "@stencil/core";
 export class GbBreadcrumbButtonBase {
     constructor() {
         this.current = false;
         this.icon = false;
         this.label = '';
+        this.iconSrc = '';
+        this.leadingIconSvg = '';
+    }
+    async loadIcon(iconName) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        this.leadingIconSvg = svg;
+    }
+    componentWillLoad() {
+        this.loadIcon(this.iconSrc);
     }
     render() {
-        return (h("div", { key: '25f8a96426849ea0597484256ce16b76aa279573', class: `breadcrumb_button_base_div ${this.type} ${this.icon ? 'icon' : ''} ${this.current ? 'current' : ''}` }, this.icon ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "icon" }, h("path", { d: "M9.25013 15C9.25013 15.4142 9.58592 15.75 10.0001 15.75C10.4143 15.75 10.7501 15.4142 10.7501 15H9.25013ZM10.7501 12.5C10.7501 12.0858 10.4143 11.75 10.0001 11.75C9.58592 11.75 9.25013 12.0858 9.25013 12.5H10.7501ZM5.85096 3.83335L5.41152 3.22558L5.85096 3.83335ZM14.1493 3.83335L14.5888 3.22558V3.22558L14.1493 3.83335ZM2.21049 12.6437L1.46919 12.7576L2.21049 12.6437ZM17.7898 12.6437L17.0485 12.5298V12.5298L17.7898 12.6437ZM18.0406 11.0112L18.7819 11.1251L18.0406 11.0112ZM15.3492 4.70091L14.9097 5.30868V5.30868L15.3492 4.70091ZM1.95963 11.0112L2.70093 10.8973L1.95963 11.0112ZM4.65108 4.70091L5.09053 5.30868L4.65108 4.70091ZM10.7501 15V12.5H9.25013V15H10.7501ZM17.2993 10.8973L17.0485 12.5298L18.5311 12.7576L18.7819 11.1251L17.2993 10.8973ZM10.9491 17.5834H9.05112V19.0834H10.9491V17.5834ZM2.95179 12.5298L2.70093 10.8973L1.21833 11.1251L1.46919 12.7576L2.95179 12.5298ZM5.09053 5.30868L6.2904 4.44113L5.41152 3.22558L4.21164 4.09313L5.09053 5.30868ZM13.7099 4.44113L14.9097 5.30868L15.7886 4.09313L14.5888 3.22558L13.7099 4.44113ZM6.2904 4.44113C7.30337 3.70872 8.01234 3.19753 8.60953 2.86241C9.18937 2.53703 9.5984 2.41669 10.0001 2.41669V0.916687C9.24932 0.916687 8.58264 1.15746 7.87547 1.5543C7.18565 1.9414 6.3963 2.51355 5.41152 3.22558L6.2904 4.44113ZM14.5888 3.22558C13.604 2.51355 12.8146 1.9414 12.1248 1.5543C11.4176 1.15746 10.7509 0.916687 10.0001 0.916687V2.41669C10.4019 2.41669 10.8109 2.53703 11.3907 2.86241C11.9879 3.19753 12.6969 3.70872 13.7099 4.44113L14.5888 3.22558ZM9.05112 17.5834C7.60947 17.5834 6.59586 17.5821 5.81847 17.4876C5.05984 17.3955 4.62131 17.2237 4.2889 16.9472L3.3297 18.1005C3.97055 18.6335 4.73007 18.8665 5.63761 18.9767C6.52639 19.0846 7.64706 19.0834 9.05112 19.0834V17.5834ZM1.46919 12.7576C1.67466 14.0946 1.83829 15.1692 2.08095 16.0066C2.33016 16.8666 2.68578 17.5649 3.3297 18.1005L4.2889 16.9472C3.95956 16.6733 3.7243 16.2884 3.52168 15.5891C3.3125 14.8673 3.16336 13.9065 2.95179 12.5298L1.46919 12.7576ZM17.0485 12.5298C16.8369 13.9065 16.6878 14.8673 16.4786 15.5891C16.276 16.2884 16.0407 16.6733 15.7114 16.9472L16.6706 18.1005C17.3145 17.5649 17.6701 16.8666 17.9193 16.0066C18.162 15.1692 18.3256 14.0946 18.5311 12.7576L17.0485 12.5298ZM10.9491 19.0834C12.3532 19.0834 13.4739 19.0846 14.3627 18.9767C15.2702 18.8665 16.0297 18.6335 16.6706 18.1005L15.7114 16.9472C15.379 17.2237 14.9404 17.3955 14.1818 17.4876C13.4044 17.5821 12.3908 17.5834 10.9491 17.5834V19.0834ZM18.7819 11.1251C18.9267 10.1833 19.0448 9.42055 19.0755 8.7878C19.107 8.1371 19.0507 7.56162 18.8099 6.99693L17.4301 7.58541C17.5512 7.86926 17.6023 8.19665 17.5772 8.71526C17.5513 9.25182 17.4488 9.9248 17.2993 10.8973L18.7819 11.1251ZM14.9097 5.30868C15.7248 5.898 16.2911 6.30854 16.7033 6.67427C17.1036 7.02939 17.3085 7.30014 17.4301 7.58541L18.8099 6.99693C18.5696 6.43364 18.1921 5.98984 17.6989 5.55225C17.2176 5.12527 16.5795 4.66495 15.7886 4.09313L14.9097 5.30868ZM2.70093 10.8973C2.55148 9.9248 2.44901 9.25182 2.42303 8.71526C2.39793 8.19665 2.44908 7.86926 2.57014 7.58541L1.1904 6.99693C0.949549 7.56162 0.893285 8.1371 0.924789 8.7878C0.955423 9.42055 1.0736 10.1833 1.21833 11.1251L2.70093 10.8973ZM4.21164 4.09313C3.42078 4.66495 2.78265 5.12527 2.30142 5.55225C1.80822 5.98984 1.43065 6.43364 1.1904 6.99693L2.57014 7.58541C2.69181 7.30014 2.89669 7.02939 3.29693 6.67427C3.70915 6.30854 4.27546 5.898 5.09053 5.30868L4.21164 4.09313Z", fill: "#697586" }))) : (h("p", { class: `breadcrumb_text text-sm-medium ${this.type} ${this.current ? 'current' : ''}` }, this.label))));
+        return (h("div", { key: '1f94d55c874c187149f3bdd079ff0de707c045d0', class: `breadcrumb_button_base_div ${this.type} ${this.icon ? 'icon' : ''} ${this.current ? 'current' : ''}` }, this.icon ? (
+        // <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="icon">
+        //   <path
+        //     d="M9.25013 15C9.25013 15.4142 9.58592 15.75 10.0001 15.75C10.4143 15.75 10.7501 15.4142 10.7501 15H9.25013ZM10.7501 12.5C10.7501 12.0858 10.4143 11.75 10.0001 11.75C9.58592 11.75 9.25013 12.0858 9.25013 12.5H10.7501ZM5.85096 3.83335L5.41152 3.22558L5.85096 3.83335ZM14.1493 3.83335L14.5888 3.22558V3.22558L14.1493 3.83335ZM2.21049 12.6437L1.46919 12.7576L2.21049 12.6437ZM17.7898 12.6437L17.0485 12.5298V12.5298L17.7898 12.6437ZM18.0406 11.0112L18.7819 11.1251L18.0406 11.0112ZM15.3492 4.70091L14.9097 5.30868V5.30868L15.3492 4.70091ZM1.95963 11.0112L2.70093 10.8973L1.95963 11.0112ZM4.65108 4.70091L5.09053 5.30868L4.65108 4.70091ZM10.7501 15V12.5H9.25013V15H10.7501ZM17.2993 10.8973L17.0485 12.5298L18.5311 12.7576L18.7819 11.1251L17.2993 10.8973ZM10.9491 17.5834H9.05112V19.0834H10.9491V17.5834ZM2.95179 12.5298L2.70093 10.8973L1.21833 11.1251L1.46919 12.7576L2.95179 12.5298ZM5.09053 5.30868L6.2904 4.44113L5.41152 3.22558L4.21164 4.09313L5.09053 5.30868ZM13.7099 4.44113L14.9097 5.30868L15.7886 4.09313L14.5888 3.22558L13.7099 4.44113ZM6.2904 4.44113C7.30337 3.70872 8.01234 3.19753 8.60953 2.86241C9.18937 2.53703 9.5984 2.41669 10.0001 2.41669V0.916687C9.24932 0.916687 8.58264 1.15746 7.87547 1.5543C7.18565 1.9414 6.3963 2.51355 5.41152 3.22558L6.2904 4.44113ZM14.5888 3.22558C13.604 2.51355 12.8146 1.9414 12.1248 1.5543C11.4176 1.15746 10.7509 0.916687 10.0001 0.916687V2.41669C10.4019 2.41669 10.8109 2.53703 11.3907 2.86241C11.9879 3.19753 12.6969 3.70872 13.7099 4.44113L14.5888 3.22558ZM9.05112 17.5834C7.60947 17.5834 6.59586 17.5821 5.81847 17.4876C5.05984 17.3955 4.62131 17.2237 4.2889 16.9472L3.3297 18.1005C3.97055 18.6335 4.73007 18.8665 5.63761 18.9767C6.52639 19.0846 7.64706 19.0834 9.05112 19.0834V17.5834ZM1.46919 12.7576C1.67466 14.0946 1.83829 15.1692 2.08095 16.0066C2.33016 16.8666 2.68578 17.5649 3.3297 18.1005L4.2889 16.9472C3.95956 16.6733 3.7243 16.2884 3.52168 15.5891C3.3125 14.8673 3.16336 13.9065 2.95179 12.5298L1.46919 12.7576ZM17.0485 12.5298C16.8369 13.9065 16.6878 14.8673 16.4786 15.5891C16.276 16.2884 16.0407 16.6733 15.7114 16.9472L16.6706 18.1005C17.3145 17.5649 17.6701 16.8666 17.9193 16.0066C18.162 15.1692 18.3256 14.0946 18.5311 12.7576L17.0485 12.5298ZM10.9491 19.0834C12.3532 19.0834 13.4739 19.0846 14.3627 18.9767C15.2702 18.8665 16.0297 18.6335 16.6706 18.1005L15.7114 16.9472C15.379 17.2237 14.9404 17.3955 14.1818 17.4876C13.4044 17.5821 12.3908 17.5834 10.9491 17.5834V19.0834ZM18.7819 11.1251C18.9267 10.1833 19.0448 9.42055 19.0755 8.7878C19.107 8.1371 19.0507 7.56162 18.8099 6.99693L17.4301 7.58541C17.5512 7.86926 17.6023 8.19665 17.5772 8.71526C17.5513 9.25182 17.4488 9.9248 17.2993 10.8973L18.7819 11.1251ZM14.9097 5.30868C15.7248 5.898 16.2911 6.30854 16.7033 6.67427C17.1036 7.02939 17.3085 7.30014 17.4301 7.58541L18.8099 6.99693C18.5696 6.43364 18.1921 5.98984 17.6989 5.55225C17.2176 5.12527 16.5795 4.66495 15.7886 4.09313L14.9097 5.30868ZM2.70093 10.8973C2.55148 9.9248 2.44901 9.25182 2.42303 8.71526C2.39793 8.19665 2.44908 7.86926 2.57014 7.58541L1.1904 6.99693C0.949549 7.56162 0.893285 8.1371 0.924789 8.7878C0.955423 9.42055 1.0736 10.1833 1.21833 11.1251L2.70093 10.8973ZM4.21164 4.09313C3.42078 4.66495 2.78265 5.12527 2.30142 5.55225C1.80822 5.98984 1.43065 6.43364 1.1904 6.99693L2.57014 7.58541C2.69181 7.30014 2.89669 7.02939 3.29693 6.67427C3.70915 6.30854 4.27546 5.898 5.09053 5.30868L4.21164 4.09313Z"
+        //     fill="#697586"
+        //   />
+        // </svg>
+        h("div", { class: `icon_svg`, innerHTML: this.leadingIconSvg })) : (h("p", { class: `breadcrumb_text text-sm-medium ${this.type} ${this.current ? 'current' : ''}` }, this.label))));
     }
     static get is() { return "gb-breadcrumb-button-base"; }
     static get encapsulation() { return "shadow"; }
@@ -46,8 +64,8 @@ export class GbBreadcrumbButtonBase {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'buttton_primary' | 'button_gray'",
-                    "resolved": "\"button_gray\" | \"buttton_primary\" | \"text\"",
+                    "original": "'text' | 'button_primary' | 'button_gray'",
+                    "resolved": "\"button_gray\" | \"button_primary\" | \"text\"",
                     "references": {}
                 },
                 "required": false,
@@ -100,8 +118,33 @@ export class GbBreadcrumbButtonBase {
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "iconSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-src",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
+    static get states() {
+        return {
+            "leadingIconSvg": {}
+        };
+    }
 }
 //# sourceMappingURL=gb-breadcrumb-button-base.js.map

package/dist/collection/components/gb-breadcrumb-button-base/gb-breadcrumb-button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-breadcrumb-button-base.js","sourceRoot":"","sources":["../../../src/components/gb-breadcrumb-button-base/gb-breadcrumb-button-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,sBAAsB;IALnC;QAMU,YAAO,GAAY,KAAK,CAAC;QAEzB,SAAI,GAAY,KAAK,CAAC;QACtB,UAAK,GAAW,EAAE,CAAC;KAkB5B;IAhBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,8BAA8B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,IAC9G,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,WAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM;YACzG,YACE,CAAC,EAAC,k0GAAk0G,EACp0G,IAAI,EAAC,SAAS,GACd,CACE,CACP,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAE,kCAAkC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CAC3G,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-breadcrumb-button-base',\r\n  styleUrl: 'gb-breadcrumb-button-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbBreadcrumbButtonBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() type: 'text' | 'buttton_primary' | 'button_gray';\r\n  @Prop() icon: boolean = false;\r\n  @Prop() label: string = '';\r\n\r\n  render() {\r\n    return (\r\n      <div class={`breadcrumb_button_base_div ${this.type} ${this.icon ? 'icon' : ''} ${this.current ? 'current' : ''}`}>\r\n        {this.icon ? (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"icon\">\r\n            <path\r\n              d=\"M9.25013 15C9.25013 15.4142 9.58592 15.75 10.0001 15.75C10.4143 15.75 10.7501 15.4142 10.7501 15H9.25013ZM10.7501 12.5C10.7501 12.0858 10.4143 11.75 10.0001 11.75C9.58592 11.75 9.25013 12.0858 9.25013 12.5H10.7501ZM5.85096 3.83335L5.41152 3.22558L5.85096 3.83335ZM14.1493 3.83335L14.5888 3.22558V3.22558L14.1493 3.83335ZM2.21049 12.6437L1.46919 12.7576L2.21049 12.6437ZM17.7898 12.6437L17.0485 12.5298V12.5298L17.7898 12.6437ZM18.0406 11.0112L18.7819 11.1251L18.0406 11.0112ZM15.3492 4.70091L14.9097 5.30868V5.30868L15.3492 4.70091ZM1.95963 11.0112L2.70093 10.8973L1.95963 11.0112ZM4.65108 4.70091L5.09053 5.30868L4.65108 4.70091ZM10.7501 15V12.5H9.25013V15H10.7501ZM17.2993 10.8973L17.0485 12.5298L18.5311 12.7576L18.7819 11.1251L17.2993 10.8973ZM10.9491 17.5834H9.05112V19.0834H10.9491V17.5834ZM2.95179 12.5298L2.70093 10.8973L1.21833 11.1251L1.46919 12.7576L2.95179 12.5298ZM5.09053 5.30868L6.2904 4.44113L5.41152 3.22558L4.21164 4.09313L5.09053 5.30868ZM13.7099 4.44113L14.9097 5.30868L15.7886 4.09313L14.5888 3.22558L13.7099 4.44113ZM6.2904 4.44113C7.30337 3.70872 8.01234 3.19753 8.60953 2.86241C9.18937 2.53703 9.5984 2.41669 10.0001 2.41669V0.916687C9.24932 0.916687 8.58264 1.15746 7.87547 1.5543C7.18565 1.9414 6.3963 2.51355 5.41152 3.22558L6.2904 4.44113ZM14.5888 3.22558C13.604 2.51355 12.8146 1.9414 12.1248 1.5543C11.4176 1.15746 10.7509 0.916687 10.0001 0.916687V2.41669C10.4019 2.41669 10.8109 2.53703 11.3907 2.86241C11.9879 3.19753 12.6969 3.70872 13.7099 4.44113L14.5888 3.22558ZM9.05112 17.5834C7.60947 17.5834 6.59586 17.5821 5.81847 17.4876C5.05984 17.3955 4.62131 17.2237 4.2889 16.9472L3.3297 18.1005C3.97055 18.6335 4.73007 18.8665 5.63761 18.9767C6.52639 19.0846 7.64706 19.0834 9.05112 19.0834V17.5834ZM1.46919 12.7576C1.67466 14.0946 1.83829 15.1692 2.08095 16.0066C2.33016 16.8666 2.68578 17.5649 3.3297 18.1005L4.2889 16.9472C3.95956 16.6733 3.7243 16.2884 3.52168 15.5891C3.3125 14.8673 3.16336 13.9065 2.95179 12.5298L1.46919 12.7576ZM17.0485 12.5298C16.8369 13.9065 16.6878 14.8673 16.4786 15.5891C16.276 16.2884 16.0407 16.6733 15.7114 16.9472L16.6706 18.1005C17.3145 17.5649 17.6701 16.8666 17.9193 16.0066C18.162 15.1692 18.3256 14.0946 18.5311 12.7576L17.0485 12.5298ZM10.9491 19.0834C12.3532 19.0834 13.4739 19.0846 14.3627 18.9767C15.2702 18.8665 16.0297 18.6335 16.6706 18.1005L15.7114 16.9472C15.379 17.2237 14.9404 17.3955 14.1818 17.4876C13.4044 17.5821 12.3908 17.5834 10.9491 17.5834V19.0834ZM18.7819 11.1251C18.9267 10.1833 19.0448 9.42055 19.0755 8.7878C19.107 8.1371 19.0507 7.56162 18.8099 6.99693L17.4301 7.58541C17.5512 7.86926 17.6023 8.19665 17.5772 8.71526C17.5513 9.25182 17.4488 9.9248 17.2993 10.8973L18.7819 11.1251ZM14.9097 5.30868C15.7248 5.898 16.2911 6.30854 16.7033 6.67427C17.1036 7.02939 17.3085 7.30014 17.4301 7.58541L18.8099 6.99693C18.5696 6.43364 18.1921 5.98984 17.6989 5.55225C17.2176 5.12527 16.5795 4.66495 15.7886 4.09313L14.9097 5.30868ZM2.70093 10.8973C2.55148 9.9248 2.44901 9.25182 2.42303 8.71526C2.39793 8.19665 2.44908 7.86926 2.57014 7.58541L1.1904 6.99693C0.949549 7.56162 0.893285 8.1371 0.924789 8.7878C0.955423 9.42055 1.0736 10.1833 1.21833 11.1251L2.70093 10.8973ZM4.21164 4.09313C3.42078 4.66495 2.78265 5.12527 2.30142 5.55225C1.80822 5.98984 1.43065 6.43364 1.1904 6.99693L2.57014 7.58541C2.69181 7.30014 2.89669 7.02939 3.29693 6.67427C3.70915 6.30854 4.27546 5.898 5.09053 5.30868L4.21164 4.09313Z\"\r\n              fill=\"#697586\"\r\n            />\r\n          </svg>\r\n        ) : (\r\n          <p class={`breadcrumb_text text-sm-medium ${this.type} ${this.current ? 'current' : ''}`}>{this.label}</p>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-breadcrumb-button-base.js","sourceRoot":"","sources":["../../../src/components/gb-breadcrumb-button-base/gb-breadcrumb-button-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,sBAAsB;IALnC;QAMU,YAAO,GAAY,KAAK,CAAC;QAEzB,SAAI,GAAY,KAAK,CAAC;QACtB,UAAK,GAAW,EAAE,CAAC;QACnB,YAAO,GAAW,EAAE,CAAC;QACpB,mBAAc,GAAW,EAAE,CAAC;KA8BtC;IA5BC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,8BAA8B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,IAC9G,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACX,+GAA+G;QAC/G,UAAU;QACV,20GAA20G;QAC30G,qBAAqB;QACrB,OAAO;QACP,SAAS;QACT,WAAK,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAC/D,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAE,kCAAkC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CAC3G,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-breadcrumb-button-base',\r\n  styleUrl: 'gb-breadcrumb-button-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbBreadcrumbButtonBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() type: 'text' | 'button_primary' | 'button_gray';\r\n  @Prop() icon: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() iconSrc: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconSrc);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`breadcrumb_button_base_div ${this.type} ${this.icon ? 'icon' : ''} ${this.current ? 'current' : ''}`}>\r\n        {this.icon ? (\r\n          // <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"icon\">\r\n          //   <path\r\n          //     d=\"M9.25013 15C9.25013 15.4142 9.58592 15.75 10.0001 15.75C10.4143 15.75 10.7501 15.4142 10.7501 15H9.25013ZM10.7501 12.5C10.7501 12.0858 10.4143 11.75 10.0001 11.75C9.58592 11.75 9.25013 12.0858 9.25013 12.5H10.7501ZM5.85096 3.83335L5.41152 3.22558L5.85096 3.83335ZM14.1493 3.83335L14.5888 3.22558V3.22558L14.1493 3.83335ZM2.21049 12.6437L1.46919 12.7576L2.21049 12.6437ZM17.7898 12.6437L17.0485 12.5298V12.5298L17.7898 12.6437ZM18.0406 11.0112L18.7819 11.1251L18.0406 11.0112ZM15.3492 4.70091L14.9097 5.30868V5.30868L15.3492 4.70091ZM1.95963 11.0112L2.70093 10.8973L1.95963 11.0112ZM4.65108 4.70091L5.09053 5.30868L4.65108 4.70091ZM10.7501 15V12.5H9.25013V15H10.7501ZM17.2993 10.8973L17.0485 12.5298L18.5311 12.7576L18.7819 11.1251L17.2993 10.8973ZM10.9491 17.5834H9.05112V19.0834H10.9491V17.5834ZM2.95179 12.5298L2.70093 10.8973L1.21833 11.1251L1.46919 12.7576L2.95179 12.5298ZM5.09053 5.30868L6.2904 4.44113L5.41152 3.22558L4.21164 4.09313L5.09053 5.30868ZM13.7099 4.44113L14.9097 5.30868L15.7886 4.09313L14.5888 3.22558L13.7099 4.44113ZM6.2904 4.44113C7.30337 3.70872 8.01234 3.19753 8.60953 2.86241C9.18937 2.53703 9.5984 2.41669 10.0001 2.41669V0.916687C9.24932 0.916687 8.58264 1.15746 7.87547 1.5543C7.18565 1.9414 6.3963 2.51355 5.41152 3.22558L6.2904 4.44113ZM14.5888 3.22558C13.604 2.51355 12.8146 1.9414 12.1248 1.5543C11.4176 1.15746 10.7509 0.916687 10.0001 0.916687V2.41669C10.4019 2.41669 10.8109 2.53703 11.3907 2.86241C11.9879 3.19753 12.6969 3.70872 13.7099 4.44113L14.5888 3.22558ZM9.05112 17.5834C7.60947 17.5834 6.59586 17.5821 5.81847 17.4876C5.05984 17.3955 4.62131 17.2237 4.2889 16.9472L3.3297 18.1005C3.97055 18.6335 4.73007 18.8665 5.63761 18.9767C6.52639 19.0846 7.64706 19.0834 9.05112 19.0834V17.5834ZM1.46919 12.7576C1.67466 14.0946 1.83829 15.1692 2.08095 16.0066C2.33016 16.8666 2.68578 17.5649 3.3297 18.1005L4.2889 16.9472C3.95956 16.6733 3.7243 16.2884 3.52168 15.5891C3.3125 14.8673 3.16336 13.9065 2.95179 12.5298L1.46919 12.7576ZM17.0485 12.5298C16.8369 13.9065 16.6878 14.8673 16.4786 15.5891C16.276 16.2884 16.0407 16.6733 15.7114 16.9472L16.6706 18.1005C17.3145 17.5649 17.6701 16.8666 17.9193 16.0066C18.162 15.1692 18.3256 14.0946 18.5311 12.7576L17.0485 12.5298ZM10.9491 19.0834C12.3532 19.0834 13.4739 19.0846 14.3627 18.9767C15.2702 18.8665 16.0297 18.6335 16.6706 18.1005L15.7114 16.9472C15.379 17.2237 14.9404 17.3955 14.1818 17.4876C13.4044 17.5821 12.3908 17.5834 10.9491 17.5834V19.0834ZM18.7819 11.1251C18.9267 10.1833 19.0448 9.42055 19.0755 8.7878C19.107 8.1371 19.0507 7.56162 18.8099 6.99693L17.4301 7.58541C17.5512 7.86926 17.6023 8.19665 17.5772 8.71526C17.5513 9.25182 17.4488 9.9248 17.2993 10.8973L18.7819 11.1251ZM14.9097 5.30868C15.7248 5.898 16.2911 6.30854 16.7033 6.67427C17.1036 7.02939 17.3085 7.30014 17.4301 7.58541L18.8099 6.99693C18.5696 6.43364 18.1921 5.98984 17.6989 5.55225C17.2176 5.12527 16.5795 4.66495 15.7886 4.09313L14.9097 5.30868ZM2.70093 10.8973C2.55148 9.9248 2.44901 9.25182 2.42303 8.71526C2.39793 8.19665 2.44908 7.86926 2.57014 7.58541L1.1904 6.99693C0.949549 7.56162 0.893285 8.1371 0.924789 8.7878C0.955423 9.42055 1.0736 10.1833 1.21833 11.1251L2.70093 10.8973ZM4.21164 4.09313C3.42078 4.66495 2.78265 5.12527 2.30142 5.55225C1.80822 5.98984 1.43065 6.43364 1.1904 6.99693L2.57014 7.58541C2.69181 7.30014 2.89669 7.02939 3.29693 6.67427C3.70915 6.30854 4.27546 5.898 5.09053 5.30868L4.21164 4.09313Z\"\r\n          //     fill=\"#697586\"\r\n          //   />\r\n          // </svg>\r\n          <div class={`icon_svg`} innerHTML={this.leadingIconSvg}></div>\r\n        ) : (\r\n          <p class={`breadcrumb_text text-sm-medium ${this.type} ${this.current ? 'current' : ''}`}>{this.label}</p>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-breadcrumbs/gb-breadcrumbs.css

@@ -2667,6 +2667,12 @@
   align-items: center;
 }
 
+.breadcrumb-item{
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
 .breadcrumbs_div.text_with_line {
   display: inline-flex;
   padding: 0.5rem 0rem;

package/dist/collection/components/gb-breadcrumbs/gb-breadcrumbs.js

@@ -1,59 +1,49 @@
 import { h } from "@stencil/core";
 export class GbBreadcrumbs {
     constructor() {
-        this.firstLink = false;
-        this.secondLink = false;
-        this.thirdLink = false;
-        this.fourthLink = false;
-        this.fifthLink = false;
+        this.type = 'text';
+        this.divider = 'chevron';
+        this.breadcrumbs = [
+        // { label: 'Projects', id: 'projects' },
+        // { label: 'Design System', id: 'design-system' },
+        // { label: 'Buttons', id: 'buttons' },
+        ];
+        this.visibleBreadcrumbs = [];
     }
-    onHomeButtonClicked() { }
-    onLinkClicked(index) {
-        if (index === 0) {
+    componentWillLoad() {
+        this.visibleBreadcrumbs = [...this.breadcrumbs];
+    }
+    handleBreadcrumbClick(clickedId, url) {
+        const index = this.visibleBreadcrumbs.findIndex(b => b.id === clickedId);
+        if (index !== -1) {
+            this.visibleBreadcrumbs = this.visibleBreadcrumbs.slice(0, index + 1);
+            this.breadcrumbClicked.emit({ id: clickedId, url });
+        }
+    }
+    handleHomeClick() {
+        this.visibleBreadcrumbs = [];
+        this.breadcrumbClicked.emit({ id: 'home' });
+    }
+    renderDivider() {
+        return this.divider === 'chevron' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6 4C6 4 10 6.946 10 8C10 9.054 6 12 6 12", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M5.833 18.333L14.167 1.667", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+    resolveType() {
+        switch (this.type) {
+            case 'text':
+            case 'text_with_line':
+                return 'text';
+            case 'button_primary':
+                return 'button_primary';
+            case 'button_gray':
+            case 'button_gray_with_border':
+                return 'button_gray';
+            default:
+                return 'text';
         }
     }
     render() {
-        return (h("div", { key: '461c0b35c52b3835953beb0aa66232e63ee90498', class: `breadcrumbs_div ${this.type}` }, h("div", { key: '2d1ea2610d789db9c7ce788144160b4a3bfc7e9d', class: `tabs ${this.type}` }, h("gb-breadcrumb-button-base", { key: 'b4456582ed39c17ec9fe2c0ce72ac72de98011f3', icon: true, type: this.type === 'text'
-                ? 'text'
-                : this.type === 'text_with_line'
-                    ? 'text'
-                    : this.type === 'button_primary'
-                        ? 'buttton_primary'
-                        : this.type === 'button_gray'
-                            ? 'button_gray'
-                            : this.type === 'button_gray_with_border'
-                                ? 'button_gray'
-                                : null, current: false, onClick: () => this.onHomeButtonClicked() }), this.divider === 'chevron' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M5.83325 18.3334L14.1666 1.66669", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.firstLink && (h("gb-breadcrumb-button-base", { key: '9241ddf30e39a55fc740148e4f79895a09ac1b2b', icon: false, type: this.type === 'text'
-                ? 'text'
-                : this.type === 'text_with_line'
-                    ? 'text'
-                    : this.type === 'button_primary'
-                        ? 'buttton_primary'
-                        : this.type === 'button_gray'
-                            ? 'button_gray'
-                            : this.type === 'button_gray_with_border'
-                                ? 'button_gray'
-                                : null, current: false, label: "Projects" })), this.divider === 'chevron' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M5.83325 18.3334L14.1666 1.66669", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("gb-breadcrumb-button-base", { key: '73e32dfd7b29907f3ee8fdf054398743ec98e3f6', icon: false, type: this.type === 'text'
-                ? 'text'
-                : this.type === 'text_with_line'
-                    ? 'text'
-                    : this.type === 'button_primary'
-                        ? 'buttton_primary'
-                        : this.type === 'button_gray'
-                            ? 'button_gray'
-                            : this.type === 'button_gray_with_border'
-                                ? 'button_gray'
-                                : null, current: false, label: "Projects" }), this.divider === 'chevron' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M5.83325 18.3334L14.1666 1.66669", stroke: "#CDD5DF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("gb-breadcrumb-button-base", { key: '2b77cb1445fda8d5cf8b55aac75d430cb73ce702', icon: false, type: this.type === 'text'
-                ? 'text'
-                : this.type === 'text_with_line'
-                    ? 'text'
-                    : this.type === 'button_primary'
-                        ? 'buttton_primary'
-                        : this.type === 'button_gray'
-                            ? 'button_gray'
-                            : this.type === 'button_gray_with_border'
-                                ? 'button_gray'
-                                : null, current: false, label: "Projects" }))));
+        const btnType = this.resolveType();
+        return (h("div", { key: '6f3dacefa28fde2b7a93b2869d0f8be8da8dc4f9', class: `breadcrumbs_div ${this.type}` }, h("div", { key: '7f6d8dc9ee89a26bd62244b85369c39bb76e25c1', class: `tabs ${this.type}` }, h("gb-breadcrumb-button-base", { key: 'd9f5fc2757009607aa37b4c28885e1ae4f7b7885', icon: true, "icon-src": this.icon, type: btnType, current: this.visibleBreadcrumbs.length === 0, onClick: () => this.handleHomeClick() }), this.visibleBreadcrumbs.map((breadcrumb, index) => (h("div", { class: "breadcrumb-item", key: breadcrumb.id }, this.renderDivider(), h("gb-breadcrumb-button-base", { icon: false, label: breadcrumb.label, type: btnType, current: index === this.visibleBreadcrumbs.length - 1, onClick: () => this.handleBreadcrumbClick(breadcrumb.id, breadcrumb.url) })))))));
     }
     static get is() { return "gb-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -69,25 +59,6 @@ export class GbBreadcrumbs {
     }
     static get properties() {
         return {
-            "divider": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'chevron' | 'slash'",
-                    "resolved": "\"chevron\" | \"slash\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "divider",
-                "reflect": false
-            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -105,54 +76,15 @@ export class GbBreadcrumbs {
                 "getter": false,
                 "setter": false,
                 "attribute": "type",
-                "reflect": false
-            },
-            "firstLink": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "first-link",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "secondLink": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "second-link",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "'text'"
             },
-            "thirdLink": {
-                "type": "boolean",
+            "divider": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'chevron' | 'slash'",
+                    "resolved": "\"chevron\" | \"slash\"",
                     "references": {}
                 },
                 "required": false,
@@ -163,16 +95,16 @@ export class GbBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "third-link",
+                "attribute": "divider",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "'chevron'"
             },
-            "fourthLink": {
-                "type": "boolean",
+            "breadcrumbs": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "{ label: string; id: string; url: string }[]",
+                    "resolved": "{ label: string; id: string; url: string; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -183,36 +115,38 @@ export class GbBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fourth-link",
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "[\r\n    // { label: 'Projects', id: 'projects' },\r\n    // { label: 'Design System', id: 'design-system' },\r\n    // { label: 'Buttons', id: 'buttons' },\r\n  ]"
             },
-            "fifthLink": {
-                "type": "boolean",
+            "icon": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fifth-link",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "icon",
+                "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "visibleBreadcrumbs": {}
+        };
+    }
     static get events() {
         return [{
-                "method": "linkClicked",
-                "name": "linkClicked",
+                "method": "breadcrumbClicked",
+                "name": "breadcrumbClicked",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -221,8 +155,8 @@ export class GbBreadcrumbs {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "{ id: string; url?: string }",
+                    "resolved": "{ id: string; url?: string; }",
                     "references": {}
                 }
             }];