npm - @zanichelli/albe-web-components - Versions diffs - 17.3.0-RC1 → 18.0.0 - Mend

@zanichelli/albe-web-components 17.3.0-RC1 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (884) hide show

package/dist/components/index22.js CHANGED Viewed

@@ -67,7 +67,7 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '6a28a6c1a23b7fae91b1ee322d673d80665c2a6c', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4d37b2f7a28fe88c7888a705222282cf014cd1d2', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '036b98c0d90631b37cf5c426fe553197da275726', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: '9adbd986895c18f769ebc896633bbe1d42427f77', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '0d164029f870838c077c0381ba208aacee23141d', class: "canvas-background", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: 'f889426238828e62470d8b53c6b3b22674d73f10', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'ed70f931bc4dfea3b4bc2ecb10b93e77dea4f472', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '18c85e7580d55bffe7c305e4ba7cad479292a1ba', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: '56fae4e49e00f58e9b9e49057402892bd829091c', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '535fafa5a9de38e1eda00fa63c7c293d12e944e2', class: "canvas-background", onClick: () => (this.open = false) }))));
     }
     static get watchers() { return {
         "variant": ["handlePageOverflow"],

package/dist/components/index23.js CHANGED Viewed

@@ -302,7 +302,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
         this.onOpen();
     }
     render() {
-        return h("slot", { key: 'ea2b46de2cec89ebd692407e0ddb51e47d552e73' });
+        return h("slot", { key: '62910aea1c0986c47106fdb7cfc9ac4368c14b9d' });
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/index24.js CHANGED Viewed

@@ -300,7 +300,7 @@ const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTM
         return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
     }
     render() {
-        return (h(Host, { key: 'a11654e9aef41aaad341948caf9f91557dbd41b4', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '02519620881c7c709560c6817920f76460fab575', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '1995f6d5694bd6cd0f485636e531113bfdc69aad', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '48929d88c0dfe3f84d9f24d4df7f0270f57099b1', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/index25.js CHANGED Viewed

@@ -12,9 +12,9 @@ const ZTag = /*@__PURE__*/ proxyCustomElement(class ZTag extends HTMLElement {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: '531b3069d9339b05377f89c350a5ed6becaf9dbd', class: {
+        return (h(Host, { key: 'b1b99d8aa0ded75daaed090aa8fa490899e3b04e', class: {
                 expandable: this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { key: '5abaf6a26667e26e6a11661c49c18d8677a2a130', name: this.icon }), h("div", { key: 'a52c9c030320f2c0687bd896c33dd75ffc497ad2' }, h("slot", { key: 'ff3046c07a2fb70478adb354079d8d26834746ce' }))));
+            } }, this.icon && h("z-icon", { key: 'b3f8b50efc5f7132515416a428ab3d10cf1329b9', name: this.icon }), h("div", { key: 'edf761fbadd249b2d50ad420a60bdec3ab296840' }, h("slot", { key: '932dd3ed45783430641d41f319482f27b9db2907' }))));
     }
     static get style() { return ZTagStyle0; }
 }, [6, "z-tag", {

package/dist/components/index3.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const stylesCss = ":host{display:block;box-sizing:border-box;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);line-height:calc(var(--space-unit) * 2)}:host>div{padding:calc(var(--space-unit) * 2)}:host>.success{background:var(--color-success-inverse);fill:var(--color-success01)}:host>.warning{background:var(--color-warning-inverse);fill:var(--color-warning01)}:host>.error{background:var(--color-error-inverse);fill:var(--color-error01)}";
+const stylesCss = ":host{display:block;box-sizing:border-box;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);line-height:calc(var(--space-unit) * 2)}:host>div{padding:calc(var(--space-unit) * 2)}:host>.success{background:var(--color-inverse-success);fill:var(--color-default-success)}:host>.warning{background:var(--color-inverse-warning);fill:var(--color-default-warning)}:host>.error{background:var(--color-inverse-error);fill:var(--color-default-error)}";
 const ZAlertStyle0 = stylesCss;
 const ZAlert = /*@__PURE__*/ proxyCustomElement(class ZAlert extends HTMLElement {
@@ -11,7 +11,7 @@ const ZAlert = /*@__PURE__*/ proxyCustomElement(class ZAlert extends HTMLElement
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '5fd2b297a4ab7e426d50f8ef36d5729df579786f', class: this.type }, h("slot", { key: 'cd24f83bcb38d4bbbce5f3b115aa18e217c402b2' })));
+        return (h("div", { key: '55596466792df93c7d818670c79db5263d9f1867', class: this.type }, h("slot", { key: '13e0a7a98e22672e462aace35a6b818463a7a17d' })));
     }
     static get style() { return ZAlertStyle0; }
 }, [1, "z-alert", {

package/dist/components/index3.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index3.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~geAAge~~,CAAC;~~AACnf~~,qBAAe,SAAS;;MCWX,MAAM;;;;;;;IAKjB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,IACnB,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/snowflakes/myz/z-alert/styles.css?tag=z-alert&encapsulation=shadow","src/snowflakes/myz/z-alert/index.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-rg);\n line-height: calc(var(--space-unit) * 2);\n}\n\n:host > div {\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > .success {\n background: var(--color-success~~-inverse~~);\n fill: var(--color-~~success01~~);\n}\n\n:host > .warning {\n background: var(--color-warning~~-inverse~~);\n fill: var(--color-~~warning01~~);\n}\n\n:host > .error {\n background: var(--color-error~~-inverse~~);\n fill: var(--color-~~error01~~);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../beans/index\";\n\n/*\n @slot - alert content\n /\n\n@Component({\n tag: \"z-alert\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAlert {\n /* alert variant type */\n @Prop()\n type: AlertType;\n\n render(): HTMLDivElement {\n return (\n <div class={this.type}>\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index3.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kfAAkf,CAAC;AACrgB,qBAAe,SAAS;;MCWX,MAAM;;;;;;;IAKjB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,IACnB,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/snowflakes/myz/z-alert/styles.css?tag=z-alert&encapsulation=shadow","src/snowflakes/myz/z-alert/index.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-rg);\n line-height: calc(var(--space-unit) * 2);\n}\n\n:host > div {\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > .success {\n background: var(--color-inverse-success);\n fill: var(--color-default-success);\n}\n\n:host > .warning {\n background: var(--color-inverse-warning);\n fill: var(--color-default-warning);\n}\n\n:host > .error {\n background: var(--color-inverse-error);\n fill: var(--color-default-error);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../beans/index\";\n\n/*\n @slot - alert content\n /\n\n@Component({\n tag: \"z-alert\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAlert {\n /* alert variant type */\n @Prop()\n type: AlertType;\n\n render(): HTMLDivElement {\n return (\n <div class={this.type}>\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/index5.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { w as ZChipType } from './index2.js';
 import { d as defineCustomElement$1 } from './index9.js';
-const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-text);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-default-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
+const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
 const ZChipStyle0 = stylesCss;
 const ZChip = /*@__PURE__*/ proxyCustomElement(class ZChip extends HTMLElement {
@@ -17,11 +17,11 @@ const ZChip = /*@__PURE__*/ proxyCustomElement(class ZChip extends HTMLElement {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: 'fcd35190df7a13ddacf41430d0b47ab6484110a9', class: {
+        return (h("div", { key: '1bc99f432f17f5eb2233310ac9909cc0ace7dda3', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "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 })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '9c77fb017180343a3b6961d1214d0ed1be1f43cd', name: this.icon }), h("slot", { key: '9ab62efb04412491b4ca1a0bb59bc95a898fea43' }), this.interactiveIcon && (h("button", { key: 'e1999e99ff5e31019aa06d7087286e8be0081cae', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '7d2445d7957b94f7959e3a0d0f47985daa170711', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     get el() { return this; }
     static get style() { return ZChipStyle0; }

package/dist/components/index5.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index5.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,~~6qFAA6qF,~~CAAC;~~AAChsF~~,oBAAe,SAAS;;MCQX,KAAK;;;;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ,IAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DAAQ,EACP,IAAI,CAAC,eAAe,KACnB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n display: inline-flex;\n min-height: 28px;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--~~gray400~~);\n background-color: var(--color-surface01);\n border-radius: 14px;\n color: var(--color-default-text);\n fill: var(--color-default-~~text~~);\n font-family: var(--font-family-sans);\n font-size: 14px;\n line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n padding: 0;\n border: none;\n margin-left: var(--space-unit);\n background-color: transparent;\n cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container~~:not([aria-disabled]):hover~~ ~~> z-icon:first-child {\n fill: var(--color-default-icon);\n}\n\n:host >~~ .~~z-chip-container .~~interactive-icon {\n fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n color: var(--color-disabled03);\n cursor: auto;\n fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n border-radius: 100%;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n color: var(--color-primary01);\n fill: var(--color-primary01);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n --z-icon-width: 22px;\n --z-icon-height: 22px;\n}\n\n/* :host type /\n:host > .z-chip-container.default {\n min-height: 44px;\n border-radius: 22px;\n line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n min-height: 40px;\n border-radius: 22px;\n line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n min-height: 36px;\n border-radius: 22px;\n line-height: 36px;\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n :host > .z-chip-container {\n font-size: 12px;\n }\n\n / :host type /\n :host > .z-chip-container.default {\n min-height: 32px;\n border-radius: 16px;\n line-height: 32px;\n }\n\n :host > .z-chip-container.medium {\n min-height: 28px;\n border-radius: 16px;\n line-height: 28px;\n }\n\n :host > .z-chip-container.small {\n min-height: 24px;\n border-radius: 16px;\n line-height: 24px;\n }\n\n :host > .z-chip-container > z-icon,\n :host > .z-chip-container .interactive-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n }\n}\n","import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n tag: \"z-chip\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZChip {\n @Element() el: HTMLZChipElement;\n\n /* Non interactive icon /\n @Prop()\n icon?: string;\n\n /* z-chip size type, can be default, medium or small /\n @Prop({reflect: true})\n type?: ZChipType = ZChipType.DEFAULT;\n\n /* z-chip interactive icon /\n @Prop({reflect: true})\n interactiveIcon?: string;\n\n /* set z-chip as disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* z-chip aria-label string /\n @Prop()\n ariaLabel = \"\";\n\n /* click on interactive icon */\n @Event()\n interactiveIconClick: EventEmitter;\n\n render(): HTMLDivElement {\n return (\n <div\n class={{\n \"z-chip-container\": true,\n \"z-chip-interactive\": !!this.interactiveIcon,\n [this.type]: true,\n }}\n aria-disabled={this.disabled}\n >\n {this.icon && <z-icon name={this.icon} />}\n <slot />\n {this.interactiveIcon && (\n <button\n type=\"button\"\n onClick={() => this.interactiveIconClick.emit()}\n aria-label={this.ariaLabel}\n disabled={this.disabled}\n >\n <z-icon\n class=\"interactive-icon\"\n name={this.interactiveIcon}\n />\n </button>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index5.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,+jFAA+jF,CAAC;AACllF,oBAAe,SAAS;;MCQX,KAAK;;;;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ,IAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DAAQ,EACP,IAAI,CAAC,eAAe,KACnB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n display: inline-flex;\n min-height: 28px;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: 14px;\n color: var(--color-default-text);\n fill: var(--color-default-icon);\n font-family: var(--font-family-sans);\n font-size: 14px;\n line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n padding: 0;\n border: none;\n margin-left: var(--space-unit);\n background-color: transparent;\n cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container .interactive-icon {\n fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n color: var(--color-disabled03);\n cursor: auto;\n fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n border-radius: 100%;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n color: var(--color-primary01);\n fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n --z-icon-width: 22px;\n --z-icon-height: 22px;\n}\n\n/* :host type /\n:host > .z-chip-container.default {\n min-height: 44px;\n border-radius: 22px;\n line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n min-height: 40px;\n border-radius: 22px;\n line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n min-height: 36px;\n border-radius: 22px;\n line-height: 36px;\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n :host > .z-chip-container {\n font-size: 12px;\n }\n\n / :host type /\n :host > .z-chip-container.default {\n min-height: 32px;\n border-radius: 16px;\n line-height: 32px;\n }\n\n :host > .z-chip-container.medium {\n min-height: 28px;\n border-radius: 16px;\n line-height: 28px;\n }\n\n :host > .z-chip-container.small {\n min-height: 24px;\n border-radius: 16px;\n line-height: 24px;\n }\n\n :host > .z-chip-container > z-icon,\n :host > .z-chip-container .interactive-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n }\n}\n","import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n tag: \"z-chip\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZChip {\n @Element() el: HTMLZChipElement;\n\n /* Non interactive icon /\n @Prop()\n icon?: string;\n\n /* z-chip size type, can be default, medium or small /\n @Prop({reflect: true})\n type?: ZChipType = ZChipType.DEFAULT;\n\n /* z-chip interactive icon /\n @Prop({reflect: true})\n interactiveIcon?: string;\n\n /* set z-chip as disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* z-chip aria-label string /\n @Prop()\n ariaLabel = \"\";\n\n /* click on interactive icon */\n @Event()\n interactiveIconClick: EventEmitter;\n\n render(): HTMLDivElement {\n return (\n <div\n class={{\n \"z-chip-container\": true,\n \"z-chip-interactive\": !!this.interactiveIcon,\n [this.type]: true,\n }}\n aria-disabled={this.disabled}\n >\n {this.icon && <z-icon name={this.icon} />}\n <slot />\n {this.interactiveIcon && (\n <button\n type=\"button\"\n onClick={() => this.interactiveIconClick.emit()}\n aria-label={this.ariaLabel}\n disabled={this.disabled}\n >\n <z-icon\n class=\"interactive-icon\"\n name={this.interactiveIcon}\n />\n </button>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/index6.js CHANGED Viewed

@@ -13,7 +13,7 @@ const ZDivider = /*@__PURE__*/ proxyCustomElement(class ZDivider extends HTMLEle
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '78cfa2818529a8e9b9895a0a3d98df31850534dd', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '436edbe3dc08f9a9b103838920c4bd0186fd48b7', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get style() { return ZDividerStyle0; }
 }, [2, "z-divider", {

package/dist/components/index7.js CHANGED Viewed

@@ -22,12 +22,12 @@ const ZDragdropArea = /*@__PURE__*/ proxyCustomElement(class ZDragdropArea exten
         }
     }
     render() {
-        return (h(Host, { key: '5dd259e74cca7c7fa1278d9cdc11062efaaf34b2', class: { dragover: this.dragging }, onDragOver: (e) => {
+        return (h(Host, { key: '0eb0d28959364ac3b19ca8c6a94cb77db64e115b', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
                 this.dragging = true;
             }, onDragLeave: () => {
                 this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '2c8607ad99edd4ad3a59b9b2511222b4fced829d', class: "dragover-container" }, h("z-button", { key: '8cc6efce06a0df6d5473d2a6e1920e1e38952906' }, this.dragAndDropLabel)), h("slot", { key: '969e228a60b69c7eed7f287c3a5b35b8e82bbe07' })));
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: 'bb895b08caa22db625f55387eaf0c67aaee713af', class: "dragover-container" }, h("z-button", { key: '74d2f37fc52de09dd02736289cd0c0270b63e240' }, this.dragAndDropLabel)), h("slot", { key: 'f024c13f0b408ec6f6431e9b6e6c5b73c674b1ca' })));
     }
     static get style() { return ZDragdropAreaStyle0; }
 }, [1, "z-dragdrop-area", {

package/dist/components/index8.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const stylesCss = ":host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-background);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\n    90deg,\n    var(--color-background) 0%,\n    var(--color-surface03) 95%,\n    var(--color-background) 100%\n  );content:\"\";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
+const stylesCss = ":host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-surface02);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );content:\"\";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
 const ZGhostLoadingStyle0 = stylesCss;
 const ZGhostLoading = /*@__PURE__*/ proxyCustomElement(class ZGhostLoading extends HTMLElement {
@@ -10,7 +10,7 @@ const ZGhostLoading = /*@__PURE__*/ proxyCustomElement(class ZGhostLoading exten
         this.__attachShadow();
     }
     render() {
-        return h(Host, { key: '8824327c1d3ba1c9b13dfdfd605c58dd7cd71b55' });
+        return h(Host, { key: '3bb2943f271b8c4ba5ac15a19c49d25ff1431611' });
     }
     static get style() { return ZGhostLoadingStyle0; }
 }, [1, "z-ghost-loading"]);

package/dist/components/index8.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index8.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~ihBAAihB~~,CAAC;~~AACpiB~~,4BAAe,SAAS;;MCKX,aAAa;;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n background: var(--color-~~background~~);\n border-radius: var(--border-radius);\n transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n display: block;\n width: 100%;\n height: 100%;\n animation: progress 1.6s ease-in-out infinite;\n background-image: linear-gradient(\n 90deg,\n var(--color-~~background~~) 0%,\n var(--color-surface03) 95%,\n var(--color-~~background~~) 100%\n );\n content: \"\";\n filter: blur(6px);\n}\n\n@keyframes progress {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(100%);\n }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"],"version":3}
1	+ {"file":"index8.js","mappings":";;AAAA,MAAM,SAAS,GAAG,8gBAA8gB,CAAC;AACjiB,4BAAe,SAAS;;MCKX,aAAa;;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n background: var(--color-surface02);\n border-radius: var(--border-radius);\n transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n display: block;\n width: 100%;\n height: 100%;\n animation: progress 1.6s ease-in-out infinite;\n background-image: linear-gradient(\n 90deg,\n var(--color-surface02) 0%,\n var(--color-surface03) 95%,\n var(--color-surface02) 100%\n );\n content: \"\";\n filter: blur(6px);\n}\n\n@keyframes progress {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(100%);\n }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"],"version":3}

package/dist/components/index9.js CHANGED Viewed

@@ -22,7 +22,7 @@ const ZIcon = /*@__PURE__*/ proxyCustomElement(class ZIcon extends HTMLElement {
         return h("polygon", { points: ICONS[this.name] });
     }
     render() {
-        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]))));
+        return (h(Host, { key: 'fdf876a0af1632805ab24af1c593ef5bff78271a', "aria-hidden": "true" }, h("svg", { key: 'fc339ba7c96345b920c370f8476be850332c3eed', 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 style() { return ZIconStyle0; }
 }, [1, "z-icon", {

package/dist/components/z-accordion.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { e as ControlSize, $ as AccordionVariant } from './index2.js';
+import { e as ControlSize, _ as AccordionVariant } from './index2.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface03);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant=\"background\"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight][variant=\"background\"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant=\"background\"]:not([open])) summary::before,:host([highlight][variant=\"background\"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
+const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant=\"background\"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight][variant=\"background\"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant=\"background\"]:not([open])) summary::before,:host([highlight][variant=\"background\"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
 const ZAccordionStyle0 = stylesCss;
 const ZAccordion$1 = /*@__PURE__*/ proxyCustomElement(class ZAccordion extends HTMLElement {
@@ -40,7 +40,7 @@ const ZAccordion$1 = /*@__PURE__*/ proxyCustomElement(class ZAccordion extends H
         this.toggled.emit(this.open);
     }
     render() {
-        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' })))));
+        return (h("details", { key: 'd1318774dc57fc255b5b12a0370e47bb5fdbca31', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'fd895d877d016eb2b8024dbe9230033d3fec3532', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '85c12e219895050623788822f080f6b4389dab64', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '4b2e6d5e241f464ba9e38797ace01f5e233b040a', class: "z-accordion-label" }, this.label), h("span", { key: '048c71dcc1a4dc1ad87e5b6d3d48c1725dc21844', class: "z-accordion-tags" }, h("slot", { key: '15655230f848df138b22260344078d5de885b3d8', name: "tag" })), h("z-icon", { key: '72abc36244ec43949db45a453b45f33b1f7d37a4', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '7bd1d01b388515b177992086d34466473e594e4d', class: "z-accordion-content", part: "content" }, h("slot", { key: '98f86ed93a3f3056047794ff6e4c12dfc44aec3f' })))));
     }
     static get watchers() { return {
         "isDisabled": ["onDisabledChange"]

package/dist/components/z-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-accordion.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,w7LAAw7L,CAAC;AAC38L,yBAAe,SAAS;;MCuBXA,YAAU;;;;;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;KACF;;;;;;IASO,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,gEACE,GAAG,EAAE,CAAC,GAAuB,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,EACrC,IAAI,EAAC,SAAS,IAEb,IAAI,CAAC,IAAI,KACR,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,EACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,6DAAM,KAAK,EAAC,kBAAkB,IAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd,EACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAC/C,CACM,EACT,CAAC,IAAI,CAAC,UAAU,KACf,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,IAEd,8DAAQ,CACJ,CACP,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZAccordion"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host ,\n:host ::slotted() {\n box-sizing: border-box;\n}\n\n:host {\n --z-accordion-highlight-color: transparent;\n --z-accordion-bg: var(--color-surface01);\n --z-accordion-label-color: var(--color-default-text);\n --z-accordion-disabled-label-color: var(--color-text03);\n --z-accordion-content-bg: var(--color-surface01);\n --z-accordion-content-fg: var(--color-default-text);\n --z-accordion-hover-color: var(--color-surface03);\n --z-accordion-left-padding: calc(var(--space-unit) * 2);\n --z-accordion-right-padding: var(--space-unit);\n --z-accordion-label-font-weight: var(--font-sb);\n\n display: block;\n border-top: var(--border-size-small) solid var(--color-surface03);\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n border: var(--border-size-small) solid var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n box-shadow: var(--shadow-2);\n}\n\ndetails {\n background-color: transparent;\n}\n\nsummary {\n --summary-x-small-height: 32px;\n --summary-small-height: 36px;\n --summary-big-height: 44px;\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n\n position: relative;\n display: flex;\n min-height: var(--summary-height);\n align-items: center;\n padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n var(--z-accordion-left-padding);\n background-color: var(--z-accordion-bg);\n column-gap: var(--space-unit);\n cursor: pointer;\n list-style: none;\n}\n\n/* remove marker on safari /\nsummary::-webkit-details-marker {\n display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n padding-right: calc(var(--space-unit) 2);\n\n /* border-radius of the accordion - width of the accordion's border /\n border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n cursor: default;\n}\n\nsummary:focus:focus-visible {\n background-color: var(--z-accordion-hover-color);\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: var(--space-unit);\n height: 100%;\n content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n / border-radius of the accordion - width of the accordion's border /\n border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n / border-radius of the accordion - width of the accordion's border /\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n color: var(--z-accordion-label-color);\n font-size: var(--font-size-3); / for \"small\" and \"big\" sizes /\n font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n display: flex;\n align-items: center;\n column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n margin-left: auto;\n}\n\n.z-accordion-content {\n position: relative;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) 2) calc(var(--space-unit) * 2);\n background-color: var(--z-accordion-content-bg);\n color: var(--z-accordion-content-fg);\n font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes /\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n padding-right: calc(var(--space-unit) 2);\n}\n\n:host([is-disabled]) .z-accordion-label {\n color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n summary:focus:focus-visible {\n /* prevents the focus shadow to be covered by the background of an hovered sibling accordion /\n position: relative;\n z-index: 1;\n }\n\n :host(:not([is-disabled])) summary:hover {\n background-color: var(--z-accordion-hover-color);\n }\n\n :host(:not([is-disabled])) summary:hover .z-accordion-label {\n text-decoration: underline;\n }\n}\n\n/ force \"big\" variant on touch devices /\n@media (hover: none) {\n :host([size]) summary {\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n }\n\n :host([size]) .z-accordion-label {\n font-size: var(--font-size-3);\n }\n\n :host([size]) .z-accordion-content {\n font-size: var(--font-size-2);\n }\n\n :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n }\n}\n\n/ Style for sibling accordions in a stack context /\n\nz-accordion + z-accordion {\n border-top: none;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"] {\n border-radius: 0;\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type {\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]::part(summary) {\n border-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary) {\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n","import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-accordion.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,w7LAAw7L,CAAC;AAC38L,yBAAe,SAAS;;MCuBXA,YAAU;;;;;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;KACF;;;;;;IASO,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,gEACE,GAAG,EAAE,CAAC,GAAuB,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,EACrC,IAAI,EAAC,SAAS,IAEb,IAAI,CAAC,IAAI,KACR,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,EACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,6DAAM,KAAK,EAAC,kBAAkB,IAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd,EACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAC/C,CACM,EACT,CAAC,IAAI,CAAC,UAAU,KACf,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,IAEd,8DAAQ,CACJ,CACP,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZAccordion"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host ,\n:host ::slotted() {\n box-sizing: border-box;\n}\n\n:host {\n --z-accordion-highlight-color: transparent;\n --z-accordion-bg: var(--color-surface01);\n --z-accordion-label-color: var(--color-default-text);\n --z-accordion-disabled-label-color: var(--color-text03);\n --z-accordion-content-bg: var(--color-surface01);\n --z-accordion-content-fg: var(--color-default-text);\n --z-accordion-hover-color: var(--color-surface02);\n --z-accordion-left-padding: calc(var(--space-unit) * 2);\n --z-accordion-right-padding: var(--space-unit);\n --z-accordion-label-font-weight: var(--font-sb);\n\n display: block;\n border-top: var(--border-size-small) solid var(--color-surface03);\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n border: var(--border-size-small) solid var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n box-shadow: var(--shadow-2);\n}\n\ndetails {\n background-color: transparent;\n}\n\nsummary {\n --summary-x-small-height: 32px;\n --summary-small-height: 36px;\n --summary-big-height: 44px;\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n\n position: relative;\n display: flex;\n min-height: var(--summary-height);\n align-items: center;\n padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n var(--z-accordion-left-padding);\n background-color: var(--z-accordion-bg);\n column-gap: var(--space-unit);\n cursor: pointer;\n list-style: none;\n}\n\n/* remove marker on safari /\nsummary::-webkit-details-marker {\n display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n padding-right: calc(var(--space-unit) 2);\n\n /* border-radius of the accordion - width of the accordion's border /\n border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n cursor: default;\n}\n\nsummary:focus:focus-visible {\n background-color: var(--z-accordion-hover-color);\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: var(--space-unit);\n height: 100%;\n content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n / border-radius of the accordion - width of the accordion's border /\n border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n / border-radius of the accordion - width of the accordion's border /\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n color: var(--z-accordion-label-color);\n font-size: var(--font-size-3); / for \"small\" and \"big\" sizes /\n font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n display: flex;\n align-items: center;\n column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n margin-left: auto;\n}\n\n.z-accordion-content {\n position: relative;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) 2) calc(var(--space-unit) * 2);\n background-color: var(--z-accordion-content-bg);\n color: var(--z-accordion-content-fg);\n font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes /\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n padding-right: calc(var(--space-unit) 2);\n}\n\n:host([is-disabled]) .z-accordion-label {\n color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n summary:focus:focus-visible {\n /* prevents the focus shadow to be covered by the background of an hovered sibling accordion /\n position: relative;\n z-index: 1;\n }\n\n :host(:not([is-disabled])) summary:hover {\n background-color: var(--z-accordion-hover-color);\n }\n\n :host(:not([is-disabled])) summary:hover .z-accordion-label {\n text-decoration: underline;\n }\n}\n\n/ force \"big\" variant on touch devices /\n@media (hover: none) {\n :host([size]) summary {\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n }\n\n :host([size]) .z-accordion-label {\n font-size: var(--font-size-3);\n }\n\n :host([size]) .z-accordion-content {\n font-size: var(--font-size-2);\n }\n\n :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n }\n}\n\n/ Style for sibling accordions in a stack context /\n\nz-accordion + z-accordion {\n border-top: none;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"] {\n border-radius: 0;\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type {\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]::part(summary) {\n border-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary) {\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n","import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"],"version":3}

package/dist/components/z-anchor-navigation.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { B as ButtonVariant } from './index2.js';
 import { d as defineCustomElement$3 } from './index4.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = "html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface05);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-surface02);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}";
+const stylesCss = "html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-default-icon);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){fill:var(--color-default-icon);opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-background);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}";
 const ZAnchorNavigationStyle0 = stylesCss;
 const ZAnchorNavigation$1 = /*@__PURE__*/ proxyCustomElement(class ZAnchorNavigation extends HTMLElement {
@@ -42,7 +42,7 @@ const ZAnchorNavigation$1 = /*@__PURE__*/ proxyCustomElement(class ZAnchorNaviga
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        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' }))));
+        return (h(Host, { key: 'd31a1987cf0536321a859a314760b1a4a906c843', collapsed: this.collapsed }, h("z-button", { key: 'cc7b52c84f5f4dfbd15aff76bd35048e23ecb2c6', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: 'ac446bf4092ba524a5786c182ea3a740d7159c64', ref: (el) => (this.nav = el) }, h("slot", { key: '265daef0a3610cef591d90e0a16df64b666d2c75' }))));
     }
     get host() { return this; }
     static get style() { return ZAnchorNavigationStyle0; }

package/dist/components/z-anchor-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-anchor-navigation.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,~~uuEAAuuE~~,CAAC;~~AAC1vE~~,gCAAe,SAAS;;MCsBXA,mBAAiB;;;;8BAMX,KAAK;2BASR,IAAI;yBAMN,KAAK;;;;;IAUT,UAAU;QAChB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CACpE,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAClE,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YACzC,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,KAAK,cAAc,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;SACjD,CAAC,CAAC;KACJ;;;;IAKO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KAClC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B,EACX,4DAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAC/B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZAnchorNavigation"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n color: inherit;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-~~surface05~~);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n transition:\n background-color 0.3s ease-in-out,\n border-color 0.3s ease-in-out,\n color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n border-left-color: var(--color-primary01);\n color: var(--color-primary01);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > :is(z-button, button) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > :focus:focus-visible,\nz-anchor-navigation nav > * > :focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n / hide anchor actions by default... /\n z-anchor-navigation nav > > :is(z-button, button) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: hover) {\n /* ...show them only hovering/focusing the anchor /\n z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n opacity: 1;\n pointer-events: unset;\n }\n\n z-anchor-navigation nav > :hover {\n border-left-color: var(--color-hover-primary);\n background-color: var(--color-~~surface02~~);\n color: var(--color-hover-primary);\n }\n }\n\n z-anchor-navigation[hide-unselected] nav > :not([data-current], :hover, :focus, :focus-within) {\n color: transparent;\n fill: transparent;\n }\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/\n Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n /\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /\n If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n /\n @Prop({reflect: true})\n hideUnselected = false;\n\n /\n Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n /\n @Prop()\n autoCurrent = true;\n\n /\n Whether the mobile list is collapsed.\n /\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /* Reference to the nav element. /\n private nav: HTMLElement;\n\n /\n Set `aria-current` attribute to the anchors.\n /\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /\n Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-anchor-navigation.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,0wEAA0wE,CAAC;AAC7xE,gCAAe,SAAS;;MCsBXA,mBAAiB;;;;8BAMX,KAAK;2BASR,IAAI;yBAMN,KAAK;;;;;IAUT,UAAU;QAChB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CACpE,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAClE,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YACzC,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,KAAK,cAAc,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;SACjD,CAAC,CAAC;KACJ;;;;IAKO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KAClC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B,EACX,4DAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAC/B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZAnchorNavigation"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n color: inherit;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-default-icon);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n transition:\n background-color 0.3s ease-in-out,\n border-color 0.3s ease-in-out,\n color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n border-left-color: var(--color-primary01);\n color: var(--color-primary01);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > :is(z-button, button) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > :focus:focus-visible,\nz-anchor-navigation nav > * > :focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n / hide anchor actions by default... /\n z-anchor-navigation nav > > :is(z-button, button) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: hover) {\n /* ...show them only hovering/focusing the anchor /\n z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n fill: var(--color-default-icon);\n opacity: 1;\n pointer-events: unset;\n }\n\n z-anchor-navigation nav > :hover {\n border-left-color: var(--color-hover-primary);\n background-color: var(--color-background);\n color: var(--color-hover-primary);\n }\n }\n\n z-anchor-navigation[hide-unselected] nav > :not([data-current], :hover, :focus, :focus-within) {\n color: transparent;\n fill: transparent;\n }\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/\n Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n /\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /\n If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n /\n @Prop({reflect: true})\n hideUnselected = false;\n\n /\n Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n /\n @Prop()\n autoCurrent = true;\n\n /\n Whether the mobile list is collapsed.\n /\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /* Reference to the nav element. /\n private nav: HTMLElement;\n\n /\n Set `aria-current` attribute to the anchors.\n /\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /\n Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-app-header-deprecated.js CHANGED Viewed

@@ -151,7 +151,7 @@ const ZAppHeaderDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader
         this.evaluateViewport();
     }
     render() {
-        return (h(Host, { key: '9d009092baa5440c64867357cc550c9d6fdacce1', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: '2b80ce5c787a36367bfb17484bdc6f220c86a777', class: "hero-container" }, h("slot", { key: '17c9b8f58edfc1957eb5a214d28ca7d7fdc5447e', name: "hero" }, this.hero && (h("img", { key: '912d28a9ff5ddc4c7c8c1c0da78e9d0ef481a7f1', alt: "", src: this.hero }))))), h("div", { key: 'b9de719a0ef65548780edc641f39b973610739fb', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: '21329c398320f4c5347e95de6fad7c5db0f4bcce', class: "heading-container" }, h("div", { key: 'f0e7a5177e5e9d04ac3498ac9906ba7ec8eaac8a', class: "heading-subtitle" }, h("slot", { key: 'd82e20ef24bd1bc1cb872393ef815f62fcdd89a2', name: "top-subtitle" })), h("div", { key: '63723a91c793dac124ca46b85562f43dce0938d2', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: 'ae59df90a5f5470adefd9cd4a30886588f183af1', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '39e84ffff8b58cfc992bbc09e0e3fa15d065fa3c', name: "burger-menu" }))), h("slot", { key: '5445402288fd6bab67cf74752a4cb69d61d074d5', name: "title" }), this.renderSearchLinkButton()), h("div", { key: '261b5f7af1997f311b1c16f42a495fa3504c3d74', class: "heading-subtitle" }, h("slot", { key: '5c3ac0a56b60dcdd4f4dbe126f762f1151ba8665', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: '067d28e686929a99db35e55a5c9158c1511c4375', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '55bb1e7157f50932a33cdef0027594cb7f7ef22a', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '32f7f11db2090caf1795f7995b964936568e47df', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: '6e97d87d6013ac24d0a740928675898b3a4ef74f', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'a11508289586e803276f678927da961c4f27ec91', name: "close" })), h("div", { key: '3879116f51a33406b533efe932b4afbd76df40f9', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: '66350be6f46065bbdebb42e09299d184f07999ac', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: 'b88c18b30cd65643960f48b6b2c347f9e104aa58', class: "heading-stuck" }, h("div", { key: 'af99af52a70f27252ed368ef23df23285ab5dee2', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '466db4b9863655df70f8d88b6cf2eddc78afdcde', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '22ddcc33c76b1ba4c27132f7259036e3ef009126', name: "burger-menu" }))), h("div", { key: '3d8ce06f82b665dce25fa9cb00ad3ba5f37d7275', class: "heading-title" }, h("slot", { key: 'd0bd1f72c6ac814ccc4a84dd38216be97f9bf49f', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+        return (h(Host, { key: '1c345c1bfece133ca47e12f08f3707e92a9a3650', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: 'ec380161c53681ed14d817bcc85c1b5ebcc7d2b9', class: "hero-container" }, h("slot", { key: '3e3f0c1a591eb0fc24cc7ec3ebde8829920920b4', name: "hero" }, this.hero && (h("img", { key: '0ac5d15f851943796fe57a89c5161b45254f7897', alt: "", src: this.hero }))))), h("div", { key: '1bc128eff8bfee60e0fbac28a43ef241568a3421', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: '982a82c94a98bc00e4fd540cf94c4c425038d9c0', class: "heading-container" }, h("div", { key: '786634064010c20967b687a8567fbb82aaf5f126', class: "heading-subtitle" }, h("slot", { key: '792f28fea8a7661420d73677f9a4cfb618886110', name: "top-subtitle" })), h("div", { key: 'eb3eafd4e36b218a617c1802c3e6a0563aba75e3', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: 'f66165640eb1f3e640498f4231b02429a9833ce9', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '15a01b76828bb7d64c889a68f5077655910d8583', name: "burger-menu" }))), h("slot", { key: '9e1038f99339df83e82a63aede899e8ff9aa3725', name: "title" }), this.renderSearchLinkButton()), h("div", { key: '72726562d475b5f4edf19b6b88a89ef9ea1518b3', class: "heading-subtitle" }, h("slot", { key: '0206b4d6da11862121b9cac5a6e87ffccd822089', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: '8c09854d5db8b1af53559ee77adc18c5e9e21836', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '873b577cabe6b6e37c9a00f15ae8da2cdb6dec61', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '8cea6d5468f2553434242881817309dbf12601b3', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: '3be458375ddaa738d40cb41f93a07616952debc2', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'c14c99a56f4083af6c334a74f613f1a44406ad23', name: "close" })), h("div", { key: 'd52312a4e74258d446564f606c0cf868d9dfac7d', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'd3eebb48c21c2269e45eb686c116c22859bfab19', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: 'c005b81f7f6567005b82c03abc66a89cf6a5d731', class: "heading-stuck" }, h("div", { key: '18ea0f8aaed6543744c829baa726e3d17fe4cc1a', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '32df9acac12f1b9f778236f36f9b4dca5f950907', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: 'c6835bbf121417630f5fcddc825258c4f07c6412', name: "burger-menu" }))), h("div", { key: 'a0f631f812478aea4ea6c33088ce8128531d4c5f', class: "heading-title" }, h("slot", { key: '206733fd6de7eed0f1333a221880e046fdf4282d', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/z-app-header.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { d as defineCustomElement$4 } from './index22.js';
 import { d as defineCustomElement$3 } from './index24.js';
 import { d as defineCustomElement$2 } from './index25.js';
-const stylesCss = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:currentcolor;content:\"\";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
+const stylesCss = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:\"\";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
 const ZAppHeaderStyle0 = stylesCss;
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
@@ -263,7 +263,7 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        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()));
+        return (h(Host, { key: 'c581eb6ba90e0ba820f2585757909b4e31e0d26f', "menu-length": this.menuLength }, h("div", { key: '0784330861f875d530a886ace7e1b6b535790187', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '3bb4a709956fdcd9871f85d74fa309a76d6e43ce', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '836c12142e78e7fe2b85022f35d2f8910a0bad75', class: "top-subtitle" }, h("slot", { key: '54891726347880ae252f2168223273ab0cad1a46', name: "top-subtitle" }))), h("div", { key: '81333471f5210087d44457a1fd44b483dfb2a57f', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '68d0b7682f4de8827b0a52988167f0be2ac21d19', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '388c1487fc487b57485209f128531e142db91f0e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '9fd0390674dafc1c28cd1ab40d35beb82e06f2b5', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '47e56e491971f4b7c03458e4117878e356294baa', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return this; }
     static get watchers() { return {