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

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

@@ -1,6 +1,5 @@
 :host {
   --app-header-height: auto;
-
   --app-header-typography-1-size: 24px;
   --app-header-typography-2-size: 28px;
   --app-header-typography-3-size: 32px;
@@ -13,7 +12,6 @@
   --app-header-typography-10-size: 76px;
   --app-header-typography-11-size: 84px;
   --app-header-typography-12-size: 92px;
-
   --app-header-typography-1-lineheight: 1.33;
   --app-header-typography-2-lineheight: 1.29;
   --app-header-typography-3-lineheight: 1.25;
@@ -26,7 +24,6 @@
   --app-header-typography-10-lineheight: 1.26;
   --app-header-typography-11-lineheight: 1.2;
   --app-header-typography-12-lineheight: 1.2;
-
   --app-header-typography-1-tracking: calc(-0.2 / 1em);
   --app-header-typography-2-tracking: calc(-0.4 / 1em);
   --app-header-typography-3-tracking: calc(-0.6 / 1em);
@@ -44,7 +41,6 @@
    * Variable to set stucked header and drawer's top offset. Useful when something is absolutely positioned above the header.
    */
   --app-header-top-offset: 48px;
-
   --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
 
   /* Variable to customize header background color. */
@@ -71,13 +67,13 @@
 .heading-panel {
   position: relative;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: baseline;
-  flex-shrink: 0;
-  flex-grow: 0;
   width: 100%;
   height: var(--app-header-height);
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: baseline;
+  justify-content: flex-start;
   padding: calc(var(--space-unit) * 2) var(--grid-mobile-margin);
   background: var(--app-header-bg);
 }
@@ -88,61 +84,61 @@
 
 .heading-title {
   display: flex;
+  max-width: 100%;
   flex-direction: row;
   align-items: center;
-  max-width: 100%;
 }
 
-:host(:not([menu-length='0'])) .heading-subtitle {
+:host(:not([menu-length="0"])) .heading-subtitle {
   padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5));
 }
 
 .heading-stucked {
   position: fixed;
+  z-index: 20;
   top: var(--app-header-top-offset);
   left: 0;
-  z-index: 20;
   display: flex;
-  flex-direction: row;
   width: 100%;
   max-width: 100%;
-  color: var(--app-header-stucked-text-color);
+  flex-direction: row;
   padding: var(--space-unit) var(--grid-mobile-margin);
+  animation: slide-stucked-heading-in 250ms ease-out;
   background: var(--app-header-stucked-bg);
   box-shadow: var(--shadow-2);
-  animation: slideStuckedHeadingIn 250ms ease-out;
+  color: var(--app-header-stucked-text-color);
 }
 
 .heading-stucked .heading-title,
 .heading-stucked .heading-title > *,
-.heading-stucked .heading-title ::slotted([slot='stucked-title']) {
+.heading-stucked .heading-title ::slotted([slot="stucked-title"]) {
   display: block;
   overflow: hidden;
+  line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 1.2;
 }
 
 .heading-stucked .heading-title > *,
-::slotted([slot='title']),
-::slotted([slot='stucked-title']) {
+::slotted([slot="title"]),
+::slotted([slot="stucked-title"]) {
   margin: 0;
-  font-weight: 700;
-  font-family: 'IBM Plex Serif', serif;
+  font-family: "IBM Plex Serif", serif;
   font-size: var(--app-header-typography-3-size);
+  font-weight: 700;
   letter-spacing: var(--app-header-typography-3-tracking);
 }
 
-::slotted([slot='title']) {
+::slotted([slot="title"]) {
   line-height: 1;
 }
 
-::slotted([slot='subtitle']) {
+::slotted([slot="subtitle"]) {
   margin: var(--space-unit) 0 0;
   font-family: var(--font-family-sans);
+  font-size: 20px;
   font-style: italic;
   font-weight: 500;
-  font-size: 20px;
   line-height: 1.2;
 }
 
@@ -150,17 +146,16 @@
   position: relative;
   z-index: 1;
   display: flex;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: flex-start;
-  max-width: 100%;
+  justify-content: flex-start;
   margin-right: auto;
 }
 
 .menu-container {
   display: none;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: baseline;
 }
 
@@ -174,82 +169,78 @@
 }
 
 .drawer-trigger {
-  margin: 0 calc(var(--space-unit) * 1.5) 0 0;
   padding: 0;
-  background: none;
   border: 0;
+  margin: 0 calc(var(--space-unit) * 1.5) 0 0;
+  appearance: none;
+  background: none;
   border-radius: 0;
   color: inherit;
-  appearance: none;
   cursor: pointer;
 }
 
 .drawer-trigger z-icon {
   --z-icon-width: var(--app-header-drawer-trigger-size);
   --z-icon-height: var(--app-header-drawer-trigger-size);
-  fill: currentColor;
+
+  fill: currentcolor;
 }
 
 .drawer-container {
   position: fixed;
+  z-index: 100;
   top: var(--app-header-top-offset);
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 100;
   pointer-events: none;
 }
 
 .drawer-container .drawer-overlay {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
+  display: block;
   width: 100%;
   height: 100%;
-  z-index: 1;
-  display: block;
   background: var(--gray900);
   opacity: 0;
-  transition: opacity 400ms ease-out;
   pointer-events: none;
+  transition: opacity 400ms ease-out;
 }
 
 .drawer-panel {
   position: absolute;
+  z-index: 2;
   top: 0;
   left: 0;
-  z-index: 2;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   width: 375px;
   max-width: 100%;
   height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
   padding: calc(var(--space-unit) * 2) var(--space-unit);
   background: var(--color-white);
   color: var(--gray800);
+  pointer-events: none;
   transform: translate3d(-100%, 0, 0);
   transition: transform 400ms ease-out;
-  pointer-events: none;
 }
 
 .drawer-content {
   display: flex;
-  flex-direction: column;
-  flex: 1 auto;
+  overflow: auto;
   width: 100%;
+  flex: 1 auto;
+  flex-direction: column;
   padding: calc(var(--space-unit) * 0.5) var(--space-unit);
-  overflow: auto;
 }
 
 .drawer-content::-webkit-scrollbar {
-  background: linear-gradient(
-    to right,
-    transparent 0 3px,
-    var(--gray200) 3px 7px,
-    transparent 7px 10px
-  );
   width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
@@ -279,16 +270,16 @@
   --z-icon-width: var(--app-header-drawer-trigger-size);
   --z-icon-height: var(--app-header-drawer-trigger-size);
 
-  margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
   padding: 0;
-  font-size: inherit;
-  background: transparent;
-  color: inherit;
-  fill: currentColor;
   border: 0;
-  border-radius: 0;
+  margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
   appearance: none;
+  background: transparent;
+  border-radius: 0;
+  color: inherit;
   cursor: pointer;
+  fill: currentcolor;
+  font-size: inherit;
   outline: none;
 }
 
@@ -302,15 +293,15 @@
 }
 
 :host([drawer-open]) .drawer-container .drawer-panel {
-  transform: none;
   pointer-events: all;
+  transform: none;
 }
 
 .hero-container {
   position: absolute;
+  z-index: 0;
   top: 0;
   left: 0;
-  z-index: 0;
   width: 100%;
   height: 100%;
 }
@@ -327,14 +318,14 @@
 }
 
 :host([overlay]) .hero-container::after {
-  content: '';
   position: absolute;
+  z-index: 0;
   top: 0;
   left: 0;
-  z-index: 0;
   width: 100%;
   height: 100%;
   background: var(--color-black);
+  content: "";
   opacity: 0.5;
 }
 
@@ -357,32 +348,32 @@
   }
 
   .heading-stucked {
-    padding-left: var(--grid-tablet-margin);
     padding-right: var(--grid-tablet-margin);
+    padding-left: var(--grid-tablet-margin);
   }
 
-  :host(:not([flow='offcanvas'])) .heading-subtitle {
+  :host(:not([flow="offcanvas"])) .heading-subtitle {
     padding-left: 0;
   }
 
-  :host(:not([flow='offcanvas'])) .menu-container {
+  :host(:not([flow="offcanvas"])) .menu-container {
     display: flex;
   }
 
-  :host(:not([flow='offcanvas'])) .heading-container .drawer-trigger {
+  :host(:not([flow="offcanvas"])) .heading-container .drawer-trigger {
     display: none;
   }
 
-  :host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child) {
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
     margin-bottom: calc(var(--space-unit) * 3);
   }
 
-  ::slotted([slot='title']) {
+  ::slotted([slot="title"]) {
     font-size: var(--app-header-typography-6-size);
     letter-spacing: var(--app-header-typography-6-tracking);
   }
 
-  ::slotted([slot='subtitle']) {
+  ::slotted([slot="subtitle"]) {
     margin-top: calc(var(--space-unit) * 1.5);
   }
 }
@@ -391,22 +382,21 @@
 @media only screen and (min-width: 1152px) {
   .heading-panel,
   .heading-stucked {
-    padding-left: var(--grid-desktop-margin);
     padding-right: var(--grid-desktop-margin);
+    padding-left: var(--grid-desktop-margin);
   }
 
-  :host(:not([flow='stack'])) .heading-panel {
-    flex-direction: row;
-    flex-wrap: wrap;
+  :host(:not([flow="stack"])) .heading-panel {
+    flex-flow: row wrap;
   }
 
-  ::slotted([slot='title']) {
+  ::slotted([slot="title"]) {
+    margin-right: var(--grid-desktop-gutter);
     font-size: var(--app-header-typography-7-size);
     letter-spacing: var(--app-header-typography-7-tracking);
-    margin-right: var(--grid-desktop-gutter);
   }
 
-  :host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child) {
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
     margin-bottom: calc(var(--space-unit) * 2);
   }
 
@@ -419,22 +409,22 @@
 @media only screen and (min-width: 1366px) {
   .heading-panel,
   .heading-stucked {
-    padding-left: var(--grid-wide-margin);
     padding-right: var(--grid-wide-margin);
+    padding-left: var(--grid-wide-margin);
   }
 
-  ::slotted([slot='title']) {
+  ::slotted([slot="title"]) {
+    margin-right: var(--grid-wide-gutter);
     font-size: var(--app-header-typography-9-size);
     letter-spacing: var(--app-header-typography-9-tracking);
-    margin-right: var(--grid-wide-gutter);
   }
 
-  :host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child) {
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
     margin-bottom: 0;
   }
 }
 
-@keyframes slideStuckedHeadingIn {
+@keyframes slide-stucked-heading-in {
   0% {
     transform: translate3d(0, -100%, 0);
   }

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

@@ -1,9 +1,9 @@
-import { Component, Event, h, Prop, State } from "@stencil/core";
+import { h } from "@stencil/core";
 import { ThemeVariant } from "../../../beans";
 export class ZAppSwitcher {
   constructor() {
     /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.dark;
+    this.theme = ThemeVariant.DARK;
     this.isopen = false;
     this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
   }
@@ -12,59 +12,68 @@ export class ZAppSwitcher {
     this.appButtonClick.emit({ isopen: this.isopen });
   }
   render() {
-    return (h("button", { title: "app-switcher", onClick: () => this.emitAppButtonClick() },
-      h("z-icon", { name: "app-switcher", class: this.theme })));
+    return (h("button", { title: "app-switcher", onClick: () => this.emitAppButtonClick() }, h("z-icon", { name: "app-switcher", class: this.theme })));
   }
   static get is() { return "z-app-switcher"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ThemeVariantBean",
-        "resolved": "\"dark\" | \"light\"",
-        "references": {
-          "ThemeVariantBean": {
-            "location": "import",
-            "path": "../../../beans"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ThemeVariant",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
+          "references": {
+            "ThemeVariant": {
+              "location": "import",
+              "path": "../../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "theme variant, default 'dark'"
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "ThemeVariant.dark"
-    }
-  }; }
-  static get states() { return {
-    "isopen": {}
-  }; }
-  static get events() { return [{
-      "method": "appButtonClick",
-      "name": "appButtonClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "emitted on app button icon click, returns open/closed state"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "theme variant, default 'dark'"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "ThemeVariant.DARK"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "isopen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "appButtonClick",
+        "name": "appButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emitted on app button icon click, returns open/closed state"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

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

@@ -5,31 +5,19 @@
 
 button {
   display: flex;
-  justify-content: center;
   align-content: center;
-  background-color: transparent;
-  border: none;
+  justify-content: center;
   padding: 0;
+  border: none;
+  background-color: transparent;
 }
 
 button > z-icon {
   color: var(--bg-white);
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 button > z-icon.light {
   color: var(--bg-grey-900);
-  fill: currentColor;
-} 
-
-/* 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) {
+  fill: currentcolor;
 }