@zanichelli/albe-web-components 6.6.8 → 6.6.10-test

package/{dist/cjs/z-searchbar.cjs.entry.js → www/build/z-searchbar.entry.js}

@@ -1,22 +1,18 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-fa110f37.js');
-const utils = require('./utils-600bad93.js');
-require('./breakpoints-88c4fd6c.js');
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-291c96fb.js';
+import { B as ButtonVariant, k as ListDividerType } from './index-968a240f.js';
+import { r as randomId, h as handleKeyboardSubmit } from './utils-b96780be.js';
+import './breakpoints-c386984e.js';
 
 const stylesCss = ":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results-wrapper{overflow:auto;padding:calc(var(--space-unit) / 4);padding-bottom:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2}:host>div>div.results-wrapper>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) / 2);scrollbar-color:var(--color-primary01) transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .category-heading>*{display:block}:host>div>div.results-wrapper>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results-wrapper>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results-wrapper>div.results z-list-element{display:block}:host>div>div.results-wrapper>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results-wrapper>div.results .item>span.item-label>mark,:host>div>div.results-wrapper>div.results .item>span.item-label>*>mark{background:var(--color-primary03)}:host>div>div.results-wrapper>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results-wrapper>div.results .item-show-all{display:block;text-align:center}:host>div>div.results-wrapper>div.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}:host>div>div.results-wrapper>div.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){:host>div>div.results-wrapper>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-top:calc(var(--space-unit) / 4)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results-wrapper>div.results .item{cursor:pointer}:host>div>div.results-wrapper>div.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}";
 
 const ZSearchbar = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.searchSubmit = index.createEvent(this, "searchSubmit", 7);
-    this.searchTyping = index.createEvent(this, "searchTyping", 7);
-    this.searchItemClick = index.createEvent(this, "searchItemClick", 7);
+    registerInstance(this, hostRef);
+    this.searchSubmit = createEvent(this, "searchSubmit", 7);
+    this.searchTyping = createEvent(this, "searchTyping", 7);
+    this.searchItemClick = createEvent(this, "searchItemClick", 7);
     /** the id of the searchbar element */
-    this.htmlid = `searchbar-${utils.randomId()}`;
+    this.htmlid = `searchbar-${randomId()}`;
     /** Show simple input without submit button */
     this.preventSubmit = false;
     /** Show autocomplete results */
@@ -139,13 +135,13 @@ const ZSearchbar = class {
     this.showResults = false;
   }
   renderInput() {
-    return (index.h("z-input", { message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => utils.handleKeyboardSubmit(e, () => this.handleSubmit()), value: this.value }));
+    return (h("z-input", { message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => handleKeyboardSubmit(e, () => this.handleSubmit()), value: this.value }));
   }
   renderButton() {
     if (this.preventSubmit) {
       return null;
     }
-    return (index.h("z-button", { variant: index$1.ButtonVariant.PRIMARY, onClick: () => this.handleSubmit() }, "CERCA"));
+    return (h("z-button", { variant: ButtonVariant.PRIMARY, onClick: () => this.handleSubmit() }, "CERCA"));
   }
   renderResults() {
     if (!this.showResults ||
@@ -155,14 +151,14 @@ const ZSearchbar = class {
       !this.resultsItemsList) {
       return null;
     }
-    return (index.h("div", { class: "results-wrapper" }, index.h("div", { class: "results" }, this.renderResultsList())));
+    return (h("div", { class: "results-wrapper" }, h("div", { class: "results" }, this.renderResultsList())));
   }
   renderResultsList() {
     var _a, _b;
     if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
-      return (index.h("span", { class: "item item-no-results" }, "Non abbiamo trovato risultati per ", index.h("b", null, this.searchString), index.h("br", null), index.h("br", null), "Cosa puoi fare?", index.h("ul", null, index.h("li", null, "Verificare di aver scritto bene"), index.h("li", null, "Provare a cercare un'altra parola"), index.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico"))));
+      return (h("span", { class: "item item-no-results" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico"))));
     }
-    return (index.h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
+    return (h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
   }
   renderItems() {
     var _a;
@@ -172,25 +168,25 @@ const ZSearchbar = class {
     const groupedItems = this.getGroupedItems(this.resultsItemsList);
     const listGroups = [];
     let counter = 0;
-    Object.values(groupedItems).forEach((groupItem, index$2, array) => {
+    Object.values(groupedItems).forEach((groupItem, index, array) => {
       if (this.checkResultsCount(counter)) {
         const listGroupsElements = [];
         groupItem.items.forEach((item, subindex, subarray) => {
           if (this.checkResultsCount(counter)) {
-            const isLast = index$2 === array.length - 1 && subindex === subarray.length - 1;
+            const isLast = index === array.length - 1 && subindex === subarray.length - 1;
             listGroupsElements.push(this.renderItem(item, subindex, !isLast));
           }
           counter++;
         });
         if (listGroupsElements.length) {
-          listGroups.push(index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, this.renderItemCategory(groupItem), listGroupsElements));
+          listGroups.push(h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, this.renderItemCategory(groupItem), listGroupsElements));
         }
       }
     });
     return listGroups;
   }
   renderItem(item, key, divider) {
-    return (index.h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option", tabindex: 0, dividerType: divider ? index$1.ListDividerType.ELEMENT : undefined, clickable: true, onClickItem: () => this.emitSearchItemClick(item) }, index.h("span", { class: { "item": true, "ellipsis": this.resultsEllipsis, "has-category": !!item.category } }, (item === null || item === void 0 ? void 0 : item.icon) && (index.h("z-icon", { class: "item-icon", name: item.icon })), index.h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) }))));
+    return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option", tabindex: 0, dividerType: divider ? ListDividerType.ELEMENT : undefined, clickable: true, onClickItem: () => this.emitSearchItemClick(item) }, h("span", { class: { "item": true, "ellipsis": this.resultsEllipsis, "has-category": !!item.category } }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) }))));
   }
   renderItemLabel(label) {
     if (!this.searchString) {
@@ -202,13 +198,13 @@ const ZSearchbar = class {
     if (!(groupItem === null || groupItem === void 0 ? void 0 : groupItem.category)) {
       return null;
     }
-    return (index.h("span", { class: "category-heading", slot: "header-title" }, index.h("span", { class: "category" }, groupItem.category), (groupItem === null || groupItem === void 0 ? void 0 : groupItem.subcategory) && index.h("span", { class: "subcategory" }, groupItem.subcategory)));
+    return (h("span", { class: "category-heading", slot: "header-title" }, h("span", { class: "category" }, groupItem.category), (groupItem === null || groupItem === void 0 ? void 0 : groupItem.subcategory) && h("span", { class: "subcategory" }, groupItem.subcategory)));
   }
   renderSearchHelper(hasDivider = true) {
     if (!this.autocomplete || this.preventSubmit || !this.searchString) {
       return null;
     }
-    return (index.h("z-list-element", { role: "option", tabindex: 0, dividerType: hasDivider ? index$1.ListDividerType.ELEMENT : undefined, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, index.h("span", { class: "item item-search" }, index.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index.h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
+    return (h("z-list-element", { role: "option", tabindex: 0, dividerType: hasDivider ? ListDividerType.ELEMENT : undefined, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
   }
   renderShowAllResults() {
     var _a, _b;
@@ -218,10 +214,10 @@ const ZSearchbar = class {
       this.currResultsCount >= ((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)) {
       return null;
     }
-    return (index.h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0) }, index.h("span", { class: "item-show-all" }, index.h("z-link", null, "Vedi tutti i risultati"))));
+    return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0) }, h("span", { class: "item-show-all" }, h("z-link", null, "Vedi tutti i risultati"))));
   }
   render() {
-    return (index.h(index.Host, { onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e) }, index.h("div", { class: { "has-submit": !this.preventSubmit, "has-results": this.autocomplete } }, this.renderInput(), this.renderResults(), this.renderButton())));
+    return (h(Host, { onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e) }, h("div", { class: { "has-submit": !this.preventSubmit, "has-results": this.autocomplete } }, this.renderInput(), this.renderResults(), this.renderButton())));
   }
   static get watchers() { return {
     "resultsItems": ["watchItems"],
@@ -232,4 +228,4 @@ const ZSearchbar = class {
 };
 ZSearchbar.style = stylesCss;
 
-exports.z_searchbar = ZSearchbar;
+export { ZSearchbar as z_searchbar };

package/{dist/cjs/z-section-title.cjs.entry.js → www/build/z-section-title.entry.js}

@@ -1,20 +1,16 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-fa110f37.js');
+import { r as registerInstance, h, e as Host, g as getElement } from './index-291c96fb.js';
+import { x as ZSectionTitleDividerPosition, D as DividerSize } from './index-968a240f.js';
 
 const stylesCss = ":host{--z-section-title--divider-color:var(--red500);display:flex;width:fit-content;flex-direction:column;align-items:flex-start;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host ::slotted(*){box-sizing:border-box}::slotted(*){margin:0}::slotted([slot=\"secondary-title\"]){padding-bottom:calc(var(--space-unit) / 2);border-bottom:var(--border-size-large) solid var(--z-section-title--divider-color);font-size:var(--font-size-3);line-height:1.5rem;text-transform:uppercase}::slotted([slot=\"primary-title\"]){font-size:var(--font-size-6);line-height:2rem}:host([uppercase]:not([uppercase=\"false\"])) ::slotted([slot=\"primary-title\"]){text-transform:uppercase}@media (min-width: 1152px){::slotted([slot=\"primary-title\"]){font-size:var(--font-size-7);line-height:2.25rem}}";
 
 const ZSectionTitle = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     /**
      * Divider position for the primary title.
      * This prop only works if the secondary title is not set.
      */
-    this.dividerPosition = index$1.ZSectionTitleDividerPosition.BEFORE;
+    this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
     /**
      * Whether the primary title text is uppercase.
      */
@@ -24,10 +20,10 @@ const ZSectionTitle = class {
     this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.BEFORE && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" })), index.h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.AFTER && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+    return (h(Host, null, h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
   }
-  get host() { return index.getElement(this); }
+  get host() { return getElement(this); }
 };
 ZSectionTitle.style = stylesCss;
 
-exports.z_section_title = ZSectionTitle;
+export { ZSectionTitle as z_section_title };

package/{dist/cjs/z-select.cjs.entry.js → www/build/z-select.entry.js}

@@ -1,20 +1,16 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-fa110f37.js');
-const utils = require('./utils-600bad93.js');
-require('./breakpoints-88c4fd6c.js');
+import { r as registerInstance, f as createEvent, h, g as getElement } from './index-291c96fb.js';
+import { e as KeyboardCode, k as ListDividerType } from './index-968a240f.js';
+import { r as randomId, b as boolean, a as getElementTree, d as getClickedElement, h as handleKeyboardSubmit } from './utils-b96780be.js';
+import './breakpoints-c386984e.js';
 
 const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.sc-z-select{display:block;padding:0 calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}";
 
 const ZSelect = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.optionSelect = index.createEvent(this, "optionSelect", 7);
+    registerInstance(this, hostRef);
+    this.optionSelect = createEvent(this, "optionSelect", 7);
     /** the id of the input element */
-    this.htmlid = `id-${utils.randomId()}`;
+    this.htmlid = `id-${randomId()}`;
     /** the input aria-label */
     this.ariaLabel = "";
     /** the input is disabled */
@@ -106,7 +102,7 @@ const ZSelect = class {
     }
   }
   hasAutocomplete() {
-    return utils.boolean(this.autocomplete) === true;
+    return boolean(this.autocomplete) === true;
   }
   handleInputChange(e) {
     this.searchString = e.detail.value;
@@ -133,7 +129,7 @@ const ZSelect = class {
     }
   }
   arrowsSelectNav(e, key) {
-    const arrows = [index$1.KeyboardCode.ARROW_DOWN, index$1.KeyboardCode.ARROW_UP];
+    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
     if (!arrows.includes(e.key)) {
       return;
     }
@@ -143,10 +139,10 @@ const ZSelect = class {
       this.toggleSelectUl();
     }
     let index;
-    if (e.key === index$1.KeyboardCode.ARROW_DOWN) {
+    if (e.key === KeyboardCode.ARROW_DOWN) {
       index = key + 1 === this.itemsList.length ? 0 : key + 1;
     }
-    else if (e.key === index$1.KeyboardCode.ARROW_UP) {
+    else if (e.key === KeyboardCode.ARROW_UP) {
       index = key <= 0 ? this.itemsList.length - 1 : key - 1;
     }
     this.focusSelectItem(index);
@@ -184,14 +180,14 @@ const ZSelect = class {
     this.toggleSelectUl();
   }
   handleSelectFocus(e) {
-    if (e instanceof KeyboardEvent && e.key === index$1.KeyboardCode.ESC) {
+    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {
       e.stopPropagation();
       return this.toggleSelectUl(true);
     }
-    if (e instanceof KeyboardEvent && e.key !== index$1.KeyboardCode.TAB && e.key !== index$1.KeyboardCode.ENTER) {
+    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {
       return;
     }
-    const tree = utils.getElementTree(utils.getClickedElement());
+    const tree = getElementTree(getClickedElement());
     const parent = tree.find((elem) => {
       return elem.nodeName.toLowerCase() === "z-input" && elem.id === `${this.htmlid}_input`;
     });
@@ -206,13 +202,13 @@ const ZSelect = class {
     }
   }
   renderInput() {
-    return (index.h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, autocomplete: "off", onClick: (e) => {
+    return (h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, autocomplete: "off", onClick: (e) => {
         this.handleInputClick(e);
       }, onKeyUp: (e) => {
         if (e.keyCode !== 13) {
           e.preventDefault();
         }
-        utils.handleKeyboardSubmit(e, this.toggleSelectUl);
+        handleKeyboardSubmit(e, this.toggleSelectUl);
       }, onKeyDown: (e) => {
         return this.arrowsSelectNav(e, this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : -1);
       }, onInputChange: (e) => {
@@ -226,7 +222,7 @@ const ZSelect = class {
   }
   renderSelectUl() {
     var _a;
-    return (index.h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, index.h("div", { class: "ul-scroll-wrapper", tabindex: "-1" }, index.h("z-list", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id, "aria-multiselectable": false, class: {
+    return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: "ul-scroll-wrapper", tabindex: "-1" }, h("z-list", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id, "aria-multiselectable": false, class: {
         disabled: this.disabled,
         readonly: this.readonly,
         filled: !!this.selectedItem,
@@ -234,7 +230,7 @@ const ZSelect = class {
       } }, this.renderSelectUlItems()))));
   }
   renderItem(item, key, lastItem) {
-    return (index.h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? index$1.ListDividerType.HEADER : index$1.ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, index.h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+    return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
   }
   renderSelectUlItems() {
     if (!this.itemsList.length) {
@@ -259,26 +255,26 @@ const ZSelect = class {
       return group;
     }, {});
     return Object.entries(newData).map(([key, value]) => {
-      return (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
+      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
     });
   }
   renderNoSearchResults() {
-    return (index.h("z-list-element", { color: "blue500", class: "no-results" }, index.h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
+    return (h("z-list-element", { color: "blue500", class: "no-results" }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
   }
   renderMessage() {
-    if (utils.boolean(this.message) === false) {
+    if (boolean(this.message) === false) {
       return;
     }
-    return (index.h("z-input-message", { message: utils.boolean(this.message) === true ? undefined : this.message, status: this.status }));
+    return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status }));
   }
   render() {
-    return (index.h("div", { class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+    return (h("div", { class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
   }
-  get element() { return index.getElement(this); }
+  get element() { return getElement(this); }
   static get watchers() { return {
     "items": ["watchItems"]
   }; }
 };
 ZSelect.style = stylesCss;
 
-exports.z_select = ZSelect;
+export { ZSelect as z_select };

package/{dist/cjs/z-skip-to-content.cjs.entry.js → www/build/z-skip-to-content.entry.js}

@@ -1,17 +1,13 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-const utils = require('./utils-600bad93.js');
-const index$1 = require('./index-fa110f37.js');
-require('./breakpoints-88c4fd6c.js');
+import { r as registerInstance, h, e as Host, g as getElement } from './index-291c96fb.js';
+import { a as getElementTree, h as handleKeyboardSubmit } from './utils-b96780be.js';
+import { T as ThemeVariant } from './index-968a240f.js';
+import './breakpoints-c386984e.js';
 
 const stylesCss = ".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:block;text-align:center}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--bg-grey-800);color:var(--color-white)}.light.sc-z-skip-to-content-h{border:2px solid var(--text-grey-800);background-color:var(--bg-white);color:var(--text-grey-800)}@media (min-width: 768px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{text-align:left}}@media (min-width: 1152px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:inline-block;padding:0 calc(var(--space-unit) * 3);border-right:1px solid var(--bg-grey-800)}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{border-right:1px solid var(--bg-white)}}";
 
 const ZSkipToContent = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     /** Array to fill link into skip-content */
     this.links = [];
     this.visible = false;
@@ -36,7 +32,7 @@ const ZSkipToContent = class {
     }
   }
   isInSkipToContent(elem) {
-    const tree = utils.getElementTree(elem);
+    const tree = getElementTree(elem);
     const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
     return !!menuParent;
   }
@@ -51,16 +47,16 @@ const ZSkipToContent = class {
     this.visible = false;
   }
   render() {
-    return (index.h(index.Host, { class: {
+    return (h(Host, { class: {
         [this.variant]: true,
         "skip-to-content-visible": this.visible,
       } }, this.links.map((link, i) => {
       const id = `skip-to-content-${i}`;
-      return (index.h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === index$1.ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
     })));
   }
-  get hostElement() { return index.getElement(this); }
+  get hostElement() { return getElement(this); }
 };
 ZSkipToContent.style = stylesCss;
 
-exports.z_skip_to_content = ZSkipToContent;
+export { ZSkipToContent as z_skip_to_content };

package/{dist/cjs/z-slideshow.cjs.entry.js → www/build/z-slideshow.entry.js}

@@ -1,11 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-fa110f37.js');
-const utils = require('./utils-600bad93.js');
-require('./breakpoints-88c4fd6c.js');
+import { r as registerInstance, h, g as getElement } from './index-291c96fb.js';
+import { o as Device } from './index-968a240f.js';
+import { e as convertJson, g as getDevice, h as handleKeyboardSubmit } from './utils-b96780be.js';
+import './breakpoints-c386984e.js';
 
 const stylesCss = ":host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-base) solid var(--color-surface02);grid-template:2 / 2;grid-template-areas:\"center center\" \"left right\"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--bg-neutral-150);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--bg-neutral-400)}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-base) solid var(--color-surface02);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:\"left center right\"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}";
 
@@ -19,7 +15,7 @@ function isStringArray(data) {
 }
 const ZSlideshow = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     this.currentSlide = 0;
   }
   watchData() {
@@ -41,7 +37,7 @@ const ZSlideshow = class {
     var _a;
     switch (typeof this.data) {
       case "string": {
-        const parsed = (_a = utils.convertJson(this.data)) !== null && _a !== void 0 ? _a : [];
+        const parsed = (_a = convertJson(this.data)) !== null && _a !== void 0 ? _a : [];
         if (!isStringArray(parsed)) {
           throw new Error("Passed data is invalid");
         }
@@ -69,23 +65,23 @@ const ZSlideshow = class {
     });
   }
   setDevice() {
-    this.device = utils.getDevice();
+    this.device = getDevice();
   }
   setCurrentSlide(index) {
     this.currentSlide = index;
   }
   getBulletDimension() {
     switch (this.device) {
-      case index$1.Device.MOBILE:
+      case Device.MOBILE:
         return 24;
-      case index$1.Device.TABLET:
+      case Device.TABLET:
         return 32;
       default:
         return 40;
     }
   }
   renderSlides(items) {
-    return (index.h("div", { id: "slides" }, items.map((item, i) => (index.h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, index.h("img", { src: item }))))));
+    return (h("div", { id: "slides" }, items.map((item, i) => (h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, h("img", { src: item }))))));
   }
   renderScroll(direction) {
     let disabled = false, nextSlide = this.currentSlide;
@@ -97,33 +93,33 @@ const ZSlideshow = class {
       disabled = this.currentSlide === this.links.length - 1;
       nextSlide++;
     }
-    return (index.h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
+    return (h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
         !disabled && this.setCurrentSlide(nextSlide);
       }, onKeyUp: (e) => !disabled &&
-        utils.handleKeyboardSubmit(e, () => {
+        handleKeyboardSubmit(e, () => {
           this.setCurrentSlide(nextSlide);
         }), tabindex: 0, role: "button" }));
   }
   renderSlideshowMain() {
-    return (index.h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
+    return (h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
   }
   renderBullet(i) {
-    return (index.h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => utils.handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
+    return (h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
   }
   renderSlideshowFooter() {
-    return (index.h("footer", null, index.h("div", { class: "footer-left" }, index.h("slot", { name: "footer-left" })), index.h("div", { class: "footer-center" }, index.h("div", { class: "bullet-container" }, Object.keys(this.links).map((i) => this.renderBullet(parseInt(i))))), index.h("div", { class: "footer-right" }, index.h("slot", { name: "footer-right" }))));
+    return (h("footer", null, h("div", { class: "footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "footer-center" }, h("div", { class: "bullet-container" }, Object.keys(this.links).map((i) => this.renderBullet(parseInt(i))))), h("div", { class: "footer-right" }, h("slot", { name: "footer-right" }))));
   }
   render() {
     if (!this.links || !this.links.length) {
-      return index.h("div", null);
+      return h("div", null);
     }
-    return (index.h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
+    return (h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
   }
-  get el() { return index.getElement(this); }
+  get el() { return getElement(this); }
   static get watchers() { return {
     "data": ["watchData"]
   }; }
 };
 ZSlideshow.style = stylesCss;
 
-exports.z_slideshow = ZSlideshow;
+export { ZSlideshow as z_slideshow };

package/{dist/cjs/z-stepper-item.cjs.entry.js → www/build/z-stepper-item.entry.js}

@@ -1,22 +1,18 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
+import { r as registerInstance, h } from './index-291c96fb.js';
 
 const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:solid 2px var(--bg-grey-700);margin:0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:18px;line-height:28px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));text-align:center}:host(:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:2px solid var(--myz-blue);margin:calc(var(--space-unit) * 2);background:var(--bg-white);border-radius:50%;color:var(--myz-blue);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--myz-blue-dark);background:var(--myz-blue-dark);color:var(--text-white)}:host(:not([disabled]):focus-within) .indicator{box-shadow:0 0 2px 2px var(--accent-dark)}:host([disabled]) .indicator{border-color:currentcolor;background:var(--bg-grey-200);color:var(--text-grey-700)}@media only screen and (min-width: 768px){:host{width:calc(var(--space-unit) * 10)}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10)}.stepper-item span{display:block}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
 
 const ZStepperItem = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
   }
   render() {
     if (this.href) {
-      return (index.h("a", { href: !this.disabled && this.href, class: "stepper-item" }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
+      return (h("a", { href: !this.disabled && this.href, class: "stepper-item" }, h("div", { class: "indicator" }, this.index), h("span", null, h("slot", null))));
     }
-    return (index.h("button", { class: "stepper-item", disabled: this.disabled }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
+    return (h("button", { class: "stepper-item", disabled: this.disabled }, h("div", { class: "indicator" }, this.index), h("span", null, h("slot", null))));
   }
 };
 ZStepperItem.style = stylesCss;
 
-exports.z_stepper_item = ZStepperItem;
+export { ZStepperItem as z_stepper_item };

package/{dist/cjs/z-stepper.cjs.entry.js → www/build/z-stepper.entry.js}

@@ -1,19 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
+import { r as registerInstance, h } from './index-291c96fb.js';
 
 const stylesCss = ":host{position:relative;display:flex;width:100%;max-width:100%;box-sizing:border-box;flex-direction:row;padding:0;margin:0;font-family:var(--dashboard-font);font-weight:var(--font-rg);list-style:none}@media only screen and (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}";
 
 const ZStepper = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
   }
   render() {
-    return index.h("slot", null);
+    return h("slot", null);
   }
 };
 ZStepper.style = stylesCss;
 
-exports.z_stepper = ZStepper;
+export { ZStepper as z_stepper };

package/{dist/cjs/z-table-body.cjs.entry.js → www/build/z-table-body.entry.js}

@@ -1,24 +1,20 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
+import { r as registerInstance, h, g as getElement } from './index-291c96fb.js';
 
 const stylesCss = ".sc-z-table-body-h{display:table-row-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-table-body-h>z-table-row[expanded].sc-z-table-body+z-table-expanded-row.sc-z-table-body{display:table-row}";
 
 const ZTableBody = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
   }
   componentWillRender() {
     this.host.setAttribute("role", "rowgroup");
     Array.from(this.host.children).forEach((child, index) => child.setAttribute("aria-rowindex", `${index}`));
   }
   render() {
-    return index.h("slot", null);
+    return h("slot", null);
   }
-  get host() { return index.getElement(this); }
+  get host() { return getElement(this); }
 };
 ZTableBody.style = stylesCss;
 
-exports.z_table_body = ZTableBody;
+export { ZTableBody as z_table_body };