@zanichelli/albe-web-components 5.5.6-cs1 → 5.6.0

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

@@ -1,24 +1,23 @@
 :host {
-  margin-top: calc(var(--space-unit) * 3);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  margin-top: calc(var(--space-unit) * 3);
 }
 
 :host > .dragdrop {
-  position: relative;
   display: flex;
-  height: 228px;
+  color: var(--color-text01);
   flex-direction: column;
-  border-color: var(--color-surface04);
-  background-color: var(--color-surface02);
-
-  /* Native CSS properties don't support the customization of border-style.
-  Therefore, we use a trick with an SVG image inside background-image property.
-  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.
+  position: relative;
+  /* Native CSS properties don't support the customization of border-style. 
+  Therefore, we use a trick with an SVG image inside background-image property. 
+  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. 
   Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have. */
   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-text01);
+  border-color: var(--color-surface04);
+  height: 228px;
+  background-color: var(--color-surface02);
 }
 
 /* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */
@@ -28,24 +27,36 @@
 
 :host > .dragdrop .dragover-container {
   position: absolute;
-  z-index: 10;
   top: 0;
   left: 0;
-  display: none;
   width: 100%;
   height: 100%;
+  z-index: 10;
+  display: none;
   background-color: var(--color-primary03);
   box-shadow: var(--shadow-focus-primary);
 }
 
 :host > .dragdrop .dragover-container .dragover-message {
-  padding: 10px 28px;
   background-color: var(--color-link-primary);
   color: var(--color-text04);
+  padding: 10px 28px;
 }
 
 :host > .dragdrop.dragover .dragover-container {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
 }

package/dist/collection/components/file-upload/z-file/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { PopoverPositions, ZChipType } from "../../../beans";
 import { tabletBreakpoint } from "../../../constants/breakpoints";
 export class ZFile {
@@ -30,7 +30,7 @@ export class ZFile {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPositions.AUTO, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+    return (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPositions.auto, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.default }, h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
   }
   static get is() { return "z-file"; }
   static get encapsulation() { return "scoped"; }
@@ -58,17 +58,17 @@ export class ZFile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "File chip id"
+          "text": ""
         },
         "attribute": "file-number",
         "reflect": false
       },
       "fileName": {
-        "type": "string",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,

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

@@ -1,7 +1,7 @@
 :host {
-  position: relative;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  position: relative;
 }
 
 :host > z-popover {
@@ -13,11 +13,24 @@
 }
 
 :host > z-chip span {
-  display: block;
-  overflow: hidden;
   max-width: 250px;
-  letter-spacing: 0.32px;
-  line-height: 1.33;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 1.33;
+  letter-spacing: 0.32px;
+  display: block;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
 }

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -1,15 +1,15 @@
-import { h, Host } from "@stencil/core";
-import { DeviceEnum, DividerSize, ZFileUploadTypeEnum } from "../../../beans";
+import { h, } from "@stencil/core";
+import { DeviceEnum, DividerSize, ZFileUploadTypeEnum, } from "../../../beans";
 import { getDevice } from "../../../utils/utils";
 export class ZFileUpload {
   constructor() {
     /** Prop indicating the file upload type - can be default or dragdrop */
-    this.type = ZFileUploadTypeEnum.DEFAULT;
+    this.type = ZFileUploadTypeEnum.default;
     /** Files added by the user */
     this.files = [];
     this.inputAttributes = {
       type: "file",
-      id: "file-elem",
+      id: "fileElem",
       multiple: true,
     };
   }
@@ -36,9 +36,9 @@ export class ZFileUpload {
   }
   componentWillLoad() {
     this.invalidFiles = new Map();
-    if (this.type === ZFileUploadTypeEnum.DRAGDROP && getDevice() !== DeviceEnum.DESKTOP) {
-      this.type = ZFileUploadTypeEnum.DEFAULT;
-    }
+    if (this.type === ZFileUploadTypeEnum.dragdrop &&
+      getDevice() !== DeviceEnum.desktop)
+      this.type = ZFileUploadTypeEnum.default;
   }
   fileInputHandler() {
     if (this.input.files.length) {
@@ -54,13 +54,13 @@ export class ZFileUpload {
       this.el.querySelector("z-file:last-child z-chip button").focus();
     }
     else {
-      this.type === ZFileUploadTypeEnum.DEFAULT
+      this.type === ZFileUploadTypeEnum.default
         ? this.button.shadowRoot.querySelector("button").focus()
         : this.uploadLink.focus();
     }
   }
   checkFiles(files) {
-    const errors = new Map();
+    let errors = new Map();
     const sizeErrorString = `supera i ${this.fileMaxSize}MB`;
     const formatErrorString = " ha un'estensione non prevista";
     files.forEach((file) => {
@@ -107,13 +107,10 @@ export class ZFileUpload {
       fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
     }
     const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
-    return h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null);
+    return (h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null));
   }
   renderFileSection() {
-    if (!this.files.length) {
-      return;
-    }
-    return (this.files.length > 0 && (h("section", { class: "files-container" }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM }))));
+    return (this.files.length > 0 && (h("section", { class: "files-container" }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.medium }))));
   }
   renderInput() {
     return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
@@ -160,12 +157,17 @@ export class ZFileUpload {
     return `Il file ${key} ${(_a = value[0]) !== null && _a !== void 0 ? _a : ""}${bothErrors} ${(_b = value[1]) !== null && _b !== void 0 ? _b : ""} e non può quindi essere caricato.`;
   }
   handleErrorModalContent() {
-    return (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
+    return (h("div", { slot: "modalContent" }, h("div", { class: "modalWrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
       return (h("z-body", { variant: "regular", level: 3 }, this.formatErrorString(key, value)));
     })))));
   }
   render() {
-    return (h(Host, null, h("div", { tabIndex: 0, class: `container ${this.type}` }, this.renderTitle(), this.type == ZFileUploadTypeEnum.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+    return [
+      h("div", { tabIndex: 0, class: `container ${this.type}` }, this.renderTitle(), this.type == ZFileUploadTypeEnum.default
+        ? this.renderDefaultMode()
+        : this.renderDragDropMode()),
+      !!this.invalidFiles.size && (h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent())),
+    ];
   }
   static get is() { return "z-file-upload"; }
   static get encapsulation() { return "scoped"; }
@@ -186,7 +188,7 @@ export class ZFileUpload {
         "mutable": true,
         "complexType": {
           "original": "ZFileUploadTypeEnum",
-          "resolved": "ZFileUploadTypeEnum.DEFAULT | ZFileUploadTypeEnum.DRAGDROP",
+          "resolved": "ZFileUploadTypeEnum.default | ZFileUploadTypeEnum.dragdrop",
           "references": {
             "ZFileUploadTypeEnum": {
               "location": "import",
@@ -202,14 +204,14 @@ export class ZFileUpload {
         },
         "attribute": "type",
         "reflect": true,
-        "defaultValue": "ZFileUploadTypeEnum.DEFAULT"
+        "defaultValue": "ZFileUploadTypeEnum.default"
       },
       "buttonVariant": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "ButtonVariantEnum",
-          "resolved": "ButtonVariantEnum.DARK_BG | ButtonVariantEnum.PRIMARY | ButtonVariantEnum.SECONDARY | ButtonVariantEnum.TERTIARY",
+          "resolved": "(typeof ButtonVariantEnum)[\"dark-bg\"] | ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary",
           "references": {
             "ButtonVariantEnum": {
               "location": "import",

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

@@ -1,7 +1,7 @@
 :host {
-  color: var(--color-text01);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  color: var(--color-text01);
 }
 
 :host > .container {
@@ -9,16 +9,16 @@
   flex-direction: column;
 }
 
-:host .modal-wrapper {
+:host .modalWrapper {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
 
-:host .modal-wrapper > .files {
+:host .modalWrapper > .files {
+  margin: calc(var(--space-unit) * 4);
   display: flex;
   flex-direction: column;
-  margin: calc(var(--space-unit) * 4);
   gap: var(--space-unit);
 }
 
@@ -41,7 +41,7 @@
   margin-bottom: var(--space-unit);
 }
 
-input#file-elem {
+input#fileElem {
   display: none;
 }
 
@@ -63,10 +63,9 @@ input#file-elem {
 :host > .container > .files-container > .files {
   display: flex;
   flex-wrap: wrap;
-  column-gap: calc(var(--space-unit) * 2);
   row-gap: calc(var(--space-unit) * 2);
+  column-gap: calc(var(--space-unit) * 2);
 }
-
 :host > .container > .files-container > z-divider {
   margin-top: calc(var(--space-unit) * 3);
   margin-bottom: 0;
@@ -78,3 +77,11 @@ input#file-elem {
     align-self: flex-start;
   }
 }
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

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

@@ -8,7 +8,8 @@ import { ButtonSizeEnum } from "../../../beans";
 export class ZFooter {
   constructor() {
     this.creditsLinkId = "creditsLinkId";
-    this.emitReportAProblemButtonClick = this.emitReportAProblemButtonClick.bind(this);
+    this.emitReportAProblemButtonClick =
+      this.emitReportAProblemButtonClick.bind(this);
   }
   componentWillLoad() {
     if (this.data) {
@@ -53,17 +54,21 @@ export class ZFooter {
   }
   renderFooterProductInfo() {
     var _a;
-    if (this.productName || this.productVersion || this.productCreditsLink != null || this.showReportAProblemButton) {
+    if (this.productName ||
+      this.productVersion ||
+      this.productCreditsLink != null ||
+      this.showReportAProblemButton) {
       const versionString = `${this.productName ? " versione" : "Versione"} ${this.productVersion}`;
       const creditsObject = (h("z-body", { level: 5 }, (this.productName || this.productVersion) && " - ", h("z-link", { htmlid: this.creditsLinkId, href: (_a = this.productCreditsLink) === null || _a === void 0 ? void 0 : _a.trim(), target: "_blank", textcolor: "white" }, "Credits")));
-      return (h("div", { id: "extension" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("span", null, this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (h("div", null, h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), h("z-button", { size: ButtonSizeEnum.SMALL, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), h("z-divider", { color: "gray500" }))));
+      return (h("div", { id: "extension" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth
+          ? { "--mw": `${this.contentMaxWidth}px` }
+          : {} }, h("span", null, this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && (h("z-body", { level: 5 }, versionString)), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (h("div", null, h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), h("z-button", { size: ButtonSizeEnum.small, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), h("z-divider", { color: "gray500" }))));
     }
   }
   // INFO: backward compatibility
   renderFooterTopJsonData() {
-    if (!this.jsonData || !this.jsonData.zanichelliLinks) {
+    if (!this.jsonData || !this.jsonData.zanichelliLinks)
       return null;
-    }
     const zanichelliLinks = this.jsonData.zanichelliLinks;
     if (this.jsonData.bottomLinks) {
       const bottomLinks = this.jsonData.bottomLinks;
@@ -76,17 +81,15 @@ export class ZFooter {
   }
   // INFO: backward compatibility
   renderFooterBottomJsonData() {
-    if (!this.jsonData || !this.jsonData.bottomLinks) {
+    if (!this.jsonData || !this.jsonData.bottomLinks)
       return null;
-    }
     const bottomLinks = this.jsonData.bottomLinks;
-    return bottomLinks.map((item) => h("z-footer-link", { href: item.link }, item.label));
+    return bottomLinks.map((item) => (h("z-footer-link", { href: item.link }, item.label)));
   }
   // INFO: backward compatibility
   renderFooterSocialJsonData() {
-    if (!this.jsonData || !this.jsonData.social) {
+    if (!this.jsonData || !this.jsonData.social)
       return null;
-    }
     const social = this.jsonData.social;
     return social.map((item) => (h("z-footer-social", { href: item.link, icon: item.icon, description: item.description })));
   }

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

@@ -6,11 +6,11 @@ footer {
   width: auto;
   height: auto;
   box-sizing: border-box;
+  font-family: var(--font-family-sans);
+  font-size: 13px;
   padding: var(--space-unit) 0;
   background-color: var(--gray900);
   color: var(--gray50);
-  font-family: var(--font-family-sans);
-  font-size: 13px;
 }
 
 footer * {
@@ -28,10 +28,10 @@ footer > section > div {
 #bottom {
   width: auto;
   height: auto;
-  padding: 0 calc(var(--space-unit) * 2);
   margin: 0;
-  font-size: 12px;
+  padding: 0 calc(var(--space-unit) * 2);
   white-space: pre-line;
+  font-size: 12px;
 }
 
 #bottom > div {
@@ -41,12 +41,12 @@ footer > section > div {
 
 #bottom > div > div.item {
   display: flex;
-  width: auto;
-  height: auto;
   flex-direction: column;
   align-items: flex-start;
-  padding: calc(var(--space-unit) * 2) 0;
   grid-column: span 1;
+  height: auto;
+  width: auto;
+  padding: calc(var(--space-unit) * 2) 0;
 }
 
 #bottom > div > div.item:nth-child(1) {
@@ -60,11 +60,11 @@ footer > section > div {
 
 #bottom > div > div.item > div.social {
   display: grid;
-  padding: 0;
-  margin-bottom: 0;
-  column-gap: 12px;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(auto-fill, 24px);
+  column-gap: 12px;
+  padding: 0;
+  margin-bottom: 0px;
 }
 
 #bottom > div > div.bottom-links {
@@ -72,8 +72,8 @@ footer > section > div {
 }
 
 #bottom > div > div.item > p {
-  padding: var(--space-unit) 0;
   margin: var(--space-unit) 0;
+  padding: var(--space-unit) 0;
 }
 
 #bottom > div > div.item > p:first-child {
@@ -94,9 +94,9 @@ footer > section > div {
 
 #extension > div {
   display: grid;
-  align-items: center;
-  grid-row-gap: var(--space-unit);
   grid-template-columns: 1fr;
+  grid-row-gap: var(--space-unit);
+  align-items: center;
 }
 
 #extension z-divider {
@@ -108,10 +108,8 @@ footer > section > div {
 }
 
 div.limited-width {
-  --mw: none;
-
-  max-width: var(--mw);
   margin: auto;
+  max-width: var(--mw);
 }
 
 z-button {
@@ -126,8 +124,8 @@ z-button {
   }
 
   #top {
-    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
     background-color: var(--gray800);
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
   }
 
   /* backward compatibility */
@@ -136,13 +134,13 @@ z-button {
   }
 
   #bottom {
-    padding: 0 calc(var(--space-unit) * 3);
     background-color: var(--gray900);
+    padding: 0 calc(var(--space-unit) * 3);
   }
 
   #bottom > div {
-    grid-column-gap: var(--grid-tablet-margin);
     grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: var(--grid-tablet-margin);
   }
 
   #bottom > div > div.item {
@@ -168,18 +166,22 @@ z-button {
   }
 
   #bottom > div > div.bottom-links {
-    display: grid;
-    order: 3;
-    font-size: 12px;
+    display: block;
     grid-column: span 2;
-    grid-column-gap: var(--grid-tablet-margin);
+    order: 3;
+  }
+
+  #bottom > div > div.bottom-links {
+    display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(auto-fill, 24px);
+    grid-column-gap: var(--grid-tablet-margin);
+    font-size: 12px;
   }
 
   #extension {
-    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;
     margin: auto;
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;
     background-color: var(--gray800);
     color: white;
     grid-template-columns: 1fr 1fr;
@@ -201,8 +203,8 @@ z-button {
   }
 
   #top > div {
-    grid-column-gap: var(--grid-desktop-margin);
     grid-template-columns: repeat(6, 1fr);
+    grid-column-gap: var(--grid-desktop-margin);
   }
 
   #bottom > div > div.item:nth-child(1) > p:nth-of-type(2) {
@@ -220,9 +222,12 @@ z-button {
 
   #bottom > div > div.bottom-links {
     padding: calc(var(--space-unit) * 2) 0 0 0;
-    margin: 0;
-    grid-column-gap: var(--grid-desktop-margin);
+  }
+
+  #bottom > div > div.bottom-links {
     grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: var(--grid-desktop-margin);
+    margin: 0;
   }
 }
 

package/dist/collection/components/footer/z-footer-link/styles.css

@@ -5,21 +5,29 @@
 
 :host > a {
   display: inline-block;
-  width: 100%;
+  color: var(--color-white);
   padding: calc(var(--space-unit) / 2 * 3) 0;
   border-bottom: 1px solid var(--gray50);
-  color: var(--color-white);
-  font-size: 14px;
   text-decoration: none;
+  font-size: 14px;
+  width: 100%;
 }
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   :host a {
-    width: initial;
-    padding: 0;
-    border-bottom: none;
     font-size: 12px;
+    border-bottom: none;
     text-decoration: underline;
+    padding: 0;
+    width: initial;
   }
 }
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/components/footer/z-footer-section/index.js

@@ -7,7 +7,7 @@ export class ZFooterSection {
     this.isOpen = false;
   }
   renderToggleButton() {
-    return (h("button", { class: "toggle-button", onClick: () => (this.isOpen = !this.isOpen) }, h("z-icon", { name: this.isOpen ? "chevron-up" : "chevron-down", width: 16, height: 16 })));
+    return (h("button", { class: "toggleButton", onClick: () => (this.isOpen = !this.isOpen) }, h("z-icon", { name: this.isOpen ? "chevron-up" : "chevron-down", width: 16, height: 16 })));
   }
   render() {
     return (h("nav", null, h("div", { class: "header" }, h("h2", null, this.name), this.renderToggleButton()), h("div", { class: `content ${this.isOpen ? "show" : ""}` }, h("slot", null))));