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

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

@@ -4,15 +4,14 @@
 }
 
 :host div.wrapper {
-  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;
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
+  box-sizing: border-box;
+  flex-flow: column nowrap;
   align-items: stretch;
+  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);
 }
 
 z-button,
@@ -30,10 +29,9 @@ z-link,
 
 :host div.wrapper > form {
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
+  flex-flow: column nowrap;
   align-items: stretch;
+  justify-content: flex-start;
 }
 
 div.wrapper > form > div.username::slotted(z-input),
@@ -44,21 +42,21 @@ div.wrapper > form > div.password::slotted(z-input),
 }
 
 :host div.wrapper > form > z-link.forget {
-  font-size: 12px;
   align-self: flex-end;
+  font-size: 12px;
 }
 
 div.wrapper > form > div.login::slotted(z-button),
 :host div.wrapper > form > div.login z-button {
-  margin: calc(var(--space-unit) * 3) 0;
   align-self: flex-start;
+  margin: calc(var(--space-unit) * 3) 0;
 }
 
 :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;
 }
 
@@ -70,16 +68,16 @@ div.wrapper > div.signup::slotted(z-button),
 
 :host div.providers {
   display: grid;
-  grid-template-columns: 1fr;
+  gap: calc(var(--space-unit) * 2) 0;
   grid-auto-rows: auto;
-  gap: calc(var(--space-unit) * 2) 0px;
+  grid-template-columns: 1fr;
 }
 
 slot-fb[name="provider"] {
   display: grid;
-  grid-template-columns: 1fr;
+  gap: calc(var(--space-unit) * 2) 0;
   grid-auto-rows: auto;
-  gap: calc(var(--space-unit) * 2) 0px;
+  grid-template-columns: 1fr;
 }
 
 :host div.providers > z-body {
@@ -88,11 +86,10 @@ slot-fb[name="provider"] {
 
 :host div.wrapper > div.providers .zd {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
+  flex-flow: row nowrap;
   align-content: center;
+  align-items: center;
+  justify-content: center;
 }
 
 :host div.wrapper > div.providers .zd > svg {
@@ -113,17 +110,16 @@ slot-fb[name="provider"] {
 
   :host div.providers {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-rows: auto;
-    gap: var(--space-unit);
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    gap: var(--space-unit);
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr 1fr;
   }
 
   :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"]) {
@@ -131,14 +127,13 @@ slot-fb[name="provider"] {
   }
 
   slot-fb[name="provider"] {
-    grid-column-start: 1;
-    grid-column-end: 3;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-rows: auto;
-    gap: var(--space-unit);
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    gap: var(--space-unit);
+    grid-auto-rows: auto;
+    grid-column: 1 / 3;
+    grid-template-columns: 1fr 1fr;
   }
 
   slot-fb[name="provider"] > * {
@@ -146,10 +141,6 @@ 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;
-  width: auto;
-  margin: 0;
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+  border: none;
+  margin: 0;
   background-color: unset;
-  text-align: center;
-  font-size: inherit;
+  border-radius: var(--border-no-radius);
+  color: var(--color-primary01);
+  cursor: pointer;
+  fill: currentcolor;
   font-family: var(--font-family-sans);
-  line-height: inherit;
+  font-size: inherit;
   letter-spacing: inherit;
-  white-space: nowrap;
-  color: var(--color-primary01);
-  fill: currentColor;
-  border: none;
-  border-radius: var(--border-no-radius);
+  line-height: inherit;
   outline: none;
-  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
 }
 
 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] > * {
-  pointer-events: all;
-  cursor: not-allowed;
   color: var(--gray500);
-  fill: currentColor;
+  cursor: not-allowed;
+  fill: currentcolor;
+  pointer-events: all;
 }
 
 /* Size small (only available for horizontal) */
 z-navigation-tab[size="small"] > *,
 z-navigation-tab-link[size="small"] > * {
   font-size: var(--font-size-2);
-  line-height: 1.4;
   letter-spacing: 0.16px;
+  line-height: 1.4;
 }
 
 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 {
-  width: var(--border-size-large);
-  height: 100%;
   top: 0;
   right: 0;
+  width: var(--border-size-large);
+  height: 100%;
 }

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

@@ -1,6 +1,6 @@
-import { Component, Prop, h, Listen, Event, Watch } from "@stencil/core";
+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,184 +49,184 @@ 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 === "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 === NavigationTabsOrientations.HORIZONTAL && this.label));
   }
   static get is() { return "z-navigation-tab"; }
-  static get originalStyleUrls() { return {
-    "$": ["../navigation-tab.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["../navigation-tab.css"]
-  }; }
-  static get properties() { return {
-    "selected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Whether the tab is selected."
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Whether the tab is disabled."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "orientation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "NavigationTabsOrientation",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {
-          "NavigationTabsOrientation": {
-            "location": "import",
-            "path": "../../../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this."
-      },
-      "attribute": "orientation",
-      "reflect": true,
-      "defaultValue": "NavigationTabsOrientations.horizontal"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "NavigationTabsSize",
-        "resolved": "\"big\" | \"small\"",
-        "references": {
-          "NavigationTabsSize": {
-            "location": "import",
-            "path": "../../../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tab size. Do not set this manually: `z-navigation-tabs` will handle this."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "NavigationTabsSizes.big"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["../navigation-tab.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../navigation-tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether the tab is selected."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether the tab is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsOrientations",
+          "resolved": "NavigationTabsOrientations.HORIZONTAL | NavigationTabsOrientations.VERTICAL",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this."
+        },
+        "attribute": "orientation",
+        "reflect": true,
+        "defaultValue": "NavigationTabsOrientations.HORIZONTAL"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label to show in the tab."
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsSizes",
+          "resolved": "NavigationTabsSizes.BIG | NavigationTabsSizes.SMALL",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tab size. Do not set this manually: `z-navigation-tabs` will handle this."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "NavigationTabsSizes.BIG"
       },
-      "attribute": "label",
-      "reflect": false
-    },
-    "htmlTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+        },
+        "attribute": "icon",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Html `title` attribute for the button."
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label to show in the tab."
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "attribute": "html-title",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "selectedEvent",
-      "name": "selected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "htmlTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Html `title` attribute for the button."
+        },
+        "attribute": "html-title",
+        "reflect": false
       }
-    }]; }
-  static get watchers() { return [{
-      "propName": "selected",
-      "methodName": "onSelected"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedEvent",
+        "name": "selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The tab has been selected."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "selected",
+        "methodName": "onSelected"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }