@six-group/ui-library 0.0.0-insider.0014c08

package/dist/collection/components/six-avatar/six-avatar.css

@@ -0,0 +1,85 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/**
+ * @prop --size: The size of the avatar.
+ */
+:host {
+  display: inline-block;
+  --size: 2rem;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  background-color: var(--six-avatar-background-color);
+  font-family: var(--six-font-sans);
+  font-size: calc(var(--size) * 0.5);
+  font-weight: var(--six-font-weight-normal);
+  color: var(--six-avatar-color);
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
+}
+.avatar:hover {
+  box-shadow: var(--six-shadow-medium);
+}
+
+.avatar--circle {
+  border-radius: var(--six-border-radius-circle);
+}
+
+.avatar--rounded {
+  border-radius: var(--six-border-radius-medium);
+}
+
+.avatar--square {
+  border-radius: 0;
+}
+
+.avatar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar__initials {
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.avatar__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/dist/collection/components/six-avatar/six-avatar.js

@@ -0,0 +1,140 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot icon - The default icon to use when no image or initials are present.
+ *
+ * @part base - The component's base wrapper.
+ * @part icon - The container that wraps the avatar icon.
+ * @part initials - The container that wraps the avatar initials.
+ * @part image - The avatar image.
+ */
+export class SixAvatar {
+    constructor() {
+        this.hasError = false;
+        /** The image source to use for the avatar. */
+        this.image = '';
+        /** Alternative text for the image. */
+        this.alt = '';
+        /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+        this.initials = '';
+        /** The shape of the avatar. */
+        this.shape = 'circle';
+        this.handleImageError = () => {
+            this.hasError = true;
+        };
+    }
+    render() {
+        return (h("div", { key: 'c18818d8ee0e4c16ecc7036dee47334eafa8d38d', part: "base", class: {
+                avatar: true,
+                'avatar--circle': this.shape === 'circle',
+                'avatar--rounded': this.shape === 'rounded',
+                'avatar--square': this.shape === 'square',
+            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (h("div", { key: '793124283385b4d78d269217c0f80a303ea3af01', part: "icon", class: "avatar__icon" }, h("slot", { key: '20046d36c15a800783c245fc9bd9f8a0c462cd00', name: "icon" }, h("six-icon", { key: 'e25b68320947163b737d94484d6bd5a43117f6d7' }, "person")))), this.initials && (h("div", { key: '7f9e5c67a482b081116c0038ff248e1fdb9662d1', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { key: '44c10b4d2755543a5e77fc3d6b15e02ba917ef7d', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+    }
+    static get is() { return "six-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "attribute": "image",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image source to use for the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "attribute": "alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "initials": {
+                "type": "string",
+                "attribute": "initials",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initials to use as a fallback when no image is available (1-2 characters max recommended)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "shape": {
+                "type": "string",
+                "attribute": "shape",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square' | 'rounded'",
+                    "resolved": "\"circle\" | \"rounded\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape of the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'circle'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasError": {}
+        };
+    }
+}
+//# sourceMappingURL=six-avatar.js.map

package/dist/collection/components/six-avatar/six-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-avatar.js","sourceRoot":"","sources":["../../../src/components/six-avatar/six-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,SAAS;IALtB;QAMW,aAAQ,GAAG,KAAK,CAAC;QAE1B,8CAA8C;QACtC,UAAK,GAAG,EAAE,CAAC;QAEnB,sCAAsC;QAC9B,QAAG,GAAG,EAAE,CAAC;QAEjB,iGAAiG;QACzF,aAAQ,GAAG,EAAE,CAAC;QAEtB,+BAA+B;QACvB,UAAK,GAAoC,QAAQ,CAAC;QAElD,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;KAoCH;IAlCC,MAAM;QACJ,OAAO,CACL,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC;YAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,CACvB,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;gBACnC,6DAAM,IAAI,EAAC,MAAM;oBACf,4EAA2B,CACtB,CACH,CACP;YAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP;YAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  private handleImageError = () => {\n    this.hasError = true;\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {this.initials === '' && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-badge/six-badge.css

@@ -0,0 +1,112 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+:host {
+  display: inline-flex;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--six-font-family);
+  font-size: var(--six-font-size-x-small);
+  font-weight: var(--six-font-weight-semibold);
+  letter-spacing: var(--six-letter-spacing-normal);
+  line-height: 1;
+  border-radius: var(--six-border-radius-small);
+  white-space: nowrap;
+  padding: 3px 6px;
+  user-select: none;
+  cursor: inherit;
+}
+
+.badge--info {
+  background-color: var(--six-color-web-rock-900);
+  color: var(--six-color-white);
+}
+
+.badge--success {
+  background-color: var(--six-color-success-500);
+  color: var(--six-color-web-rock-900);
+}
+
+.badge--warning {
+  background-color: var(--six-color-warning-700);
+  color: var(--six-color-web-rock-900);
+}
+
+.badge--danger {
+  background-color: var(--six-color-danger-800);
+  color: var(--six-color-white);
+}
+
+.badge--action {
+  background-color: var(--six-color-action-500);
+  color: var(--six-color-white);
+}
+
+.badge--primary {
+  background-color: var(--six-color-clay-50);
+  color: var(--six-color-black);
+}
+
+.badge--pill {
+  border-radius: var(--six-border-radius-pill);
+}
+
+.badge--pulse {
+  animation: pulse 1.5s infinite;
+}
+
+.badge--pulse.badge--info {
+  --pulse-color: var(--six-color-web-rock-900);
+}
+
+.badge--pulse.badge--success {
+  --pulse-color: var(--six-color-success-500);
+}
+
+.badge--pulse.badge--warning {
+  --pulse-color: var(--six-color-warning-700);
+}
+
+.badge--pulse.badge--danger {
+  --pulse-color: var(--six-color-danger-800);
+}
+
+.badge--pulse.badge--action {
+  --pulse-color: var(--six-color-action-500);
+}
+
+.badge--pulse.badge--primary {
+  --pulse-color: var(--six-color-clay-50);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 var(--pulse-color);
+  }
+  70% {
+    box-shadow: 0 0 0 0.5rem transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}

package/dist/collection/components/six-badge/six-badge.js

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The badge's content.
+ *
+ * @part base - The base wrapper
+ */
+export class SixBadge {
+    constructor() {
+        /** The badge's type. */
+        this.type = 'primary';
+        /** Set to true to draw a pill-style badge with rounded edges. */
+        this.pill = false;
+        /** Set to true to make the badge pulsate to draw attention. */
+        this.pulse = false;
+    }
+    render() {
+        return (h("span", { key: '5f279e992f0f009a0a2be5128e21290c0ce9990a', part: "base", class: {
+                badge: true,
+                // Types
+                'badge--primary': this.type === 'primary',
+                'badge--secondary': this.type === 'secondary',
+                'badge--success': this.type === 'success',
+                'badge--warning': this.type === 'warning',
+                'badge--danger': this.type === 'danger',
+                'badge--action': this.type === 'action',
+                'badge--info': this.type === 'info',
+                'badge--pill': this.pill,
+                'badge--pulse': this.pulse,
+            }, role: "status" }, h("slot", { key: '08847cb32936a89c9407d36f9c94e32a35baa1fb' })));
+    }
+    static get is() { return "six-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'",
+                    "resolved": "\"action\" | \"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The badge's type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "pill": {
+                "type": "boolean",
+                "attribute": "pill",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw a pill-style badge with rounded edges."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pulse": {
+                "type": "boolean",
+                "attribute": "pulse",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to make the badge pulsate to draw attention."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-badge.js.map

package/dist/collection/components/six-badge/six-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-badge.js","sourceRoot":"","sources":["../../../src/components/six-badge/six-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;IALrB;QAME,wBAAwB;QAChB,SAAI,GAAmF,SAAS,CAAC;QAEzG,iEAAiE;QACzD,SAAI,GAAG,KAAK,CAAC;QAErB,+DAA+D;QACvD,UAAK,GAAG,KAAK,CAAC;KA0BvB;IAxBC,MAAM;QACJ,OAAO,CACL,6DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBAEX,QAAQ;gBACR,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;gBAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;aAC3B,EACD,IAAI,EAAC,QAAQ;YAEb,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+:host {
+  display: block;
+}
+:host nav {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,109 @@
+import { h } from "@stencil/core";
+/**
+ * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot - One or more breadcrumb items to display.
+ * @slot separator - The separator to use between breadcrumb items. Works best with six-icon.
+ *
+ * @part base - The component's base wrapper.
+ */
+export class SixBreadcrumbs {
+    constructor() {
+        /** Defines an icon as a separator without having to place a slot **/
+        this.separatorIcon = '';
+        this.updateBreadcrumbItems = () => {
+            const items = [...this.host.querySelectorAll('six-breadcrumbs-item')];
+            items.forEach((item, index) => {
+                // Append separators to each item if they don't already have one
+                const separator = item.querySelector('[slot="separator"]');
+                if (separator === null) {
+                    // No separator exists, add one
+                    item.append(this.createSeparatorElement());
+                }
+                else if (separator.hasAttribute('data-default')) {
+                    // A default separator exists, replace it
+                    separator.replaceWith(this.createSeparatorElement());
+                }
+                // The last breadcrumb item is the "current page"
+                if (index === items.length - 1) {
+                    item.setAttribute('aria-current', 'page');
+                }
+                else {
+                    item.removeAttribute('aria-current');
+                }
+            });
+        };
+    }
+    createSeparatorElement() {
+        // Find a custom separator by checking direct children only
+        const customSeparator = this.getCustomSeparator();
+        console.log(customSeparator);
+        if (customSeparator) {
+            const clone = customSeparator.cloneNode(true);
+            clone.removeAttribute('id');
+            clone.setAttribute('data-default', '');
+            clone.slot = 'separator';
+            return clone;
+        }
+        // Create default separator element
+        const span = document.createElement('span');
+        span.innerText = '/';
+        span.slot = 'separator';
+        span.setAttribute('data-default', '');
+        return span;
+    }
+    getCustomSeparator() {
+        var _a;
+        if (Boolean((_a = this.separatorIcon) === null || _a === void 0 ? void 0 : _a.length)) {
+            const sixIcon = document.createElement('six-icon');
+            sixIcon.innerText = this.separatorIcon;
+            sixIcon.setAttribute('size', 'small');
+            return sixIcon;
+        }
+        return Array.from(this.host.children).find((child) => child.getAttribute('slot') === 'separator');
+    }
+    render() {
+        return (h("host", { key: '71fcac983222825168006e795d3c7f8f887f2f66' }, h("nav", { key: '76473724c4e4ca45650a5defcc9a4c8352311345', part: "base" }, h("slot", { key: '6ec1262745d1b9507e6d612d3cf3a22c5e6859cd', onSlotchange: this.updateBreadcrumbItems }))));
+    }
+    static get is() { return "six-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "separatorIcon": {
+                "type": "string",
+                "attribute": "separator-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon as a separator without having to place a slot *"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-breadcrumbs.js.map

package/dist/collection/components/six-breadcrumbs/six-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/six-breadcrumbs/six-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n *\n * @since 5.0\n * @status beta\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with six-icon.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-breadcrumbs',\n  styleUrl: 'six-breadcrumbs.scss',\n  shadow: true,\n})\nexport class SixBreadcrumbs {\n  @Element() host!: HTMLSixBreadcrumbsElement;\n\n  /** Defines an icon as a separator without having to place a slot **/\n  @Prop({ attribute: 'separator-icon', reflect: true }) separatorIcon: string = '';\n\n  private updateBreadcrumbItems = () => {\n    const items = [...this.host.querySelectorAll('six-breadcrumbs-item')] as HTMLSixBreadcrumbsItemElement[];\n\n    items.forEach((item, index) => {\n      // Append separators to each item if they don't already have one\n      const separator = item.querySelector('[slot=\"separator\"]');\n      if (separator === null) {\n        // No separator exists, add one\n        item.append(this.createSeparatorElement());\n      } else if (separator.hasAttribute('data-default')) {\n        // A default separator exists, replace it\n        separator.replaceWith(this.createSeparatorElement());\n      }\n\n      // The last breadcrumb item is the \"current page\"\n      if (index === items.length - 1) {\n        item.setAttribute('aria-current', 'page');\n      } else {\n        item.removeAttribute('aria-current');\n      }\n    });\n  };\n\n  private createSeparatorElement(): HTMLElement {\n    // Find a custom separator by checking direct children only\n    const customSeparator = this.getCustomSeparator();\n    console.log(customSeparator);\n    if (customSeparator) {\n      const clone = customSeparator.cloneNode(true) as HTMLElement;\n      clone.removeAttribute('id');\n      clone.setAttribute('data-default', '');\n      clone.slot = 'separator';\n      return clone;\n    }\n\n    // Create default separator element\n    const span = document.createElement('span');\n    span.innerText = '/';\n    span.slot = 'separator';\n    span.setAttribute('data-default', '');\n    return span;\n  }\n\n  private getCustomSeparator() {\n    if (Boolean(this.separatorIcon?.length)) {\n      const sixIcon = document.createElement('six-icon');\n      sixIcon.innerText = this.separatorIcon;\n      sixIcon.setAttribute('size', 'small');\n      return sixIcon;\n    }\n    return Array.from(this.host.children).find((child) => child.getAttribute('slot') === 'separator');\n  }\n\n  render() {\n    return (\n      <host>\n        <nav part=\"base\">\n          <slot onSlotchange={this.updateBreadcrumbItems} />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-breadcrumbs-item/six-breadcrumbs-item.css

@@ -0,0 +1,61 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/**
+* @prop --separator-color: The color of the separator
+* @prop --last-item-color: The color of the last breadcrumbs item
+*/
+:host {
+  --last-item-color: var(--six-color-web-rock-700);
+  --separator-color: var(--six-color-web-rock-700);
+}
+:host::part(label) {
+  padding: unset;
+}
+:host::part(base) {
+  display: flex;
+  align-items: center;
+}
+:host::part(separator) {
+  align-items: center;
+  user-select: none;
+  -webkit-user-select: none;
+}
+:host six-button::part(label) {
+  padding-left: var(--six-spacing-xx-small);
+  padding-right: var(--six-spacing-xx-small);
+}
+
+:host([read-only]) six-button::part(base) {
+  color: var(--last-item-color);
+}
+
+.breadcrumb-item-readonly {
+  cursor: default;
+}
+
+.breadcrumb-item__separator {
+  display: flex;
+  align-items: center;
+  color: var(--separator-color);
+}
+
+:host(:last-of-type) .breadcrumb-item__separator {
+  display: none;
+}