@zanichelli/albe-web-components 7.2.0 → 7.3.0

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

@@ -11,13 +11,17 @@
 }
 
 ::slotted(a) {
-  color: var(--color-text01);
   text-decoration: none;
 }
 
 ::slotted(*) {
+  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 {
@@ -45,38 +49,101 @@ button.menu-label {
 }
 
 .menu-label .menu-label-content {
+  position: relative;
   display: flex;
   align-items: center;
-  padding: var(--space-unit) 0;
-  border-bottom: var(--border-size-large) solid var(--color-surface05);
 }
 
-:host([active]) .menu-label-content,
-:host([open]) .menu-label-content,
-.menu-label:hover .menu-label-content,
+:host(:is([active], [open])) .menu-label-content,
+.menu-label .menu-label-content:hover,
 .menu-label:focus-within .menu-label-content {
-  border-color: var(--color-secondary01);
+  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;
+}
+
+/* border */
+:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,
+.menu-label .menu-label-content:hover::after,
+.menu-label:focus-within .menu-label-content::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  content: "";
+  pointer-events: none;
+}
+
+:host([vertical-context]) .menu-label-content::after {
+  height: var(--border-size-small);
+  background-color: var(--color-surface03);
 }
 
-.menu-label ::slotted(*) {
+:host(:is([active], [open])) .menu-label .menu-label-content::after,
+.menu-label .menu-label-content:hover::after,
+.menu-label:focus-within .menu-label-content::after {
+  height: var(--border-size-large);
+  background-color: var(--color-secondary01);
+}
+
+/* Prevents layout shifts on font-weight changes.
+The trick is to put an hidden copy of the text already set to bold,
+so the needed space is correctly calculated before any hover/active state changes the
+font-weight of the real text.
+The hidden text has an height of 0px so it can expand the width without changing the height
+when placed below the real text using `flex-direction: column`. */
+::slotted([data-text])::after {
+  height: 0;
+  content: attr(data-text);
+  content: attr(data-text) / "";
+  font-weight: var(--font-bd);
+  letter-spacing: normal;
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
+@media speech {
+  ::slotted([data-text])::after {
+    display: none;
+  }
+}
+
+::slotted([data-text]) {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.menu-label .menu-label-content ::slotted(*) {
+  display: inline-flex;
   width: 100%;
   margin: 0;
   appearance: none;
   font-size: var(--font-size-5);
+  font-weight: inherit;
   line-height: 1.2;
   outline: none;
 }
 
-.menu-label z-icon {
-  margin-left: calc(var(--space-unit) * 4);
-  fill: currentcolor;
+.menu-label .menu-label-content ::slotted(*),
+.menu-label .menu-label-content z-icon {
+  padding: var(--space-unit) 0;
+}
+
+.menu-label .menu-label-content z-icon {
+  margin-left: calc(var(--space-unit) * 1.5);
+  fill: var(--color-icon02);
 }
 
 .content {
   background: var(--color-surface01);
 }
 
-.content[hidden] {
+:host(:not([open])) .content {
   display: none;
 }
 
@@ -123,7 +190,6 @@ button.menu-label {
 }
 
 .items > ::slotted([slot="item"]) {
-  display: inline-flex;
   width: 100%;
   margin: 0;
   font-size: var(--font-size-3);
@@ -143,4 +209,5 @@ button.menu-label {
 .items > ::slotted([slot="item"]:hover),
 .items > ::slotted([slot="item"]:active) {
   border-color: var(--color-secondary01);
+  font-weight: var(--font-bd);
 }

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

@@ -1,7 +1,8 @@
 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.
+ * A component to create submenus inside the ZMenu.
+ * @slot - Label of the menu section.
+ * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.
  */
 export class ZMenuSection {
   toggle() {
@@ -23,13 +24,21 @@ export class ZMenuSection {
    * Check if some content slot is set.
    */
   checkContent() {
-    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length;
+    this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
+  }
+  /**
+   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+   * @param ev Slotchange event
+   */
+  onLabelSlotChange(ev) {
+    const labelElement = ev.target.assignedElements()[0];
+    labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
   }
   componentWillLoad() {
     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", { onSlotchange: this.onLabelSlotChange.bind(this) }), 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"; }

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

@@ -23,12 +23,15 @@
   font-weight: var(--font-rg);
 }
 
-:host([active]) .label,
-:host([open]) .label,
+:host(:is([active], [open])) .label,
 .label:hover {
   border-color: var(--color-secondary01);
 }
 
+:is(:host(:is([active], [open])) .label, .label:hover) ::slotted(*) {
+  font-weight: var(--font-bd);
+}
+
 .label {
   display: flex;
   width: 100%;
@@ -43,6 +46,34 @@
   text-align: left;
 }
 
+::slotted([data-text]) {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* Trick to prevent layout shifts on font-weight changes.
+The trick is to put an hidden copy of the text already set to bold,
+so the needed space is correctly calculated before any hover/active state changes the
+font-weight of the real text.
+The hidden text has an height of 0px so it can expand the width without changing the height
+when placed below the real text using `flex-direction: column`. */
+::slotted([data-text])::after {
+  overflow: hidden;
+  height: 0;
+  content: attr(data-text);
+  content: attr(data-text) / "";
+  font-weight: var(--font-bd);
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
+@media speech {
+  ::slotted([data-text])::after {
+    display: none;
+  }
+}
+
 .label ::slotted(*) {
   width: 100%;
   margin: 0;
@@ -57,7 +88,7 @@
 
 .label z-icon {
   margin-left: calc(var(--space-unit) * 4);
-  fill: currentcolor;
+  fill: var(--color-icon02);
 }
 
 .items {
@@ -86,6 +117,8 @@
   color: var(--color-secondary01);
 }
 
-.items > ::slotted([slot="item"]:hover) {
+.items > ::slotted([slot="item"]:hover),
+.items > ::slotted([slot="item"][active]) {
   color: var(--color-secondary01);
+  font-weight: var(--font-bd);
 }

package/dist/collection/components/notification/z-toast-notification/index.js

@@ -295,7 +295,7 @@ export class ZToastNotification {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "toast notification type:  dark, light, accent, error, success, warning"
+          "text": "toast notification type: dark, light, accent, error, success, warning"
         },
         "attribute": "type",
         "reflect": false

package/dist/collection/components/z-card/index.js

@@ -1,5 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { CardVariant } from "../../beans";
+/**
+ * ZCard component.
+ * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
+ * @cssprop --z-card--border-color - Default: `var(--gray200)`
+ * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
+ * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
+ * @cssprop --z-card--text-border-radius - Default: `none`
+ * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
+ */
 export class ZCard {
   constructor() {
     /** Enable click interactions on the card. Default: false */

package/dist/collection/components/z-card/styles.css

@@ -183,7 +183,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
 
 :host([variant="shadow"][clickable]:focus:focus-visible),
 :host([clickable][showshadow]:focus:focus-visible) {
-  box-shadow: var(--shadow-4);
+  box-shadow: var(--shadow-focus-primary);
 }
 
 :host([variant="shadow"][clickable]:active),

package/dist/collection/components/z-offcanvas/index.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - set the content of the canvas
+ * @method setSkipAanimationOnLoad - set skipAnimation
  */
 export class ZOffcanvas {
   constructor() {
@@ -15,15 +16,20 @@ export class ZOffcanvas {
     this.open = false;
     /** open content transitioning in a specified direction left | right. Default: left */
     this.transitiondirection = TransitionDirection.LEFT;
-    /** allows you to skip the entry animation on page load, to be used with the open prop at true */
+    /** manages the skip for the entry animation*/
     this.skipanimationonload = false;
   }
+  /** this method allows you to skip the page loading animation, to be used with the prop set to true */
+  async setSkipAanimationOnLoad(value) {
+    this.skipanimationonload = value;
+  }
   onOpenChanged() {
-    if (!this.open && this.hostElement.hasAttribute("skipanimationonload")) {
-      this.hostElement.removeAttribute("skipanimationonload");
+    if (!this.open && this.skipanimationonload) {
+      this.skipanimationonload = false;
     }
-    if (this.open)
+    if (this.open) {
       this.handleOverflowProperty();
+    }
     this.canvasOpenStatusChanged.emit(this.open);
   }
   handleOverflowProperty() {
@@ -34,7 +40,7 @@ export class ZOffcanvas {
     this.handleOverflowProperty();
   }
   render() {
-    return (h(Host, null, h("div", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handledTransitionEnd() }, h("div", { role: "presentation", class: "canvas-content" }, h("slot", { name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+    return (h(Host, { class: { "skip-animation": this.skipanimationonload } }, h("div", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handledTransitionEnd() }, h("div", { role: "presentation", class: "canvas-content" }, h("slot", { name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
   }
   static get is() { return "z-offcanvas"; }
   static get encapsulation() { return "scoped"; }
@@ -113,27 +119,14 @@ export class ZOffcanvas {
         "attribute": "transitiondirection",
         "reflect": true,
         "defaultValue": "TransitionDirection.LEFT"
-      },
-      "skipanimationonload": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "allows you to skip the entry animation on page load, to be used with the open prop at true"
-        },
-        "attribute": "skipanimationonload",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "skipanimationonload": {}
+    };
+  }
   static get events() {
     return [{
         "method": "canvasOpenStatusChanged",
@@ -152,6 +145,29 @@ export class ZOffcanvas {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setSkipAanimationOnLoad": {
+        "complexType": {
+          "signature": "(value: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "this method allows you to skip the page loading animation, to be used with the prop set to true",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{

package/dist/collection/components/z-offcanvas/styles.css

@@ -97,11 +97,11 @@
 
 /* Mobile */
 @media only screen and (max-width: 768px) {
-  :host([open][transitiondirection="left"]:not([skipAnimationOnLoad])) > .canvas-container {
+  :host([open][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
     animation: enter-right 0.4s ease-out;
   }
 
-  :host([open][transitiondirection="right"]:not([skipAnimationOnLoad])) > .canvas-container {
+  :host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
     animation: enter-left 0.4s ease-out;
   }
 }
@@ -120,7 +120,7 @@
     min-height: calc(var(--space-unit) * 40);
   }
 
-  :host(:not([variant="overlay"])[open]:not([skipAnimationOnLoad])) {
+  :host(:not([variant="overlay"])[open]:not(.skip-animation)) {
     width: auto;
     animation: grow 0.4s ease-out;
   }
@@ -158,11 +158,11 @@
   }
 }
 
-:host([open][variant="overlay"][transitiondirection="left"]:not([skipAnimationOnLoad])) > .canvas-container {
+:host([open][variant="overlay"][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
   animation: enter-right 0.4s ease-out;
 }
 
-:host([open][transitiondirection="right"]:not([skipAnimationOnLoad])) > .canvas-container {
+:host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
   animation: enter-left 0.4s ease-out;
 }
 

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js

@@ -15,6 +15,14 @@ export class ZMyzCardFooter {
   }
   handleToggle() {
     this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      const firstElem = this.getFirstListItem();
+      if (firstElem) {
+        requestAnimationFrame(() => {
+          firstElem.focus();
+        });
+      }
+    }
   }
   getTitleAuthors() {
     return this.allowTooltipAuthors ? this.autori : "";
@@ -44,8 +52,11 @@ export class ZMyzCardFooter {
       this.elementsEllipsis();
     }
   }
+  getFirstListItem() {
+    return this.host.querySelector("[slot=list] > li a");
+  }
   render() {
-    return (h("div", { class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { class: { "content": true, "custom-content": this.customContent } }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { class: "bold" }, this.autori))), h("p", { class: "year-isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { class: "bold" }, this.isbn), " (ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" })))), this.customContent && h("slot", { name: "content" })));
+    return (h("div", { class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { class: { "content": true, "custom-content": this.customContent } }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { class: "year-isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" })))), this.customContent && h("slot", { name: "content" })));
   }
   static get is() { return "z-myz-card-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -195,6 +206,7 @@ export class ZMyzCardFooter {
       "allowTooltipAuthors": {}
     };
   }
+  static get elementRef() { return "host"; }
   static get listeners() {
     return [{
         "name": "toggleClick",

package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js

@@ -27,7 +27,7 @@ export class ZMyzCardHeader {
     };
   }
   render() {
-    return (h("header", { class: this.retrieveClass() }, h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { name: "icon" })));
+    return (h("header", { class: this.retrieveClass() }, h("slot", { name: "aria-heading" }), h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { name: "icon" })));
   }
   static get is() { return "z-myz-card-header"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-header/styles.css

@@ -11,6 +11,18 @@ header {
   border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);
 }
 
+slot[name="aria-heading"]::slotted(*) {
+  position: absolute;
+  overflow: hidden !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 none !important;
+  margin: -1px !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+}
+
 header.real,
 header.trial,
 header.temp {

package/dist/collection/snowflakes/myz/card/z-myz-card-icon/styles.css

@@ -41,7 +41,7 @@ button:hover > span {
 button:focus > span {
   background: var(--color-surface01);
   border-radius: var(--border-radius);
-  box-shadow: 0 0 2px 2px var(--accent-dark);
+  box-shadow: var(--shadow-focus-primary);
 }
 
 button:active > span {

package/dist/collection/utils/storybook-utils.js

@@ -18,8 +18,8 @@ function getRootCssProperties() {
  * @example ```
  * argTypes={{
  *  "--z-component--background-color": {
+ *    control: { type: "select" },
  *    options: getColorTokens(),
- *    control: { type: "select" }
  *  }
  * }}```
  *

package/dist/esm/index-a2ca4b97.js

@@ -1892,18 +1892,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
       }
       switch(bundleId) {
         
-        case 'z-button_3':
+        case 'z-app-header_2':
           return import(
             /* webpackMode: "lazy" */
-            './z-button_3.entry.js').then(processMod, consoleError);
+            './z-app-header_2.entry.js').then(processMod, consoleError);
         case 'z-anchor-navigation':
           return import(
             /* webpackMode: "lazy" */
             './z-anchor-navigation.entry.js').then(processMod, consoleError);
-        case 'z-app-header':
-          return import(
-            /* webpackMode: "lazy" */
-            './z-app-header.entry.js').then(processMod, consoleError);
         case 'z-aria-alert':
           return import(
             /* webpackMode: "lazy" */
@@ -2028,6 +2024,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-notification.entry.js').then(processMod, consoleError);
+        case 'z-offcanvas':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-offcanvas.entry.js').then(processMod, consoleError);
         case 'z-otp':
           return import(
             /* webpackMode: "lazy" */
@@ -2200,6 +2200,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-divider.entry.js').then(processMod, consoleError);
+        case 'z-button':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-button.entry.js').then(processMod, consoleError);
       }
     }
     return import(