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

package/dist/collection/components/navigation/z-app-topbar/index.js

@@ -4,7 +4,7 @@ import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZAppTopbar {
   constructor() {
     /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.DARK;
+    this.theme = ThemeVariant.dark;
     this.topbarLinks = [];
   }
   handleResize() {
@@ -19,13 +19,13 @@ export class ZAppTopbar {
     }
   }
   renderTopbarLinks() {
-    return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
+    return this.topbarLinks.map((link) => h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.light ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label));
   }
   render() {
     return (h(Host, { class: {
         [this.theme]: true,
-        "limited-width": !!this.contentMaxWidth,
-      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.VERTICAL, color: this.theme === ThemeVariant.LIGHT ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
+        "limited-width": !!this.contentMaxWidth
+      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.vertical, color: this.theme === ThemeVariant.light ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
   }
   static get is() { return "z-app-topbar"; }
   static get encapsulation() { return "shadow"; }
@@ -46,7 +46,7 @@ export class ZAppTopbar {
         "mutable": false,
         "complexType": {
           "original": "ThemeVariant",
-          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
+          "resolved": "ThemeVariant.dark | ThemeVariant.light",
           "references": {
             "ThemeVariant": {
               "location": "import",
@@ -62,7 +62,7 @@ export class ZAppTopbar {
         },
         "attribute": "theme",
         "reflect": false,
-        "defaultValue": "ThemeVariant.DARK"
+        "defaultValue": "ThemeVariant.dark"
       },
       "contentMaxWidth": {
         "type": "number",

package/dist/collection/components/navigation/z-app-topbar/styles.css

@@ -1,13 +1,13 @@
 :host {
+  display: block;
   position: sticky;
-  z-index: 99;
+  box-sizing: border-box;
   top: 0;
-  display: block;
   height: calc(var(--space-unit) * 6);
-  box-sizing: border-box;
   padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);
-  background-color: var(--gray900);
   border-radius: var(--border-no-radius);
+  background-color: var(--gray900);
+  z-index: 99;
 }
 
 :host(.light) {
@@ -16,20 +16,18 @@
 
 :host > div {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 }
 
 :host(.limited-width) #content-container {
-  --mw: none;
-
-  max-width: var(--mw);
   margin: auto;
+  max-width: var(--mw);
 }
 
 .content-panel {
   display: flex;
-  align-items: center;
+  align-items: center
 }
 
 .content-panel > :not(:last-child) {
@@ -42,10 +40,10 @@
 
 z-link {
   font-family: var(--font-family-sans);
-  font-size: 14px;
   font-weight: var(--font-sb);
-  letter-spacing: 0.3px;
+  font-size: 14px;
   line-height: 20px;
+  letter-spacing: 0.3px;
 }
 
 /* Tablet breakpoint */
@@ -63,3 +61,11 @@ z-link {
     height: calc(var(--space-unit) * 3);
   }
 }
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/components/navigation/z-link/index.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { Host } from "@stencil/core/internal";
 /**
  * @slot - link content
  */
@@ -26,7 +27,7 @@ export class ZLink {
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
     this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
   }
-  componentWillLoad() {
+  componentWillRender() {
     if (this.iswhite) {
       console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
     }
@@ -40,9 +41,9 @@ export class ZLink {
   emitZLinkInteraction(e, linkId) {
     this.zLinkClick.emit({ e, linkId });
   }
-  componentDidLoad() {
+  componentDidRender() {
     if (this.icon) {
-      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue("font-size"));
+      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
       const currentSize = this.big ? 18 : Math.round(height * 1.125);
       if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
         this.iconSize = currentSize;
@@ -50,16 +51,13 @@ export class ZLink {
     }
   }
   render() {
-    return (h("a", { id: this.htmlid, href: this.href ? this.href : null, class: {
-        disabled: this.isdisabled,
-        active: this.isactive,
-        white: this.iswhite,
-        [this.textcolor || ""]: true,
-        underline: this.underline,
-      }, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && h("slot", null), this.icon && (h("z-icon", { style: {
-        "--z-icon-width": `${this.iconSize}px`,
-        "--z-icon-height": `${this.iconSize}px`,
-      }, name: this.icon })), this.iconposition === "left" && h("slot", null)));
+    const style = this.big ? { "--font-size-link": "16px", "--font-weight-link": "600" } : {};
+    return (h(Host, { style: style }, h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled ? "disabled" : ""}
+            ${this.isactive ? "active" : ""}
+            ${this.textcolor}
+            ${this.iswhite ? "white" : ""}
+            ${this.underline ? "underline" : ""}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && h("slot", null), this.icon &&
+      h("z-icon", { style: { "--z-icon-width": this.iconSize.toString(), "--z-icon-height": this.iconSize.toString() }, name: this.icon, height: this.iconSize, width: this.iconSize }), this.iconposition === "left" && h("slot", null))));
   }
   static get is() { return "z-link"; }
   static get encapsulation() { return "shadow"; }
@@ -203,7 +201,7 @@ export class ZLink {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary\" | \"inverse\" | \"white\" | \"black\"",
+          "original": "\"primary\"| \"inverse\" | \"white\" | \"black\"",
           "resolved": "\"black\" | \"inverse\" | \"primary\" | \"white\"",
           "references": {}
         },
@@ -249,7 +247,7 @@ export class ZLink {
           "text": "big link version"
         },
         "attribute": "big",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "iconposition": {

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

@@ -1,29 +1,26 @@
 :host {
   --font-size-link: inherit;
   --font-weight-link: inherit;
+}
 
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-link);
+:host {
+  font-family: var(--dashboard-font);
   font-weight: var(--font-weight-link);
+  font-size: var(--font-size-link);
   line-height: inherit;
   outline: none;
 }
 
-:host([big]) {
-  --font-size-link: 16px;
-  --font-weight-link: var(--font-sb);
-}
-
 a {
+  cursor: pointer;
+  color: var(--color-link-primary);
+  fill: var(--color-link-primary);
   display: inline-flex;
   align-items: center;
+  text-decoration: none;
   padding: calc(var(--space-unit) * 0.5) 0;
   border-top: var(--border-size-medium) solid transparent;
   border-bottom: var(--border-size-medium) solid transparent;
-  color: var(--color-link-primary);
-  cursor: pointer;
-  fill: var(--color-link-primary);
-  text-decoration: none;
 }
 
 a:hover,
@@ -55,10 +52,10 @@ a:visited {
 
 a.disabled,
 a.inverse.disabled {
-  color: var(--color-disabled03);
   cursor: default;
-  fill: var(--color-disabled03);
   pointer-events: none;
+  color: var(--color-disabled03);
+  fill: var(--color-disabled03);
 }
 
 a.underline,
@@ -159,9 +156,9 @@ a.black.disabled {
 }
 
 a > z-icon:first-child {
-  margin-right: var(--space-unit);
+  margin-right: 8px;
 }
 
 a > z-icon:last-child {
-  margin-left: var(--space-unit);
+  margin-left: 8px;
 }

package/dist/collection/components/navigation/z-menu/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from '@stencil/core';
 /**
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
@@ -31,7 +31,9 @@ export class ZMenu {
   }
   /** Close the floating list when a click is performed outside of this Element. */
   handleClick(ev) {
-    if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
+    if (!this.floating ||
+      !this.open ||
+      this.hostElement.contains(ev.target)) {
       return;
     }
     this.reflow();
@@ -58,7 +60,7 @@ export class ZMenu {
       const { style } = this.content;
       const { left } = this.hostElement.getBoundingClientRect();
       const widthPx = getComputedStyle(this.content).width;
-      const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
+      const width = widthPx ? parseFloat(widthPx.replace('px', '')) : 375;
       const safeScrollbarSpace = 30;
       style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
     }
@@ -79,18 +81,19 @@ export class ZMenu {
   onItemsChange() {
     this.checkContent();
     const items = this.hostElement.querySelectorAll('[slot="item"]');
-    items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute("role", "menuitem"));
+    items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute('role', 'menuitem'));
   }
   renderMenuLabel() {
     if (this.hasContent) {
-      return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+      return h("button", { class: "menu-label", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })));
     }
-    return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null))));
+    return h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null)));
   }
   render() {
-    return (h(Host, null, this.renderMenuLabel(), h("div", { class: "content", ref: (el) => {
-        this.content = el;
-      }, hidden: !this.open }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
+    return [
+      this.renderMenuLabel(),
+      h("div", { class: "content", ref: (el) => { this.content = el; }, hidden: !this.open }, this.hasHeader && h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent })), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))
+    ];
   }
   static get is() { return "z-menu"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation/z-menu/styles.css

@@ -5,9 +5,9 @@
 }
 
 :host {
-  position: relative;
   display: inline-flex;
   flex-direction: column;
+  position: relative;
 }
 
 ::slotted(a) {
@@ -21,12 +21,12 @@
 }
 
 .menu-label {
-  padding: 0;
-  border: 0;
   margin: 0;
+  padding: 0;
+  color: inherit;
   background: transparent;
+  border: 0;
   border-radius: 0;
-  color: inherit;
   outline: none;
   text-align: left;
 }
@@ -37,11 +37,11 @@ button.menu-label {
 
 .menu-label:focus-within {
   z-index: 1;
-  padding-right: calc(var(--space-unit) * 0.5);
-  padding-left: calc(var(--space-unit) * 0.5);
+  box-shadow: var(--shadow-focus-primary);
   margin-right: calc(var(--space-unit) * -0.5);
   margin-left: calc(var(--space-unit) * -0.5);
-  box-shadow: var(--shadow-focus-primary);
+  padding-right: calc(var(--space-unit) * 0.5);
+  padding-left: calc(var(--space-unit) * 0.5);
 }
 
 .menu-label .menu-label-content {
@@ -69,7 +69,7 @@ button.menu-label {
 
 .menu-label z-icon {
   margin-left: calc(var(--space-unit) * 4);
-  fill: currentcolor;
+  fill: currentColor;
 }
 
 .content {
@@ -81,37 +81,40 @@ button.menu-label {
 }
 
 :host([floating]) .content {
-  position: absolute;
-  top: 100%;
-  left: 0;
   width: 375px;
-  min-width: 100%;
   max-width: 100vw;
   padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);
-  box-shadow: var(--shadow-2);
 }
 
 :host(:not([floating])) .content {
   width: 100%;
 }
 
+:host([floating]) .content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  box-shadow: var(--shadow-2);
+  min-width: 100%;
+}
+
 .header {
   display: flex;
   align-items: center;
   padding: var(--space-unit) 0 calc(var(--space-unit) * 2);
 }
 
-.header ::slotted(img[slot="header"]) {
+.header ::slotted(img[slot='header']) {
   width: calc(var(--space-unit) * 11.25);
-  height: auto;
   object-fit: contain;
+  height: auto;
 }
 
-.header ::slotted([slot="header"]:not(:first-child)) {
+.header ::slotted([slot='header']:not(:first-child)) {
   margin: auto 0;
   margin-left: calc(var(--space-unit) * 2.5);
-  font-size: var(--font-size-3);
   font-weight: var(--font-sb);
+  font-size: var(--font-size-3);
   line-height: 1.5;
 }
 
@@ -122,7 +125,7 @@ button.menu-label {
   background: inherit;
 }
 
-.items > ::slotted([slot="item"]) {
+.items > ::slotted([slot='item']) {
   display: inline-flex;
   width: 100%;
   margin: 0;
@@ -131,16 +134,16 @@ button.menu-label {
   outline: none;
 }
 
-.items > ::slotted([slot="item"]:focus:focus-visible) {
+.items > ::slotted([slot='item']:focus:focus-visible) {
   box-shadow: var(--shadow-focus-primary);
 }
 
-.items > ::slotted([slot="item"]:not(z-menu-section)) {
+.items > ::slotted([slot='item']:not(z-menu-section)) {
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
   border-bottom: var(--border-size-small) solid var(--color-surface05);
 }
 
-.items > ::slotted([slot="item"]:hover),
-.items > ::slotted([slot="item"]:active) {
+.items > ::slotted([slot='item']:hover),
+.items > ::slotted([slot='item']:active) {
   border-color: var(--color-secondary01);
 }

package/dist/collection/components/navigation/z-menu-dropdown/index.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { KeyboardKeyCodeEnum } from "../../../beans/index";
-import { handleKeyboardSubmit, getClickedElement, getElementTree } from "../../../utils/utils";
+import { handleKeyboardSubmit, getClickedElement, getElementTree, } from "../../../utils/utils";
 export class ZMenuDropdown {
   constructor() {
     this.ismenuopen = false;
@@ -8,7 +8,10 @@ export class ZMenuDropdown {
     this.handleFocus = this.handleFocus.bind(this);
   }
   componentWillRender() {
-    this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
+    this.linkarray =
+      typeof this.menucontent === "string"
+        ? JSON.parse(this.menucontent)
+        : this.menucontent;
   }
   renderMenuOpen() {
     if (this.ismenuopen) {
@@ -19,17 +22,15 @@ export class ZMenuDropdown {
     return (h("span", { class: "arrow" }, h("z-icon", { name: "caret-down", width: 14, height: 14 })));
   }
   retriveMenuClass() {
-    if (this.ismenuopen) {
+    if (this.ismenuopen)
       return "menu-opened";
-    }
   }
   handleToggle() {
     this.ismenuopen = !this.ismenuopen;
   }
   handleFocus(e) {
-    if (e instanceof KeyboardEvent && e.keyCode !== KeyboardKeyCodeEnum.TAB) {
+    if (e instanceof KeyboardEvent && e.keyCode !== KeyboardKeyCodeEnum.TAB)
       return;
-    }
     const tree = getElementTree(getClickedElement());
     const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
     if (!menuParent) {

package/dist/collection/components/navigation/z-menu-dropdown/styles.css

@@ -1,9 +1,9 @@
 :host {
-  width: inherit;
-  height: 32px;
   font-family: var(--dashboard-font);
-  font-size: 12px;
   font-weight: var(--font-sb);
+  font-size: 12px;
+  height: 32px;
+  width: inherit;
   letter-spacing: 0.17px;
 }
 
@@ -16,10 +16,10 @@ a:active {
 
 :host > a {
   display: block;
-  border: var(--border-size-small) solid transparent;
   background: var(--bg-grey-050);
-  border-radius: var(--border-radius);
   color: var(--text-grey-800);
+  border-radius: var(--border-radius);
+  border: var(--border-size-small) solid transparent;
   outline: none;
 }
 
@@ -34,25 +34,25 @@ a:active {
 }
 
 :host > a:focus {
-  border: var(--border-size-small) solid var(--myz-blue);
-  box-shadow: 0 0 2px 2px var(--myz-blue-light);
   color: var(--myz-blue);
   fill: var(--myz-blue);
+  border: var(--border-size-small) solid var(--myz-blue);
+  box-shadow: 0px 0px 2px 2px var(--myz-blue-light);
 }
 
 :host > a:active {
-  border: var(--border-size-small) solid var(--myz-blue-light);
-  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 40%);
   color: var(--myz-blue-light);
   fill: var(--myz-blue-light);
+  border: var(--border-size-small) solid var(--myz-blue-light);
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
 }
 
 div.container {
-  position: relative;
   display: flex;
-  height: 32px;
   align-items: center;
   justify-content: space-between;
+  height: 32px;
+  position: relative;
   padding: 0 var(--basex1);
 }
 
@@ -61,18 +61,18 @@ div.container > span.user-wrapper {
 }
 
 div.container > span.user-wrapper > span.user {
-  overflow: hidden;
-  width: 30px;
   padding: 0 var(--basex1);
-  cursor: pointer;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  width: 30px;
 }
 
 div.container > span.arrow {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
 
 div.container > span.arrow > z-icon {
@@ -81,25 +81,25 @@ div.container > span.arrow > z-icon {
 }
 
 ul {
-  padding: 0 calc(var(--space-unit) * 2);
-  margin: 0;
   list-style: none;
+  padding: 0 calc(var(--space-unit) * 2);
+  margin: 0px;
 }
 
 li {
-  display: flex;
-  width: max-content;
   height: var(--basex3);
+  display: flex;
   align-items: center;
   padding: calc(var(--space-unit) / 4) 0;
+  width: max-content;
 }
 
 /* Expanded dropdown menu */
 .menu-opened {
-  position: inherit;
+  padding-bottom: calc(var(--space-unit) * 2);
   width: auto !important;
   min-width: 147px;
-  padding-bottom: calc(var(--space-unit) * 2);
+  position: inherit;
 }
 
 .menu-opened a,

package/dist/collection/components/navigation/z-menu-section/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host } from '@stencil/core';
 /**
  * @slot - Menu section label
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items.
@@ -29,7 +29,7 @@ export class ZMenuSection {
     this.checkContent();
   }
   render() {
-    return (h(Host, { role: "menu", open: this.open }, h("button", { class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", null), this.hasContent && h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })))));
+    return h(Host, { role: "menu", open: this.open }, h("button", { class: "label", "aria-pressed": this.open ? 'true' : 'false', onClick: this.toggle.bind(this) }, h("slot", null), this.hasContent && h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })), this.open && h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })));
   }
   static get is() { return "z-menu-section"; }
   static get encapsulation() { return "shadow"; }
@@ -57,7 +57,7 @@ export class ZMenuSection {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Active state"
+          "text": ""
         },
         "attribute": "active",
         "reflect": true

package/dist/collection/components/navigation/z-menu-section/styles.css

@@ -18,9 +18,9 @@
 }
 
 ::slotted(*) {
-  color: var(--color-text01);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  color: var(--color-text01);
 }
 
 :host([active]) .label,
@@ -31,16 +31,16 @@
 
 .label {
   display: flex;
-  width: 100%;
   align-items: center;
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
-  border: 0;
-  border-bottom: var(--border-size-small) solid var(--color-surface05);
+  width: 100%;
   margin: 0;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
+  text-align: left;
   background: transparent;
   border-radius: 0;
+  border: 0;
+  border-bottom: var(--border-size-small) solid var(--color-surface05);
   cursor: pointer;
-  text-align: left;
 }
 
 .label ::slotted(*) {
@@ -51,41 +51,41 @@
 }
 
 .label:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
   outline: none;
+  box-shadow: var(--shadow-focus-primary);
 }
 
 .label z-icon {
   margin-left: calc(var(--space-unit) * 4);
-  fill: currentcolor;
+  fill: currentColor;
 }
 
 .items {
   display: flex;
-  width: 100%;
   flex-direction: column;
+  width: 100%;
   padding: calc(var(--space-unit) * 0.5);
   padding-bottom: calc(var(--space-unit) * 2);
 }
 
-.items > ::slotted([slot="item"]) {
+.items > ::slotted([slot='item']) {
   display: inline-flex;
-  padding: calc(var(--space-unit) * 0.5);
   margin: 0;
+  padding: calc(var(--space-unit) * 0.5);
   font-size: var(--font-size-2);
   line-height: 1.4;
   outline: none;
 }
 
-.items > ::slotted([slot="item"]:last-child) {
+.items > ::slotted([slot='item']:last-child) {
   padding-bottom: 0;
 }
 
-.items > ::slotted([slot="item"]:focus:focus-visible) {
+.items > ::slotted([slot='item']:focus:focus-visible) {
   box-shadow: var(--shadow-focus-primary);
   color: var(--color-secondary01);
 }
 
-.items > ::slotted([slot="item"]:hover) {
+.items > ::slotted([slot='item']:hover) {
   color: var(--color-secondary01);
 }