@zanichelli/albe-web-components 19.3.0-RC5 → 19.3.0-RC6

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

@@ -1,7 +1,12 @@
 :host {
+  /**
+   * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)
+   * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);
+   * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);
+   */
   --z-searchbar-tag-text-color: var(--color-primary03);
   --z-searchbar-tag-bg: var(--color-hover-primary);
-  --z-searchbar-item-height: 44px;
+  --z-searchbar-item-height: 2.75rem;
 
   z-index: 15;
   display: flex;
@@ -11,16 +16,12 @@
 }
 
 :host,
-* {
+*,
+::after,
+::before {
   box-sizing: border-box;
 }
 
-:host::part(list-item-container) {
-  display: block;
-  min-height: unset;
-  padding: 0;
-}
-
 .input-container {
   position: relative;
   display: flex;
@@ -28,199 +29,151 @@
   flex-direction: column;
 }
 
-.results-wrapper {
-  position: absolute;
-  top: calc(100% - 1px);
-  left: 0;
-  width: 100%;
-  padding: calc(var(--space-unit) / 4);
-  border: var(--border-size-small) solid var(--color-surface03);
-  border-top: none;
-  background: var(--color-surface01);
+.input-container z-input {
+  z-index: 1;
 }
 
 .results {
+  --item-icon-size: 1rem;
+  --z-icon-height: var(--item-icon-size);
+  --z-icon-width: var(--item-icon-size);
+  --item-inline-padding: calc(var(--space-unit) * 1.5);
+  --item-col-gap: var(--space-unit);
+
+  position: absolute;
+  top: calc(100% - 1px);
+  left: 0;
   overflow: auto;
+  width: 100%;
   max-height: var(--z-searchbar-results-height, 540px);
-  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);
-}
-
-.results::-webkit-scrollbar {
-  width: 6px;
-  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
-}
-
-.results::-webkit-scrollbar-thumb {
-  background-color: var(--color-primary01);
-}
-
-.results::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-/* Firefox scrollbar */
-@supports not selector(.results::-webkit-scrollbar-track) {
-  .results {
-    scrollbar-color: var(--color-primary01) transparent;
-  }
+  border: var(--border-size-small) solid var(--color-form-surface03);
+  border-top: none;
+  background: var(--color-form-background);
 }
 
-.results .category-heading {
-  display: block;
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  line-height: var(--font-size-3);
-}
+.results z-list-element {
+  --background-color-list-element: var(--color-form-background);
 
-.results .category-heading > * {
+  position: relative;
   display: block;
 }
 
-.results .category-heading > .category {
-  color: var(--color-text05);
-  font-style: italic;
+.results > z-list > z-list-element::part(list-item-container) {
+  padding: 0 var(--item-inline-padding);
 }
 
-.results .category-heading > .subcategory {
-  margin-top: var(--space-unit);
-  color: var(--color-default-text);
-  text-transform: uppercase;
-}
-
-.results z-list-element {
+.results z-list-element > .list-item {
   position: relative;
-  display: block;
-}
-
-z-list-element > .item-search {
-  padding: var(--space-unit) 0;
+  display: flex;
+  align-items: center;
+  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);
+  background-color: transparent;
+  color: var(--color-form-default-text);
+  fill: var(--color-form-default-icon);
+  gap: var(--item-col-gap);
 }
 
-z-list z-list-element::before {
-  position: absolute;
-  z-index: 100;
-  top: 5px;
-  left: -20px;
-  width: 8px;
-  height: 1em;
-  border-bottom: 1px solid var(--color-disabled01-icon);
-  border-left: 1px solid var(--color-disabled01-icon);
-  content: "";
+.results z-list-element > .list-item:hover {
+  background-color: var(--gray100); /* TODO: use correct form-related token when available */
   cursor: pointer;
 }
 
-z-list z-list-element::after {
-  position: absolute;
-  z-index: 100;
-  top: 5px;
-  left: -20px;
-  width: 8px;
-  height: 100%;
-  border-left: 1px solid var(--color-disabled01-icon);
-  content: "";
-  cursor: pointer;
+.results z-list-element > .list-item:focus-visible {
+  z-index: 1;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
 }
 
-z-list z-list-element:last-child::after {
-  display: none;
+/* list elements separator */
+.results > z-list > z-list-element:not(:last-child) > .list-item,
+.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {
+  border-bottom: 1px solid var(--color-form-surface03);
 }
 
-z-list > z-list-element::before,
-z-list > z-list-element::after,
-z-list > z-list-group > z-list-element::before,
-z-list > z-list-group > z-list-element::after {
-  display: none;
+.results z-list-group {
+  padding: 0 var(--item-inline-padding);
 }
 
-z-list > div.children-node {
-  padding-left: calc(var(--space-unit) * 3);
+.results z-list-group > z-list-element::part(list-item-container) {
+  padding: 0;
 }
 
-.results z-list-element > .list-element {
-  display: flex;
-  justify-content: space-between;
-  padding: calc(var(--space-unit) * 1.25) 0;
-  cursor: pointer;
+.results .sub-list {
+  padding-left: calc(var(--item-icon-size) + var(--item-col-gap));
 }
 
-.results z-list-element > .list-element:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+.results .sub-list z-list-element::part(list-item-container) {
+  padding: 0;
 }
 
-.results z-list-element > .list-element .item.ellipsis {
-  overflow: hidden;
+.results .sub-list z-list-element > .list-item {
+  position: relative;
 }
 
-.results z-list-element .list-element::after {
+/* tree indicators */
+.results .sub-list > z-list-element:not(:last-child)::before,
+.results .sub-list > z-list-element > .list-item::before {
   position: absolute;
   top: 0;
-  right: 0;
-  display: block;
-  width: 100%;
-  height: 44px;
+  left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);
+  border-left: 1px solid var(--color-form-surface03);
   content: "";
-  transform: translateX(-100%);
 }
 
-.results z-list-element .list-element.focused.hovered::after {
-  padding-left: 6px;
+/* "|" tree indicator */
+.results .sub-list > z-list-element:not(:last-child)::before {
+  top: -4px;
+  height: calc(100% + 4px);
 }
 
-.results z-list-element > .list-element:hover,
-.results z-list-element > .list-element:hover::after {
-  background-color: var(--color-background);
-  cursor: pointer;
+/* "—" tree indicator */
+.results .sub-list z-list-element > .list-item::before {
+  width: 14px;
+  height: calc(var(--z-searchbar-item-height) / 2);
+  border-bottom: 1px solid var(--color-form-surface03);
 }
 
-.results z-list-element > .list-element > z-tag {
-  border: 1px solid var(--gray800);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-
-  --z-tag-bg: var(--z-searchbar-tag-bg);
-  --z-tag-text-color: var(--z-searchbar-tag-text-color);
+.results .category-heading > .category {
+  font-style: italic;
 }
 
-.results .item {
-  --z-icon-height: 12px;
-  --z-icon-width: 12px;
+.results .category-heading > .subcategory {
+  text-transform: uppercase;
+}
 
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--color-default-text);
-  column-gap: calc(var(--space-unit) * 1.5);
-  fill: var(--color-default-icon);
-  font-size: var(--font-size-2);
-  line-height: var(--font-size-6);
+.results z-list-element > .list-item .ellipsis {
+  overflow: hidden;
 }
 
-.results .item.ellipsis > .item-label {
+.results .ellipsis > .item-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.results .item > .item-label mark {
+.results .item-label mark {
   background: var(--color-primary03);
+  color: var(--color-default-text);
 }
 
-.results .item.item-search {
-  --z-icon-height: 16px;
-  --z-icon-width: 16px;
+.results .list-item > z-tag {
+  --z-tag-bg: var(--z-searchbar-tag-bg);
+  --z-tag-text-color: var(--z-searchbar-tag-text-color);
+
+  margin-left: auto;
+  white-space: nowrap;
 }
 
 .results .item-show-all {
+  width: 100%;
+  color: var(--color-primary01);
+  cursor: pointer;
   text-align: center;
 }
 
 .results .item-no-results {
   display: block;
-  font-size: var(--font-size-2);
   font-style: italic;
-  line-height: var(--font-size-5);
 }
 
 .results .item-no-results > ul {
@@ -228,70 +181,8 @@ z-list > div.children-node {
   margin: var(--space-unit);
 }
 
-/* Tablet breakpoint */
 @media (min-width: 768px) {
-  .results .category-heading {
-    font-size: var(--font-size-3);
-    line-height: var(--font-size-6);
-  }
-
-  .results .item {
-    font-size: var(--font-size-3);
-    line-height: var(--font-size-6);
-  }
-
-  .results .item.item-search {
-    --z-icon-height: 18px;
-    --z-icon-width: 18px;
-  }
-
-  .results .item.ellipsis > .item-label {
-    height: 1.5rem;
-  }
-
-  .results z-list-element > .list-element > z-tag {
-    min-width: max-content;
-  }
-}
-
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  .results .item {
-    cursor: pointer;
-  }
-
-  .results .item-no-results {
-    cursor: default;
-    font-size: var(--font-size-3);
-    line-height: var(--font-size-6);
+  .results {
+    --item-icon-size: 1.125rem;
   }
 }
-
-:host([size="small"]) .results :is(.item, .category-heading),
-:host([size="x-small"]) .results :is(.item, .category-heading) {
-  font-size: var(--font-size-2);
-}
-
-:host([size="small"]) .results .item:not(.has-category),
-:host([size="x-small"]) .results .item:not(.has-category) {
-  --z-icon-height: 16px;
-  --z-icon-width: 16px;
-}
-
-:host([size="small"]) z-list-element > .list-element,
-:host([size="small"]) z-list-element > .item-search {
-  padding: calc(var(--space-unit) * 0.75) 0;
-}
-
-:host([size="x-small"]) z-list-element > .list-element,
-:host([size="x-small"]) z-list-element > .item-search {
-  padding: calc(var(--space-unit) / 2) 0;
-}
-
-:host([size="small"]) z-list-element .list-element::after {
-  height: 36px;
-}
-
-:host([size="x-small"]) z-list-element .list-element::after {
-  height: 32px;
-}

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

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { ControlSize, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { boolean, getClickedElement, getElementTree, getPlainText, randomId } from "../../utils/utils";
+import { boolean, encodeString, getClickedElement, getElementTree, getPlainText, randomId } from "../../utils/utils";
 export class ZSelect {
     constructor() {
         /** the id of the input element */
@@ -87,14 +87,11 @@ export class ZSelect {
         return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
     }
     getOptionId(item) {
-        return `${this.htmlid}_key_${item.id}`;
+        return `${this.htmlid}_key_${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;
     }
     getResetOptionId() {
         return `${this.htmlid}_key_reset`;
     }
-    getItemIdFromOptionId(optionId) {
-        return optionId.replace(`${this.htmlid}_key_`, ``);
-    }
     getGroupedItems() {
         if (!this.itemsList.length) {
             return [];
@@ -224,8 +221,7 @@ export class ZSelect {
                         this.handleResetClick();
                     }
                     else {
-                        const itemId = this.getItemIdFromOptionId(this.focusedItemId);
-                        const item = this.itemsList.find((e) => e.id === itemId) || null;
+                        const item = this.itemsList.find((e) => this.getOptionId(e) === this.focusedItemId) || null;
                         if (item) {
                             this.selectedItem = item;
                             this.emitOptionSelect();
@@ -469,7 +465,7 @@ export class ZSelect {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '375b2aba49331cc572cb884f41f2d37c94c7f920', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '75718f2b3021a18a07fe3b4119849480b11dca4a', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '453b88d07dba674089b87d0e203154d57967ae20', class: {
+        return (h(Host, { key: 'f59a9eb487f7e07167a2760cff9d317e43866b8b', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: 'ebb63998048529b08157000dd0b6e444732ccb28', role: "navigation" }, h("slot", { key: '14743c8ee6a293c944b32b522ff78e763be263c2' })));
+        return (h(Host, { key: '10e061c4cb346cdd60da9a69036627bf96772337', role: "navigation" }, h("slot", { key: '670c077860b774216577c2d3d8b7be29f6c09ecb' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-stepper-item/index.js

@@ -8,7 +8,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: '7aa1de5d716837aadddf7f403322ff3cd296848e', role: "listitem" }, h("button", Object.assign({ key: 'beb11602a3c794d7a745ab82a58d033b6e0752e5', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '892e9dc3c317594f13616a6f3581ad2451721cf1', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '4e91ebaf7ed054394482485c8a67c973a783ed48' }, h("slot", { key: '7faef9a6f126d000f742e4e8a58d6b37cdf48504' })))));
+        return (h(Host, { key: 'bb0ceb975a1380777583fd907c244bb4980fb606', role: "listitem" }, h("button", Object.assign({ key: 'd059cfce75ffd60f0f3d2215aaa639dcdfdbb500', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'ce84b4f682bc3f5a1753f6903493eba8d407bdf0', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '2252ddbf8636b2138f2620a9c1e3ba1eb08aa2b0' }, h("slot", { key: 'a04ee80011c0b71bcce5488f0d5f3594ecd65da1' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,15 +2,13 @@ import { Host, h } from "@stencil/core";
 /**
  * Ztag component.
  * @slot - The text of the z-tag.
- * @cssprop --z-tag-text-color - text and icon color using tokens.
- * @cssprop --z-tag-bg - background color of the z-tag.
  */
 export class ZTag {
     render() {
-        return (h(Host, { key: '79058b7bd9a1c161e6bc55fc0a737e6f2f3c8a06', class: {
+        return (h(Host, { key: 'eafe79f7342455535bc2d0550819506bb5f2417d', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: 'ac25c974cbb40a04bb83adabe53011bb4dd89dd3', name: this.icon }), h("div", { key: '4150a1f6301110f690a595c5e2b5169d90aa4802' }, h("slot", { key: 'd3f2e88bf2635ec142a71c5752f264cd9e0077f7' }))));
+            } }, this.icon && h("z-icon", { key: 'a0cb672be061f30da008e60acf3d8104faf00e9d', name: this.icon }), h("div", { key: '688919faeafac3d13f92a7a24d0f1a4c54570d79' }, h("slot", { key: '129f3625ee07bfb97a1c23e65b6014427a5d8232' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --z-tag-text-color: text and icon color using tokens.
+   * @prop --z-tag-bg: background color of the z-tag.
+   */
+
   --z-icon-width: 14px;
   --z-icon-height: 14px;
 

package/dist/collection/components/z-toast-notification/index.js

@@ -151,19 +151,19 @@ export class ZToastNotification {
         }
     }
     render() {
-        return (h(Host, { key: 'e0a58f45156d16fb3ec1cac2e4a13e6bdaf719b7', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: 'cb958b060a71a07a4ecce7638880632a729b244e', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, h("div", { key: 'dc37f25eddcc763014c01766f43fba82ed54eb64', class: "toast-notification-container" }, h("div", { key: '3b832ddf285d2f203a5172ea20c221d7c5fecf8b', class: "toast-notification-content" }, h("div", { key: 'b701ba1ea667e98092b858cd31275f8beb1cf89a', class: "toast-notification-text" }, this.heading && h("span", { key: '643748547bf51bbb5ffeae968e9a6f5fb1f8db1e', class: "title" }, this.heading), h("span", { key: '2c1d2f616dc9c34b847732af066a0750e1ea49a2', class: "message" }, h("slot", { key: 'fea0d0b716ff11a64eeb98d2013da6887eeb5c99', name: "message" }, this.message && h("span", { key: '5867861be21564191c97f7cabace3c33645b4cd2', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '3405e83126816b47017f59da2bd95a8195c30a25', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '821f8f8ce998969cf16323c72c151c5dc0a72d62', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'c3e84a06feaf5632d0733971786dc824b2fa3ab6', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: 'bb0c924c4bf765c3c5b10497a705b46ea9355e57', class: "toast-notification-container" }, h("div", { key: 'd4c0c26704b32f411c0c2d31fa76d870869fca20', class: "toast-notification-content" }, h("div", { key: 'e8e4ed45ff772f585df2c64211e931d27fe65605', class: "toast-notification-text" }, this.heading && h("span", { key: '3498d097acea2e76513990226b9e1a25f82dcf36', class: "title" }, this.heading), h("span", { key: 'ce6794321d893ed41fbe155326b3e24d7768923b', class: "message" }, h("slot", { key: '5af5d1d7a6ebb52ac2e866443a07af15488043be', name: "message" }, this.message && h("span", { key: 'e9a525bb1342fb801a96aa6b9c81b485c0e0ddf9', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: 'd1505e5111a6e9886847828dfa0007273017536b', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'fd1e6eda846a9351058b0b9103f1564bd7641a04', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '57243b952bc95fd15669fa39ac43848e652559f6', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, h("z-icon", { key: '67397c893a19e479e6f76e5c1428ce301f12416e', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: '5c88075aa5be21bf3e8838701473793fe5e04dfe', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: '9c4418dc9b3f94c7fb935bc5544338c54a974910', name: "toasts" });
+        return h("slot", { key: '0566f651d80145e7781e792714aab742850714f7', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,10 +16,10 @@ export class ZToggleButton {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '246d3cb54f0af334717c38005e7494388420e2fd', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '12715211c2a202659aebbbafce50ef723523e5b5', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'a971c5521659db9d407f39592907e9ad9e755cf5', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '2e6c9c85c5728eb03116da7b58f13da76abd1cf1', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
     static get is() { return "z-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-switch/index.js

@@ -26,14 +26,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: 'a71496b0436b37aaf6b0af879bae53be6a627efa' }, h("input", { key: '716eec97479d25139fe00b144a58d26941ded2a3', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '8907147d34ed7b1c944936e1c3e73519ef77f00b', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: '56f9d8ff6eb13dfa9c113cbf6c0938e141d55c67' }, h("input", { key: '3417b90e089286fad9bccb61a5f4b39ae4168f91', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'ddd2fe347095d9551d8881c83a9a88f2a76baa75', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'c3a9dc659fee0c089799a011568b2df707f62c34' }, h("slot", { key: '68be5cec64b7d973bd40d59be54580170bd7ec5e' })), h("span", { key: '206640ff4c480d2923f8c99b80093b8bf08ee68a', class: {
+            } }, h("span", { key: '8532e35c90ac967e7bd5ba19b6cfb427e30a8a9e' }, h("slot", { key: '013eb019d7033bdf49fc2ca79ec647dc47aa5516' })), h("span", { key: '4aa4b5abb12d819bb253c68f8315baf89935dd70', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '31d158040dfc2cb2e605ee5271cd1b992016c1e2', class: "circle" }, this.checked && (h("z-icon", { key: '2d45f7c22746d2db091e0ee2096b3f580064e8aa', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '1379aa626ccb15cc65337fd09063865051078dfb', class: "circle" }, this.checked && (h("z-icon", { key: 'c69f5f85fd886ae9ab30a559a6db66c1ad4f1db7', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }