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

package/dist/collection/components/modal/z-modal-login/styles.css

@@ -4,14 +4,15 @@
 }
 
 :host div.wrapper {
-  display: flex;
+  color: var(--text-grey-800);
+  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 2)
+    calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
   box-sizing: border-box;
-  flex-flow: column nowrap;
-  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
   justify-content: flex-start;
-  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 2) calc(var(--space-unit) * 3)
-    calc(var(--space-unit) * 2);
-  color: var(--text-grey-800);
+  align-items: stretch;
 }
 
 z-button,
@@ -29,9 +30,10 @@ z-link,
 
 :host div.wrapper > form {
   display: flex;
-  flex-flow: column nowrap;
-  align-items: stretch;
+  flex-direction: column;
+  flex-wrap: nowrap;
   justify-content: flex-start;
+  align-items: stretch;
 }
 
 div.wrapper > form > div.username::slotted(z-input),
@@ -42,21 +44,21 @@ div.wrapper > form > div.password::slotted(z-input),
 }
 
 :host div.wrapper > form > z-link.forget {
-  align-self: flex-end;
   font-size: 12px;
+  align-self: flex-end;
 }
 
 div.wrapper > form > div.login::slotted(z-button),
 :host div.wrapper > form > div.login z-button {
-  align-self: flex-start;
   margin: calc(var(--space-unit) * 3) 0;
+  align-self: flex-start;
 }
 
 :host div.wrapper > hr {
   width: 100%;
+  margin-bottom: calc(var(--space-unit) * 3);
   border: none;
   border-top: var(--border-size-medium) solid var(--bg-grey-200);
-  margin-bottom: calc(var(--space-unit) * 3);
   margin-block-start: unset;
 }
 
@@ -68,16 +70,16 @@ div.wrapper > div.signup::slotted(z-button),
 
 :host div.providers {
   display: grid;
-  gap: calc(var(--space-unit) * 2) 0;
-  grid-auto-rows: auto;
   grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  gap: calc(var(--space-unit) * 2) 0px;
 }
 
 slot-fb[name="provider"] {
   display: grid;
-  gap: calc(var(--space-unit) * 2) 0;
-  grid-auto-rows: auto;
   grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  gap: calc(var(--space-unit) * 2) 0px;
 }
 
 :host div.providers > z-body {
@@ -86,10 +88,11 @@ slot-fb[name="provider"] {
 
 :host div.wrapper > div.providers .zd {
   display: flex;
-  flex-flow: row nowrap;
-  align-content: center;
-  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
   justify-content: center;
+  align-items: center;
+  align-content: center;
 }
 
 :host div.wrapper > div.providers .zd > svg {
@@ -110,16 +113,17 @@ slot-fb[name="provider"] {
 
   :host div.providers {
     display: grid;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-unit);
-    grid-auto-rows: auto;
     grid-template-columns: 1fr 1fr;
+    grid-auto-rows: auto;
+    gap: var(--space-unit);
+    justify-content: center;
+    align-items: center;
   }
 
   :host div.providers > z-body {
+    grid-column-start: 1;
+    grid-column-end: 3;
     padding-bottom: var(--space-unit);
-    grid-column: 1 / 3;
   }
 
   ::slotted([slot="provider"]) {
@@ -127,13 +131,14 @@ slot-fb[name="provider"] {
   }
 
   slot-fb[name="provider"] {
+    grid-column-start: 1;
+    grid-column-end: 3;
     display: grid;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-unit);
-    grid-auto-rows: auto;
-    grid-column: 1 / 3;
     grid-template-columns: 1fr 1fr;
+    grid-auto-rows: auto;
+    gap: var(--space-unit);
+    justify-content: center;
+    align-items: center;
   }
 
   slot-fb[name="provider"] > * {
@@ -141,6 +146,10 @@ slot-fb[name="provider"] {
   }
 }
 
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
 /* Wide breakpoint */
 @media only screen and (min-width: 1366px) {
   :host div.wrapper {

package/dist/collection/components/navigation/tabs/navigation-tab.css

@@ -3,24 +3,24 @@ z-navigation-tab-link > a {
   position: relative;
   z-index: 0;
   display: inline-flex;
-  width: auto;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
-  border: none;
+  width: auto;
   margin: 0;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
   background-color: unset;
-  border-radius: var(--border-no-radius);
-  color: var(--color-primary01);
-  cursor: pointer;
-  fill: currentcolor;
-  font-family: var(--font-family-sans);
+  text-align: center;
   font-size: inherit;
-  letter-spacing: inherit;
+  font-family: var(--font-family-sans);
   line-height: inherit;
-  outline: none;
-  text-align: center;
+  letter-spacing: inherit;
   white-space: nowrap;
+  color: var(--color-primary01);
+  fill: currentColor;
+  border: none;
+  border-radius: var(--border-no-radius);
+  outline: none;
+  cursor: pointer;
 }
 
 z-navigation-tab-link > a {
@@ -46,16 +46,16 @@ z-navigation-tab[selected] > *,
 z-navigation-tab-link:not([disabled]):hover > *,
 z-navigation-tab-link[selected] > * {
   color: var(--color-hover-secondary);
-  fill: currentcolor;
+  fill: currentColor;
 }
 
 z-navigation-tab:not([disabled]):hover > *::after,
 z-navigation-tab[selected] > *::after,
 z-navigation-tab-link:not([disabled]):hover > *::after,
 z-navigation-tab-link[selected] > *::after {
+  content: "";
   position: absolute;
   background-color: var(--color-hover-secondary);
-  content: "";
 }
 
 z-navigation-tab[orientation="horizontal"]:not([disabled]):hover > *::after,
@@ -87,18 +87,18 @@ z-navigation-tab:not([disabled]):hover > * {
 }
 
 z-navigation-tab[disabled] > * {
-  color: var(--gray500);
-  cursor: not-allowed;
-  fill: currentcolor;
   pointer-events: all;
+  cursor: not-allowed;
+  color: var(--gray500);
+  fill: currentColor;
 }
 
 /* Size small (only available for horizontal) */
 z-navigation-tab[size="small"] > *,
 z-navigation-tab-link[size="small"] > * {
   font-size: var(--font-size-2);
-  letter-spacing: 0.16px;
   line-height: 1.4;
+  letter-spacing: 0.16px;
 }
 
 z-navigation-tab[size="small"][orientation="horizontal"] > *,
@@ -129,8 +129,8 @@ z-navigation-tab[orientation="vertical"]:hover:not([disabled]) > *::after,
 z-navigation-tab[orientation="vertical"][selected] > *::after,
 z-navigation-tab-link[orientation="vertical"]:hover > *::after,
 z-navigation-tab-link[orientation="vertical"][selected] > *::after {
-  top: 0;
-  right: 0;
   width: var(--border-size-large);
   height: 100%;
+  top: 0;
+  right: 0;
 }

package/dist/collection/components/navigation/tabs/z-navigation-tab/index.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { NavigationTabsOrientations, NavigationTabsSizes } from "../../../../beans";
-import { ICONS } from "../../../icons/icons";
+import { icons } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders a button.
  */
@@ -17,19 +17,19 @@ export class ZNavigationTab {
     /**
      * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
      */
-    this.orientation = NavigationTabsOrientations.HORIZONTAL;
+    this.orientation = NavigationTabsOrientations.horizontal;
     /**
      * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
      */
-    this.size = NavigationTabsSizes.BIG;
+    this.size = NavigationTabsSizes.big;
   }
   /**
    * Scroll into view to center the tab.
    */
   scrollToTab({ target: button }) {
-    const scrollOptions = this.orientation === NavigationTabsOrientations.HORIZONTAL
-      ? { block: "nearest", inline: "center" }
-      : { block: "center", inline: "nearest" };
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
     button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
@@ -49,14 +49,14 @@ export class ZNavigationTab {
    */
   renderIcon() {
     let icon = this.icon;
-    const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
-    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
+    const iconFilled = `${icon.replace(/-filled$/, '')}-filled`;
+    if (this.selected && Object.keys(icons).includes(iconFilled)) {
       icon = iconFilled;
     }
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientations.HORIZONTAL && this.label));
+    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
   }
   static get is() { return "z-navigation-tab"; }
   static get originalStyleUrls() {
@@ -111,9 +111,14 @@ export class ZNavigationTab {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "NavigationTabsOrientations",
-          "resolved": "NavigationTabsOrientations.HORIZONTAL | NavigationTabsOrientations.VERTICAL",
-          "references": {}
+          "original": "NavigationTabsOrientation",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "NavigationTabsOrientation": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -123,15 +128,20 @@ export class ZNavigationTab {
         },
         "attribute": "orientation",
         "reflect": true,
-        "defaultValue": "NavigationTabsOrientations.HORIZONTAL"
+        "defaultValue": "NavigationTabsOrientations.horizontal"
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "NavigationTabsSizes",
-          "resolved": "NavigationTabsSizes.BIG | NavigationTabsSizes.SMALL",
-          "references": {}
+          "original": "NavigationTabsSize",
+          "resolved": "\"big\" | \"small\"",
+          "references": {
+            "NavigationTabsSize": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -141,7 +151,7 @@ export class ZNavigationTab {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "NavigationTabsSizes.BIG"
+        "defaultValue": "NavigationTabsSizes.big"
       },
       "icon": {
         "type": "string",
@@ -205,7 +215,7 @@ export class ZNavigationTab {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "The tab has been selected."
+          "text": ""
         },
         "complexType": {
           "original": "any",

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

@@ -1,6 +1,6 @@
-import { h } from "@stencil/core";
-import { NavigationTabsOrientations, NavigationTabsSizes } from "../../../../beans";
-import { ICONS } from "../../../icons/icons";
+import { h, } from "@stencil/core";
+import { NavigationTabsOrientations, NavigationTabsSizes, } from "../../../../beans";
+import { icons } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
  */
@@ -17,19 +17,19 @@ export class ZNavigationTabLink {
     /**
      * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
      */
-    this.orientation = NavigationTabsOrientations.HORIZONTAL;
+    this.orientation = NavigationTabsOrientations.horizontal;
     /**
      * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
      */
-    this.size = NavigationTabsSizes.BIG;
+    this.size = NavigationTabsSizes.big;
   }
   /**
    * Scroll into view to center the tab.
    */
   scrollToTab({ target: button }) {
-    const scrollOptions = this.orientation === NavigationTabsOrientations.HORIZONTAL
-      ? { block: "nearest", inline: "center" }
-      : { block: "center", inline: "nearest" };
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
     button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
@@ -47,8 +47,8 @@ export class ZNavigationTabLink {
    */
   renderIcon() {
     let icon = this.icon;
-    const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
-    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
+    const iconFilled = `${icon.replace(/-filled$/, '')}-filled`;
+    if (this.selected && Object.keys(icons).includes(iconFilled)) {
       icon = iconFilled;
     }
     return h("z-icon", { name: icon });
@@ -109,9 +109,14 @@ export class ZNavigationTabLink {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "NavigationTabsOrientations",
-          "resolved": "NavigationTabsOrientations.HORIZONTAL | NavigationTabsOrientations.VERTICAL",
-          "references": {}
+          "original": "NavigationTabsOrientation",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "NavigationTabsOrientation": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -121,15 +126,20 @@ export class ZNavigationTabLink {
         },
         "attribute": "orientation",
         "reflect": true,
-        "defaultValue": "NavigationTabsOrientations.HORIZONTAL"
+        "defaultValue": "NavigationTabsOrientations.horizontal"
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "NavigationTabsSizes",
-          "resolved": "NavigationTabsSizes.BIG | NavigationTabsSizes.SMALL",
-          "references": {}
+          "original": "NavigationTabsSize",
+          "resolved": "\"big\" | \"small\"",
+          "references": {
+            "NavigationTabsSize": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -139,7 +149,7 @@ export class ZNavigationTabLink {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "NavigationTabsSizes.BIG"
+        "defaultValue": "NavigationTabsSizes.big"
       },
       "htmlTitle": {
         "type": "string",
@@ -237,7 +247,7 @@ export class ZNavigationTabLink {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "The tab has been selected."
+          "text": ""
         },
         "complexType": {
           "original": "any",

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

@@ -1,5 +1,5 @@
-import { h, Host } from "@stencil/core";
-import { NavigationTabsSizes, NavigationTabsOrientations } from "../../../../beans";
+import { h, Host } from '@stencil/core';
+import { NavigationTabsSizes, NavigationTabsOrientations } from '../../../../beans';
 /**
  * Navigation tabs component.
  * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
@@ -9,23 +9,23 @@ export class ZNavigationTabs {
     /**
      * Navigation tabs orientation.
      */
-    this.orientation = NavigationTabsOrientations.HORIZONTAL;
+    this.orientation = NavigationTabsOrientations.horizontal;
     /**
      * Navigation tabs size.
      */
-    this.size = NavigationTabsSizes.BIG;
+    this.size = NavigationTabsSizes.big;
   }
   /**
    * Getter for the direction to check based on current orientation.
    */
   get direction() {
-    return this.orientation == NavigationTabsOrientations.HORIZONTAL ? "Left" : "Top";
+    return this.orientation == NavigationTabsOrientations.horizontal ? 'Left' : 'Top';
   }
   /**
    * Getter for the dimension to check based on current orientation.
    */
   get dimension() {
-    return this.orientation == NavigationTabsOrientations.HORIZONTAL ? "Width" : "Height";
+    return this.orientation == NavigationTabsOrientations.horizontal ? 'Width' : 'Height';
   }
   /**
    * Set the `size` prop to all `z-navigation-tab` children.
@@ -33,7 +33,7 @@ export class ZNavigationTabs {
   setChildrenSize() {
     const children = Array.from(this.host.children);
     children.forEach((child) => {
-      child.setAttribute("size", this.size);
+      child.setAttribute('size', this.size);
     });
   }
   /**
@@ -42,7 +42,7 @@ export class ZNavigationTabs {
   setChildrenOrientation() {
     const children = Array.from(this.host.children);
     children.forEach((child) => {
-      child.setAttribute("orientation", this.orientation);
+      child.setAttribute('orientation', this.orientation);
     });
   }
   /**
@@ -61,9 +61,8 @@ export class ZNavigationTabs {
     if (!this.tabsNav) {
       return;
     }
-    this.canNavigateNext =
-      this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] <
-        this.tabsNav[`scroll${this.dimension}`];
+    this.canNavigateNext = (this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`]) <
+      this.tabsNav[`scroll${this.dimension}`];
     this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
   }
   /**
@@ -77,7 +76,7 @@ export class ZNavigationTabs {
     const children = Array.from(this.host.children);
     children.forEach((child) => {
       if (child !== tab) {
-        child.removeAttribute("selected");
+        child.removeAttribute('selected');
       }
     });
   }
@@ -86,8 +85,8 @@ export class ZNavigationTabs {
    */
   navigateBackwards() {
     this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: 0 - this.tabsNav[`client${this.dimension}`] / 2,
-      behavior: "smooth",
+      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
     });
   }
   /**
@@ -95,8 +94,9 @@ export class ZNavigationTabs {
    */
   navigateForward() {
     this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] / 2,
-      behavior: "smooth",
+      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] +
+        (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
     });
   }
   componentDidRender() {
@@ -105,10 +105,10 @@ export class ZNavigationTabs {
     this.checkScrollVisible();
   }
   render() {
-    return (h(Host, { class: {
-        "interactive-2": this.size === NavigationTabsSizes.SMALL,
-        "interactive-1": this.size !== NavigationTabsSizes.SMALL,
-      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation === NavigationTabsOrientations.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === NavigationTabsOrientations.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+    return h(Host, { class: {
+        'interactive-2': this.size === NavigationTabsSizes.small,
+        'interactive-1': this.size !== NavigationTabsSizes.small
+      }, scrollable: this.canNavigate }, this.canNavigate && h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation == NavigationTabsOrientations.horizontal ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })), h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation == NavigationTabsOrientations.horizontal ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
   }
   static get is() { return "z-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }
@@ -128,9 +128,14 @@ export class ZNavigationTabs {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "NavigationTabsOrientations",
-          "resolved": "NavigationTabsOrientations.HORIZONTAL | NavigationTabsOrientations.VERTICAL",
-          "references": {}
+          "original": "NavigationTabsOrientation",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "NavigationTabsOrientation": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -140,15 +145,20 @@ export class ZNavigationTabs {
         },
         "attribute": "orientation",
         "reflect": true,
-        "defaultValue": "NavigationTabsOrientations.HORIZONTAL"
+        "defaultValue": "NavigationTabsOrientations.horizontal"
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "NavigationTabsSizes",
-          "resolved": "NavigationTabsSizes.BIG | NavigationTabsSizes.SMALL",
-          "references": {}
+          "original": "NavigationTabsSize",
+          "resolved": "\"big\" | \"small\"",
+          "references": {
+            "NavigationTabsSize": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -158,7 +168,7 @@ export class ZNavigationTabs {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "NavigationTabsSizes.BIG"
+        "defaultValue": "NavigationTabsSizes.big"
       }
     };
   }