@zanichelli/albe-web-components 7.2.0-offcanvas-RC2 → 7.3.0

package/dist/cjs/z-myz-card-icon.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = "button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 2px 2px var(--accent-dark)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";
+const stylesCss = "button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";
 
 const ZMyzCardIcon = class {
   constructor(hostRef) {

package/dist/cjs/z-myz-card_4.cjs.entry.js

@@ -70,7 +70,7 @@ const ZMyzCardCover = class {
 };
 ZMyzCardCover.style = stylesCss$1;
 
-const stylesCss = "header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius)}header.real,header.trial,header.temp{border-bottom:var(--border-size-medium) solid var(--accent);background-color:var(--accent-lighter)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-surface02)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--accent);border-right:var(--border-size-medium) solid var(--accent);border-left:var(--border-size-medium) solid var(--accent)}";
+const stylesCss = "header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);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{border-bottom:var(--border-size-medium) solid var(--accent);background-color:var(--accent-lighter)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-surface02)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--accent);border-right:var(--border-size-medium) solid var(--accent);border-left:var(--border-size-medium) solid var(--accent)}";
 
 const ZMyzCardHeader = class {
   constructor(hostRef) {
@@ -97,7 +97,7 @@ const ZMyzCardHeader = class {
     };
   }
   render() {
-    return (index.h("header", { class: this.retrieveClass() }, index.h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { name: "icon" })));
+    return (index.h("header", { class: this.retrieveClass() }, index.h("slot", { name: "aria-heading" }), index.h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { name: "icon" })));
   }
 };
 ZMyzCardHeader.style = stylesCss;

package/dist/cjs/z-offcanvas.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-7a9a8430.js');
+
+const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg);visibility:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant=\"pushcontent\"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h{justify-content:end}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]:not(.skip-animation){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}";
+
+const ZOffcanvas = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.canvasOpenStatusChanged = index.createEvent(this, "canvasOpenStatusChanged", 7);
+    /**
+     * Offcanvas variant.
+     * Can be one of "overlay", "pushcontent"
+     * Default variant: pushcontent
+     */
+    this.variant = index$1.OffCanvasVariant.PUSHCONTENT;
+    /** open component. Default: false */
+    this.open = false;
+    /** open content transitioning in a specified direction left | right. Default: left */
+    this.transitiondirection = index$1.TransitionDirection.LEFT;
+    /** 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.skipanimationonload) {
+      this.skipanimationonload = false;
+    }
+    if (this.open) {
+      this.handleOverflowProperty();
+    }
+    this.canvasOpenStatusChanged.emit(this.open);
+  }
+  handleOverflowProperty() {
+    const overflow = this.variant === index$1.OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
+    document.body.style[overflow] = this.open ? "hidden" : "";
+  }
+  handledTransitionEnd() {
+    this.handleOverflowProperty();
+  }
+  render() {
+    return (index.h(index.Host, { class: { "skip-animation": this.skipanimationonload } }, index.h("div", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handledTransitionEnd() }, index.h("div", { role: "presentation", class: "canvas-content" }, index.h("slot", { name: "canvasContent" }))), this.variant == index$1.OffCanvasVariant.OVERLAY && (index.h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["onOpenChanged"]
+  }; }
+};
+ZOffcanvas.style = stylesCss;
+
+exports.z_offcanvas = ZOffcanvas;

package/dist/cjs/z-stepper-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:solid 2px var(--bg-grey-700);margin:0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:18px;line-height:28px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));text-align:center}:host(:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:2px solid var(--myz-blue);margin:calc(var(--space-unit) * 2);background:var(--bg-white);border-radius:50%;color:var(--myz-blue);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--myz-blue-dark);background:var(--myz-blue-dark);color:var(--text-white)}:host(:not([disabled]):focus-within) .indicator{box-shadow:0 0 2px 2px var(--accent-dark)}:host([disabled]) .indicator{border-color:currentcolor;background:var(--bg-grey-200);color:var(--text-grey-700)}@media only screen and (min-width: 768px){:host{width:calc(var(--space-unit) * 10)}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10)}.stepper-item span{display:block}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
+const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:solid 2px var(--bg-grey-700);margin:0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:18px;line-height:28px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));text-align:center}:host(:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:2px solid var(--myz-blue);margin:calc(var(--space-unit) * 2);background:var(--bg-white);border-radius:50%;color:var(--myz-blue);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--myz-blue-dark);background:var(--myz-blue-dark);color:var(--text-white)}:host(:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([disabled]) .indicator{border-color:currentcolor;background:var(--bg-grey-200);color:var(--text-grey-700)}@media only screen and (min-width: 768px){:host{width:calc(var(--space-unit) * 10)}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10)}.stepper-item span{display:block}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
 
 const ZStepperItem = class {
   constructor(hostRef) {

package/dist/cjs/z-toggle-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = "button{height:36px;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--bg-white);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--myz-blue);cursor:pointer;fill:var(--myz-blue);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase;transition:all 200ms linear}button::-moz-focus-inner{border:0}button:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);box-shadow:0 0 2px 2px var(--accent-dark);color:var(--myz-blue);fill:var(--myz-blue)}button:active{border-color:var(--myz-blue-light);box-shadow:0 2px 4px 0 rgb(0 0 0 / 40%);color:var(--myz-blue-light);fill:var(--myz-blue-light)}button:disabled{color:var(--text-grey-700);fill:var(--text-grey-700)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
+const stylesCss = "button{height:36px;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--bg-white);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--myz-blue);cursor:pointer;fill:var(--myz-blue);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{box-shadow:var(--shadow-focus-primary);color:var(--myz-blue);fill:var(--myz-blue)}button:active{border-color:var(--myz-blue-light);box-shadow:0 2px 4px 0 rgb(0 0 0 / 40%);color:var(--myz-blue-light);fill:var(--myz-blue-light)}button:disabled{color:var(--text-grey-700);fill:var(--text-grey-700)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
 
 const ZToggleButton = class {
   constructor(hostRef) {
@@ -14,6 +14,8 @@ const ZToggleButton = class {
     this.isdisabled = false;
     /** open by default (optional) */
     this.opened = false;
+    /**  aria-label for the button */
+    this.ariaLabel = "";
   }
   emitToggleClick() {
     if (this.isdisabled) {
@@ -26,7 +28,7 @@ const ZToggleButton = class {
     return (index.h("button", { tabindex: this.avoidclick ? "-1" : "0", class: {
         "isopen": this.opened,
         "avoid-clicks": this.avoidclick,
-      }, disabled: this.isdisabled, onClick: () => this.emitToggleClick() }, index.h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+      }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, index.h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
   }
 };
 ZToggleButton.style = stylesCss;

package/dist/collection/components/buttons/z-button-sort/index.js

@@ -115,7 +115,7 @@ export class ZButtonSort {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "occurrencies counter (optional)"
+          "text": "occurrences counter (optional)"
         },
         "attribute": "counter",
         "reflect": false
@@ -208,7 +208,7 @@ export class ZButtonSort {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "sorting direction click event, returns buttonid and sortAsc"
+          "text": "sorting direction click event, returns `buttonid` and `sortAsc`"
         },
         "complexType": {
           "original": "any",

package/dist/collection/components/buttons/z-button-sort/styles.css

@@ -27,7 +27,7 @@ button:hover {
 
 button:focus {
   border-color: var(--myz-blue);
-  box-shadow: 0 0 2px 2px var(--accent-dark);
+  box-shadow: var(--shadow-focus-primary);
   color: var(--myz-blue);
   fill: var(--myz-blue);
 }

package/dist/collection/components/buttons/z-chip/index.js

@@ -1,12 +1,14 @@
 import { h } from "@stencil/core";
 import { Device, ZChipType } from "../../../beans";
-import { getDevice, handleKeyboardSubmit } from "../../../utils/utils";
+import { getDevice } from "../../../utils/utils";
 export class ZChip {
   constructor() {
     /** z-chip size type, can be default, medium or small */
     this.type = ZChipType.DEFAULT;
     /** set z-chip as disabled  */
     this.disabled = false;
+    /** z-chip aria-label string */
+    this.ariaLabel = "";
   }
   emitinteractiveIconClick() {
     this.interactiveIconClick.emit();
@@ -16,9 +18,11 @@ export class ZChip {
   }
   render() {
     if (this.interactiveIcon) {
-      return (h("button", { class: this.type, disabled: this.disabled, tabindex: "0", type: "button" }, this.icon && (h("z-icon", { class: "icon-sx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null), h("z-icon", { tabIndex: this.disabled ? -1 : 0, onClick: () => this.emitinteractiveIconClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.emitinteractiveIconClick.bind(this)), name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() })));
+      return (h("div", { class: `z-chip-container ${this.type}`, "aria-disabled": this.disabled }, this.icon && (h("z-icon", { class: "icon-sx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null), h("button", { type: "button", onClick: () => this.emitinteractiveIconClick(), onKeyUp: () => {
+          () => this.emitinteractiveIconClick();
+        }, "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() }))));
     }
-    return (h("div", { class: `${this.type}`, tabindex: "0" }, this.icon && (h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null)));
+    return (h("div", { class: `${this.type}` }, this.icon && (h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null)));
   }
   static get is() { return "z-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -108,6 +112,24 @@ export class ZChip {
         "attribute": "disabled",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "z-chip aria-label string"
+        },
+        "attribute": "aria-label",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/components/buttons/z-chip/styles.css

@@ -1,4 +1,4 @@
-:host > button {
+:host > .z-chip-container {
   display: inline-flex;
   align-items: center;
   padding: 0 calc(var(--space-unit) * 1.5);
@@ -12,46 +12,53 @@
   font-weight: var(--font-sb);
 }
 
-:host > button:not(:disabled) > z-icon:last-child:hover {
+:host > .z-chip-container:not([aria-disabled]) button > z-icon:last-child:hover {
   color: var(--color-hover-primary);
   fill: var(--color-hover-primary);
 }
 
-:host > button:hover:not(:disabled) > z-icon:first-child {
+:host > .z-chip-container:hover:not([aria-disabled]) > z-icon:first-child {
   fill: var(--color-icon02);
 }
 
-:host > button > z-icon.icon-sx {
+:host > .z-chip-container > button {
+  padding: 0;
+  border: none;
+  margin-left: var(--space-unit);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+:host > .z-chip-container > z-icon.icon-sx {
   margin-right: calc(var(--space-unit) / 2);
 }
 
-:host > button > z-icon:last-child {
-  margin-left: var(--space-unit);
-  cursor: pointer;
+:host > .z-chip-container > button > z-icon:last-child {
   fill: var(--color-primary01);
 }
 
-:host > button:disabled,
-:host > button:disabled > z-icon {
+:host > .z-chip-container[aria-disabled],
+:host > .z-chip-container[aria-disabled] > z-icon,
+:host > .z-chip-container[aria-disabled] > button > z-icon {
   color: var(--color-disabled03);
   fill: var(--color-disabled03);
 }
 
-:host > button:disabled > z-icon {
+:host > .z-chip-container[aria-disabled] > button > z-icon {
   cursor: auto;
 }
 
-:host > button:disabled {
+:host > .z-chip-container[aria-disabled] {
   border: var(--border-size-small) solid var(--color-disabled01);
 }
 
-:host > button:focus:focus-visible,
-:host > div:focus:focus-visible {
+:host > .z-chip-container > button:focus:focus-visible {
+  border-radius: 100%;
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
 
-:host > button:hover:not(:disabled):active:hover > z-icon:last-child {
+:host > button:hover:not(:disabled):active:hover > button > z-icon:last-child {
   color: var(--color-primary01);
   fill: var(--color-primary01);
 }
@@ -76,21 +83,21 @@
 }
 
 /* :host type */
-:host > button.default,
+:host > .z-chip-container.default,
 :host > div.default {
   min-height: 44px;
   border-radius: 22px;
   line-height: 44px;
 }
 
-:host > button.medium,
+:host > .z-chip-container.medium,
 :host > div.medium {
   min-height: 40px;
   border-radius: 22px;
   line-height: 40px;
 }
 
-:host > button.small,
+:host > .z-chip-container.small,
 :host > div.small {
   min-height: 36px;
   border-radius: 22px;
@@ -99,7 +106,7 @@
 
 /* Desktop breakpoint */
 @media only screen and (min-width: 1152px) {
-  :host > button {
+  :host > .z-chip-container {
     font-size: 12px;
   }
 
@@ -108,21 +115,21 @@
   }
 
   /* :host type */
-  :host > button.default,
+  :host > .z-chip-container.default,
   :host > div.default {
     min-height: 32px;
     border-radius: 16px;
     line-height: 32px;
   }
 
-  :host > button.medium,
+  :host > .z-chip-container.medium,
   :host > div.medium {
     min-height: 28px;
     border-radius: 16px;
     line-height: 28px;
   }
 
-  :host > button.small,
+  :host > .z-chip-container.small,
   :host > div.small {
     min-height: 24px;
     border-radius: 16px;

package/dist/collection/components/buttons/z-toggle-button/index.js

@@ -5,6 +5,8 @@ export class ZToggleButton {
     this.isdisabled = false;
     /** open by default (optional) */
     this.opened = false;
+    /**  aria-label for the button */
+    this.ariaLabel = "";
   }
   emitToggleClick() {
     if (this.isdisabled) {
@@ -17,7 +19,7 @@ export class ZToggleButton {
     return (h("button", { tabindex: this.avoidclick ? "-1" : "0", class: {
         "isopen": this.opened,
         "avoid-clicks": this.avoidclick,
-      }, disabled: this.isdisabled, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+      }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
   }
   static get is() { return "z-toggle-button"; }
   static get encapsulation() { return "shadow"; }
@@ -102,6 +104,24 @@ export class ZToggleButton {
         "attribute": "opened",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "aria-label for the button"
+        },
+        "attribute": "aria-label",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/components/buttons/z-toggle-button/styles.css

@@ -15,7 +15,6 @@ button {
   font-weight: var(--font-sb);
   outline: none;
   text-transform: uppercase;
-  transition: all 200ms linear;
 }
 
 button::-moz-focus-inner {
@@ -28,8 +27,7 @@ button:hover {
 }
 
 button:focus {
-  border-color: var(--myz-blue);
-  box-shadow: 0 0 2px 2px var(--accent-dark);
+  box-shadow: var(--shadow-focus-primary);
   color: var(--myz-blue);
   fill: var(--myz-blue);
 }

package/dist/collection/components/indicators/z-stepper-item/styles.css

@@ -78,7 +78,7 @@
 }
 
 :host(:not([disabled]):focus-within) .indicator {
-  box-shadow: 0 0 2px 2px var(--accent-dark);
+  box-shadow: var(--shadow-focus-primary);
 }
 
 :host([disabled]) .indicator {

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() {
@@ -13,12 +14,12 @@ export class ZOffcanvas {
     this.variant = OffCanvasVariant.PUSHCONTENT;
     /** open component. Default: false */
     this.open = false;
-    /** allows you to skip the entry animation on page load, to be used with the open prop at true */
-    this.skipanimationonload = false;
     /** open content transitioning in a specified direction left | right. Default: left */
     this.transitiondirection = TransitionDirection.LEFT;
+    /** manages the skip for the entry animation*/
+    this.skipanimationonload = false;
   }
-  /** set skipAnimation */
+  /** 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;
   }
@@ -161,7 +162,7 @@ export class ZOffcanvas {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "set skipAnimation",
+          "text": "this method allows you to skip the page loading animation, to be used with the prop set to true",
           "tags": []
         }
       }

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(