@zanichelli/albe-web-components 7.3.7 → 7.4.0

package/dist/cjs/z-table.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-2dfdb7e2.js');
-const breakpoints = require('./breakpoints-88c4fd6c.js');
+const index$1 = require('./index-b7c319f2.js');
+const breakpoints = require('./breakpoints-ebe1a437.js');
 
 const stylesCss = "z-table{display:block;width:100%;background-color:var(--color-white);font-family:var(--dashboard-font);font-weight:var(--font-rg);overflow-x:auto}z-table>div.table{display:table;width:100%;border-collapse:separate}z-table>div.table-bordered>z-table-body>z-table-row>z-table-cell:not(:last-child),z-table>div.table-bordered>z-table-head>z-table-header-row>z-table-header:not(:last-child){border-right:var(--border-size-small) solid var(--bg-grey-200)}z-table>div>z-table-body>z-table-row[expandable]>z-table-cell:first-child,z-table>div>z-table-head>z-table-header-row[expandable]>z-table-header:first-child{border-right:none}z-table>div>z-table-body>z-table-row[expanded]>z-table-cell{background-color:var(--gray50)}z-table>div>z-table-body>z-table-row[expanded]+z-table-expanded-row{border-bottom:1px solid var(--gray200)}z-table>div.table-column-sticky>z-table-body>z-table-row>z-table-cell:first-child,z-table>div.table-column-sticky>z-table-head>z-table-header-row>z-table-header:first-child{position:sticky;z-index:1;left:0;box-shadow:1px 0 4px -1px rgb(66 69 72 / 40%)}z-table>div.table-header-sticky>z-table-head>z-table-header-row>z-table-header{position:sticky;z-index:2;top:0;box-shadow:0 2px 3px -3px rgb(66 69 72 / 40%)}z-table>div.table-header-sticky>z-table-head>z-table-header-row>z-table-header:first-child,z-table>div.table-column-sticky>z-table-head>z-table-header-row>z-table-header:first-child{z-index:5}z-table-body{width:auto;background-color:var(--color-white)}z-table-empty-box{display:flex;flex-direction:column;flex-grow:1;border-bottom:var(--border-size-small) solid var(--bg-grey-200)}z-table-empty-box.bordered{border-left:var(--border-size-small) solid var(--bg-grey-200)}.error-message{margin-top:calc(var(--space-unit) * 2)}.table-content{display:flex;width:100%;flex-direction:row}.error-content{display:flex;padding:calc(var(--space-unit) * 3);font-family:var(--dashboard-font)}.error-content>img{width:244px;height:188px;margin-right:calc(var(--space-unit) * 3)}@media only screen and (max-width: 768px){z-table>div.table-empty{display:none}.error-content{display:flex;flex-direction:column}.error-content>img{width:auto;height:auto}.text{padding:calc(var(--space-unit) * 3) 0}}";
 

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-2dfdb7e2.js');
+const index$1 = require('./index-b7c319f2.js');
 
 const stylesCss = ":host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position=\"bottom-centre\"]),:host([position=\"bottom-right\"]),:host([position=\"bottom-left\"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"top-left\"]),:host([position=\"top-right\"]),:host([position=\"top-centre\"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position=\"top-centre\"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position=\"top-left\"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position=\"top-right\"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position=\"bottom-centre\"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position=\"bottom-right\"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"bottom-left\"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
 

package/dist/cjs/z-toast-notification.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-2dfdb7e2.js');
-const breakpoints = require('./breakpoints-88c4fd6c.js');
+const index$1 = require('./index-b7c319f2.js');
+const breakpoints = require('./breakpoints-ebe1a437.js');
 const hammer = require('./hammer-4f20813e.js');
 require('./_commonjsHelpers-537d719a.js');
 

package/dist/cjs/z-toggle-switch.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-b447f1da.js');
-const index$1 = require('./index-2dfdb7e2.js');
-require('./breakpoints-88c4fd6c.js');
+const utils = require('./utils-38f8555a.js');
+const index$1 = require('./index-b7c319f2.js');
+require('./breakpoints-ebe1a437.js');
 
 const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-text01);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
 

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-2dfdb7e2.js');
+const index$1 = require('./index-b7c319f2.js');
 
 const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
 

package/dist/collection/beans/index.js

@@ -201,6 +201,7 @@ export var Device;
   Device["MOBILE"] = "mobile";
   Device["TABLET"] = "tablet";
   Device["DESKTOP"] = "desktop";
+  Device["DESKTOP_WIDE"] = "desktop-wide";
 })(Device || (Device = {}));
 export var PocketStatus;
 (function (PocketStatus) {
@@ -323,3 +324,13 @@ export var CarouselProgressMode;
   CarouselProgressMode["DOTS"] = "dots";
   CarouselProgressMode["NUMBERS"] = "numbers";
 })(CarouselProgressMode || (CarouselProgressMode = {}));
+export var BreadcrumbPathStyle;
+(function (BreadcrumbPathStyle) {
+  BreadcrumbPathStyle["SEMIBOLD"] = "semibold";
+  BreadcrumbPathStyle["UNDERLINED"] = "underlined";
+})(BreadcrumbPathStyle || (BreadcrumbPathStyle = {}));
+export var BreadcrumbHomepageVariant;
+(function (BreadcrumbHomepageVariant) {
+  BreadcrumbHomepageVariant["TEXT"] = "text";
+  BreadcrumbHomepageVariant["ICON"] = "icon";
+})(BreadcrumbHomepageVariant || (BreadcrumbHomepageVariant = {}));

package/dist/collection/collection-manifest.json

@@ -41,6 +41,7 @@
     "./components/z-anchor-navigation/index.js",
     "./components/z-aria-alert/index.js",
     "./components/z-avatar/index.js",
+    "./components/z-breadcrumb/index.js",
     "./components/z-card/index.js",
     "./components/z-carousel/index.js",
     "./components/z-contextual-menu/index.js",

package/dist/collection/components/buttons/z-chip/index.js

@@ -14,7 +14,7 @@ export class ZChip {
     this.interactiveIconClick.emit();
   }
   getIconSize() {
-    return getDevice() !== Device.DESKTOP ? 22 : 14;
+    return getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE ? 22 : 14;
   }
   render() {
     if (this.interactiveIcon) {

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -47,7 +47,7 @@ export class ZFileUpload {
     return this.files;
   }
   getType() {
-    if (getDevice() !== Device.DESKTOP) {
+    if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {
       return ZFileUploadType.DEFAULT;
     }
     return this.type;

package/dist/collection/components/z-breadcrumb/index.js

@@ -0,0 +1,421 @@
+import { h, Host } from "@stencil/core";
+import { BreadcrumbHomepageVariant, BreadcrumbPathStyle, Device, KeyboardCode, ListDividerType, ListSize, PopoverPosition, } from "../../beans";
+import { getDevice, handleKeyboardSubmit } from "../../utils/utils";
+export class ZBreadcrumb {
+  constructor() {
+    /** [optional] Sets the path style */
+    this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
+    /** [optional] Variant of first node */
+    this.homepageVariant = BreadcrumbHomepageVariant.ICON;
+    /** [optional] Sets max number of element to show */
+    this.maxNodesToShow = 5;
+    /** [optional] Controls the behaviour on <a> tag click/enter */
+    this.preventFollowUrl = false;
+    /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
+    this.overflowMenuItemRows = 0;
+    /** [optional] Sets the maximun number of chars per single node */
+    this.truncateChar = 30;
+    /** Detect whether the length of the nodes shown exceeds the container length */
+    this.hasOverflow = false;
+    this.popoverEllipsisOpen = false;
+    this.collapsedElements = [];
+    this.currentIndex = 0;
+    this.truncatePosition = null;
+  }
+  handleResize() {
+    this.viewPortWidth = getDevice();
+    if (this.viewPortWidth !== Device.MOBILE &&
+      this.wrapElement &&
+      this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+      this.hasOverflow = true;
+    }
+  }
+  // eslint-disable-next-line lines-between-class-members
+  handlePropChange() {
+    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+  }
+  handleResizeUp(newValue, oldValue) {
+    if (newValue === Device.MOBILE ||
+      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||
+      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||
+      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||
+      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||
+      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||
+      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)) {
+      this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+    }
+  }
+  componentWillLoad() {
+    this.viewPortWidth = getDevice();
+    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+  }
+  componentWillRender() {
+    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {
+      this.checkEllipsisOrOverflowMenu();
+      this.hasOverflow = false;
+    }
+  }
+  componentDidRender() {
+    if (this.collapsedElementsRef) {
+      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"));
+    }
+    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+      this.hasOverflow = true;
+    }
+  }
+  initializeBreadcrumb(isMobile) {
+    if (isMobile) {
+      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);
+    }
+    else {
+      this.pathsList = this.getPathsItemsList();
+    }
+    this.totalLenght = this.pathsList.length;
+    this.homepageNode = this.pathsList.shift();
+    this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));
+    this.collapsedElements = [];
+    if (this.totalLenght > this.maxNodesToShow) {
+      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);
+    }
+  }
+  checkEllipsisOrOverflowMenu() {
+    if (this.pathListCopy.length > 0) {
+      for (let i = 0; i < this.pathsList.length; i++) {
+        if (this.pathsList[i].text.length > this.truncateChar) {
+          if (this.truncatePosition !== null) {
+            if (this.truncatePosition > 0) {
+              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);
+              arrayToPush.forEach((item) => {
+                this.collapsedElements.push(item);
+              });
+              this.pathsList.splice(0, this.truncatePosition);
+              this.truncatePosition = 0;
+              return;
+            }
+            if (this.truncatePosition === 0) {
+              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);
+              this.collapsedElements.push(...arrayToPush);
+              this.pathsList.splice(0, this.truncatePosition + 1);
+              this.truncatePosition = null;
+              return;
+            }
+          }
+          if (i !== this.pathsList.length - 1) {
+            const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
+            this.currentEllipsisText = this.pathsList[i].text;
+            this.pathsList[i].text = truncatedString;
+            this.pathsList[i].hasTooltip = true;
+            this.truncatePosition = i;
+            return;
+          }
+        }
+      }
+    }
+  }
+  truncateWithEllipsis(str, length) {
+    const ending = "&mldr;";
+    if (str.length > length) {
+      return str.substring(0, length - 1) + ending;
+    }
+    return str;
+  }
+  getPathsItemsList() {
+    if (!this.paths) {
+      return Array.from(this.hostElement.children).map((item) => {
+        return {
+          text: item.textContent,
+          path: item.href,
+          hasTooltip: false,
+        };
+      });
+    }
+    const ret = typeof this.paths === "string" ? JSON.parse(this.paths) : this.paths;
+    return ret.map((item) => {
+      return Object.assign(Object.assign({}, item), { hasTooltip: false });
+    });
+  }
+  renderMobileBreadcrumb() {
+    const lastPath = this.pathsList[this.pathsList.length - 1];
+    return (h("nav", { "aria-label": "Breadcrumb", class: {
+        underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+        semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+      } }, h("ol", null, this.renderNode(lastPath, true))));
+  }
+  renderHomepageNode(item) {
+    return (h("li", null, h("a", { class: {
+        "homepage-icon": this.homepageVariant === BreadcrumbHomepageVariant.ICON,
+        "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
+      }, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
+  }
+  renderNode(item, mobile) {
+    return (h("li", null, item.hasTooltip && (h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: PopoverPosition.BOTTOM, closable: false, showArrow: true }, h("span", { class: "tooltip-content" }, this.currentEllipsisText))), h("a", { class: {
+        "missing-path": !item.path,
+        "text-ellipsis": mobile,
+      }, ref: (val) => (this.triggerEllipsis = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
+        if (item.hasTooltip) {
+          this.popoverEllipsisOpen = true;
+        }
+      }, onMouseLeave: () => {
+        if (item.hasTooltip) {
+          this.popoverEllipsisOpen = false;
+        }
+      }, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon> ${item.text}` : item.text })));
+  }
+  renderBreadcrumb() {
+    return (h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+        semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+      } }, h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
+  }
+  togglePopover() {
+    if (!this.collapsedElementsRef.open) {
+      this.collapsedElementsRef.open = true;
+    }
+  }
+  handlePreventFollowUrl(e, item) {
+    if (this.preventFollowUrl) {
+      e.preventDefault();
+      this.clickOnNode.emit(item.path);
+    }
+  }
+  handleOverflowMenuAccessibility(e) {
+    const anchorElementsLenght = this.anchorElements.length;
+    if (e.key === KeyboardCode.TAB) {
+      e.preventDefault();
+      return;
+    }
+    e.stopPropagation();
+    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+    if (arrows.includes(e.key)) {
+      e.preventDefault();
+      if (e.key === KeyboardCode.ARROW_DOWN) {
+        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;
+      }
+      if (e.key === KeyboardCode.ARROW_UP) {
+        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;
+      }
+      this.anchorElements[this.currentIndex].focus();
+    }
+    if (e.key === KeyboardCode.ESC) {
+      this.triggerButton.focus();
+    }
+  }
+  renderOverflowMenu() {
+    if (this.collapsedElements.length) {
+      return (h("li", null, h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, h("div", { class: "popover-content" }, h("z-list", null, h("z-list-group", { dividerType: ListDividerType.ELEMENT, size: ListSize.SMALL }, this.collapsedElements.map((item) => (h("z-list-element", { clickable: true }, h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)))))))), h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
+          this.togglePopover();
+        }, onKeyDown: (e) => {
+          handleKeyboardSubmit(e, this.togglePopover.bind(this));
+          setTimeout(() => {
+            this.anchorElements[0].focus();
+          }, 100);
+        } }, "...")));
+    }
+  }
+  render() {
+    return (h(Host, { style: { "--line-clamp": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
+  }
+  static get is() { return "z-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "paths": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbPath[] | string",
+          "resolved": "BreadcrumbPath[] | string",
+          "references": {
+            "BreadcrumbPath": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Path elements, the first of which is the home path"
+        },
+        "attribute": "paths",
+        "reflect": false
+      },
+      "pathStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbPathStyle",
+          "resolved": "BreadcrumbPathStyle.SEMIBOLD | BreadcrumbPathStyle.UNDERLINED",
+          "references": {
+            "BreadcrumbPathStyle": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the path style"
+        },
+        "attribute": "path-style",
+        "reflect": true,
+        "defaultValue": "BreadcrumbPathStyle.UNDERLINED"
+      },
+      "homepageVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbHomepageVariant",
+          "resolved": "BreadcrumbHomepageVariant.ICON | BreadcrumbHomepageVariant.TEXT",
+          "references": {
+            "BreadcrumbHomepageVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Variant of first node"
+        },
+        "attribute": "homepage-variant",
+        "reflect": false,
+        "defaultValue": "BreadcrumbHomepageVariant.ICON"
+      },
+      "maxNodesToShow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets max number of element to show"
+        },
+        "attribute": "max-nodes-to-show",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "preventFollowUrl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Controls the behaviour on <a> tag click/enter"
+        },
+        "attribute": "prevent-follow-url",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "overflowMenuItemRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets max number of row for each path inside the popover. Zero equals unlimited"
+        },
+        "attribute": "overflow-menu-item-rows",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "truncateChar": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the maximun number of chars per single node"
+        },
+        "attribute": "truncate-char",
+        "reflect": false,
+        "defaultValue": "30"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "viewPortWidth": {},
+      "hasOverflow": {},
+      "popoverEllipsisOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickOnNode",
+        "name": "clickOnNode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when preventFollowUrl=true to handle custom page transition"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "paths",
+        "methodName": "handlePropChange"
+      }, {
+        "propName": "maxNodesToShow",
+        "methodName": "handlePropChange"
+      }, {
+        "propName": "viewPortWidth",
+        "methodName": "handleResizeUp"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/z-breadcrumb/styles.css

@@ -0,0 +1,139 @@
+/* stylelint-disable value-no-vendor-prefix */
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+
+  --line-clamp-popover: 0;
+  --line-clamp-mobile: 1;
+}
+
+button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: transparent;
+}
+
+nav {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  padding-left: calc(var(--space-unit) / 2);
+  overflow-x: hidden;
+}
+
+li {
+  display: flex;
+  align-items: baseline;
+}
+
+:host a:focus,
+:host button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: 0;
+}
+
+:host a {
+  color: var(--color-link-primary);
+  font-size: var(--font-size-2);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+:host a.homepage-icon {
+  display: list-item;
+}
+
+:host a.homepage-text {
+  display: initial;
+}
+
+:host a.missing-path {
+  color: var(--color-text01);
+}
+
+:host a.text-ellipsis {
+  display: -webkit-box !important;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp-mobile);
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+:host ol {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+:host ol > li:not(:last-child) {
+  margin-right: var(--space-unit);
+}
+
+nav.underlined > ol > li a:not(.missing-path),
+nav.underlined > ol > li button {
+  text-decoration: underline;
+}
+
+nav.semibold > ol > li a:not(.missing-path),
+nav.semibold > ol > li button {
+  font-weight: var(--font-sb);
+}
+
+:host z-icon {
+  margin-right: var(--space-unit);
+
+  --z-icon-width: 12px;
+  --z-icon-height: 12px;
+}
+
+:host button.dots {
+  display: inline-block;
+  color: var(--color-link-primary);
+  cursor: pointer;
+}
+
+:host .popover-content {
+  max-width: 302px;
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  text-align: left;
+}
+
+:host .popover-content a {
+  font-weight: var(--font-rg);
+  text-decoration: none;
+}
+
+:host .hidden-paths-popover {
+  --z-popover-theme--surface: var(--color-surface02);
+  --z-popover-padding: 0;
+}
+
+:host .full-path-tooltip {
+  --z-popover-theme--surface: var(--color-surface05);
+  --z-popover-theme--text: var(--color-text-inverse);
+  --z-popover-padding: 0;
+}
+
+:host .tooltip-content {
+  padding: 0 var(--space-unit);
+  font-size: var(--font-size-2);
+}
+
+@media (min-width: 768px) {
+  /* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/#accessibilityfeatures */
+  :host ol > li + li::before {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    flex: 1;
+    color: var(--color-disabled03);
+    content: "\203A";
+  }
+
+  :host a.text-ellipsis {
+    -webkit-line-clamp: var(--line-clamp-popover);
+  }
+}