@zanichelli/albe-web-components 7.3.2 → 7.3.3

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

@@ -1,6 +1,4 @@
 :host {
-  --app-header-content-max-width: 100%;
-  --app-header-height: auto;
   --app-header-typography-1-size: 24px;
   --app-header-typography-2-size: 28px;
   --app-header-typography-3-size: 32px;
@@ -37,6 +35,8 @@
   --app-header-typography-10-tracking: calc(-2 / 1em);
   --app-header-typography-11-tracking: calc(-2.2 / 1em);
   --app-header-typography-12-tracking: calc(-2.4 / 1em);
+  --app-header-content-max-width: 100%;
+  --app-header-height: auto;
 
   /* Variable to set stuck header and drawer's top offset.
   Useful when something is absolutely positioned above the header. */
@@ -44,18 +44,34 @@
   --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
 
   /* Variable to customize header background color. */
-  --app-header-bg: var(--color-white);
+  --app-header-bg: var(--color-surface01);
 
   /* Variable to customize stuck header background color. */
-  --app-header-stucked-bg: var(--color-white);
+  --app-header-stucked-bg: var(--color-surface01);
 
   /* Variable to customize text and icon color. */
-  --app-header-text-color: var(--gray800);
+  --app-header-text-color: var(--color-text01);
+
+  /* Variable to customize the title's font size.
+  NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */
+  --app-header-title-font-size: var(--app-header-typography-3-size);
+
+  /* Variable to customize the title's line-height.
+  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value
+  and use the same level as the one of the font size. */
+  --app-header-title-lineheight: var(--app-header-typography-3-lineheight);
+
+  /* Variable to customize the title's letter-spacing.
+  NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value
+  and use the same level as the one of the font size. */
+  --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);
 
   /* Variable to customize stuck header's text and icon color. */
-  --app-header-stucked-text-color: var(--gray800);
+  --app-header-stucked-text-color: var(--color-text01);
 
+  position: relative;
   display: block;
+  height: var(--app-header-height);
   color: var(--app-header-text-color);
 }
 
@@ -69,30 +85,97 @@
   display: flex;
   width: 100%;
   max-width: var(--app-header-content-max-width);
-  height: var(--app-header-height);
   flex-direction: column;
   flex-grow: 0;
   flex-shrink: 0;
   align-items: baseline;
-  justify-content: flex-start;
   padding: var(--grid-margin);
   margin: 0 auto;
   background: var(--app-header-bg);
+  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+}
+
+.hero-container + .heading-panel {
+  background: transparent;
 }
 
 :host(:empty) .heading-panel {
   padding: 0;
 }
 
+.heading-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex: 1 auto;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
 .heading-title {
   display: flex;
   max-width: 100%;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
+  column-gap: calc(var(--space-unit) * 2);
+}
+
+::slotted([slot="title"]),
+.heading-stuck .heading-title > *,
+::slotted([slot="stucked-title"]) {
+  margin: 0;
+  font-family: "IBM Plex Serif", serif;
+  font-weight: var(--font-bd);
+}
+
+::slotted([slot="title"]) {
+  font-size: var(--app-header-title-font-size);
+  letter-spacing: var(--app-header-title-letter-spacing);
+  line-height: var(--app-header-title-lineheight);
+}
+
+.heading-stuck .heading-title > *,
+::slotted([slot="stucked-title"]) {
+  font-size: var(--app-header-typography-3-size);
+  letter-spacing: var(--app-header-typography-3-tracking);
+  line-height: var(--app-header-typography-3-lineheight);
 }
 
 :host(:not([menu-length="0"])) .heading-subtitle {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5));
+  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));
+}
+
+::slotted([slot="subtitle"]) {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 20px;
+  font-style: italic;
+  font-weight: 500;
+  line-height: 26px;
+}
+
+.menu-container {
+  display: flex;
+  width: 100%;
+  flex: 1 auto;
+  flex-flow: row wrap;
+}
+
+.menu-container ::slotted([open]) {
+  position: relative;
+  z-index: 3;
+}
+
+z-searchbar {
+  z-index: 0;
+  display: flex;
+  width: auto;
+  min-width: calc(var(--space-unit) * 32);
+  flex: 1 auto;
+  align-items: center;
+  margin-left: auto;
 }
 
 .heading-stuck {
@@ -111,73 +194,28 @@
 .heading-stuck-content {
   display: flex;
   max-width: var(--app-header-content-max-width);
+  align-items: center;
   padding: var(--space-unit) var(--grid-margin);
   margin: 0 auto;
+  column-gap: calc(var(--space-unit) * 2);
 }
 
-.heading-stuck .heading-title,
 .heading-stuck .heading-title > *,
 .heading-stuck .heading-title ::slotted([slot="stucked-title"]) {
   display: block;
   overflow: hidden;
-  line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.heading-stuck .heading-title > *,
-::slotted([slot="title"]),
-::slotted([slot="stucked-title"]) {
-  margin: 0;
-  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"]) {
-  line-height: 1;
-}
-
-::slotted([slot="subtitle"]) {
-  margin: var(--space-unit) 0 0;
-  font-family: var(--font-family-sans);
-  font-size: 20px;
-  font-style: italic;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-.heading-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  max-width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  margin-right: auto;
-}
-
-.menu-container {
-  display: none;
-  flex-flow: row wrap;
-  align-items: baseline;
-}
-
-.menu-container ::slotted([open]) {
-  position: relative;
-  z-index: 3;
-}
-
-.menu-container ::slotted(*:not(:last-of-type)) {
-  margin-right: calc(var(--space-unit) * 4.5);
+.heading-stuck-content z-button {
+  margin-left: auto;
 }
 
 .drawer-trigger {
   padding: 0;
   border: 0;
-  margin: 0 calc(var(--space-unit) * 1.5) 0 0;
+  margin: 0;
   appearance: none;
   background: none;
   border-radius: 0;
@@ -192,93 +230,37 @@
   fill: currentcolor;
 }
 
-.drawer-container {
-  position: fixed;
-  z-index: 100;
-  top: var(--app-header-top-offset);
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.drawer-container .drawer-overlay {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--gray900);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 400ms ease-out;
+/* Simulate the height of the first line of text,
+to correctly align drawer icon and search page button with the title */
+.heading-container :is(.drawer-trigger, z-button.search-page-button) {
+  display: flex;
+  height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
+  align-items: center;
 }
 
-.drawer-panel {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  display: flex;
-  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;
+.heading-container z-button.search-page-button {
+  margin-left: auto;
 }
 
 .drawer-content {
   display: flex;
-  overflow: auto;
   width: 100%;
   flex: 1 auto;
   flex-direction: column;
-  padding: calc(var(--space-unit) * 0.5) var(--space-unit);
-}
-
-.drawer-content::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
-  border-radius: var(--border-radius);
-}
-
-.drawer-content::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.drawer-content::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
-}
-
-.drawer-content::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
+  row-gap: calc(var(--space-unit) * 2.5);
 }
 
 .drawer-content ::slotted(z-menu) {
   width: 100%;
 }
 
-.drawer-content ::slotted(z-menu:not(:last-of-type)) {
-  margin-bottom: calc(var(--space-unit) * 2.5);
-}
-
 .drawer-close {
   --z-icon-width: var(--app-header-drawer-trigger-size);
   --z-icon-height: var(--app-header-drawer-trigger-size);
 
   padding: 0;
   border: 0;
-  margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
+  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);
   appearance: none;
   background: transparent;
   border-radius: 0;
@@ -293,16 +275,6 @@
   box-shadow: var(--shadow-focus-primary);
 }
 
-:host([drawer-open]) .drawer-container .drawer-overlay {
-  opacity: 0.7;
-  pointer-events: all;
-}
-
-:host([drawer-open]) .drawer-container .drawer-panel {
-  pointer-events: all;
-  transform: none;
-}
-
 .hero-container {
   position: absolute;
   z-index: 0;
@@ -319,8 +291,8 @@
   fill: var(--color-white);
 }
 
-:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])) {
-  --color-surface05: var(--color-white);
+:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {
+  --z-menu-label-color: var(--color-white);
 }
 
 :host([overlay]) .hero-container::after {
@@ -349,62 +321,91 @@
 
 /* Tablet breakpoint */
 @media (min-width: 768px) {
+  :host {
+    --app-header-title-font-size: var(--app-header-typography-6-size);
+    --app-header-title-lineheight: var(--app-header-typography-6-lineheight);
+    --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);
+  }
+
+  .heading-panel {
+    flex-flow: row wrap;
+    align-items: center;
+    padding-bottom: calc(var(--space-unit) * 2);
+  }
+
+  .heading-container {
+    margin-right: auto;
+  }
+
+  :host(:is([flow="offcanvas"], [menu-length="0"])) :is(.heading-container, .menu-container) {
+    width: auto;
+  }
+
   :host(:not([flow="offcanvas"])) .heading-subtitle {
     padding-left: 0;
   }
 
+  .menu-container {
+    flex: initial;
+    align-items: center;
+  }
+
+  :host([menu-length="0"]) .menu-container:not(:empty) {
+    height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
+  }
+
   :host(:not([flow="offcanvas"])) .menu-container {
-    display: flex;
+    gap: var(--space-unit) calc(var(--space-unit) * 5);
   }
 
   :host(:not([flow="offcanvas"])) .heading-container .drawer-trigger {
     display: none;
   }
+}
 
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
-    margin-bottom: calc(var(--space-unit) * 3);
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  :host {
+    --app-header-title-font-size: var(--app-header-typography-7-size);
+    --app-header-title-lineheight: var(--app-header-typography-7-lineheight);
+    --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);
   }
 
-  ::slotted([slot="title"]) {
-    font-size: var(--app-header-typography-6-size);
-    letter-spacing: var(--app-header-typography-6-tracking);
+  .heading-panel {
+    justify-content: flex-start;
+    padding-bottom: calc(var(--space-unit) * 3);
   }
 
-  ::slotted([slot="subtitle"]) {
-    margin-top: calc(var(--space-unit) * 1.5);
+  .heading-container,
+  .menu-container {
+    width: auto;
   }
-}
 
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  :host(:not([flow="stack"])) .heading-panel {
-    flex-flow: row wrap;
+  :host([flow="stack"]) .heading-panel {
+    flex-flow: column;
+    align-items: flex-start;
   }
 
-  ::slotted([slot="title"]) {
-    margin-right: var(--grid-gutter);
-    font-size: var(--app-header-typography-7-size);
-    letter-spacing: var(--app-header-typography-7-tracking);
+  :host([flow="stack"]) .menu-container {
+    width: 100%;
   }
 
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
-    margin-bottom: calc(var(--space-unit) * 2);
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-panel {
+    row-gap: calc(var(--space-unit) * 3);
   }
 
-  .menu-container {
-    margin-top: var(--space-unit);
+  z-searchbar {
+    min-width: calc(var(--space-unit) * 45);
+    flex: initial;
   }
 }
 
 /* Wide breakpoint */
 @media (min-width: 1366px) {
-  ::slotted([slot="title"]) {
-    font-size: var(--app-header-typography-9-size);
-    letter-spacing: var(--app-header-typography-9-tracking);
-  }
-
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
-    margin-bottom: 0;
+  :host {
+    --app-header-title-font-size: var(--app-header-typography-9-size);
+    --app-header-title-lineheight: var(--app-header-typography-9-lineheight);
+    --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);
   }
 }
 

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

@@ -3,6 +3,7 @@ import { h, Host } from "@stencil/core";
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
+ * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export class ZMenu {
   constructor() {

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

@@ -8,6 +8,8 @@
   position: relative;
   display: inline-flex;
   flex-direction: column;
+
+  --z-menu-label-color: var(--color-text01);
 }
 
 ::slotted(a) {
@@ -18,10 +20,6 @@
   color: var(--color-text01);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-
-  /* increasing the letter spacing of the regular text helps reduce
-  the size difference between regular and bold text */
-  letter-spacing: 0.36px;
 }
 
 .menu-label {
@@ -55,13 +53,11 @@ button.menu-label {
 }
 
 :host(:is([active], [open])) .menu-label-content,
-.menu-label .menu-label-content:hover,
 .menu-label:focus-within .menu-label-content {
   font-weight: var(--font-bd);
 }
 
 :host(:is([active], [open])) .menu-label-content ::slotted(*),
-.menu-label .menu-label-content:hover ::slotted(*),
 .menu-label:focus-within .menu-label-content ::slotted(*) {
   letter-spacing: normal;
 }
@@ -123,8 +119,11 @@ when placed below the real text using `flex-direction: column`. */
   width: 100%;
   margin: 0;
   appearance: none;
+  color: var(--z-menu-label-color);
+  font-family: var(--font-family-sans);
   font-size: var(--font-size-5);
   font-weight: inherit;
+  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */
   line-height: 1.2;
   outline: none;
 }
@@ -136,7 +135,7 @@ when placed below the real text using `flex-direction: column`. */
 
 .menu-label .menu-label-content z-icon {
   margin-left: calc(var(--space-unit) * 1.5);
-  fill: var(--color-icon02);
+  fill: currentcolor;
 }
 
 .content {
@@ -207,6 +206,7 @@ when placed below the real text using `flex-direction: column`. */
 }
 
 .items > ::slotted([slot="item"]:hover),
+.items > ::slotted([slot="item"]:focus:focus-visible),
 .items > ::slotted([slot="item"]:active) {
   border-color: var(--color-secondary01);
   font-weight: var(--font-bd);

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

@@ -28,7 +28,9 @@
   border-color: var(--color-secondary01);
 }
 
-:is(:host(:is([active], [open])) .label, .label:hover) ::slotted(*) {
+:host(:is([active], [open])) .label ::slotted(*),
+.label:focus:focus-visible ::slotted(*),
+.label:hover ::slotted(*) {
   font-weight: var(--font-bd);
 }
 
@@ -36,7 +38,7 @@
   display: flex;
   width: 100%;
   align-items: center;
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);
   border: 0;
   border-bottom: var(--border-size-small) solid var(--color-surface05);
   margin: 0;
@@ -95,29 +97,26 @@ when placed below the real text using `flex-direction: column`. */
   display: flex;
   width: 100%;
   flex-direction: column;
-  padding: calc(var(--space-unit) * 0.5);
-  padding-bottom: calc(var(--space-unit) * 2);
+  padding: calc(var(--space-unit) / 2);
+  padding-bottom: calc(var(--space-unit) * 1.5);
 }
 
 .items > ::slotted([slot="item"]) {
   display: inline-flex;
-  padding: calc(var(--space-unit) * 0.5);
+  padding: calc(var(--space-unit) / 2);
   margin: 0;
   font-size: var(--font-size-2);
   line-height: 1.4;
   outline: none;
 }
 
-.items > ::slotted([slot="item"]:last-child) {
-  padding-bottom: 0;
-}
-
 .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"]:focus:focus-visible),
 .items > ::slotted([slot="item"][active]) {
   color: var(--color-secondary01);
   font-weight: var(--font-bd);