npm - @zanichelli/albe-web-components - Versions diffs - 17.0.0 → 17.0.2 - Mend

@zanichelli/albe-web-components 17.0.0 → 17.0.2

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 (695) hide show

package/dist/components/index16.js CHANGED Viewed

@@ -967,16 +967,16 @@ const ZModal = /*@__PURE__*/ proxyCustomElement(class ZModal extends HTMLElement
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'c146e43060818ca44928a82530f85567f721992c', class: {
+        return (h("dialog", { key: '17794438aa16cc501338ebf00d3a3b65b6641fef', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'a7b25fe975f344989bbb1ee89bed3aa079f3dda4', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'd2598b03be351e20e3ef1f5b404a75efa033774d', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '8318dcaa9a0e9daa0deb58a50b522b501e9f0a7f', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '0a476e05f9affc69d1aa7556572680ce99e34014' }, this.modaltitle && h("h1", { key: 'c8358dd101dfa6d5d91c51b470d40160b585bcba', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '419da7bd2a57660f0d26afcf5121adc8e491c3c1', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '67e4c55a8cc3c93202fc3a4a5155c87fd1fc4440', class: {
+            }, id: this.modalid }, h("header", { key: '7af194baf3c79535e9234aa164d499db62939ac3', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '74aebe7e908ae02f76429a4c9d18ed2baea93826' }, this.modaltitle && h("h1", { key: '4d1e2d2eedc5632c9aad4e7a8e368edbc461e9a5', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '5cc0068f3ed046f90db1aec8351ce6c9a0ff395e', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'cb68ab8b8919343b19464132060abb4a0af4e4fd', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '29b059f5d2b17305c04d25effe27f9dc95d91afd', name: "modalContent" }))), h("div", { key: 'c4ed3fc68e1cd0eb07ccda5fd6c68fa94943a44e', class: {
+            }, id: "modal-content" }, h("slot", { key: 'e703270b2f2a1d4f20609c842476f50de720d33d', name: "modalContent" }))), h("div", { key: '3ce377406bf6e766769db87a5da3a45cf68eb776', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/components/index17.js CHANGED Viewed

@@ -37,7 +37,7 @@ const ZMyzCardComponent = /*@__PURE__*/ proxyCustomElement(class ZMyzCardCompone
         return elemClasses;
     }
     render() {
-        return (h("div", { key: 'd07b37d42382d81be002b31b448e5d6ac3e8867c', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '03e02f39390a302f558bc341b538390027ecb148' })));
+        return (h("div", { key: 'd999d04c93a5a556d397ec0458a8db7b252e4f4c', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'bebbc05f7f4a7e57a0b0379abc0a5b3d71432309' })));
     }
     static get style() { return ZMyzCardStyle0; }
 }, [1, "z-myz-card", {

package/dist/components/index18.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ZMyzCardBody = /*@__PURE__*/ proxyCustomElement(class ZMyzCardBody extends
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '5e1a72de482c87d1b26e8e60bd833a05e5f3b062' }, h("slot", { key: '268e3bb553b952cbdbc55db2d17879adddf28e23', name: "alert" }), h("slot", { key: 'a26bede57fa17b34b348a1384d815646c361bee5', name: "cover" })));
+        return (h("div", { key: '87bccb8aa58d306d1dd01960d83b87f6c72916a6' }, h("slot", { key: 'f30fbd1e1bebda1bab8dffeab7f7f6691eddf487', name: "alert" }), h("slot", { key: '1c12604a64392bea5f30af724bb10ad074336246', name: "cover" })));
     }
     static get style() { return ZMyzCardBodyStyle0; }
 }, [1, "z-myz-card-body"]);

package/dist/components/index19.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZMyzCardCover = /*@__PURE__*/ proxyCustomElement(class ZMyzCardCover exten
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: '36c96fbd2c8546b245e3ed835957ea9ddb4def3d', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: 'e8bb33422b5ec5cd69aa639b75bac7d36efb7eb0', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
     static get style() { return ZMyzCardCoverStyle0; }
 }, [1, "z-myz-card-cover", {

package/dist/components/index20.js CHANGED Viewed

@@ -34,7 +34,7 @@ const ZMyzCardHeader = /*@__PURE__*/ proxyCustomElement(class ZMyzCardHeader ext
         };
     }
     render() {
-        return (h("header", { key: '40152ef3144db81f149eb5d8ecf4a823f7950f3e', class: this.retrieveClass() }, h("slot", { key: '8386bb3e5a3b7c5bee3da6a6801ada1e4aa2a5dc', name: "aria-heading" }), h("span", { key: '35b55d3be757c0a646dca9184c55ad1bd922fc1e', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '834cb2fac275139fe0f4a97c5c75ed0422348719', name: "icon" })));
+        return (h("header", { key: '4dd5f09942f07568a180ac4bc2079aa3ebb5caf5', class: this.retrieveClass() }, h("slot", { key: '09f9e26d737c37eb81b0f88430baeb731275a118', name: "aria-heading" }), h("span", { key: 'a6401d5728990d95a9963ef9feb4496accfb9676', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '98e8d0b79de7170ac81aceed3fe07275b80f7d08', name: "icon" })));
     }
     static get style() { return ZMyzCardHeaderStyle0; }
 }, [1, "z-myz-card-header", {

package/dist/components/index21.js CHANGED Viewed

@@ -30,7 +30,7 @@ const ZMyzListItem = /*@__PURE__*/ proxyCustomElement(class ZMyzListItem extends
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (h("li", { key: 'f1a99bcc7ef168736b85034da0e2003589e9fef1', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: 'd518a6382bf2fd10849b4d732a1f3fd48d84201e', class: this.underlined && "border" }, this.icon && h("z-icon", { key: '622a5cde91bd0213ad6cf11f7c910da3c18683ea', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '87bb3fef2ba5cb1c992280835436ba7f2d538db0' }))));
+        return (h("li", { key: 'b96b5f850ed4f955ef40eafdedfabe71c942e886', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: '2ca05ec788e9ff591ad7b1cdbb5517b32d5681a9', class: this.underlined && "border" }, this.icon && h("z-icon", { key: 'e573f22f4797e9420e9a460a4aa4c793be06c14f', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '6efed7b8ca33c2dcb7402555330443244340bae5' }))));
     }
     static get style() { return ZMyzListItemStyle0; }
 }, [1, "z-myz-list-item", {

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: 'f14ed87f494d40f9a7746168fa4411e814e41ab1', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '8a0b6db716718829e71694ca1f6cc2a2585ab784', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '67f4f2e4b93a97df84c01a3817e979542c4b3256', class: "canvas-content", role: "presentation" }, h("slot", { key: '1240ddd2337f3f9892dc8a64d7aaaea1b98ef23d', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '0d4c22c979bbfc7736f39070b44cf780d8c57355', class: "canvas-background", onClick: () => (this.open = false) }))));
+        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: '5e2799367c4689a04486fadc158d01b8a83fed45', class: "canvas-content", role: "presentation" }, h("slot", { key: '2bbb5e58c1942ed0f68669e341a0fce87642fcb0', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '60d3404fbb021a7a982bb5b26293ca452525091f', 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: '8f4f0fe9ef6306cd1f3470912baf791c2da33358' });
+        return h("slot", { key: 'ea2b46de2cec89ebd692407e0ddb51e47d552e73' });
     }
     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: 'dbe7f1048a93c65fa23d650523bd83a85c7be9fd', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'c1fd476ce68e37acf3152fd01e5086b3a9bbd3dc', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        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()));
     }
     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: 'ffea47f2e9e844fc83b4a8063798fa0b96d6e2c2', class: {
+        return (h(Host, { key: '531b3069d9339b05377f89c350a5ed6becaf9dbd', class: {
                 expandable: this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { key: 'f14e9ed73487caa2e21f3cfc45c99945910c9053', name: this.icon }), h("div", { key: '5c005ad1d82eb22cd2f846fc29446a5ca9334295' }, h("slot", { key: 'd509ee48f18de49b2c8c332a64bed1f85291b7e5' }))));
+            } }, this.icon && h("z-icon", { key: '5abaf6a26667e26e6a11661c49c18d8677a2a130', name: this.icon }), h("div", { key: 'a52c9c030320f2c0687bd896c33dd75ffc497ad2' }, h("slot", { key: 'ff3046c07a2fb70478adb354079d8d26834746ce' }))));
     }
     static get style() { return ZTagStyle0; }
 }, [6, "z-tag", {

package/dist/components/index3.js CHANGED Viewed

@@ -11,7 +11,7 @@ const ZAlert = /*@__PURE__*/ proxyCustomElement(class ZAlert extends HTMLElement
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '14cc56717ffbfb7d4e9fe140892a029dedc3277f', class: this.type }, h("slot", { key: '917ee29a8eda519e8f5a56687b2379e2463f3dc7' })));
+        return (h("div", { key: '5fd2b297a4ab7e426d50f8ef36d5729df579786f', class: this.type }, h("slot", { key: 'cd24f83bcb38d4bbbce5f3b115aa18e217c402b2' })));
     }
     static get style() { return ZAlertStyle0; }
 }, [1, "z-alert", {

package/dist/components/index5.js CHANGED Viewed

@@ -17,11 +17,11 @@ const ZChip = /*@__PURE__*/ proxyCustomElement(class ZChip extends HTMLElement {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '7dd8f9f2d4c632559d1e9b3b04e2d139d3cdd1ce', class: {
+        return (h("div", { key: 'fcd35190df7a13ddacf41430d0b47ab6484110a9', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'af4721aa7ef2e3c8381685bb2eadd19a35effc81', name: this.icon }), h("slot", { key: '521b4fc72980f48dec8ee49c6fc3c06df3c9bf9a' }), this.interactiveIcon && (h("button", { key: '15cb6244073a9402ee3cb147f74cf3763b2a02cd', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a7c434efafd9891a5262dffa24136724acc0f791', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'd9eb68585be8533bb44ba769b34fa8a7163e17fc', name: this.icon }), h("slot", { key: '7ae9a9993086e2dc0489806bbc79bae8b0db20f7' }), this.interactiveIcon && (h("button", { key: 'e02544ca3661c6527a915bfdaa6578c64d284b6f', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '844d3269ee9f2c0206a4aec3554a4b6581351f10', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     get el() { return this; }
     static get style() { return ZChipStyle0; }

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: '59e2f811ae879f15bfacb97769a2d43cf68b40a5', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '78cfa2818529a8e9b9895a0a3d98df31850534dd', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get style() { return ZDividerStyle0; }
 }, [2, "z-divider", {

package/dist/components/index7.js CHANGED Viewed

@@ -1,6 +1,8 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index4.js';
+import { d as defineCustomElement$1 } from './index9.js';
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.dragdrop{position:relative;display:flex;height:228px;flex-direction:column;padding:calc(var(--space-unit) * 2);border-color:var(--color-surface04);background-color:var(--color-background);background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\");border-radius:2px;color:var(--color-default-text)}:host>.dragdrop:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}:host>.dragdrop.dragover *{pointer-events:none}:host>.dragdrop .dragover-container{position:absolute;z-index:10;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host>.dragdrop .dragover-container .dragover-message{padding:10px 28px;background-color:var(--color-primary01);color:var(--color-text-inverse)}:host>.dragdrop.dragover .dragover-container{display:flex;align-items:center;justify-content:center}";
+const stylesCss = ":host{position:relative;display:flex;width:772px;max-width:100%;height:232px;flex-direction:column;align-items:center;padding:calc(var(--space-unit) * 3);background-color:var(--color-surface02);background-image:repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );background-position:0 0,\n    0 0,\n    100% 0,\n    0 100%;background-repeat:no-repeat;background-size:2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;border-radius:var(--border-radius-small);color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host(.dragover) *{pointer-events:none}.dragover-container{position:absolute;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host(.dragover) .dragover-container{display:flex;align-items:center;justify-content:center}";
 const ZDragdropAreaStyle0 = stylesCss;
 const ZDragdropArea = /*@__PURE__*/ proxyCustomElement(class ZDragdropArea extends HTMLElement {
@@ -10,42 +12,49 @@ const ZDragdropArea = /*@__PURE__*/ proxyCustomElement(class ZDragdropArea exten
         this.__attachShadow();
         this.fileDropped = createEvent(this, "fileDropped", 7);
         this.dragAndDropLabel = undefined;
+        this.dragging = false;
     }
-    fileDroppedHandler(files) {
-        this.fileDropped.emit(files);
-    }
-    renderOnDragOverMessage() {
-        return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("span", { class: "body-2-sb" }, this.dragAndDropLabel))));
+    onDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        if (e.dataTransfer.files.length) {
+            this.fileDropped.emit(e.dataTransfer.files);
+        }
     }
     render() {
-        return (h("div", { key: 'fcf1a3aa4e0a0b019f1d3f4ee5c7c353b58eb37d', tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
+        return (h(Host, { key: '5dd259e74cca7c7fa1278d9cdc11062efaaf34b2', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
-                this.dragDropContainer.classList.add("dragover");
+                this.dragging = true;
             }, onDragLeave: () => {
-                this.dragDropContainer.classList.remove("dragover");
-            }, onDrop: (e) => {
-                e.preventDefault();
-                if (e.dataTransfer.files.length) {
-                    this.dragDropContainer.classList.remove("dragover");
-                    this.fileDroppedHandler(e.dataTransfer.files);
-                }
-            } }, this.renderOnDragOverMessage(), h("slot", { key: '6fed0f0841a77882e225c16ded895758c5c95998' })));
+                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' })));
     }
     static get style() { return ZDragdropAreaStyle0; }
 }, [1, "z-dragdrop-area", {
-        "dragAndDropLabel": [1, "drag-and-drop-label"]
+        "dragAndDropLabel": [1, "drag-and-drop-label"],
+        "dragging": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-dragdrop-area"];
+    const components = ["z-dragdrop-area", "z-button", "z-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "z-dragdrop-area":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, ZDragdropArea);
             }
             break;
+        case "z-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }

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

	@@ -1 +1 @@
1	- {"file":"index7.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~gsCAAgsC,~~CAAC;~~AACntC~~,4BAAe,SAAS;;MCMX,aAAa~~;;;;;;;;IAShB~~,~~kBAAkB~~,CAAC,~~KAAe~~;~~QACxC~~,~~IAAI~~,CAAC,~~WAAW~~,CAAC,IAAI,CAAC,KAAK,CAAC~~,CAAC~~;~~KAC9B;IAIO~~,~~uBAAuB;QAC7B~~,~~QACE~~,~~WAAK~~,~~KAAK~~,~~EAAC~~,~~oBAAoB,IAC7B,WAAK,~~KAAK,~~EAAC~~,~~kBAAkB~~,~~IAC3B~~,~~YAAM~~,~~KAAK~~,~~EAAC,~~WAAW,~~IAAE~~,IAAI,CAAC,~~gBAAgB~~,~~CAAQ~~,~~CAClD~~,~~CACF~~,~~EACN~~;~~KACH~~;IAED,MAAM;QACJ,QACE,~~4DACE~~,~~QAAQ~~,~~EAAE~~,~~CAAC~~,~~EACX,GAAG,~~EAAE,~~CAAC~~,~~GAAG~~,~~MAAM~~,IAAI,CAAC,~~iBAAiB~~,~~GAAG,GAAG,CAAC,EAC5C,KAAK,~~EAAC,~~UAAU~~,~~EAChB,~~UAAU,EAAE,CAAC,CAAC;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,~~iBAAiB~~,~~CAAC,SAAS,CAAC,~~GAAG,~~CAAC~~,~~UAAU,~~CAAC~~,CAAC~~;~~aAClD~~,EACD,WAAW,EAAE;gBACX,IAAI,CAAC,~~iBAAiB~~,~~CAAC~~,~~SAAS~~,CAAC~~,MAAM,CAAC,UAAU,CAAC,CAAC~~;~~aACrD~~,EACD,MAAM,EAAE,~~CAAC~~,CAAC~~;gBACR~~,~~CAAC~~,CAAC,~~cAAc~~,~~EAAE,~~CAAC~~;gBACnB~~,IAAI,CAAC,~~CAAC~~,~~YAAY~~,~~CAAC,~~KAAK,~~CAAC~~,~~MAAM~~,~~EAAE;oBAC/B~~,~~IAAI~~,~~CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBACpD,~~IAAI,CAAC,~~kBAAkB~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~YAAY,CAAC,KAAK,CAAC,CAAC;iBAC/C;aACF,IAEA,IAAI,CAAC,uBAAuB,EAAE,EAC/B,~~8DAAQ,~~CACJ~~,~~EACN~~;KACH~~;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n ~~font-family~~: ~~var(--font-family-sans)~~;\n ~~font-weight~~: ~~var(--font-rg)~~;\n~~}\n\n:host > .dragdrop {\n~~ ~~position~~: ~~relative~~;\n ~~display~~: ~~flex;\~~n height: ~~228px~~;\n flex-direction: column;\n padding: calc(var(--space-unit) * 2);\n ~~border~~-color: var(--color-~~surface04~~);\n background-~~color~~: var(--color-~~background~~);\n\n /* ~~Native~~ ~~CSS~~ ~~properties~~ ~~don't~~ ~~support~~ ~~the~~ ~~customization~~ ~~of border~~-~~style.\~~n ~~Therefore,~~ we ~~use~~ ~~a trick with an SVG image inside~~ background-~~image~~ ~~property.\~~n ~~The~~ ~~SVG~~ ~~features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap.\~~n ~~Generated~~ ~~SVG image is vector and it fills width and height of elements by~~ 100~~%, so it doesn't matter what size elements have. /\~~n background-~~image~~: ~~url(\"data:image/svg+xml,%3csvg~~ ~~width='~~100~~%25' height='~~100%~~25'~~ ~~xmlns='http://www.w3.org/2000/svg'%3e%3crect~~ ~~width='~~100~~%25' height='~~100%~~25'~~ ~~fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\")~~;\n border-radius: ~~2px~~;\n color: var(--color-default-text);\n~~}\n\n~~:~~host~~ ~~> .dragdrop:focus~~-~~visible {\~~n ~~box~~-~~shadow~~: var(--~~shadow~~-~~focus-primary~~);\n ~~outline~~: ~~none !important~~;\n}\n\n/ https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element /\n:host > .~~dragdrop.~~dragover {\n pointer-events: none;\n}\n\n~~:host >~~ .~~dragdrop .~~dragover-container {\n position: absolute;\n z-index: 10;\n top: 0;\n left: 0;\n display: none;\n width: 100%;\n height: 100%;\n background-color: var(--color-primary03);\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host > .~~dragdrop .~~dragover~~-container .dragover-message {\n padding: 10px 28px;\n background-color: var(--color-primary01~~)~~;\n color:~~ ~~var(--color-text-inverse);\n}\n\n:host >~~ .~~dragdrop.~~dragover ~~.dragover~~-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-dragdrop-area\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZDragdropArea {\n /** drag & drop button label /\n @Prop()\n dragAndDropLabel: string;\n\n /* Emitted when user drop one or more files */\n @Event()\n fileDropped: EventEmitter;\n\n private ~~fileDroppedHandler~~(~~files~~: ~~FileList~~): void {\n ~~this~~.~~fileDropped.emit~~(~~files~~);\n ~~}\n\n private~~ ~~dragDropContainer:~~ ~~HTMLDivElement~~;\n~~\n private~~ ~~renderOnDragOverMessage~~(): ~~HTMLDivElement~~ {\n ~~return (\n~~ ~~<div class=\"dragover-container\">\n <div class=\"dragover-message\">\n <span class=\"body-2-sb\">{~~this.~~dragAndDropLabel}</span>\n </div>\n </div>\n~~ );\n }\n\n render(): ~~HTMLDivElement~~ {\n return (\n <~~div~~\n ~~tabIndex~~={~~0}\n ref=~~{~~(val)~~ ~~=> (~~this.~~dragDropContainer = val)~~}\n ~~class=\"dragdrop\"\n~~ onDragOver={(e) => {\n e.preventDefault();\n this.~~dragDropContainer.classList.add(\"dragover\")~~;\n }}\n onDragLeave={() => {\n this.~~dragDropContainer.classList.remove(\"dragover\")~~;\n }}\n onDrop={(e) ~~=> {~~\n ~~e.preventDefault();\~~n if ~~(e.dataTransfer.files.length) {\n this.dragDropContainer.classList.remove(\~~"dragover\"~~);\~~n this.~~fileDroppedHandler(e.dataTransfer.files);\n~~ }\n ~~}}\n~~ >\n ~~{this.renderOnDragOverMessage()}\n~~ <slot />\n </~~div~~>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index7.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,++CAA++C,CAAC;AAClgD,4BAAe,SAAS;;MCMX,aAAa;;;;;;;wBAOb,KAAK;;IAMR,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE;YAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,UAAU,EAAE,CAAC,CAAC;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;aACtB,EACD,WAAW,EAAE;gBACX,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE9B,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,mEAAW,IAAI,CAAC,gBAAgB,CAAY,CACxC,EACN,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n width: 772px;\n max-width: 100%;\n height: 232px;\n flex-direction: column;\n align-items: center;\n padding: calc(var(--space-unit) * 3);\n background-color: var(--color-surface02);\n background-image: repeating-linear-gradient(\n 0deg,\n var(--color-surface03),\n var(--color-surface03) 12px,\n transparent 12px,\n transparent 20px\n ),\n repeating-linear-gradient(\n 90deg,\n var(--color-surface03),\n var(--color-surface03) 12px,\n transparent 12px,\n transparent 20px\n ),\n repeating-linear-gradient(\n 180deg,\n var(--color-surface03),\n var(--color-surface03) 12px,\n transparent 12px,\n transparent 20px\n ),\n repeating-linear-gradient(\n 270deg,\n var(--color-surface03),\n var(--color-surface03) 12px,\n transparent 12px,\n transparent 20px\n );\n background-position:\n 0 0,\n 0 0,\n 100% 0,\n 0 100%;\n background-repeat: no-repeat;\n background-size:\n 2px 100%,\n 100% 2px,\n 2px 100%,\n 100% 2px;\n border-radius: var(--border-radius-small);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element /\n:host(.dragover) {\n pointer-events: none;\n}\n\n.dragover-container {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n display: none;\n width: 100%;\n height: 100%;\n background-color: var(--color-primary03);\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host(.dragover) .dragover-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","import {Component, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-dragdrop-area\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZDragdropArea {\n /** drag & drop button label /\n @Prop()\n dragAndDropLabel: string;\n\n /* State that indicates if the user is dragging a file over the drag & drop area /\n @State()\n dragging = false;\n\n /* Emitted when user drop one or more files */\n @Event()\n fileDropped: EventEmitter;\n\n private onDrop(e: DragEvent): void {\n e.preventDefault();\n this.dragging = false;\n if (e.dataTransfer.files.length) {\n this.fileDropped.emit(e.dataTransfer.files);\n }\n }\n\n render(): HTMLZDragdropAreaElement {\n return (\n <Host\n class={{dragover: this.dragging}}\n onDragOver={(e) => {\n e.preventDefault();\n this.dragging = true;\n }}\n onDragLeave={() => {\n this.dragging = false;\n }}\n onDrop={this.onDrop.bind(this)}\n >\n <div class=\"dragover-container\">\n <z-button>{this.dragAndDropLabel}</z-button>\n </div>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index8.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ZGhostLoading = /*@__PURE__*/ proxyCustomElement(class ZGhostLoading exten
         this.__attachShadow();
     }
     render() {
-        return h(Host, { key: '597d6715119bb24d4a8427f9cb3ebd3b5a20f5fc' });
+        return h(Host, { key: '8824327c1d3ba1c9b13dfdfd605c58dd7cd71b55' });
     }
     static get style() { return ZGhostLoadingStyle0; }
 }, [1, "z-ghost-loading"]);

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: 'ecf203cc477b9a08475f233b3ea8fcbf47e6da8f', "aria-hidden": "true" }, h("svg", { key: 'fac769701df8bb25a2f38d59474810543e97f81f', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
+        return (h(Host, { key: 'a87a4f2ec632fbdbb7a6b4bfacee294f53eb0991', "aria-hidden": "true" }, h("svg", { key: '2c0453105f9f3493a86f49e8425d2e885d2f3d09', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
     }
     static get style() { return ZIconStyle0; }
 }, [1, "z-icon", {

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 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;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}: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-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 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: 'bdb34b510290856b328024c34925a8e8a285e23b', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'd7862cd9cd5abf01183a92d32b55754a898e509c', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '0aa26079e890fa7d7f35a5ef72ea8a9e96106add', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'dcb7dd37f3c48c3382dc9e406f94d21548b73a59', class: "z-accordion-label" }, this.label), h("span", { key: '844e5038b3e2f27e07da27ea127ea4489f054cd7', class: "z-accordion-tags" }, h("slot", { key: 'a707878a05c60a291bb0c6b98f8fb6e2764907ca', name: "tag" })), h("z-icon", { key: '87f9b836228e0c20609cb9bc66f611524607fa33', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '447f38b44ded34136bbefbe6daf66e441474265b', class: "z-accordion-content", part: "content" }, h("slot", { key: '8ee4b2b66675d7e46af1ae6ac885fda7da5543da' })))));
+        return (h("details", { key: '91b7f482ab659db2ce2c194d6c0e000a474b8fbc', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'dec93f741b0bf720f2e3ca27d80721924f7e96c0', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '8943eca3e953b29025e17c15b9092538d2246442', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '2e6ba1c7a24fc12e07b159004f09d43e8f7938ae', class: "z-accordion-label" }, this.label), h("span", { key: '165e5f2d9ca85454017ca9a93e672c9a31aa0951', class: "z-accordion-tags" }, h("slot", { key: '5793cda10680845f990c279e8f4987b93a5d3b95', name: "tag" })), h("z-icon", { key: 'e2fd79cf10045f11006eb6a5a996dba0b85fdc08', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '98aff9373f60e83162ac5e13c92041c97f24803a', class: "z-accordion-content", part: "content" }, h("slot", { key: 'd663ae67768932cbdfce8b3e01d6d9ad5f37c41d' })))));
     }
     static get 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,u4LAAu4L,CAAC;AAC15L,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 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: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-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}

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;color:inherit;font-weight:inherit;-webkit-line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}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;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface04);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-text-link-blue);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-secondary);background-color:var(--color-hover-surface);color:var(--color-text-link-blue-hover)}}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;color:inherit;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}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-text-link-blue);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-hover-surface);color:var(--color-text-link-blue-hover)}}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: '7022df46f8b97eef80971668910dc2624edd02df', collapsed: this.collapsed }, h("z-button", { key: 'acebe8662731ead75868d8f2589fa37ac26445b4', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '9d3150d70950eeba65f98dfff8a7f2d4d5783dc4', ref: (el) => (this.nav = el) }, h("slot", { key: '54a8897822b0cbe57440cf3c273540c7f7f6c7fb' }))));
+        return (h(Host, { key: '13b73e5270d20ed2fe6993c36bcc67b462e906c6', collapsed: this.collapsed }, h("z-button", { key: 'e30c82721fc47924bcea1d16d0df1809ce8bf9e5', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '2947b460bbaa7df8d2a8a9a50c51d1b4aa9230d4', ref: (el) => (this.nav = el) }, h("slot", { key: '9db93583f854c9a6ca57da4d7efeebca6c88836e' }))));
     }
     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,~~gsEAAgsE~~,CAAC;~~AACntE~~,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 color: inherit;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\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 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-~~surface04~~);\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-text-link-blue);\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-~~secondary~~);\n background-color: var(--color-hover-surface);\n color: var(--color-text-link-blue-hover);\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,2tEAA2tE,CAAC;AAC9uE,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 color: inherit;\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: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-text-link-blue);\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-hover-surface);\n color: var(--color-text-link-blue-hover);\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: '048f0a2b8e7ec3c6c208d8dbfba716054d985c35', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: '22b129e362391c6a97ecc8c5eaca22cbe7c8ba2a', class: "hero-container" }, h("slot", { key: '6324c3ddbae133c876d28cd31a6c9d4fcdd0a5ca', name: "hero" }, this.hero && (h("img", { key: '421c710a8d0d9067f652f412dc9ec3b5300577e4', alt: "", src: this.hero }))))), h("div", { key: 'f27e5ee2815e845a776ea4d7771163f2e347775d', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: '6e27bf65e911de7d4044a109ce2e3d54c19c55b9', class: "heading-container" }, h("div", { key: '0645b40288bde94d14120767efb20e643d1dd7d6', class: "heading-subtitle" }, h("slot", { key: '873b49535b8881edd8e99374e66a65dace599178', name: "top-subtitle" })), h("div", { key: 'c108bb393519761e3577efb97a2e94376a8f86e2', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '61ea59d5d799b8fe33b253680908e8341920388f', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: 'b0116bbd7dd2e43a0acc6f64f424382141d39afe', name: "burger-menu" }))), h("slot", { key: '4c2ca7405eed50af8483a30e7805162d7cdfb473', name: "title" }), this.renderSearchLinkButton()), h("div", { key: '946155507a9da7dd8245f572110475a7535917a0', class: "heading-subtitle" }, h("slot", { key: 'aea8740f8bb85d585cad6efbdb1839c8209f645c', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: 'f5e5a06396e0f2b007a8c62437ef59166197f0e6', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '14972a9a7fcb377cc73bbeb3d03ebb5222ad62ae', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '3f105502d0697252821b3bcc16f2b9a035e8bc0b', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: '2ed85c125631f2da5774f108a75fe19466d93456', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'b70a0c3864adfc0e86b17210f9c975f885cd2aeb', name: "close" })), h("div", { key: 'bf35efa556d834995682ad8e7200caeae2071743', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'b613adb66ed1146260816ff3261c42e07c433ddc', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: '26f58b77584adf8c846b107e8afee3e670569ce8', class: "heading-stuck" }, h("div", { key: 'a21a7cb4bf84e6c7d73fcad56ad470412b5348a8', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: 'b9a972d74476857fd2f4d25e219145bb02abc101', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '739584d139e3aa74c9bf6a678dd69b6cd6a94c2b', name: "burger-menu" }))), h("div", { key: 'a8ecadb5216352e5719976430faf62260ad5bf3d', class: "heading-title" }, h("slot", { key: '651eead99c68f5925310749920e5aa834a3300f9', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+        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))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

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

package/dist/components/z-aria-alert.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ZAriaAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZAriaAlert extends H
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: 'd499971646bd67f039efe11fce7f6662de50006c', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '009efbe303e1a5ab3434e6b0a98e7bef1705ccbe' })));
+        return (h(Host, { key: 'dc1e0e9c0c7647c5a31dca6356c6ab016b2a07cf', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '3b1bcd618c4f1b45e2ae7e717a3c7e223d4faec6' })));
     }
 }, [4, "z-aria-alert", {
         "mode": [1]

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

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

package/dist/components/z-book-card-app.js CHANGED Viewed

@@ -34,7 +34,7 @@ const ZBookCardApp$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCardApp exten
         return null;
     }
     render() {
-        return (h("div", { key: '2932c06edff0e6767d51ea6480755e3b941526da' }, h("a", { key: '380296133f99047ccf1053b88f5508514237bfaa', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: '7ead782842cd9973168c074ca7a20fe8f9643b48', src: this.logo, alt: "" })), h("div", { key: 'ad4a325334028920c65bb492f074d10db89c9fdb', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: 'e515dd46bc1e27be5a7f31b982f5cda9d91c7279', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '2eabbca7b2f80edd4145d65c7b3f4bc578c6a912' }, this.info))), h("a", { key: '0603c47f075a702c5bda91ce5136caf70e99e628', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: '107f9fbc8e3a5f53d319965e8cd1e6b3e3483d10', name: "chevron-right", width: 16, height: 16, fill: "color-primary01-icon" }))));
+        return (h("div", { key: 'e2bac004a35f7e5959ff55345a348d5abb02904f' }, h("a", { key: '42e4a549cf32b1ebe08ab73d79a2d61a3d90e66d', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: '4c7add8e362fc0cc2e6dfac9e705bfd3fa15b85c', src: this.logo, alt: "" })), h("div", { key: 'ce6a811f5688a04a3881612c731edbc02ab76a3f', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '5c560813db506113ceb38eb629a95dc98a757920', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: 'adffe6242bc25944d92e996952afe11ff8888c35' }, this.info))), h("a", { key: '816c5fdc2e3506f7f7b10e3e7bf35d38b1ba4857', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: '4ee25aca2744712aa70fba66d0487111acea3776', name: "chevron-right", width: 16, height: 16, fill: "color-primary01-icon" }))));
     }
     get hostElement() { return this; }
     static get style() { return ZBookCardAppStyle0 + (ZBookCardAppStyle1 + ZBookCardAppStyle2); }