@zanichelli/albe-web-components 17.0.0-RC4 → 17.0.1

package/dist/collection/components/file-upload/z-file-upload/styles.css

@@ -1,19 +1,18 @@
 :host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   color: var(--color-default-text);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
-:host > .container {
-  display: flex;
-  flex-direction: column;
-}
-
 :host .modal-wrapper {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
   padding: calc(var(--space-unit) * 2);
+  row-gap: calc(var(--space-unit) * 2);
 }
 
 :host .modal-wrapper > .files-wrapper {
@@ -27,15 +26,13 @@
   display: flex;
   flex-direction: column;
   margin: auto;
-}
-
-:host .text-container .body-1 {
   text-align: center;
 }
 
 :host .text-container .upload-link {
-  color: var(--color-link-primary);
+  color: var(--color-text-link-blue);
   cursor: pointer;
+  text-decoration: underline;
 }
 
 :host .text-container .upload-link:focus-visible {
@@ -47,68 +44,37 @@
   margin-bottom: var(--space-unit);
 }
 
-input#file-elem {
+:host input[type="file"] {
   display: none;
 }
 
-#title {
-  display: inline-block;
-  margin: calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);
-  font-size: calc(var(--space-unit) * 3);
-  font-weight: var(--font-sb);
+:host #title + #description {
+  margin-top: var(--space-unit);
 }
 
-:host > .container > z-button {
-  display: inline-block;
+:host > * + z-button,
+:host > .files-container + *,
+:host > .files-container:not(:first-child) {
   margin-top: calc(var(--space-unit) * 3);
 }
 
-:host > .container > .files-container.hidden {
+:host > .files-container.hidden {
   display: none;
 }
 
-:host > .container > .files-container > .heading-4-sb {
-  display: inline-block;
-  margin: calc(var(--space-unit) * 3) 0;
-  font-size: calc(var(--space-unit) * 2);
-  font-weight: var(--font-sb);
+:host > .files-container > .uploaded-files-label {
+  margin-bottom: calc(var(--space-unit) * 2);
 }
 
-:host([type="dragdrop"]) > .container > .files-container > .heading-4-sb {
-  margin-top: 0;
-  margin-bottom: calc(var(--space-unit) * 3);
-}
-
-:host > .container > .files-container > .files-wrapper {
+:host > .files-container > .files-wrapper {
   display: flex;
   flex-wrap: wrap;
   column-gap: calc(var(--space-unit) * 2);
   row-gap: calc(var(--space-unit) * 2);
 }
 
-:host > .container > .files-container > z-divider {
-  margin-top: calc(var(--space-unit) * 3);
-  margin-bottom: 0;
-}
-
-:host([type="dragdrop"]) > .container > .files-container > z-divider {
-  margin: calc(var(--space-unit) * 3) 0;
-}
-
-:host .error-message {
-  font-size: 14px;
-  font-weight: 400;
-  letter-spacing: 0.16%;
-  line-height: 20px;
-  text-align: left;
-}
-
-:host .error-message > .file-name {
-  font-weight: 600;
-}
-
 /* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   :host > .container > z-button {
     align-self: flex-start;
   }
@@ -118,7 +84,7 @@ input#file-elem {
   }
 }
 
-@media only screen and (min-width: 1152px) {
+@media (min-width: 1152px) {
   :host .modal-wrapper {
     padding: calc(var(--space-unit) * 4);
   }

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

@@ -18,7 +18,7 @@ export class ZList {
         this.setChildrenSizeType();
     }
     render() {
-        return (h(Host, { key: 'd86dda3805c91b702759474eddf037e5e6cce570' }, h("slot", { key: '10162e99e8c06b05fb33bea9a68d7ca5b5b711fa' })));
+        return (h(Host, { key: '566e607d30100064c22bd292fce144f2d6105b5e' }, h("slot", { key: '43da8ff297f1610dbaa8cb67c9c498de90b7fa1e' })));
     }
     static get is() { return "z-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/z-list-element/index.js

@@ -115,7 +115,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: '629f94ca0b1a1433059770113493efdd5d95934b', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.htmlTabindex }, h("div", { key: '9ada9980fca4dca5887463f045406ff3f1d6ae70', class: "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '6b3ae24d0d15e8820657bc3ff75415af64cfa13c', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'b4f432cd071a2ade6267e6e7f21ee7a845f1b07f', color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: 'f6dd19e9069d3a997b632111b4f5591da82ab5af', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.htmlTabindex }, h("div", { key: '98bff5c0bd43f0063d0f42a18c17da4845090f28', class: "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'c33f1e05a2e73d8f53b89d2b5a55c4dc8b946dd6', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '143400cd7da18698207481174e55d9897ddd6327', color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/z-list-element/styles.css

@@ -4,8 +4,8 @@
 
 :host > .container {
   --background-color-list-element: var(--color-surface01);
-  --background-hover-color-list-element: var(--color-surface02);
-  --background-active-color-list-element: var(--color-surface02);
+  --background-hover-color-list-element: var(--color-background);
+  --background-active-color-list-element: var(--color-background);
 
   display: flex;
   box-sizing: border-box;

package/dist/collection/components/list/z-list-group/index.js

@@ -25,10 +25,10 @@ export class ZListGroup {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: 'c3eafdcb7c37f753577b21edcaa2eff222e88a36', role: "group" }, h("div", { key: 'a2be88ed0eff401b1d17349a26255c7b6621d406', class: {
+        return (h(Host, { key: 'a4e30022d776b3480bc6f143a7c55644730a0e74', role: "group" }, h("div", { key: '3061f0130f4f66d558f0da519ea723718bb67bad', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader,
-            } }, h("slot", { key: 'be997f1ade9f660b053f146c27e72ac748ac0c84', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '27594df46343bd33cf937d4842ba3cd8c4d1bee0', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'f1add18058f79d6f50ec5e78e2080e39bb4bc69c' })));
+            } }, h("slot", { key: 'b2d8f666e049b4d0c5ee11fbdd09dc474a1f6f1c', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: 'a66c2ca968963e6e55dc305ea35ecf8002fbb4b4', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '126bfa9566cc4f15f7dc89b3e811a84924a2908c' })));
     }
     static get is() { return "z-list-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-td/index.js

@@ -29,7 +29,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'c96cf294eb95aced8d590b86aab1ca5480f557b4', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'a11209b080873ab385f1dbd0d1e82c328483d4da', class: "cell--content" }, h("slot", { key: '15c2db2d84a1d164e849a4e4b0ab4074b465be2b' }), this.showMenu && (h("div", { key: 'e7b55b57dea2f10c0a00a1bfa1af205db14ca392', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'f22b017419929e9d3589a405f389715ccc549150', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '03511331c070e5ccc6875e5483112c5a09a5b60f', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '64e8b88b6c327df0a836028c16bd3249f8c906cb', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'f7de551489427a62939270e957e45f4dbfd2e276', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'c3bab70a1017dcf030e0a57d36da2a46472b6d94', class: "cell--content" }, h("slot", { key: 'bab52a837654d4d72d34a04a6fac360f46d00485' }), this.showMenu && (h("div", { key: '657f551215f6b9c6cdcc0a5c3727dc1270fa5fe5', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '42b96474d307462bf80defd4014e94dc479fde65', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '02c317216820acbc543100ca4368a2f441eaae9f', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b765e4b58ed69fe10a8337e929b0dc156cfce650', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-th/index.js

@@ -50,7 +50,7 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '5ea086aa83da4bdc245d82f50ec7a186fcce54a7', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'a08e8debed6426e8eafc004f1814138e380c5643', class: "cell--content" }, h("slot", { key: '11df8e88b9e461f4dc9f88c24f523f547a68915c' }), this.showSorting && (h("button", { key: '7f3d8359643bab1c059a91c560ad78da5ffb2ec4', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '0c64ba36dec7525af81baa06b86edf877e20d747', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '88256cc6195d18f59b9b2bfb7272d1f95647c780', class: "cell--menu-container" }, h("z-button", { key: '9f69efcfabbc7e0324ae57d13b8c5efc33a61161', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'de589ec650b5c43f21722f010cdc2dc4ac2ac5b7', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'f840e0e36d3ea8f751c3c598e62ab4783422b51b', name: "contextual-menu" })))))));
+        return (h(Host, { key: '29d00b9cca980ef969f1e5437497fb8d3813fcc0', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'e1aa40618413575fedcc7e627280669e064054f8', class: "cell--content" }, h("slot", { key: '842da5d5c6c500e8706203ed07a0dd243d26b42c' }), this.showSorting && (h("button", { key: 'ef2473dc91e989eb398a667c8a73bb7579082258', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '17c11e9ada49d94c13173380fafeaff4deae1ec9', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'db09ba4db62162a09966b0554d80bcc4f1e254a8', class: "cell--menu-container" }, h("z-button", { key: 'fb3027cdca8658a2616a5612b02641f8a5dafeb0', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '25c3d7bd294a9384e606220930073e530db7c0ae', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '95be7b90aee8feb2904a982fe59355e461df9c46', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-th/styles.css

@@ -73,7 +73,7 @@
 :host {
   z-index: 1;
   padding: 0;
-  background-color: var(--color-surface02);
+  background-color: var(--color-background);
   font-weight: var(--font-sb);
 }
 

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

@@ -36,7 +36,7 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '7602276238afd3af11a9c726342c74bbbfac85d0', expandable: this.expandable }, h("div", { key: '4e3828976db3f5544e5e7cd06e7b202cea4d057b', class: "table", role: "table" }, h("slot", { key: '3ef322ee93aad5a10b0124c37cf0ec705887de78' }))));
+        return (h(Host, { key: '8cc330079f36a6c9112ef15dd5bb66f7c0e07db5', expandable: this.expandable }, h("div", { key: '5b9783130bb30d5e0dc3e62c132b043900cb746f', class: "table", role: "table" }, h("slot", { key: 'e339c4892e8c433fb79e054ac47e45c8a6ac40e5' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tbody/index.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: 'a7208d0d031f76bfa40ffe4de23ea9041c6ea831', role: "rowgroup" }, h("slot", { key: '4b1a52cb57149602312c46ccf556105dd05dd6e5' })));
+        return (h(Host, { key: 'b704110bd5823c470d18953bc24db09da7c66e8a', role: "rowgroup" }, h("slot", { key: 'd71e881ccc992ac2a8e97efa8617d33c63ae1003' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tfoot/index.js

@@ -8,7 +8,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '5fa9603626d56fd5d7fc85ab116f4951c0ab01a9', role: "rowgroup" }, h("slot", { key: 'd47ca57a00753b01cbfecbd1d562bb0c1b6e0124' })));
+        return (h(Host, { key: '86efe92f23250e482ef7e9c0b646d28f294214c6', role: "rowgroup" }, h("slot", { key: '07ff4d3ad791419325d865160a229b228d9f0626' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-thead/index.js

@@ -8,7 +8,7 @@ export class ZThead {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '3d8fc0d5ebe1a7459f3af8773b6fed710521ddbb', role: "rowgroup" }, h("slot", { key: '7ac6ee2f4bd099f45f805a79471bf10f900665bb' })));
+        return (h(Host, { key: 'ef0a3c17f7163b6bdb0d43d21cb1ac6607f53e7c', role: "rowgroup" }, h("slot", { key: '80b4a406f26e0c637972e663d99707431d39e9a4' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-thead/styles.css

@@ -4,7 +4,7 @@
   ); /* Needed to handle the border of the expand button cell */
 
   --z-table--cells-background: var(
-    --color-surface02
+    --color-background
   ); /* Needed to handle the background-color of the expand button cell */
 
   display: block;

package/dist/collection/components/table/z-tr/index.js

@@ -43,7 +43,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '05feb412d364f3867c154b3f128edf3ccb4dbd90', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '48d1b43a7dcd498c19d6f810c3544a23a7015c83', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '2e5a9face06dfea67620ef006b1334fba6de1da3', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '2ba713fd43eda1b30443e32832694e4514b617d3', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c4d343123c734c1b65a96306d8b82079f264d43e', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '467c0a01f3c28851b85d47bd178e6555cbb3f57f', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'ff2c7ecbc7775ee60951a3df3e7ecf67a6d77362', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'fe1297aafa51d66acd09794bf47333079bc90604', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '517ffd66223d3ca7dc093aaa730455a02e6a61fd', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'cead9ff3b1da3cf20982bdc87413414925264c40', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/styles.css

@@ -52,7 +52,7 @@
 
 :host([expanded]) .z-tr--expand-button-container,
 :host([expanded]) ::slotted(*) {
-  background-color: var(--color-surface02);
+  background-color: var(--color-background);
 }
 
 .z-tr--expand-button-container {

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

@@ -47,7 +47,7 @@ export class ZAccordion {
         this.toggled.emit(this.open);
     }
     render() {
-        return (h("details", { key: 'bdb34b510290856b328024c34925a8e8a285e23b', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'd7862cd9cd5abf01183a92d32b55754a898e509c', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '0aa26079e890fa7d7f35a5ef72ea8a9e96106add', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'dcb7dd37f3c48c3382dc9e406f94d21548b73a59', class: "z-accordion-label" }, this.label), h("span", { key: '844e5038b3e2f27e07da27ea127ea4489f054cd7', class: "z-accordion-tags" }, h("slot", { key: 'a707878a05c60a291bb0c6b98f8fb6e2764907ca', name: "tag" })), h("z-icon", { key: '87f9b836228e0c20609cb9bc66f611524607fa33', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '447f38b44ded34136bbefbe6daf66e441474265b', class: "z-accordion-content", part: "content" }, h("slot", { key: '8ee4b2b66675d7e46af1ae6ac885fda7da5543da' })))));
+        return (h("details", { key: '91b7f482ab659db2ce2c194d6c0e000a474b8fbc', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'dec93f741b0bf720f2e3ca27d80721924f7e96c0', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '8943eca3e953b29025e17c15b9092538d2246442', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '2e6ba1c7a24fc12e07b159004f09d43e8f7938ae', class: "z-accordion-label" }, this.label), h("span", { key: '165e5f2d9ca85454017ca9a93e672c9a31aa0951', class: "z-accordion-tags" }, h("slot", { key: '5793cda10680845f990c279e8f4987b93a5d3b95', name: "tag" })), h("z-icon", { key: 'e2fd79cf10045f11006eb6a5a996dba0b85fdc08', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '98aff9373f60e83162ac5e13c92041c97f24803a', class: "z-accordion-content", part: "content" }, h("slot", { key: 'd663ae67768932cbdfce8b3e01d6d9ad5f37c41d' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ summary {
 
   position: relative;
   display: flex;
-  height: var(--summary-height);
+  min-height: var(--summary-height);
   align-items: center;
   padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)
     var(--z-accordion-left-padding);
@@ -55,6 +55,11 @@ summary {
   list-style: none;
 }
 
+/* remove marker on safari */
+summary::-webkit-details-marker {
+  display: none;
+}
+
 :host([size="x-small"]) summary {
   --summary-height: var(--summary-x-small-height);
 }

package/dist/collection/components/z-anchor-navigation/index.js

@@ -49,7 +49,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '7022df46f8b97eef80971668910dc2624edd02df', collapsed: this.collapsed }, h("z-button", { key: 'acebe8662731ead75868d8f2589fa37ac26445b4', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '9d3150d70950eeba65f98dfff8a7f2d4d5783dc4', ref: (el) => (this.nav = el) }, h("slot", { key: '54a8897822b0cbe57440cf3c273540c7f7f6c7fb' }))));
+        return (h(Host, { key: '13b73e5270d20ed2fe6993c36bcc67b462e906c6', collapsed: this.collapsed }, h("z-button", { key: 'e30c82721fc47924bcea1d16d0df1809ce8bf9e5', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '2947b460bbaa7df8d2a8a9a50c51d1b4aa9230d4', ref: (el) => (this.nav = el) }, h("slot", { key: '9db93583f854c9a6ca57da4d7efeebca6c88836e' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-anchor-navigation/styles.css

@@ -24,6 +24,7 @@ z-anchor-navigation nav a {
   color: inherit;
   font-weight: inherit;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   overflow-clip-margin: content-box;
   text-decoration: none;
 }
@@ -37,6 +38,7 @@ z-anchor-navigation nav * a:not(:only-child) {
     display: inline-block;
     overflow: hidden;
     -webkit-line-clamp: none;
+    line-clamp: none;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -44,7 +46,7 @@ z-anchor-navigation nav * a:not(:only-child) {
 
 z-anchor-navigation nav > * {
   position: relative;
-  border-left: var(--border-size-large) solid var(--color-surface04);
+  border-left: var(--border-size-large) solid var(--color-surface05);
   color: var(--color-default-text);
   font-family: var(--font-family-sans);
   transition:
@@ -55,7 +57,7 @@ z-anchor-navigation nav > * {
 
 z-anchor-navigation nav > [data-current] {
   border-left-color: var(--color-primary01);
-  color: var(--color-link-primary);
+  color: var(--color-text-link-blue);
   font-weight: var(--font-sb);
 }
 
@@ -103,9 +105,9 @@ z-anchor-navigation nav button {
     }
 
     z-anchor-navigation nav > *:hover {
-      border-left-color: var(--color-hover-secondary);
+      border-left-color: var(--color-hover-primary);
       background-color: var(--color-hover-surface);
-      color: var(--color-hover-link);
+      color: var(--color-text-link-blue-hover);
     }
   }
 

package/dist/collection/components/z-app-header/index.js

@@ -256,7 +256,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'c19943da97955f6e4e1b4a8c4a47cbf6d62d7dd6', "menu-length": this.menuLength }, h("div", { key: 'e080e096da6b08fdcf083ff33b0ed7be9bf8c83e', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '8e2d6d90db4764386d766efa112774faea3d76f1', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'b4b93b27a1baec5aade00cc0c72cab5502443fc3', class: "top-subtitle" }, h("slot", { key: '22a97c618281366a9fdb862e05140f6c4a441e5c', name: "top-subtitle" }))), h("div", { key: '9857df2d3944570cafc79b22435d115f057399ce', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '897395e322b582a570daf7c356800950bbb6c41f', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '2081537e455662759e603252997d0385bbfb3597', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '41f6ab1d91e9951e4ef82d84eb1d8a102fa73ecd', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '62d610a6b00b79004b4f0879a2f2d680ad939e6f', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: '5b7118a2f2aceeb8dd523f3514d5e3279ffa5b65', "menu-length": this.menuLength }, h("div", { key: '2d0b9f769636f8119febbc88cb85194d4dc86fea', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '29c5d63484289d6edaaf4f0d28b382efea5e58a3', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '4e30176102f7197af4bbeb015b46c4b3ce3045c8', class: "top-subtitle" }, h("slot", { key: '190f26a229b6dc2030fadead848dde3c706cf930', name: "top-subtitle" }))), h("div", { key: '3ac5b57fb62edf2a0a69e373a454529c16610d0b', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '759ef8df1d93f911a11f3e39dcc90da0b62d0573', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '4d742d71fa66f39098ffbf68a18dcd7daba26774', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'deb19086d893eeaceacd512803a62780679220e5', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'b08ab1c973b3ee270c8c89c79f9a0be0d6d45dca', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-aria-alert/index.js

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: 'd499971646bd67f039efe11fce7f6662de50006c', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '009efbe303e1a5ab3434e6b0a98e7bef1705ccbe' })));
+        return (h(Host, { key: 'dc1e0e9c0c7647c5a31dca6356c6ab016b2a07cf', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '3b1bcd618c4f1b45e2ae7e717a3c7e223d4faec6' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

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

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '8e88834e461e837323d45fa67043d8c34426cd83', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '77ef834dbf6ba1e73562dea4e1011196d8decee4', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '72e6843ab2f556bf7df177581155f447dae5d8db' }, this.text.substring(0, 2)), this.image && (h("img", { key: '7f8db000d814873364f4df585e1f6813e4373747', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '41eab447479aa532c45f39aae303d7388928aedf' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'e6ebedad5e2bf6c73107b174dad478ba0dd4c9d2', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -193,10 +193,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: '541f493c93ddcdd7c7df9184e467bfb1f7def53d', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'c7a56dbddef89e934a255921d4aacd645974f1b7', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '3d0996a611fe483de9a015c3ac5b25b06d5e302c', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '8c45a561fcdebb6c7685010dc7105b6c756025e1', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'a1f4c39fa8afd87d307746b66a942a1f2029cb1a' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '5cbdbcb8a14a471ae6dbad1d5d7eeb4ca3c8482b' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,7 +52,7 @@ button:focus {
 }
 
 a {
-  color: var(--color-link-primary);
+  color: var(--color-text-link-blue);
   white-space: nowrap;
 }
 
@@ -85,7 +85,7 @@ z-icon {
   --z-icon-height: 16px;
 
   display: block;
-  fill: var(--color-link-primary);
+  fill: var(--color-text-link-blue);
 }
 
 z-icon.separator {
@@ -97,7 +97,7 @@ z-icon.separator {
 
 button.dots {
   display: inline-block;
-  color: var(--color-link-primary);
+  color: var(--color-text-link-blue);
   cursor: pointer;
 }
 
@@ -113,7 +113,7 @@ button.dots {
 }
 
 .hidden-paths-popover {
-  --z-popover-theme--surface: var(--color-surface02);
+  --z-popover-theme--surface: var(--color-background);
   --z-popover-padding: 0;
 }
 

package/dist/collection/components/z-button-sort/index.js

@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '6a27bbc29c4feedda219d3c48351e98e5424fc35', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '415ed91622a75e04dae5df0112d892f14015af61', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '58bd9c2614021ee41fcd4f0f27ef3fa41771c7b8', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '66689c59c79cf1d6ad15640d424fbb3ac14edde2', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'c6638b7e129f261bbcc9a7c79f02080accb6eed6', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '6f2fdeea8f8d8c233d6b06ce6a77a550ca003c43', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '2b73a9480490742c954d9f9319a035092e857313', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'ffabdef711dfc8489d816c34fd7c52254ac8c89f', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '7086a8caa5146d54b93affa0d901dbb60248d64b', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '17d0cce1ca76cc916bf8ff2af67570b755d5a12d', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,11 +9,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '7dd8f9f2d4c632559d1e9b3b04e2d139d3cdd1ce', class: {
+        return (h("div", { key: 'fcd35190df7a13ddacf41430d0b47ab6484110a9', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'af4721aa7ef2e3c8381685bb2eadd19a35effc81', name: this.icon }), h("slot", { key: '521b4fc72980f48dec8ee49c6fc3c06df3c9bf9a' }), this.interactiveIcon && (h("button", { key: '15cb6244073a9402ee3cb147f74cf3763b2a02cd', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a7c434efafd9891a5262dffa24136724acc0f791', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'd9eb68585be8533bb44ba769b34fa8a7163e17fc', name: this.icon }), h("slot", { key: '7ae9a9993086e2dc0489806bbc79bae8b0db20f7' }), this.interactiveIcon && (h("button", { key: 'e02544ca3661c6527a915bfdaa6578c64d284b6f', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '844d3269ee9f2c0206a4aec3554a4b6581351f10', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -251,7 +251,7 @@ export class ZCombobox {
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '66f1ab362f8b85bbea1887f0b20408704983b505', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '69b13355a675561cb0748a743e7509f8b944615e', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@
   padding: 0 calc(var(--space-unit) * 1.5);
   border: var(--border-size-small) solid var(--color-surface04);
   margin: 0;
-  background-color: var(--color-input-field01);
+  background-color: var(--color-form-background);
   border-radius: var(--border-radius-small);
   cursor: pointer;
 }
@@ -103,7 +103,7 @@
   padding: var(--space-unit) calc(var(--space-unit) * 2);
   border: var(--border-size-small) solid var(--gray200);
   border-top: 0;
-  background-color: var(--color-input-field01);
+  background-color: var(--color-form-background);
   border-radius: 0;
 }
 

package/dist/collection/components/z-cover-hero/index.js

@@ -35,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: 'b10d16e5490c00d087ec8677e5453a989aca05cd' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '15c2c9a401700c3503e74f74637c2cbf3b474805' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'c920eda8a79cd4b7f70f3cdc7e3690b57a117bd9', class: "main-container" }, h("div", { key: '4b74fde8b3d196a772489f381e46ef5690f1d9cf', class: "cover-container" }, h("slot", { key: '4a67176c23dd62d34bc69a0c236bf9adc3b5088c', name: "cover" })), h("slot", { key: 'e71151ae06cc7c30436af153d6192fc2faf4f6ba', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '269c88ee41679ea7730c202f4ca927a1868c5506', class: "main-container" }, h("div", { key: '67b039d0ba87fdb8a3520035104d9c6263ca5dc1', class: "cover-container" }, h("slot", { key: '3c330cafa143f57e9b4d6615d966c4d62cedd9c8', name: "cover" })), h("slot", { key: 'c092503e4d24f52535182e570edb67428d7a8aa9', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

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

@@ -7,7 +7,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '59e2f811ae879f15bfacb97769a2d43cf68b40a5', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '78cfa2818529a8e9b9895a0a3d98df31850534dd', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '597d6715119bb24d4a8427f9cb3ebd3b5a20f5fc' });
+        return h(Host, { key: '8824327c1d3ba1c9b13dfdfd605c58dd7cd71b55' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-ghost-loading/styles.css

@@ -3,7 +3,7 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
-  background: var(--color-surface02);
+  background: var(--color-background);
   border-radius: var(--border-radius);
   transform: translate3d(0, 0, 0);
 }
@@ -15,9 +15,9 @@
   animation: progress 1.6s ease-in-out infinite;
   background-image: linear-gradient(
     90deg,
-    var(--color-surface02) 0%,
+    var(--color-background) 0%,
     var(--color-surface03) 95%,
-    var(--color-surface02) 100%
+    var(--color-background) 100%
   );
   content: "";
   filter: blur(6px);

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

@@ -15,7 +15,7 @@ export class ZIcon {
         return h("polygon", { points: ICONS[this.name] });
     }
     render() {
-        return (h(Host, { key: 'ecf203cc477b9a08475f233b3ea8fcbf47e6da8f', "aria-hidden": "true" }, h("svg", { key: 'fac769701df8bb25a2f38d59474810543e97f81f', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
+        return (h(Host, { key: 'a87a4f2ec632fbdbb7a6b4bfacee294f53eb0991', "aria-hidden": "true" }, h("svg", { key: '2c0453105f9f3493a86f49e8425d2e885d2f3d09', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-box/index.js

@@ -11,7 +11,7 @@ export class ZInfoBox {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '770d8904081080758219f87d24f5a56846f1fad1', id: this.boxid }, h("slot", { key: 'a6fa079647709fc3c8326c2d73cdd1da884c4b58', name: "content" }), this.isclosable && (h("z-icon", { key: '63de143e010971175608c651d2d2f0c87ee98797', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: 'bff4d7fdd01fae2697f23b03515d9cb93a53127d', id: this.boxid }, h("slot", { key: 'a2d80c39c0cc7c115974a4d5da52c2189ab830c9', name: "content" }), this.isclosable && (h("z-icon", { key: '555579d0bf7c1e654055fe4c552c4e89af0fb513', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }