@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -1,23 +1,24 @@
 :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;
-  color: var(--color-text01);
+  height: 228px;
   flex-direction: column;
-  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. 
+  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.
   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;
-  border-color: var(--color-surface04);
-  height: 228px;
-  background-color: var(--color-surface02);
+  color: var(--color-text01);
 }
 
 /* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */
@@ -27,36 +28,24 @@
 
 :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;
-  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) {
+  justify-content: center;
 }

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": ""
+          "text": "File chip id"
         },
         "attribute": "file-number",
         "reflect": false
       },
       "fileName": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "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,24 +13,11 @@
 }
 
 :host > z-chip span {
-  max-width: 250px;
+  display: block;
   overflow: hidden;
+  max-width: 250px;
+  letter-spacing: 0.32px;
+  line-height: 1.33;
   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, } from "@stencil/core";
-import { DeviceEnum, DividerSize, ZFileUploadTypeEnum, } from "../../../beans";
+import { h, Host } from "@stencil/core";
+import { Device, DividerSize, ZFileUploadType } 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 = ZFileUploadType.DEFAULT;
     /** Files added by the user */
     this.files = [];
     this.inputAttributes = {
       type: "file",
-      id: "fileElem",
+      id: "file-elem",
       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 === ZFileUploadType.DRAGDROP && getDevice() !== Device.DESKTOP) {
+      this.type = ZFileUploadType.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 === ZFileUploadType.DEFAULT
         ? this.button.shadowRoot.querySelector("button").focus()
         : this.uploadLink.focus();
     }
   }
   checkFiles(files) {
-    let errors = new Map();
+    const errors = new Map();
     const sizeErrorString = `supera i ${this.fileMaxSize}MB`;
     const formatErrorString = " ha un'estensione non prevista";
     files.forEach((file) => {
@@ -107,10 +107,13 @@ 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() {
-    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 }))));
+    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 }))));
   }
   renderInput() {
     return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
@@ -157,17 +160,12 @@ 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: "modalWrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
+    return (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, 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("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(Host, null, h("div", { tabIndex: 0, class: `container ${this.type}` }, this.renderTitle(), this.type == ZFileUploadType.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"; }
@@ -187,10 +185,10 @@ export class ZFileUpload {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "ZFileUploadTypeEnum",
-          "resolved": "ZFileUploadTypeEnum.default | ZFileUploadTypeEnum.dragdrop",
+          "original": "ZFileUploadType",
+          "resolved": "ZFileUploadType.DEFAULT | ZFileUploadType.DRAGDROP",
           "references": {
-            "ZFileUploadTypeEnum": {
+            "ZFileUploadType": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -204,16 +202,16 @@ export class ZFileUpload {
         },
         "attribute": "type",
         "reflect": true,
-        "defaultValue": "ZFileUploadTypeEnum.default"
+        "defaultValue": "ZFileUploadType.DEFAULT"
       },
       "buttonVariant": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ButtonVariantEnum",
-          "resolved": "(typeof ButtonVariantEnum)[\"dark-bg\"] | ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary",
+          "original": "ButtonVariant",
+          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
           "references": {
-            "ButtonVariantEnum": {
+            "ButtonVariant": {
               "location": "import",
               "path": "../../../beans"
             }

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 .modalWrapper {
+:host .modal-wrapper {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
-:host .modalWrapper > .files {
-  margin: calc(var(--space-unit) * 4);
+:host .modal-wrapper > .files {
   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#fileElem {
+input#file-elem {
   display: none;
 }
 
@@ -63,9 +63,10 @@ input#fileElem {
 :host > .container > .files-container > .files {
   display: flex;
   flex-wrap: wrap;
-  row-gap: calc(var(--space-unit) * 2);
   column-gap: calc(var(--space-unit) * 2);
+  row-gap: calc(var(--space-unit) * 2);
 }
+
 :host > .container > .files-container > z-divider {
   margin-top: calc(var(--space-unit) * 3);
   margin-bottom: 0;
@@ -77,11 +78,3 @@ input#fileElem {
     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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ButtonSizeEnum } from "../../../beans";
+import { ButtonSize } from "../../../beans";
 /**
  * @slot - main navigation
  * @slot links - bottom navigation
@@ -8,8 +8,7 @@ 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) {
@@ -54,21 +53,17 @@ 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: ButtonSize.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;
@@ -81,15 +76,17 @@ 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;
-  margin: 0;
   padding: 0 calc(var(--space-unit) * 2);
-  white-space: pre-line;
+  margin: 0;
   font-size: 12px;
+  white-space: pre-line;
 }
 
 #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;
-  grid-column: span 1;
-  height: auto;
-  width: auto;
   padding: calc(var(--space-unit) * 2) 0;
+  grid-column: span 1;
 }
 
 #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 {
-  margin: var(--space-unit) 0;
   padding: var(--space-unit) 0;
+  margin: var(--space-unit) 0;
 }
 
 #bottom > div > div.item > p:first-child {
@@ -94,9 +94,9 @@ footer > section > div {
 
 #extension > div {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-row-gap: var(--space-unit);
   align-items: center;
+  grid-row-gap: var(--space-unit);
+  grid-template-columns: 1fr;
 }
 
 #extension z-divider {
@@ -108,8 +108,10 @@ footer > section > div {
 }
 
 div.limited-width {
-  margin: auto;
+  --mw: none;
+
   max-width: var(--mw);
+  margin: auto;
 }
 
 z-button {
@@ -124,8 +126,8 @@ z-button {
   }
 
   #top {
-    background-color: var(--gray800);
     padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
+    background-color: var(--gray800);
   }
 
   /* backward compatibility */
@@ -134,13 +136,13 @@ z-button {
   }
 
   #bottom {
-    background-color: var(--gray900);
     padding: 0 calc(var(--space-unit) * 3);
+    background-color: var(--gray900);
   }
 
   #bottom > div {
-    grid-template-columns: repeat(4, 1fr);
     grid-column-gap: var(--grid-tablet-margin);
+    grid-template-columns: repeat(4, 1fr);
   }
 
   #bottom > div > div.item {
@@ -165,23 +167,19 @@ z-button {
     height: 39px;
   }
 
-  #bottom > div > div.bottom-links {
-    display: block;
-    grid-column: span 2;
-    order: 3;
-  }
-
   #bottom > div > div.bottom-links {
     display: grid;
+    order: 3;
+    font-size: 12px;
+    grid-column: span 2;
+    grid-column-gap: var(--grid-tablet-margin);
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(auto-fill, 24px);
-    grid-column-gap: var(--grid-tablet-margin);
-    font-size: 12px;
   }
 
   #extension {
-    margin: auto;
     padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;
+    margin: auto;
     background-color: var(--gray800);
     color: white;
     grid-template-columns: 1fr 1fr;
@@ -203,8 +201,8 @@ z-button {
   }
 
   #top > div {
-    grid-template-columns: repeat(6, 1fr);
     grid-column-gap: var(--grid-desktop-margin);
+    grid-template-columns: repeat(6, 1fr);
   }
 
   #bottom > div > div.item:nth-child(1) > p:nth-of-type(2) {
@@ -222,12 +220,9 @@ z-button {
 
   #bottom > div > div.bottom-links {
     padding: calc(var(--space-unit) * 2) 0 0 0;
-  }
-
-  #bottom > div > div.bottom-links {
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: var(--grid-desktop-margin);
     margin: 0;
+    grid-column-gap: var(--grid-desktop-margin);
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 

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

@@ -5,29 +5,21 @@
 
 :host > a {
   display: inline-block;
-  color: var(--color-white);
+  width: 100%;
   padding: calc(var(--space-unit) / 2 * 3) 0;
   border-bottom: 1px solid var(--gray50);
-  text-decoration: none;
+  color: var(--color-white);
   font-size: 14px;
-  width: 100%;
+  text-decoration: none;
 }
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   :host a {
-    font-size: 12px;
+    width: initial;
+    padding: 0;
     border-bottom: none;
+    font-size: 12px;
     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: "toggleButton", onClick: () => (this.isOpen = !this.isOpen) }, h("z-icon", { name: this.isOpen ? "chevron-up" : "chevron-down", width: 16, height: 16 })));
+    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 })));
   }
   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))));